npm - @bikdotai/bik-component-library - Versions diffs - 0.0.840-tools-beta.5 → 0.0.841-beta.0 - Mend

@bikdotai/bik-component-library 0.0.840-tools-beta.5 → 0.0.841-beta.0

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

Files changed (185) hide show

package/dist/esm/components/multi-level-dropdown/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sources":["../../../../src/components/multi-level-dropdown/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight2.svg';\nimport React, { useRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodyTiny } from '../TypographyStyle';\nimport {\n\tContentContainer,\n\tLeadingIconContainer,\n\tMenuItemContainer,\n\tMenuItemWrapper,\n\tStyledSubMenuWrapper,\n\tSubMenuContainer,\n\tSubMenuListContainer,\n\tTrailingIconContainer,\n} from './MultiLevelDropdown.styled';\nimport {\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n\tSingleOption,\n} from './type';\n\nexport const MenuItem: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: SingleOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\tcurrentLevel,\n\trenderNestedMenu,\n\tversion,\n}) => {\n\tconst [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);\n\tconst [isSubMenuHovered, setIsSubMenuHovered] = React.useState(false);\n\tconst [subMenuPosition, setSubMenuPosition] = React.useState({\n\t\ttop: 0,\n\t\tleft: 0,\n\t});\n\tconst positionRef = useRef<any>({ top: 0, left: 0 });\n\tconst hasChildren = !!option.children && option.children.length > 0;\n\tconst canOpenSubMenu =\n\t\thasChildren && (maxLevels === undefined \|\| currentLevel < maxLevels);\n\n\tconst handleDropdownOptionClick = () => {\n\t\tif (!onDropdownItemClick \|\| (option.disabled ?? false)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!hasChildren \|\| allowParentSelection) {\n\t\t\tonDropdownItemClick(option, parents);\n\t\t}\n\t};\n\n\tconst calculateSubMenuPosition = (event: React.MouseEvent) => {\n\t\tconst rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n\t\tsetSubMenuPosition({\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t});\n\t\tpositionRef.current = {\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t};\n\t};\n\n\treturn (\n\t\t<MenuItemWrapper\n\t\t\tversion={version}\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (canOpenSubMenu) {\n\t\t\t\t\tsetIsSubMenuOpen(true);\n\t\t\t\t\tcalculateSubMenuPosition(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsSubMenuOpen(false);\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleDropdownOptionClick();\n\t\t\t}}\n\t\t\tid=\"menuItemWrapper\"\n\t\t\tstyle={{\n\t\t\t\tcursor: option.disabled ?? false ? 'not-allowed' : 'pointer',\n\t\t\t\tbackgroundColor:\n\t\t\t\t\toption.disabled ?? false ? COLORS.surface.standard : 'transparent',\n\t\t\t}}\n\t\t>\n\t\t\t{option.customComponent ? (\n\t\t\t\toption.customComponent\n\t\t\t) : (\n\t\t\t\t<MenuItemContainer\n\t\t\t\t\tisSelected={option.selected}\n\t\t\t\t\tisSubMenuOpen={isSubMenuOpen}\n\t\t\t\t\tisHovered={isSubMenuHovered}\n\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\tversion={version}\n\t\t\t\t>\n\t\t\t\t\t<ContentContainer>\n\t\t\t\t\t\t{option.leadingIcon && (\n\t\t\t\t\t\t\t<LeadingIconContainer>{option.leadingIcon}</LeadingIconContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{option.subText && (\n\t\t\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t\t\tmarginTop: '2px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.subText}\n\t\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ContentContainer>\n\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t<TrailingIconContainer>\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t!canOpenSubMenu \|\| (option.disabled ?? false)\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TrailingIconContainer>\n\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t<TrailingIconContainer>{option.trailingIcon}</TrailingIconContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</MenuItemContainer>\n\t\t\t)}\n\n\t\t\t{!(option.disabled ?? false) &&\n\t\t\t\toption.children &&\n\t\t\t\toption.children.length > 0 &&\n\t\t\t\tcanOpenSubMenu &&\n\t\t\t\tisSubMenuOpen && (\n\t\t\t\t\t<SubMenuContainer\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\tclassName=\"submenu\"\n\t\t\t\t\t\tonMouseEnter={() => setIsSubMenuHovered(true)}\n\t\t\t\t\t\tonMouseLeave={() => setIsSubMenuHovered(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StyledSubMenuWrapper\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\ttop={subMenuPosition.top}\n\t\t\t\t\t\t\tleft={subMenuPosition.left}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SubMenuListContainer version={version}>\n\t\t\t\t\t\t\t\t{renderNestedMenu(\n\t\t\t\t\t\t\t\t\toption.children,\n\t\t\t\t\t\t\t\t\t[...parents, option],\n\t\t\t\t\t\t\t\t\tcurrentLevel + 1,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SubMenuListContainer>\n\t\t\t\t\t\t</StyledSubMenuWrapper>\n\t\t\t\t\t</SubMenuContainer>\n\t\t\t\t)}\n\t\t</MenuItemWrapper>\n\t);\n};\n"],"names":["MenuItem","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","currentLevel","renderNestedMenu","version","isSubMenuOpen","setIsSubMenuOpen","React","isSubMenuHovered","setIsSubMenuHovered","subMenuPosition","setSubMenuPosition","positionRef","useRef","hasChildren","canOpenSubMenu","handleDropdownOptionClick","calculateSubMenuPosition","event","rect","jsxs","MenuItemWrapper","e","COLORS","MenuItemContainer","ContentContainer","jsx","LeadingIconContainer","BodyCaption","BodyTiny","TrailingIconContainer","ChevronRightIcon","Fragment","SubMenuContainer","StyledSubMenuWrapper","SubMenuListContainer"],"mappings":"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"}
1	+ {"version":3,"file":"MenuItem.js","sources":["../../../../src/components/multi-level-dropdown/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight2.svg';\nimport React, { useRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodyTiny } from '../TypographyStyle';\nimport {\n\tContentContainer,\n\tLeadingIconContainer,\n\tMenuItemContainer,\n\tMenuItemWrapper,\n\tStyledSubMenuWrapper,\n\tSubMenuContainer,\n\tSubMenuListContainer,\n\tTrailingIconContainer,\n} from './MultiLevelDropdown.styled';\nimport {\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n\tSingleOption,\n} from './type';\n\nexport const MenuItem: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: SingleOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\tcurrentLevel,\n\trenderNestedMenu,\n\tversion,\n}) => {\n\tconst [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);\n\tconst [isSubMenuHovered, setIsSubMenuHovered] = React.useState(false);\n\tconst [subMenuPosition, setSubMenuPosition] = React.useState({\n\t\ttop: 0,\n\t\tleft: 0,\n\t});\n\tconst positionRef = useRef<any>({ top: 0, left: 0 });\n\tconst hasChildren = !!option.children && option.children.length > 0;\n\tconst canOpenSubMenu =\n\t\thasChildren && (maxLevels === undefined \|\| currentLevel < maxLevels);\n\n\tconst handleDropdownOptionClick = () => {\n\t\tif (!onDropdownItemClick \|\| (option.disabled ?? false)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!hasChildren \|\| allowParentSelection) {\n\t\t\tonDropdownItemClick(option, parents);\n\t\t}\n\t};\n\n\tconst calculateSubMenuPosition = (event: React.MouseEvent) => {\n\t\tconst rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n\t\tsetSubMenuPosition({\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t});\n\t\tpositionRef.current = {\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t};\n\t};\n\n\treturn (\n\t\t<MenuItemWrapper\n\t\t\tversion={version}\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (canOpenSubMenu) {\n\t\t\t\t\tsetIsSubMenuOpen(true);\n\t\t\t\t\tcalculateSubMenuPosition(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsSubMenuOpen(false);\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleDropdownOptionClick();\n\t\t\t}}\n\t\t\tid=\"menuItemWrapper\"\n\t\t\tdata-testid=\"menuItemWrapper\"\n\t\t\tstyle={{\n\t\t\t\tcursor: option.disabled ?? false ? 'not-allowed' : 'pointer',\n\t\t\t\tbackgroundColor:\n\t\t\t\t\toption.disabled ?? false ? COLORS.surface.standard : 'transparent',\n\t\t\t}}\n\t\t>\n\t\t\t{option.customComponent ? (\n\t\t\t\toption.customComponent\n\t\t\t) : (\n\t\t\t\t<MenuItemContainer\n\t\t\t\t\tisSelected={option.selected}\n\t\t\t\t\tisSubMenuOpen={isSubMenuOpen}\n\t\t\t\t\tisHovered={isSubMenuHovered}\n\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\tversion={version}\n\t\t\t\t>\n\t\t\t\t\t<ContentContainer>\n\t\t\t\t\t\t{option.leadingIcon && (\n\t\t\t\t\t\t\t<LeadingIconContainer>{option.leadingIcon}</LeadingIconContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{option.subText && (\n\t\t\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t\t\tmarginTop: '2px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.subText}\n\t\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ContentContainer>\n\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t<TrailingIconContainer>\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t!canOpenSubMenu \|\| (option.disabled ?? false)\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TrailingIconContainer>\n\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t<TrailingIconContainer>{option.trailingIcon}</TrailingIconContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</MenuItemContainer>\n\t\t\t)}\n\n\t\t\t{!(option.disabled ?? false) &&\n\t\t\t\toption.children &&\n\t\t\t\toption.children.length > 0 &&\n\t\t\t\tcanOpenSubMenu &&\n\t\t\t\tisSubMenuOpen && (\n\t\t\t\t\t<SubMenuContainer\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\tclassName=\"submenu\"\n\t\t\t\t\t\tonMouseEnter={() => setIsSubMenuHovered(true)}\n\t\t\t\t\t\tonMouseLeave={() => setIsSubMenuHovered(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StyledSubMenuWrapper\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\ttop={subMenuPosition.top}\n\t\t\t\t\t\t\tleft={subMenuPosition.left}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SubMenuListContainer version={version}>\n\t\t\t\t\t\t\t\t{renderNestedMenu(\n\t\t\t\t\t\t\t\t\toption.children,\n\t\t\t\t\t\t\t\t\t[...parents, option],\n\t\t\t\t\t\t\t\t\tcurrentLevel + 1,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SubMenuListContainer>\n\t\t\t\t\t\t</StyledSubMenuWrapper>\n\t\t\t\t\t</SubMenuContainer>\n\t\t\t\t)}\n\t\t</MenuItemWrapper>\n\t);\n};\n"],"names":["MenuItem","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","currentLevel","renderNestedMenu","version","isSubMenuOpen","setIsSubMenuOpen","React","isSubMenuHovered","setIsSubMenuHovered","subMenuPosition","setSubMenuPosition","positionRef","useRef","hasChildren","canOpenSubMenu","handleDropdownOptionClick","calculateSubMenuPosition","event","rect","jsxs","MenuItemWrapper","e","COLORS","MenuItemContainer","ContentContainer","jsx","LeadingIconContainer","BodyCaption","BodyTiny","TrailingIconContainer","ChevronRightIcon","Fragment","SubMenuContainer","StyledSubMenuWrapper","SubMenuListContainer"],"mappings":"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"}

package/dist/esm/components/pagination/Pagination.js CHANGED Viewed

@@ -1,21 +1,21 @@
 import { jsx as o, Fragment as h, jsxs as n } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
-import { BodySecondary as e, ButtonRegular as p } from "../TypographyStyle.js";
+import { BodySecondary as a, ButtonRegular as p } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
 import { Pagination as t } from "./Pagination.styled.js";
 const y = g(
   ({
-    id: a,
-    onShowMore: c,
+    id: c,
+    onShowMore: e,
     isLoading: d,
     numberOfItemsLoaded: l,
     totalNumberOfItems: r,
     ...s
-  }) => /* @__PURE__ */ o(t, { id: a, ...s, children: d ? (
+  }) => /* @__PURE__ */ o(t, { id: c, "data-testid": c, ...s, children: d ? (
     //TODO: @chinmayee replace with Spinner once done
     /* @__PURE__ */ o(h, { children: "loading..." })
   ) : /* @__PURE__ */ o("div", { children: l < r ? /* @__PURE__ */ n(t, { children: [
-    /* @__PURE__ */ n(e, { style: { color: i.content.secondary }, children: [
+    /* @__PURE__ */ n(a, { style: { color: i.content.secondary }, children: [
       "Showing ",
       l,
       " out of ",
@@ -27,11 +27,11 @@ const y = g(
       p,
       {
         style: { color: i.content.brand, cursor: "pointer" },
-        onClick: () => c && c(),
+        onClick: () => e && e(),
         children: "Show more"
       }
     )
-  ] }) : /* @__PURE__ */ o(t, { children: /* @__PURE__ */ n(e, { style: { color: i.content.secondary }, children: [
+  ] }) : /* @__PURE__ */ o(t, { children: /* @__PURE__ */ n(a, { style: { color: i.content.secondary }, children: [
     "Showing all ",
     r,
     " results"

package/dist/esm/components/pagination/Pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { BodySecondary, ButtonRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport * as Sc from './Pagination.styled';\n\nexport interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {\n\tnumberOfItemsLoaded: number;\n\ttotalNumberOfItems: number;\n\tisLoading?: boolean;\n\tonShowMore?: () => void;\n\twidth?: string;\n}\n\nexport const Pagination = forwardRef<HTMLButtonElement, PaginationProps>(\n\t({\n\t\tid,\n\t\tonShowMore,\n\t\tisLoading,\n\t\tnumberOfItemsLoaded,\n\t\ttotalNumberOfItems,\n\t\t...rest\n\t}) => {\n\t\treturn (\n\t\t\t<Sc.Pagination id={id} {...rest}>\n\t\t\t\t{isLoading ? (\n\t\t\t\t\t//TODO: @chinmayee replace with Spinner once done\n\t\t\t\t\t<>loading...</>\n\t\t\t\t) : (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{numberOfItemsLoaded < totalNumberOfItems ? (\n\t\t\t\t\t\t\t<Sc.Pagination>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\tShowing {numberOfItemsLoaded} out of {totalNumberOfItems}{' '}\n\t\t\t\t\t\t\t\t\tresults\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<ButtonRegular\n\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.brand, cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\tonClick={() => onShowMore && onShowMore()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tShow more\n\t\t\t\t\t\t\t\t</ButtonRegular>\n\t\t\t\t\t\t\t</Sc.Pagination>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Sc.Pagination>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\tShowing all {totalNumberOfItems} results\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t</Sc.Pagination>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.Pagination>\n\t\t);\n\t},\n);\n\nPagination.displayName = 'Pagination';\n"],"names":["Pagination","forwardRef","id","onShowMore","isLoading","numberOfItemsLoaded","totalNumberOfItems","rest","Sc.Pagination","jsxs","BodySecondary","COLORS","~~jsx","~~ButtonRegular"],"mappings":";;;;;AAaO,MAAMA,IAAaC;AAAA,EACzB,CAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,~~wBAGDC~~,GAAA,EAAc,~~IAAAN~~,~~GAAS~~,GAAGK,~~GACzB~~,UAAAH;AAAA;AAAA,2BAEE,UAAA,aAAA,CAAU;AAAA,wBAEX,OAAA,EACC,UAAAC,IAAsBC,IACtB,~~gBAAAG~~,EAACD,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAc,OAAO,EAAE,OAAOC,EAAO,QAAQ,aAAa,UAAA;AAAA,MAAA;AAAA,~~MACjDN~~;AAAA,MAAoB;AAAA,MAASC;AAAA,MAAoB;AAAA,MAAI;AAAA,IAAA,GAE/D;AAAA,IACA,~~gBAAAM~~;AAAA,~~MAACC~~;AAAA,MAAA;AAAA,QACA,OAAO,EAAE,~~OAAOF~~,EAAO,QAAQ,OAAO,QAAQ,UAAA;AAAA,QAC9C,SAAS,~~MAAMR~~,KAAcA,EAAA;AAAA,QAC7B,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,EAAA,CACD,IAEA,~~gBAAAS~~,~~EAACJ~~,GAAA,EACA,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAO,EAAE,OAAOC,EAAO,QAAQ,aAAa,UAAA;AAAA,IAAA;AAAA,~~IAC7CL~~;AAAA,IAAmB;AAAA,EAAA,GACjC,EAAA,CACD,GAEF,GAEF;AAGH;AAEAN,EAAW,cAAc;"}
1	+ {"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { BodySecondary, ButtonRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport * as Sc from './Pagination.styled';\n\nexport interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {\n\tnumberOfItemsLoaded: number;\n\ttotalNumberOfItems: number;\n\tisLoading?: boolean;\n\tonShowMore?: () => void;\n\twidth?: string;\n}\n\nexport const Pagination = forwardRef<HTMLButtonElement, PaginationProps>(\n\t({\n\t\tid,\n\t\tonShowMore,\n\t\tisLoading,\n\t\tnumberOfItemsLoaded,\n\t\ttotalNumberOfItems,\n\t\t...rest\n\t}) => {\n\t\treturn (\n\t\t\t<Sc.Pagination id={id} data-testid={id} {...rest}>\n\t\t\t\t{isLoading ? (\n\t\t\t\t\t//TODO: @chinmayee replace with Spinner once done\n\t\t\t\t\t<>loading...</>\n\t\t\t\t) : (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{numberOfItemsLoaded < totalNumberOfItems ? (\n\t\t\t\t\t\t\t<Sc.Pagination>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\tShowing {numberOfItemsLoaded} out of {totalNumberOfItems}{' '}\n\t\t\t\t\t\t\t\t\tresults\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<ButtonRegular\n\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.brand, cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\tonClick={() => onShowMore && onShowMore()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tShow more\n\t\t\t\t\t\t\t\t</ButtonRegular>\n\t\t\t\t\t\t\t</Sc.Pagination>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Sc.Pagination>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\tShowing all {totalNumberOfItems} results\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t</Sc.Pagination>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.Pagination>\n\t\t);\n\t},\n);\n\nPagination.displayName = 'Pagination';\n"],"names":["Pagination","forwardRef","id","onShowMore","isLoading","numberOfItemsLoaded","totalNumberOfItems","rest","jsx","Sc.Pagination","jsxs","BodySecondary","COLORS","ButtonRegular"],"mappings":";;;;;AAaO,MAAMA,IAAaC;AAAA,EACzB,CAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,MAGF,gBAAAC,EAACC,GAAA,EAAc,IAAAP,GAAQ,eAAaA,GAAK,GAAGK,GAC1C,UAAAH;AAAA;AAAA,2BAEE,UAAA,aAAA,CAAU;AAAA,wBAEX,OAAA,EACC,UAAAC,IAAsBC,IACtB,gBAAAI,EAACD,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAc,OAAO,EAAE,OAAOC,EAAO,QAAQ,aAAa,UAAA;AAAA,MAAA;AAAA,MACjDP;AAAA,MAAoB;AAAA,MAASC;AAAA,MAAoB;AAAA,MAAI;AAAA,IAAA,GAE/D;AAAA,IACA,gBAAAE;AAAA,MAACK;AAAA,MAAA;AAAA,QACA,OAAO,EAAE,OAAOD,EAAO,QAAQ,OAAO,QAAQ,UAAA;AAAA,QAC9C,SAAS,MAAMT,KAAcA,EAAA;AAAA,QAC7B,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,EAAA,CACD,IAEA,gBAAAK,EAACC,GAAA,EACA,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAO,EAAE,OAAOC,EAAO,QAAQ,aAAa,UAAA;AAAA,IAAA;AAAA,IAC7CN;AAAA,IAAmB;AAAA,EAAA,GACjC,EAAA,CACD,GAEF,GAEF;AAGH;AAEAN,EAAW,cAAc;"}

package/dist/esm/components/progress-bar/CircularProgressBar.js CHANGED Viewed

@@ -1,54 +1,65 @@
-import { jsx as o, jsxs as a } from "react/jsx-runtime";
-import k from "../../assets/icons/checklistIcon.svg.js";
-const p = ({ percentage: s, width: r = 200, containerStyle: f }) => {
-  const l = s < 0 ? 0 : s > 100 ? 100 : s, e = r / 2 - r / 10, t = e * Math.PI * 2, i = t - t * l / 100, n = r / 10, c = r / 3;
-  return /* @__PURE__ */ o("div", { style: f, children: /* @__PURE__ */ a("svg", { width: r, height: r, viewBox: `0 0 ${r} ${r}`, children: [
-    /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ a("linearGradient", { id: "gradientStroke", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-      /* @__PURE__ */ o("stop", { offset: "0%", stopColor: "#7000FF" }),
-      /* @__PURE__ */ o("stop", { offset: "100%", stopColor: "#AD00FF" })
-    ] }) }),
-    /* @__PURE__ */ o(
-      "circle",
-      {
-        cx: r / 2,
-        cy: r / 2,
-        strokeWidth: n,
-        r: e,
-        strokeOpacity: 0.8,
-        fill: "none",
-        style: {
-          stroke: "#ffffff"
-        }
-      }
-    ),
-    /* @__PURE__ */ o(
-      "circle",
-      {
-        cx: r / 2,
-        cy: r / 2,
-        strokeWidth: n,
-        r: e,
-        style: {
-          stroke: "url(#gradientStroke)",
-          strokeDasharray: t,
-          strokeDashoffset: i
-        },
-        transform: `rotate(-90 ${r / 2} ${r / 2})`,
-        fill: "none",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ o(
-      k,
-      {
-        x: r / 2 - c / 2,
-        width: c
-      }
-    )
-  ] }) });
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
+import d from "../../assets/icons/checklistIcon.svg.js";
+const u = ({ percentage: e, width: r = 200, containerStyle: l }) => {
+  const i = e < 0 ? 0 : e > 100 ? 100 : e, o = r / 2 - r / 10, t = o * Math.PI * 2, f = t - t * i / 100, a = r / 10, c = r / 3;
+  return /* @__PURE__ */ s("div", { style: l, "data-testid": "circular-progress-container", children: /* @__PURE__ */ n(
+    "svg",
+    {
+      width: r,
+      height: r,
+      viewBox: `0 0 ${r} ${r}`,
+      "data-testid": "circular-progress-svg",
+      children: [
+        /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ n("linearGradient", { id: "gradientStroke", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+          /* @__PURE__ */ s("stop", { offset: "0%", stopColor: "#7000FF" }),
+          /* @__PURE__ */ s("stop", { offset: "100%", stopColor: "#AD00FF" })
+        ] }) }),
+        /* @__PURE__ */ s(
+          "circle",
+          {
+            cx: r / 2,
+            cy: r / 2,
+            strokeWidth: a,
+            r: o,
+            strokeOpacity: 0.8,
+            fill: "none",
+            style: {
+              stroke: "#ffffff"
+            },
+            "data-testid": "circular-progress-track"
+          }
+        ),
+        /* @__PURE__ */ s(
+          "circle",
+          {
+            cx: r / 2,
+            cy: r / 2,
+            strokeWidth: a,
+            r: o,
+            style: {
+              stroke: "url(#gradientStroke)",
+              strokeDasharray: t,
+              strokeDashoffset: f
+            },
+            transform: `rotate(-90 ${r / 2} ${r / 2})`,
+            fill: "none",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "data-testid": "circular-progress-fill"
+          }
+        ),
+        /* @__PURE__ */ s(
+          d,
+          {
+            x: r / 2 - c / 2,
+            width: c
+          }
+        )
+      ]
+    }
+  ) });
 };
 export {
-  p as default
+  u as default
 };
 //# sourceMappingURL=CircularProgressBar.js.map

package/dist/esm/components/progress-bar/CircularProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CircularProgressBar.js","sources":["../../../../src/components/progress-bar/CircularProgressBar.tsx"],"sourcesContent":["import CheckListIcon from '@src/assets/icons/checklistIcon.svg';\nimport React from 'react';\n\n//TODO: Make Inner icon dynamic and support text option also\nconst CircularProgressBar: React.FC<{\n\tpercentage: number;\n\twidth?: number;\n\tcontainerStyle?: React.CSSProperties;\n}> = ({ percentage, width = 200, containerStyle }) => {\n\tconst cleanedPercentage =\n\t\tpercentage < 0 ? 0 : percentage > 100 ? 100 : percentage;\n\tconst radius = width / 2 - width / 10;\n\tconst dashArray = radius * Math.PI * 2;\n\tconst dashOffset = dashArray - (dashArray * cleanedPercentage) / 100;\n\tconst strokeWidth = width / 10;\n\tconst innerIconWidth = width / 3;\n\treturn (\n\t\t<div style={containerStyle}>\n\t\t\t<svg ~~width~~={width} ~~height~~={width} ~~viewBox~~={`0 0 ${width} ${width}`}>\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id=\"gradientStroke\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n\t\t\t\t\t\t<stop offset=\"0%\" stopColor=\"#7000FF\" />\n\t\t\t\t\t\t<stop offset=\"100%\" stopColor=\"#AD00FF\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t\t<circle\n\t\t\t\t\tcx={width / 2}\n\t\t\t\t\tcy={width / 2}\n\t\t\t\t\tstrokeWidth={strokeWidth}\n\t\t\t\t\tr={radius}\n\t\t\t\t\tstrokeOpacity={0.8}\n\t\t\t\t\tfill={'none'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tstroke: '#ffffff',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<circle\n\t\t\t\t\tcx={width / 2}\n\t\t\t\t\tcy={width / 2}\n\t\t\t\t\tstrokeWidth={strokeWidth}\n\t\t\t\t\tr={radius}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tstroke: 'url(#gradientStroke)',\n\t\t\t\t\t\tstrokeDasharray: dashArray,\n\t\t\t\t\t\tstrokeDashoffset: dashOffset,\n\t\t\t\t\t}}\n\t\t\t\t\ttransform={`rotate(-90 ${width / 2} ${width / 2})`}\n\t\t\t\t\tfill={'none'}\n\t\t\t\t\tstrokeLinecap={'round'}\n\t\t\t\t\tstrokeLinejoin={'round'}\n\t\t\t\t/>\n\t\t\t\t<CheckListIcon\n\t\t\t\t\tx={width / 2 - innerIconWidth / 2}\n\t\t\t\t\twidth={innerIconWidth}\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nexport default CircularProgressBar;\n"],"names":["CircularProgressBar","percentage","width","containerStyle","cleanedPercentage","radius","dashArray","dashOffset","strokeWidth","innerIconWidth","jsx","jsxs","CheckListIcon"],"mappings":";;AAIA,MAAMA,IAID,CAAC,EAAE,YAAAC,GAAY,OAAAC,IAAQ,KAAK,gBAAAC,QAAqB;AACrD,QAAMC,IACLH,IAAa,IAAI,IAAIA,IAAa,MAAM,MAAMA,GACzCI,IAASH,IAAQ,IAAIA,IAAQ,IAC7BI,IAAYD,IAAS,KAAK,KAAK,GAC/BE,IAAaD,IAAaA,IAAYF,IAAqB,KAC3DI,IAAcN,IAAQ,IACtBO,IAAiBP,IAAQ;AAC/B,SACC,gBAAAQ,EAAC,OAAA,EAAI,OAAOP,~~GACX~~,~~4BAAC~~,~~OAAA~~,~~EAAI~~,~~OAAAD~~,~~GAAc~~,QAAQA,~~GAAO~~,SAAS,OAAOA,CAAK,IAAIA,CAAK,~~IAC/D~~,UAAA;AAAA,~~IAAA~~,gBAAAQ,EAAC,QAAA,EACA,UAAA,gBAAAC,EAAC,kBAAA,EAAe,IAAG,kBAAiB,IAAG,MAAK,IAAG,MAAK,IAAG,QAAO,IAAG,MAChE,UAAA;AAAA,~~MAAA~~,gBAAAD,EAAC,QAAA,EAAK,QAAO,MAAK,WAAU,WAAU;AAAA,~~MACtC~~,gBAAAA,EAAC,QAAA,EAAK,QAAO,QAAO,WAAU,UAAA,CAAU;AAAA,~~IAAA~~,EAAA,CACzC,EAAA,CACD;AAAA,~~IACA~~,gBAAAA;AAAA,~~MAAC~~;AAAA,~~MAAA~~;AAAA,~~QACA~~,IAAIR,IAAQ;AAAA,~~QACZ~~,IAAIA,IAAQ;AAAA,~~QACZ~~,aAAAM;AAAA,~~QACA~~,GAAGH;AAAA,~~QACH~~,eAAe;AAAA,~~QACf~~,MAAM;AAAA,~~QACN~~,OAAO;AAAA,~~UACN~~,QAAQ;AAAA,~~QAAA~~;AAAA,~~MACT~~;AAAA,~~IAAA~~;AAAA,~~IAED~~,gBAAAK;AAAA,~~MAAC~~;AAAA,~~MAAA~~;AAAA,~~QACA~~,IAAIR,IAAQ;AAAA,~~QACZ~~,IAAIA,IAAQ;AAAA,~~QACZ~~,aAAAM;AAAA,~~QACA~~,GAAGH;AAAA,~~QACH~~,OAAO;AAAA,~~UACN~~,QAAQ;AAAA,~~UACR~~,iBAAiBC;AAAA,~~UACjB~~,kBAAkBC;AAAA,~~QAAA~~;AAAA,~~QAEnB~~,WAAW,cAAcL,IAAQ,CAAC,IAAIA,IAAQ,CAAC;AAAA,~~QAC~~/C,MAAM;AAAA,~~QACN~~,eAAe;AAAA,~~QACf~~,gBAAgB;AAAA,~~MAAA~~;AAAA,~~IAAA~~;AAAA,~~IAEjB~~,gBAAAQ;AAAA,~~MAACE~~;AAAAA,~~MAAA~~;AAAA,~~QACA~~,GAAGV,IAAQ,IAAIO,IAAiB;AAAA,~~QAChC~~,OAAOA;AAAA,~~MAAA~~;AAAA,~~IAAA~~;AAAA,~~EACR~~,~~EAAA~~,~~CACD,~~EAAA,~~CACD~~;AAEF;"}
1	+ {"version":3,"file":"CircularProgressBar.js","sources":["../../../../src/components/progress-bar/CircularProgressBar.tsx"],"sourcesContent":["import CheckListIcon from '@src/assets/icons/checklistIcon.svg';\nimport React from 'react';\n\n//TODO: Make Inner icon dynamic and support text option also\nconst CircularProgressBar: React.FC<{\n\tpercentage: number;\n\twidth?: number;\n\tcontainerStyle?: React.CSSProperties;\n}> = ({ percentage, width = 200, containerStyle }) => {\n\tconst cleanedPercentage =\n\t\tpercentage < 0 ? 0 : percentage > 100 ? 100 : percentage;\n\tconst radius = width / 2 - width / 10;\n\tconst dashArray = radius * Math.PI * 2;\n\tconst dashOffset = dashArray - (dashArray * cleanedPercentage) / 100;\n\tconst strokeWidth = width / 10;\n\tconst innerIconWidth = width / 3;\n\treturn (\n\t\t<div style={containerStyle} data-testid=\"circular-progress-container\">\n\t\t\t<svg\n\t\t\t\twidth={width}\n\t\t\t\theight={width}\n\t\t\t\tviewBox={`0 0 ${width} ${width}`}\n\t\t\t\tdata-testid=\"circular-progress-svg\"\n\t\t\t>\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id=\"gradientStroke\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n\t\t\t\t\t\t<stop offset=\"0%\" stopColor=\"#7000FF\" />\n\t\t\t\t\t\t<stop offset=\"100%\" stopColor=\"#AD00FF\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t\t<circle\n\t\t\t\t\tcx={width / 2}\n\t\t\t\t\tcy={width / 2}\n\t\t\t\t\tstrokeWidth={strokeWidth}\n\t\t\t\t\tr={radius}\n\t\t\t\t\tstrokeOpacity={0.8}\n\t\t\t\t\tfill={'none'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tstroke: '#ffffff',\n\t\t\t\t\t}}\n\t\t\t\t\tdata-testid=\"circular-progress-track\"\n\t\t\t\t/>\n\t\t\t\t<circle\n\t\t\t\t\tcx={width / 2}\n\t\t\t\t\tcy={width / 2}\n\t\t\t\t\tstrokeWidth={strokeWidth}\n\t\t\t\t\tr={radius}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tstroke: 'url(#gradientStroke)',\n\t\t\t\t\t\tstrokeDasharray: dashArray,\n\t\t\t\t\t\tstrokeDashoffset: dashOffset,\n\t\t\t\t\t}}\n\t\t\t\t\ttransform={`rotate(-90 ${width / 2} ${width / 2})`}\n\t\t\t\t\tfill={'none'}\n\t\t\t\t\tstrokeLinecap={'round'}\n\t\t\t\t\tstrokeLinejoin={'round'}\n\t\t\t\t\tdata-testid=\"circular-progress-fill\"\n\t\t\t\t/>\n\t\t\t\t<CheckListIcon\n\t\t\t\t\tx={width / 2 - innerIconWidth / 2}\n\t\t\t\t\twidth={innerIconWidth}\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nexport default CircularProgressBar;\n"],"names":["CircularProgressBar","percentage","width","containerStyle","cleanedPercentage","radius","dashArray","dashOffset","strokeWidth","innerIconWidth","jsx","jsxs","CheckListIcon"],"mappings":";;AAIA,MAAMA,IAID,CAAC,EAAE,YAAAC,GAAY,OAAAC,IAAQ,KAAK,gBAAAC,QAAqB;AACrD,QAAMC,IACLH,IAAa,IAAI,IAAIA,IAAa,MAAM,MAAMA,GACzCI,IAASH,IAAQ,IAAIA,IAAQ,IAC7BI,IAAYD,IAAS,KAAK,KAAK,GAC/BE,IAAaD,IAAaA,IAAYF,IAAqB,KAC3DI,IAAcN,IAAQ,IACtBO,IAAiBP,IAAQ;AAC/B,SACC,gBAAAQ,EAAC,OAAA,EAAI,OAAOP,GAAgB,eAAY,+BACvC,UAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAAT;AAAA,MACA,QAAQA;AAAA,MACR,SAAS,OAAOA,CAAK,IAAIA,CAAK;AAAA,MAC9B,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EACA,UAAA,gBAAAC,EAAC,kBAAA,EAAe,IAAG,kBAAiB,IAAG,MAAK,IAAG,MAAK,IAAG,QAAO,IAAG,MAChE,UAAA;AAAA,UAAA,gBAAAD,EAAC,QAAA,EAAK,QAAO,MAAK,WAAU,WAAU;AAAA,UACtC,gBAAAA,EAAC,QAAA,EAAK,QAAO,QAAO,WAAU,UAAA,CAAU;AAAA,QAAA,EAAA,CACzC,EAAA,CACD;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,IAAIR,IAAQ;AAAA,YACZ,IAAIA,IAAQ;AAAA,YACZ,aAAAM;AAAA,YACA,GAAGH;AAAA,YACH,eAAe;AAAA,YACf,MAAM;AAAA,YACN,OAAO;AAAA,cACN,QAAQ;AAAA,YAAA;AAAA,YAET,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,IAAIR,IAAQ;AAAA,YACZ,IAAIA,IAAQ;AAAA,YACZ,aAAAM;AAAA,YACA,GAAGH;AAAA,YACH,OAAO;AAAA,cACN,QAAQ;AAAA,cACR,iBAAiBC;AAAA,cACjB,kBAAkBC;AAAA,YAAA;AAAA,YAEnB,WAAW,cAAcL,IAAQ,CAAC,IAAIA,IAAQ,CAAC;AAAA,YAC/C,MAAM;AAAA,YACN,eAAe;AAAA,YACf,gBAAgB;AAAA,YAChB,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEb,gBAAAQ;AAAA,UAACE;AAAAA,UAAA;AAAA,YACA,GAAGV,IAAQ,IAAIO,IAAiB;AAAA,YAChC,OAAOA;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEF;AAEF;"}

package/dist/esm/components/progress-bar/ProgressBarComponent.js CHANGED Viewed

@@ -1,28 +1,29 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { ProgressBar as e } from "react-bootstrap";
 import t from "styled-components";
-import { COLORS as m } from "../../constants/Theme.js";
-const d = (o) => /* @__PURE__ */ r(
-  n,
+import { COLORS as a } from "../../constants/Theme.js";
+const c = (r) => /* @__PURE__ */ o(
+  i,
   {
-    color: o.color ? o.color : m.content.brand,
-    children: /* @__PURE__ */ r(
+    color: r.color ? r.color : a.content.brand,
+    children: /* @__PURE__ */ o(
       e,
       {
-        animated: o.isAnimated,
-        now: o.completed,
-        style: { height: `${o.height ? o.height : 8}px` }
+        animated: r.isAnimated,
+        now: r.completed,
+        style: { height: `${r.height ? r.height : 8}px` },
+        "data-testid": "progress-bar-wrapper"
       }
     )
   }
-), n = t.div`
+), i = t.div`
 	flex: 50%;
 	.progress-bar {
-		background: ${(o) => o.color};
+		background: ${(r) => r.color};
 	}
 `;
 export {
-  d as ProgressBarComponent,
-  n as ProgressCompletedBar
+  c as ProgressBarComponent,
+  i as ProgressCompletedBar
 };
 //# sourceMappingURL=ProgressBarComponent.js.map

package/dist/esm/components/progress-bar/ProgressBarComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBarComponent.js","sources":["../../../../src/components/progress-bar/ProgressBarComponent.tsx"],"sourcesContent":["import { ProgressBar } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport interface ProgressBarProps {\n\tcompleted: number;\n\tisAnimated: boolean;\n\tcolor?: string;\n\theight?: number;\n}\n\nexport const ProgressBarComponent = (props: ProgressBarProps) => {\n\treturn (\n\t\t<ProgressCompletedBar\n\t\t\tcolor={props.color ? props.color : COLORS.content.brand}\n\t\t>\n\t\t\t<ProgressBar\n\t\t\t\tanimated={props.isAnimated}\n\t\t\t\tnow={props.completed}\n\t\t\t\tstyle={{ height: `${props.height ? props.height : 8}px` }}\n\t\t\t/>\n\t\t</ProgressCompletedBar>\n\t);\n};\n\nexport const ProgressCompletedBar = styled.div<{ color: string }>`\n\tflex: 50%;\n\t.progress-bar {\n\t\tbackground: ${(props) => props.color};\n\t}\n`;\n"],"names":["ProgressBarComponent","props","jsx","ProgressCompletedBar","COLORS","ProgressBar","styled"],"mappings":";;;;AAWO,MAAMA,IAAuB,CAACC,MAEnC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,OAAOF,EAAM,QAAQA,EAAM,QAAQG,EAAO,QAAQ;AAAA,IAElD,UAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,UAAUJ,EAAM;AAAA,QAChB,KAAKA,EAAM;AAAA,QACX,OAAO,EAAE,QAAQ,GAAGA,EAAM,SAASA,EAAM,SAAS,CAAC,KAAA;AAAA,~~MAAK~~;AAAA,IAAA;AAAA,~~EACzD~~;AAAA,GAKUE,IAAuBG,EAAO;AAAA;AAAA;AAAA,gBAG3B,CAACL,MAAUA,EAAM,KAAK;AAAA;AAAA;"}
1	+ {"version":3,"file":"ProgressBarComponent.js","sources":["../../../../src/components/progress-bar/ProgressBarComponent.tsx"],"sourcesContent":["import { ProgressBar } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport interface ProgressBarProps {\n\tcompleted: number;\n\tisAnimated: boolean;\n\tcolor?: string;\n\theight?: number;\n}\n\nexport const ProgressBarComponent = (props: ProgressBarProps) => {\n\treturn (\n\t\t<ProgressCompletedBar\n\t\t\tcolor={props.color ? props.color : COLORS.content.brand}\n\t\t>\n\t\t\t<ProgressBar\n\t\t\t\tanimated={props.isAnimated}\n\t\t\t\tnow={props.completed}\n\t\t\t\tstyle={{ height: `${props.height ? props.height : 8}px` }}\n\t\t\t\tdata-testid=\"progress-bar-wrapper\"\n\t\t\t/>\n\t\t</ProgressCompletedBar>\n\t);\n};\n\nexport const ProgressCompletedBar = styled.div<{ color: string }>`\n\tflex: 50%;\n\t.progress-bar {\n\t\tbackground: ${(props) => props.color};\n\t}\n`;\n"],"names":["ProgressBarComponent","props","jsx","ProgressCompletedBar","COLORS","ProgressBar","styled"],"mappings":";;;;AAWO,MAAMA,IAAuB,CAACC,MAEnC,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,OAAOF,EAAM,QAAQA,EAAM,QAAQG,EAAO,QAAQ;AAAA,IAElD,UAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,UAAUJ,EAAM;AAAA,QAChB,KAAKA,EAAM;AAAA,QACX,OAAO,EAAE,QAAQ,GAAGA,EAAM,SAASA,EAAM,SAAS,CAAC,KAAA;AAAA,QACnD,eAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EACb;AAAA,GAKUE,IAAuBG,EAAO;AAAA;AAAA;AAAA,gBAG3B,CAACL,MAAUA,EAAM,KAAK;AAAA;AAAA;"}

package/dist/esm/components/progress-bar-v2/ProgressBarV2.js CHANGED Viewed

@@ -1,79 +1,97 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import n from "styled-components";
-import { BodyTiny as h } from "../TypographyStyle.js";
-import { COLORS as t } from "../../constants/Theme.js";
-var b = /* @__PURE__ */ ((r) => (r.RIGHT = "right", r.LEFT = "left", r.TOP = "top", r.BOTTOM = "bottom", r))(b || {}), f = /* @__PURE__ */ ((r) => (r.CIRCLE = "circle", r.LINE = "line", r))(f || {});
+import { BodyTiny as g } from "../TypographyStyle.js";
+import { COLORS as o } from "../../constants/Theme.js";
+var v = /* @__PURE__ */ ((r) => (r.RIGHT = "right", r.LEFT = "left", r.TOP = "top", r.BOTTOM = "bottom", r))(v || {}), f = /* @__PURE__ */ ((r) => (r.CIRCLE = "circle", r.LINE = "line", r))(f || {});
 const z = (r) => {
   const {
-    type: g,
+    type: h,
     progress: i,
     progressBarThickness: a,
     size: s,
-    color: c,
-    text: d,
-    textPosition: m,
+    color: d,
+    text: c,
+    textPosition: p,
     showProgress: l,
-    matchParentWidth: p = !1
+    matchParentWidth: b = !1
   } = r;
-  let o = m;
-  return o || (o = "left"), /* @__PURE__ */ u($, { alignment: o, children: [
-    l && (o === "top" || o === "left") && /* @__PURE__ */ e(
-      h,
+  let t = p;
+  return t || (t = "left"), /* @__PURE__ */ m(u, { alignment: t, "data-testid": "progress-bar-v2", children: [
+    l && (t === "top" || t === "left") && /* @__PURE__ */ e(
+      g,
       {
         style: {
-          marginBottom: o === "top" ? "8px" : void 0,
-          marginRight: o === "left" ? "8px" : void 0
+          marginBottom: t === "top" ? "8px" : void 0,
+          marginRight: t === "left" ? "8px" : void 0
         },
-        color: t.content.secondary,
-        children: d ?? `${i}% completed...`
+        color: o.content.secondary,
+        children: c ?? `${i}% completed...`
       }
     ),
-    g === "line" ? /* @__PURE__ */ e(
+    h === "line" ? /* @__PURE__ */ e(
       x,
       {
         size: s,
         progressBarThickness: a,
-        matchParentWidth: p,
-        children: /* @__PURE__ */ e(w, { progress: i, color: c })
+        matchParentWidth: b,
+        "data-testid": "progress-bar-v2-track",
+        children: /* @__PURE__ */ e(
+          w,
+          {
+            progress: i,
+            color: d,
+            "data-testid": "progress-bar-v2-fill"
+          }
+        )
       }
-    ) : /* @__PURE__ */ e(v, { progress: i, color: c, size: s, children: /* @__PURE__ */ e(
-      k,
+    ) : /* @__PURE__ */ e(
+      $,
       {
         progress: i,
+        color: d,
         size: s,
-        progressBarThickness: a
+        "data-testid": "progress-bar-v2-track",
+        children: /* @__PURE__ */ e(
+          k,
+          {
+            progress: i,
+            size: s,
+            progressBarThickness: a,
+            "data-testid": "progress-bar-v2-fill"
+          }
+        )
       }
-    ) }),
-    l && (o === "bottom" || o === "right") && /* @__PURE__ */ e(
-      h,
+    ),
+    l && (t === "bottom" || t === "right") && /* @__PURE__ */ e(
+      g,
       {
         style: {
-          marginTop: o === "bottom" ? "8px" : void 0,
-          marginLeft: o === "right" ? "8px" : void 0
+          marginTop: t === "bottom" ? "8px" : void 0,
+          marginLeft: t === "right" ? "8px" : void 0
         },
-        color: t.content.secondary,
-        children: d ?? `${i}% completed...`
+        color: o.content.secondary,
+        children: c ?? `${i}% completed...`
       }
     )
   ] });
-}, $ = n.div`
+}, u = n.div`
 	display: flex;
 	flex-direction: ${(r) => r?.alignment === "top" || r?.alignment === "bottom" ? "column" : "row"};
 	align-items: center;
 	width: 100%;
-`, v = n.div`
+`, $ = n.div`
 	width: ${(r) => r.size ?? 32}px;
 	height: ${(r) => r.size ?? 32}px;
 	border-radius: 50%;
 	overflow: hidden;
 	background: conic-gradient(
-		${(r) => r.color ?? t.background.brand}
+		${(r) => r.color ?? o.background.brand}
 			${(r) => r.progress * 3.6}deg,
-		${t.content.inactive} 0deg
+		${o.content.inactive} 0deg
 	);
 	position: relative;
 `, k = n.div`
-	background-color: ${t.background.inactive};
+	background-color: ${o.background.inactive};
 	transition: width 0.3s ease-in-out;
 	position: absolute;
 	top: 50%;
@@ -82,22 +100,22 @@ const z = (r) => {
 	width: ${(r) => r.progressBarThickness ? r.size ?? 32 - r.progressBarThickness : 20}px;
 	height: ${(r) => r.progressBarThickness ? r.size ?? 32 - r.progressBarThickness : 20}px;
 	border-radius: 50%;
-	background: ${t.surface.standard};
+	background: ${o.surface.standard};
 `, x = n.div`
 	width: ${(r) => r.matchParentWidth ? "100%" : `${r.size ?? 90}px`};
 	height: ${(r) => r.progressBarThickness ?? 8}px;
-	background-color: ${t.background.inactive};
+	background-color: ${o.background.inactive};
 	border-radius: 4px;
 	overflow: hidden;
 `, w = n.div`
 	height: 100%;
 	width: ${(r) => r.progress}%;
-	background-color: ${(r) => r.color ?? t.background.brand};
+	background-color: ${(r) => r.color ?? o.background.brand};
 	transition: width 0.3s ease-in-out;
 `;
 export {
   f as ProgressBarType,
   z as ProgressBarV2,
-  b as TextAlignment
+  v as TextAlignment
 };
 //# sourceMappingURL=ProgressBarV2.js.map

package/dist/esm/components/progress-bar-v2/ProgressBarV2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBarV2.js","sources":["../../../../src/components/progress-bar-v2/ProgressBarV2.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BodyTiny } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport enum TextAlignment {\n\tRIGHT = 'right',\n\tLEFT = 'left',\n\tTOP = 'top',\n\tBOTTOM = 'bottom',\n}\n\nexport enum ProgressBarType {\n\tCIRCLE = 'circle',\n\tLINE = 'line',\n}\n\nexport interface ProgressBarV2Props {\n\tprogress: number;\n\ttype: ProgressBarType;\n\tshowProgress?: boolean;\n\ttext?: string;\n\tsize?: number;\n\tprogressBarThickness?: number;\n\tcolor?: string;\n\ttextPosition?: TextAlignment;\n\tmatchParentWidth?: boolean;\n}\n\nexport const ProgressBarV2 = (props: ProgressBarV2Props) => {\n\tconst {\n\t\ttype,\n\t\tprogress,\n\t\tprogressBarThickness,\n\t\tsize,\n\t\tcolor,\n\t\ttext,\n\t\ttextPosition,\n\t\tshowProgress,\n\t\tmatchParentWidth = false,\n\t} = props;\n\n\tlet alignment = textPosition;\n\tif (!alignment) {\n\t\talignment = TextAlignment.LEFT;\n\t}\n\n\treturn (\n\t\t<MainContainer alignment={alignment}>\n\t\t\t{showProgress &&\n\t\t\t\t(alignment === TextAlignment.TOP \|\|\n\t\t\t\t\talignment === TextAlignment.LEFT) && (\n\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginBottom: alignment === TextAlignment.TOP ? '8px' : undefined,\n\t\t\t\t\t\t\tmarginRight: alignment === TextAlignment.LEFT ? '8px' : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{text ?? `${progress}% completed...`}\n\t\t\t\t\t</BodyTiny>\n\t\t\t\t)}\n\t\t\t{type === ProgressBarType.LINE ? (\n\t\t\t\t<BarContainer\n\t\t\t\t\tsize={size}\n\t\t\t\t\tprogressBarThickness={progressBarThickness}\n\t\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\t>\n\t\t\t\t\t<InnerBarContainer ~~progress~~={progress} ~~color~~={color} />\n\t\t\t\t</BarContainer>\n\t\t\t) : (\n\t\t\t\t<CircleContainer ~~progress~~={progress} ~~color~~={color} ~~size~~={size}>\n\t\t\t\t\t<InnerCircleContainer\n\t\t\t\t\t\tprogress={progress}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\tprogressBarThickness={progressBarThickness}\n\t\t\t\t\t/>\n\t\t\t\t</CircleContainer>\n\t\t\t)}\n\t\t\t{showProgress &&\n\t\t\t\t(alignment === TextAlignment.BOTTOM \|\|\n\t\t\t\t\talignment === TextAlignment.RIGHT) && (\n\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginTop: alignment === TextAlignment.BOTTOM ? '8px' : undefined,\n\t\t\t\t\t\t\tmarginLeft: alignment === TextAlignment.RIGHT ? '8px' : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{text ?? `${progress}% completed...`}\n\t\t\t\t\t</BodyTiny>\n\t\t\t\t)}\n\t\t</MainContainer>\n\t);\n};\n\nconst MainContainer = styled.div<{ alignment?: TextAlignment }>`\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops?.alignment === TextAlignment.TOP \|\|\n\t\tprops?.alignment === TextAlignment.BOTTOM\n\t\t\t? 'column'\n\t\t\t: 'row'};\n\talign-items: center;\n\twidth: 100%;\n`;\n\nconst CircleContainer = styled.div<{\n\tprogress: number;\n\tsize?: number;\n\tcolor?: string;\n}>`\n\twidth: ${(props) => props.size ?? 32}px;\n\theight: ${(props) => props.size ?? 32}px;\n\tborder-radius: 50%;\n\toverflow: hidden;\n\tbackground: conic-gradient(\n\t\t${(props) => props.color ?? COLORS.background.brand}\n\t\t\t${(props) => props.progress * 3.6}deg,\n\t\t${COLORS.content.inactive} 0deg\n\t);\n\tposition: relative;\n`;\n\nconst InnerCircleContainer = styled.div<{\n\tprogress: number;\n\tsize?: number;\n\tprogressBarThickness?: number;\n}>`\n\tbackground-color: ${COLORS.background.inactive};\n\ttransition: width 0.3s ease-in-out;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\twidth: ${(props) =>\n\t\tprops.progressBarThickness\n\t\t\t? props.size ?? 32 - props.progressBarThickness\n\t\t\t: 20}px;\n\theight: ${(props) =>\n\t\tprops.progressBarThickness\n\t\t\t? props.size ?? 32 - props.progressBarThickness\n\t\t\t: 20}px;\n\tborder-radius: 50%;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nconst BarContainer = styled.div<{\n\tsize?: number;\n\tprogressBarThickness?: number;\n\tmatchParentWidth?: boolean;\n}>`\n\twidth: ${(props) =>\n\t\tprops.matchParentWidth ? '100%' : `${props.size ?? 90}px`};\n\theight: ${(props) => props.progressBarThickness ?? 8}px;\n\tbackground-color: ${COLORS.background.inactive};\n\tborder-radius: 4px;\n\toverflow: hidden;\n`;\n\nconst InnerBarContainer = styled.div<{\n\tprogress: number;\n\tcolor?: string;\n}>`\n\theight: 100%;\n\twidth: ${(props) => props.progress}%;\n\tbackground-color: ${(props) => props.color ?? COLORS.background.brand};\n\ttransition: width 0.3s ease-in-out;\n`;\n"],"names":["TextAlignment","ProgressBarType","ProgressBarV2","props","type","progress","progressBarThickness","size","color","text","textPosition","showProgress","matchParentWidth","alignment","jsxs","MainContainer","jsx","BodyTiny","COLORS","BarContainer","InnerBarContainer","CircleContainer","InnerCircleContainer","styled"],"mappings":";;;;AAIO,IAAKA,sBAAAA,OACXA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,MAAM,OACNA,EAAA,SAAS,UAJEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACXA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFIA,IAAAA,KAAA,CAAA,CAAA;AAiBL,MAAMC,IAAgB,CAACC,MAA8B;AAC3D,QAAM;AAAA,IACL,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,EAAA,IAChBT;AAEJ,MAAIU,IAAYH;AAChB,SAAKG,MACJA,IAAY,SAIZ,gBAAAC,EAACC,~~KAAc~~,WAAAF,~~GACb~~,UAAA;AAAA,IAAAF,MACCE,MAAc,SACdA,MAAc,WACd,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,cAAcJ,MAAc,QAAoB,QAAQ;AAAA,UACxD,aAAaA,MAAc,SAAqB,QAAQ;AAAA,QAAA;AAAA,QAEzD,OAAOK,EAAO,QAAQ;AAAA,QAErB,UAAAT,KAAQ,GAAGJ,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtBD,MAAS,SACT,gBAAAY;AAAA,MAACG;AAAA,MAAA;AAAA,QACA,MAAAZ;AAAA,QACA,sBAAAD;AAAA,QACA,kBAAAM;AAAA,~~QAEA~~,UAAA,gBAAAI,~~EAACI~~,~~GAAA~~,~~EAAkB~~,UAAAf,~~GAAoB~~,OAAAG,~~EAAA~~,~~CAAc~~;AAAA,~~MAAA~~;AAAA,IAAA,~~IAGtD~~,gBAAAQ,~~EAACK~~,~~GAAA~~,~~EAAgB~~,UAAAhB,~~GAAoB~~,OAAAG,~~GAAc~~,MAAAD,~~GAClD~~,UAAA,gBAAAS;AAAA,~~MAACM~~;AAAA,~~MAAA~~;AAAA,~~QACA~~,UAAAjB;AAAA,~~QACA~~,MAAAE;AAAA,~~QACA~~,sBAAAD;AAAA,~~MAAA~~;AAAA,~~IAAA~~,~~GAEF~~;AAAA,~~IAEAK~~,MACCE,MAAc,YACdA,MAAc,YACd,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,WAAWJ,MAAc,WAAuB,QAAQ;AAAA,UACxD,YAAYA,MAAc,UAAsB,QAAQ;AAAA,QAAA;AAAA,QAEzD,OAAOK,EAAO,QAAQ;AAAA,QAErB,UAAAT,KAAQ,GAAGJ,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACrB,GAEH;AAEF,GAEMU,IAAgBQ,EAAO;AAAA;AAAA,mBAEV,CAACpB,MAClBA,GAAO,cAAc,SACrBA,GAAO,cAAc,WAClB,WACA,KAAK;AAAA;AAAA;AAAA,GAKJkB,IAAkBE,EAAO;AAAA,UAKrB,CAACpB,MAAUA,EAAM,QAAQ,EAAE;AAAA,WAC1B,CAACA,MAAUA,EAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,IAIlC,CAACA,MAAUA,EAAM,SAASe,EAAO,WAAW,KAAK;AAAA,KAChD,CAACf,MAAUA,EAAM,WAAW,GAAG;AAAA,IAChCe,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,GAKrBI,IAAuBC,EAAO;AAAA,qBAKfL,EAAO,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrC,CAACf,MACTA,EAAM,uBACHA,EAAM,QAAQ,KAAKA,EAAM,uBACzB,EAAE;AAAA,WACI,CAACA,MACVA,EAAM,uBACHA,EAAM,QAAQ,KAAKA,EAAM,uBACzB,EAAE;AAAA;AAAA,eAEQe,EAAO,QAAQ,QAAQ;AAAA,GAGhCC,IAAeI,EAAO;AAAA,UAKlB,CAACpB,MACTA,EAAM,mBAAmB,SAAS,GAAGA,EAAM,QAAQ,EAAE,IAAI;AAAA,WAChD,CAACA,MAAUA,EAAM,wBAAwB,CAAC;AAAA,qBAChCe,EAAO,WAAW,QAAQ;AAAA;AAAA;AAAA,GAKzCE,IAAoBG,EAAO;AAAA;AAAA,UAKvB,CAACpB,MAAUA,EAAM,QAAQ;AAAA,qBACd,CAACA,MAAUA,EAAM,SAASe,EAAO,WAAW,KAAK;AAAA;AAAA;"}
1	+ {"version":3,"file":"ProgressBarV2.js","sources":["../../../../src/components/progress-bar-v2/ProgressBarV2.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BodyTiny } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport enum TextAlignment {\n\tRIGHT = 'right',\n\tLEFT = 'left',\n\tTOP = 'top',\n\tBOTTOM = 'bottom',\n}\n\nexport enum ProgressBarType {\n\tCIRCLE = 'circle',\n\tLINE = 'line',\n}\n\nexport interface ProgressBarV2Props {\n\tprogress: number;\n\ttype: ProgressBarType;\n\tshowProgress?: boolean;\n\ttext?: string;\n\tsize?: number;\n\tprogressBarThickness?: number;\n\tcolor?: string;\n\ttextPosition?: TextAlignment;\n\tmatchParentWidth?: boolean;\n}\n\nexport const ProgressBarV2 = (props: ProgressBarV2Props) => {\n\tconst {\n\t\ttype,\n\t\tprogress,\n\t\tprogressBarThickness,\n\t\tsize,\n\t\tcolor,\n\t\ttext,\n\t\ttextPosition,\n\t\tshowProgress,\n\t\tmatchParentWidth = false,\n\t} = props;\n\n\tlet alignment = textPosition;\n\tif (!alignment) {\n\t\talignment = TextAlignment.LEFT;\n\t}\n\n\treturn (\n\t\t<MainContainer alignment={alignment} data-testid=\"progress-bar-v2\">\n\t\t\t{showProgress &&\n\t\t\t\t(alignment === TextAlignment.TOP \|\|\n\t\t\t\t\talignment === TextAlignment.LEFT) && (\n\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginBottom: alignment === TextAlignment.TOP ? '8px' : undefined,\n\t\t\t\t\t\t\tmarginRight: alignment === TextAlignment.LEFT ? '8px' : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{text ?? `${progress}% completed...`}\n\t\t\t\t\t</BodyTiny>\n\t\t\t\t)}\n\t\t\t{type === ProgressBarType.LINE ? (\n\t\t\t\t<BarContainer\n\t\t\t\t\tsize={size}\n\t\t\t\t\tprogressBarThickness={progressBarThickness}\n\t\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\t\tdata-testid=\"progress-bar-v2-track\"\n\t\t\t\t>\n\t\t\t\t\t<InnerBarContainer\n\t\t\t\t\t\tprogress={progress}\n\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\tdata-testid=\"progress-bar-v2-fill\"\n\t\t\t\t\t/>\n\t\t\t\t</BarContainer>\n\t\t\t) : (\n\t\t\t\t<CircleContainer\n\t\t\t\t\tprogress={progress}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tdata-testid=\"progress-bar-v2-track\"\n\t\t\t\t>\n\t\t\t\t\t<InnerCircleContainer\n\t\t\t\t\t\tprogress={progress}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\tprogressBarThickness={progressBarThickness}\n\t\t\t\t\t\tdata-testid=\"progress-bar-v2-fill\"\n\t\t\t\t\t/>\n\t\t\t\t</CircleContainer>\n\t\t\t)}\n\t\t\t{showProgress &&\n\t\t\t\t(alignment === TextAlignment.BOTTOM \|\|\n\t\t\t\t\talignment === TextAlignment.RIGHT) && (\n\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginTop: alignment === TextAlignment.BOTTOM ? '8px' : undefined,\n\t\t\t\t\t\t\tmarginLeft: alignment === TextAlignment.RIGHT ? '8px' : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{text ?? `${progress}% completed...`}\n\t\t\t\t\t</BodyTiny>\n\t\t\t\t)}\n\t\t</MainContainer>\n\t);\n};\n\nconst MainContainer = styled.div<{ alignment?: TextAlignment }>`\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops?.alignment === TextAlignment.TOP \|\|\n\t\tprops?.alignment === TextAlignment.BOTTOM\n\t\t\t? 'column'\n\t\t\t: 'row'};\n\talign-items: center;\n\twidth: 100%;\n`;\n\nconst CircleContainer = styled.div<{\n\tprogress: number;\n\tsize?: number;\n\tcolor?: string;\n}>`\n\twidth: ${(props) => props.size ?? 32}px;\n\theight: ${(props) => props.size ?? 32}px;\n\tborder-radius: 50%;\n\toverflow: hidden;\n\tbackground: conic-gradient(\n\t\t${(props) => props.color ?? COLORS.background.brand}\n\t\t\t${(props) => props.progress * 3.6}deg,\n\t\t${COLORS.content.inactive} 0deg\n\t);\n\tposition: relative;\n`;\n\nconst InnerCircleContainer = styled.div<{\n\tprogress: number;\n\tsize?: number;\n\tprogressBarThickness?: number;\n}>`\n\tbackground-color: ${COLORS.background.inactive};\n\ttransition: width 0.3s ease-in-out;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\twidth: ${(props) =>\n\t\tprops.progressBarThickness\n\t\t\t? props.size ?? 32 - props.progressBarThickness\n\t\t\t: 20}px;\n\theight: ${(props) =>\n\t\tprops.progressBarThickness\n\t\t\t? props.size ?? 32 - props.progressBarThickness\n\t\t\t: 20}px;\n\tborder-radius: 50%;\n\tbackground: ${COLORS.surface.standard};\n`;\n\nconst BarContainer = styled.div<{\n\tsize?: number;\n\tprogressBarThickness?: number;\n\tmatchParentWidth?: boolean;\n}>`\n\twidth: ${(props) =>\n\t\tprops.matchParentWidth ? '100%' : `${props.size ?? 90}px`};\n\theight: ${(props) => props.progressBarThickness ?? 8}px;\n\tbackground-color: ${COLORS.background.inactive};\n\tborder-radius: 4px;\n\toverflow: hidden;\n`;\n\nconst InnerBarContainer = styled.div<{\n\tprogress: number;\n\tcolor?: string;\n}>`\n\theight: 100%;\n\twidth: ${(props) => props.progress}%;\n\tbackground-color: ${(props) => props.color ?? COLORS.background.brand};\n\ttransition: width 0.3s ease-in-out;\n`;\n"],"names":["TextAlignment","ProgressBarType","ProgressBarV2","props","type","progress","progressBarThickness","size","color","text","textPosition","showProgress","matchParentWidth","alignment","jsxs","MainContainer","jsx","BodyTiny","COLORS","BarContainer","InnerBarContainer","CircleContainer","InnerCircleContainer","styled"],"mappings":"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"}

package/dist/esm/components/radioButton/RadioButton.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { jsxs as c, jsx as t, Fragment as x } from "react/jsx-runtime";
-import { useState as n, useEffect as h, useMemo as r } from "react";
+import { jsxs as c, jsx as t, Fragment as u } from "react/jsx-runtime";
+import { useState as n, useEffect as x, useMemo as r } from "react";
 import { RadioButtonContainer as S, RadioButtonIcon as y } from "./RadioButton.styled.js";
-import { BodyCaption as m, TitleSmall as C, BodySecondary as k, BodyPrimary as D } from "../TypographyStyle.js";
+import { BodyCaption as m, TitleSmall as k, BodySecondary as C, BodyPrimary as D } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
 const g = (e) => {
   const l = r(
@@ -33,6 +33,7 @@ const g = (e) => {
         e.isActive && /* @__PURE__ */ t(
           "circle",
           {
+            "data-test": "radio-checked-indicator",
             cx: e.isSmall ? "8" : "10",
             cy: e.isSmall ? "8" : "10",
             r: e.isSmall ? 3 : 5,
@@ -49,11 +50,11 @@ const g = (e) => {
       a(o), e.onValueChange?.(o, e.value);
     }
   };
-  h(() => {
+  x(() => {
     a(e.isActive);
   }, [e.isActive]);
-  const u = () => e.label ? e.boldOnChecked && l || e.alwaysBold ? /* @__PURE__ */ t(
-    C,
+  const h = () => e.label ? e.boldOnChecked && l || e.alwaysBold ? /* @__PURE__ */ t(
+    k,
     {
       color: e.isDisabled ? i.text.disabled : i.text.primary,
       children: e.label
@@ -65,7 +66,7 @@ const g = (e) => {
       children: e.label
     }
   ) : e.labelSize === "MEDIUM" ? /* @__PURE__ */ t(
-    k,
+    C,
     {
       color: e.isDisabled ? i.text.disabled : i.text.primary,
       children: e.label
@@ -76,7 +77,7 @@ const g = (e) => {
       color: e.isDisabled ? i.text.disabled : i.text.primary,
       children: e.label
     }
-  ) : /* @__PURE__ */ t(x, {});
+  ) : /* @__PURE__ */ t(u, {});
   return /* @__PURE__ */ c(
     S,
     {
@@ -117,7 +118,7 @@ const g = (e) => {
               gap: e.gapBetweenBodyAndCaption || "0px"
             },
             children: [
-              u(),
+              h(),
               e.caption && /* @__PURE__ */ t(
                 m,
                 {

package/dist/esm/components/radioButton/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radioButton/RadioButton.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tRadioButtonContainer,\n\tRadioButtonIcon,\n} from '@src/components/radioButton/RadioButton.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type RadioButtonProps = {\n\tisActive: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tlabel?: string;\n\tcaption?: string;\n\tonValueChange: (checked: boolean, value?: string) => void;\n\tskipHoverState?: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL';\n\tskipSelectingOff?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'MEDIUM';\n\tboldOnChecked?: boolean;\n\talwaysBold?: boolean;\n\tactiveColor?: string;\n\tgapBetweenBodyAndCaption?: string;\n\t'data-test'?: string;\n};\n\nconst CheckMark: React.FC<{\n\tisActive: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props?.activeColor \|\| COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\tconst strokeColor = useMemo(\n\t\t() =>\n\t\t\tprops.isDisabled\n\t\t\t\t? COLORS.content.inactive\n\t\t\t\t: props.isActive\n\t\t\t\t? fillColor\n\t\t\t\t: COLORS.content.primary,\n\t\t[props.isDisabled, props.isActive, fillColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '20'}\n\t\t\theight={props.isSmall ? '16' : '20'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 20 20'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<circle\n\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\tr={props.isSmall ? 6 : 9}\n\t\t\t\tstroke={strokeColor}\n\t\t\t\tstrokeWidth={props.isSmall ? 1.5 : 2}\n\t\t\t/>\n\t\t\t{props.isActive && (\n\t\t\t\t<circle\n\t\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\t\tr={props.isSmall ? 3 : 5}\n\t\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const RadioButton: React.FC<RadioButtonProps> = (props) => {\n\tconst [isActive, setIsActive] = useState(props.isActive \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = () => {\n\t\tif (props.skipSelectingOff) {\n\t\t\treturn;\n\t\t}\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isActive;\n\t\t\tsetIsActive(newVal);\n\t\t\tprops.onValueChange?.(newVal, props.value);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsActive(props.isActive);\n\t}, [props.isActive]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif ((props.boldOnChecked && isActive) \|\| props.alwaysBold) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'MEDIUM') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<RadioButtonContainer\n\t\t\tdata-test={props['data-test']}\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tstyle={props.caption ? { alignItems: 'flex-start' } : {}}\n\t\t>\n\t\t\t<RadioButtonIcon\n\t\t\t\tchecked={isActive}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\tsize={props.size}\n\t\t\t\tstyle={props.caption ? { margin: '2px 0' } : {}}\n\t\t\t>\n\t\t\t\t<CheckMark\n\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\t\tactiveColor={props.activeColor}\n\t\t\t\t/>\n\t\t\t</RadioButtonIcon>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: props.gapBetweenBodyAndCaption \|\| '0px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{renderLabel()}\n\t\t\t\t{props.caption && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.caption}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</RadioButtonContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","strokeColor","jsxs","jsx","RadioButton","isActive","setIsActive","useState","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","newVal","useEffect","renderLabel","TitleSmall","BodyCaption","BodySecondary","BodyPrimary","Fragment","RadioButtonContainer","RadioButtonIcon"],"mappings":"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"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radioButton/RadioButton.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tRadioButtonContainer,\n\tRadioButtonIcon,\n} from '@src/components/radioButton/RadioButton.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type RadioButtonProps = {\n\tisActive: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tlabel?: string;\n\tcaption?: string;\n\tonValueChange: (checked: boolean, value?: string) => void;\n\tskipHoverState?: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL';\n\tskipSelectingOff?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'MEDIUM';\n\tboldOnChecked?: boolean;\n\talwaysBold?: boolean;\n\tactiveColor?: string;\n\tgapBetweenBodyAndCaption?: string;\n\t'data-test'?: string;\n};\n\nconst CheckMark: React.FC<{\n\tisActive: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props?.activeColor \|\| COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\tconst strokeColor = useMemo(\n\t\t() =>\n\t\t\tprops.isDisabled\n\t\t\t\t? COLORS.content.inactive\n\t\t\t\t: props.isActive\n\t\t\t\t? fillColor\n\t\t\t\t: COLORS.content.primary,\n\t\t[props.isDisabled, props.isActive, fillColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '20'}\n\t\t\theight={props.isSmall ? '16' : '20'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 20 20'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<circle\n\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\tr={props.isSmall ? 6 : 9}\n\t\t\t\tstroke={strokeColor}\n\t\t\t\tstrokeWidth={props.isSmall ? 1.5 : 2}\n\t\t\t/>\n\t\t\t{props.isActive && (\n\t\t\t\t<circle\n\t\t\t\t\tdata-test=\"radio-checked-indicator\"\n\t\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\t\tr={props.isSmall ? 3 : 5}\n\t\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const RadioButton: React.FC<RadioButtonProps> = (props) => {\n\tconst [isActive, setIsActive] = useState(props.isActive \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = () => {\n\t\tif (props.skipSelectingOff) {\n\t\t\treturn;\n\t\t}\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isActive;\n\t\t\tsetIsActive(newVal);\n\t\t\tprops.onValueChange?.(newVal, props.value);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsActive(props.isActive);\n\t}, [props.isActive]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif ((props.boldOnChecked && isActive) \|\| props.alwaysBold) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'MEDIUM') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<RadioButtonContainer\n\t\t\tdata-test={props['data-test']}\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tstyle={props.caption ? { alignItems: 'flex-start' } : {}}\n\t\t>\n\t\t\t<RadioButtonIcon\n\t\t\t\tchecked={isActive}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\tsize={props.size}\n\t\t\t\tstyle={props.caption ? { margin: '2px 0' } : {}}\n\t\t\t>\n\t\t\t\t<CheckMark\n\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\t\tactiveColor={props.activeColor}\n\t\t\t\t/>\n\t\t\t</RadioButtonIcon>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: props.gapBetweenBodyAndCaption \|\| '0px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{renderLabel()}\n\t\t\t\t{props.caption && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.caption}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</RadioButtonContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","strokeColor","jsxs","jsx","RadioButton","isActive","setIsActive","useState","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","newVal","useEffect","renderLabel","TitleSmall","BodyCaption","BodySecondary","BodyPrimary","Fragment","RadioButtonContainer","RadioButtonIcon"],"mappings":"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"}