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

@bikdotai/bik-component-library 0.0.840 → 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 (99) hide show

package/dist/cjs/components/dropdown/DropdownPopover/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/DropdownPopover/index.tsx"],"sourcesContent":["import React, {\n\tLegacyRef,\n\tRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement, Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport { OpenDropdownContainer, OverLapAbs } from '../Common.styled';\nimport { OpenedDropdown } from '../OpenedDropdown';\nimport { OpenDropdownProps } from '../type';\n\ntype DropdownProps = OpenDropdownProps & {\n\tisLoading?: boolean;\n\tchildren?: React.ReactNode;\n\tdisabled?: boolean;\n\tonDropdownOpen?: () => void;\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n\ttooltipContent?: string;\n\ttooltipDirection?: Placement;\n\tshowTooltipArrow?: boolean;\n\tallowEvents?: boolean;\n\t'data-test'?: string;\n\tisChildLoading?: boolean;\n\t/*\n\t If true, forces the dropdown to remain open regardless of user interaction or internal state.\n\t * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.\n\t * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.\n\t /\n\tforceOpen?: boolean;\n};\n\nexport const DropdownPopover = React.forwardRef<\n\t{\n\t\topenDropdown: boolean;\n\t},\n\tDropdownProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tonDropdownVisbilityChange,\n\t\t\tversion = '1.0',\n\t\t\ttooltipContent,\n\t\t\ttooltipDirection,\n\t\t\tshowTooltipArrow,\n\t\t\tisChildLoading,\n\t\t\tforceOpen,\n\t\t\t...openDropdownProps\n\t\t},\n\t\tunTypedRef,\n\t) => {\n\t\tconst ref = unTypedRef as React.RefObject<{ openDropdown: boolean }>;\n\t\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\t\tconst [isHovering, setIsHovering] = useState(false);\n\t\tconst [referenceElement, setReferenceElement] = useState(null);\n\t\tconst [popperElement, setPopperElement] = useState(null);\n\t\tconst headerRef = useRef(null);\n\n\t\tconst { styles, attributes } = usePopper(referenceElement, popperElement, {\n\t\t\tplacement: openDropdownProps.placement,\n\t\t\tstrategy: openDropdownProps.strategy,\n\t\t});\n\n\t\tconst onCloseHandle = (data) => {\n\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect && data) {\n\t\t\t\topenDropdownProps.onSelect?.([...data]);\n\t\t\t}\n\t\t\tsetDropdownVisibility(false);\n\t\t\topenDropdownProps?.onClose?.();\n\t\t};\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\treturn {\n\t\t\t\t\topenDropdown: openDropdown,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (ref?.current) ref.current.openDropdown = openDropdown;\n\t\t}, [openDropdown]);\n\n\t\tuseEffect(() => {\n\t\t\tonDropdownVisbilityChange?.(openDropdown);\n\t\t}, [openDropdown]);\n\n\t\tconst dropDownComponent = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t...(version === '3.0' && {\n\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\topenDropdown \|\| isHovering\n\t\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t\t: 'transparent',\n\t\t\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting /\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(true) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(false) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OverLapAbs\n\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\tallowEvents={openDropdownProps.allowEvents}\n\t\t\t\t\t\t\tdisabled={openDropdownProps.disabled}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\topenDropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\tif (!openDropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tisChildLoading={isChildLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{openDropdownProps.allowEvents ? children : null}\n\t\t\t\t\t\t</OverLapAbs>\n\t\t\t\t\t\t{openDropdownProps.allowEvents ? null : children}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(openDropdown \|\| forceOpen) && (\n\t\t\t\t\t\t<OpenDropdownContainer\n\t\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting */\n\t\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...styles['popper'],\n\t\t\t\t\t\t\t\tzIndex: openDropdownProps.dropdownZIndex ?? 3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tborderRadius: version === '3.0' ? 4 : 8,\n\t\t\t\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\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<OpenedDropdown\n\t\t\t\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\topenDropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\t\tzeroState={openDropdownProps?.zeroState}\n\t\t\t\t\t\t\t\t\tisDraggable={openDropdownProps.isDraggable}\n\t\t\t\t\t\t\t\t\tonOptionsReorder={openDropdownProps.onOptionsReorder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t\t</OpenDropdownContainer>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{!openDropdown && !forceOpen && tooltipContent !== undefined ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={tooltipContent}\n\t\t\t\t\t\tplacement={tooltipDirection}\n\t\t\t\t\t\thideArrow={!showTooltipArrow}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div data-test={openDropdownProps['data-test']}>\n\t\t\t\t\t\t\t{dropDownComponent()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\tdropDownComponent()\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\n\nDropdownPopover.displayName = 'DropdownPopover';\n"],"names":["DropdownPopover","React","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","unTypedRef","ref","openDropdown","setDropdownVisibility","useState","isHovering","setIsHovering","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","onCloseHandle","data","useImperativeHandle","useEffect","dropDownComponent","jsxs","Fragment","COLORS","jsx","OverLapAbs","e","OpenDropdownContainer","DropShadow","OpenedDropdown","options","Tooltip"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/DropdownPopover/index.tsx"],"sourcesContent":["import React, {\n\tLegacyRef,\n\tRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement, Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport { OpenDropdownContainer, OverLapAbs } from '../Common.styled';\nimport { OpenedDropdown } from '../OpenedDropdown';\nimport { OpenDropdownProps } from '../type';\n\ntype DropdownProps = OpenDropdownProps & {\n\tisLoading?: boolean;\n\tchildren?: React.ReactNode;\n\tdisabled?: boolean;\n\tonDropdownOpen?: () => void;\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n\ttooltipContent?: string;\n\ttooltipDirection?: Placement;\n\tshowTooltipArrow?: boolean;\n\tallowEvents?: boolean;\n\t'data-test'?: string;\n\tisChildLoading?: boolean;\n\t/*\n\t If true, forces the dropdown to remain open regardless of user interaction or internal state.\n\t * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.\n\t * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.\n\t /\n\tforceOpen?: boolean;\n};\n\nexport const DropdownPopover = React.forwardRef<\n\t{\n\t\topenDropdown: boolean;\n\t},\n\tDropdownProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tonDropdownVisbilityChange,\n\t\t\tversion = '1.0',\n\t\t\ttooltipContent,\n\t\t\ttooltipDirection,\n\t\t\tshowTooltipArrow,\n\t\t\tisChildLoading,\n\t\t\tforceOpen,\n\t\t\t...openDropdownProps\n\t\t},\n\t\tunTypedRef,\n\t) => {\n\t\tconst ref = unTypedRef as React.RefObject<{ openDropdown: boolean }>;\n\t\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\t\tconst [isHovering, setIsHovering] = useState(false);\n\t\tconst [referenceElement, setReferenceElement] = useState(null);\n\t\tconst [popperElement, setPopperElement] = useState(null);\n\t\tconst headerRef = useRef(null);\n\n\t\tconst { styles, attributes } = usePopper(referenceElement, popperElement, {\n\t\t\tplacement: openDropdownProps.placement,\n\t\t\tstrategy: openDropdownProps.strategy,\n\t\t});\n\n\t\tconst onCloseHandle = (data) => {\n\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect && data) {\n\t\t\t\topenDropdownProps.onSelect?.([...data]);\n\t\t\t}\n\t\t\tsetDropdownVisibility(false);\n\t\t\topenDropdownProps?.onClose?.();\n\t\t};\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\treturn {\n\t\t\t\t\topenDropdown: openDropdown,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (ref?.current) ref.current.openDropdown = openDropdown;\n\t\t}, [openDropdown]);\n\n\t\tuseEffect(() => {\n\t\t\tonDropdownVisbilityChange?.(openDropdown);\n\t\t}, [openDropdown]);\n\n\t\tconst dropDownComponent = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t...(version === '3.0' && {\n\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\topenDropdown \|\| isHovering\n\t\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t\t: 'transparent',\n\t\t\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting /\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(true) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(false) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OverLapAbs\n\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\tdata-testid=\"dropdown-overlay\"\n\t\t\t\t\t\t\tallowEvents={openDropdownProps.allowEvents}\n\t\t\t\t\t\t\tdisabled={openDropdownProps.disabled}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\topenDropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\tif (!openDropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tisChildLoading={isChildLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{openDropdownProps.allowEvents ? children : null}\n\t\t\t\t\t\t</OverLapAbs>\n\t\t\t\t\t\t{openDropdownProps.allowEvents ? null : children}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(openDropdown \|\| forceOpen) && (\n\t\t\t\t\t\t<OpenDropdownContainer\n\t\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting */\n\t\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...styles['popper'],\n\t\t\t\t\t\t\t\tzIndex: openDropdownProps.dropdownZIndex ?? 3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tborderRadius: version === '3.0' ? 4 : 8,\n\t\t\t\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\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<OpenedDropdown\n\t\t\t\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\topenDropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\t\tzeroState={openDropdownProps?.zeroState}\n\t\t\t\t\t\t\t\t\tisDraggable={openDropdownProps.isDraggable}\n\t\t\t\t\t\t\t\t\tonOptionsReorder={openDropdownProps.onOptionsReorder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t\t</OpenDropdownContainer>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{!openDropdown && !forceOpen && tooltipContent !== undefined ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={tooltipContent}\n\t\t\t\t\t\tplacement={tooltipDirection}\n\t\t\t\t\t\thideArrow={!showTooltipArrow}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div data-test={openDropdownProps['data-test']}>\n\t\t\t\t\t\t\t{dropDownComponent()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\tdropDownComponent()\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\n\nDropdownPopover.displayName = 'DropdownPopover';\n"],"names":["DropdownPopover","React","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","unTypedRef","ref","openDropdown","setDropdownVisibility","useState","isHovering","setIsHovering","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","onCloseHandle","data","useImperativeHandle","useEffect","dropDownComponent","jsxs","Fragment","COLORS","jsx","OverLapAbs","e","OpenDropdownContainer","DropShadow","OpenedDropdown","options","Tooltip"],"mappings":"2bAoCaA,EAAkBC,EAAAA,QAAM,WAMpC,CACC,CACC,SAAAC,EACA,0BAAAC,EACA,QAAAC,EAAU,MACV,eAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAMD,EACN,CAACE,EAAcC,CAAqB,EAAIC,EAAAA,SAAS,EAAK,EACtD,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAAS,EAAK,EAC5C,CAACG,EAAkBC,CAAmB,EAAIJ,EAAAA,SAAS,IAAI,EACvD,CAACK,EAAeC,CAAgB,EAAIN,EAAAA,SAAS,IAAI,EACjDO,EAAYC,EAAAA,OAAO,IAAI,EAEvB,CAAE,OAAAC,EAAQ,WAAAC,CAAA,EAAeC,EAAAA,UAAUR,EAAkBE,EAAe,CACzE,UAAWV,EAAkB,UAC7B,SAAUA,EAAkB,QAAA,CAC5B,EAEKiB,EAAiBC,GAAS,CAC3BxB,IAAY,OAASM,EAAkB,eAAiBkB,GAC3DlB,EAAkB,WAAW,CAAC,GAAGkB,CAAI,CAAC,EAEvCd,EAAsB,EAAK,EAC3BJ,GAAmB,UAAA,CACpB,EAEAmB,EAAAA,oBACCjB,EACA,KACQ,CACN,aAAAC,CAAA,GAGF,CAAA,CAAC,EAGFiB,EAAAA,UAAU,IAAM,CACXlB,GAAK,UAASA,EAAI,QAAQ,aAAeC,EAC9C,EAAG,CAACA,CAAY,CAAC,EAEjBiB,EAAAA,UAAU,IAAM,CACf3B,IAA4BU,CAAY,CACzC,EAAG,CAACA,CAAY,CAAC,EAEjB,MAAMkB,EAAoB,IAExBC,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,GAAI5B,IAAY,OAAS,CACxB,gBACCS,GAAgBG,EACbkB,EAAAA,OAAO,QAAQ,QACf,cACJ,WAAY,6BACZ,aAAc,CAAA,CACf,EAGD,IAAKf,EACL,aACCf,IAAY,MAAQ,IAAMa,EAAc,EAAI,EAAI,OAEjD,aACCb,IAAY,MAAQ,IAAMa,EAAc,EAAK,EAAI,OAGlD,SAAA,CAAAkB,EAAAA,IAACC,EAAAA,WAAA,CACA,IAAKd,EACL,cAAY,mBACZ,YAAaZ,EAAkB,YAC/B,SAAUA,EAAkB,SAC5B,QAAU2B,GAAM,CACf3B,EAAkB,iBAAA,EACbG,GAGJC,EAAsB,EAAK,EAC3BuB,EAAE,eAAA,GAHG3B,EAAkB,UAAUI,EAAsB,EAAI,CAK7D,EACA,eAAAN,EAEC,SAAAE,EAAkB,YAAcR,EAAW,IAAA,CAAA,EAE5CQ,EAAkB,YAAc,KAAOR,CAAA,CAAA,CAAA,GAEvCW,GAAgBJ,IACjB0B,EAAAA,IAACG,EAAAA,sBAAA,CAEA,IAAKjB,EACL,MAAO,CACN,GAAGG,EAAO,OACV,OAAQd,EAAkB,gBAAkB,CAAA,EAE5C,GAAGe,EAAW,OACf,YAAWf,EAAkB,WAAW,EAExC,SAAAyB,EAAAA,IAACI,EAAAA,WAAA,CACA,MAAO,KACP,SAAU,OACV,MAAO,CACN,aAAcnC,IAAY,MAAQ,EAAI,EACtC,UAAW,iCAAA,EAGZ,SAAA+B,EAAAA,IAACK,EAAAA,eAAA,CACC,GAAG9B,EACJ,SAAW+B,GAAY,CAClBrC,IAAY,OAASM,EAAkB,gBAG1CA,EAAkB,WAAW+B,CAAO,EACpC3B,EAAsB,EAAK,EAE7B,EACA,QAASa,EACT,QAAAvB,EACA,UAAAkB,EACA,UAAWZ,GAAmB,UAC9B,YAAaA,EAAkB,YAC/B,iBAAkBA,EAAkB,gBAAA,CAAA,CACrC,CAAA,CACD,CAAA,CACD,EAEF,EAIF,yBAEG,SAAA,CAACG,GAAgB,CAACJ,GAAaJ,IAAmB,OAClD8B,EAAAA,IAACO,EAAAA,QAAA,CACA,KAAMrC,EACN,UAAWC,EACX,UAAW,CAACC,EAEZ,eAAC,MAAA,CAAI,YAAWG,EAAkB,WAAW,EAC3C,YAAkB,CACpB,CAAA,CAAA,EAGDqB,GAAkB,CAEpB,CAEF,CACD,EAEA/B,EAAgB,YAAc"}

package/dist/cjs/components/floater/floater.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),i=require("react"),O=f=>{const l=i.useRef(null),[r,s]=i.useState(0),[d,o]=i.useState(0),[h,a]=i.useState(!1),w=e=>{if(f.useDefaultOffsets){o(e.left);return}let t=0;f.leftOffset?t=e.left+f.leftOffset:t=e.left+e.width+30;const n=l?.current;if(!n){o(t);return}t>window.innerWidth-n.offsetWidth&&(t=window.innerWidth-n.offsetWidth-50),o(t)},g=e=>{if(f.useDefaultOffsets){s(e.top);return}let t=e.top;f.topOffset&&(t=e.top+f.topOffset);const n=l?.current;if(!n){s(t);return}const u=window.innerHeight;e.top+n.offsetHeight>u&&(t=e.top-(e.top+n.offsetHeight-u)-10),s(t)};return i.useEffect(()=>{if(f.refElement.current){const e=f.refElement.current.getBoundingClientRect();w(e),g(e),a(!0)}}),h?c.jsx("div",{style:{top:r,left:d,position:"fixed",zIndex:1e3},children:c.jsx("div",{ref:l,children:f.children})}):null};exports.Floater=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),O=f=>{const l=i.useRef(null),[c,o]=i.useState(0),[d,s]=i.useState(0),[a,h]=i.useState(!1),w=t=>{if(f.useDefaultOffsets){s(t.left);return}let e=0;f.leftOffset?e=t.left+f.leftOffset:e=t.left+t.width+30;const n=l?.current;if(!n){s(e);return}e>window.innerWidth-n.offsetWidth&&(e=window.innerWidth-n.offsetWidth-50),s(e)},g=t=>{if(f.useDefaultOffsets){o(t.top);return}let e=t.top;f.topOffset&&(e=t.top+f.topOffset);const n=l?.current;if(!n){o(e);return}const u=window.innerHeight;t.top+n.offsetHeight>u&&(e=t.top-(t.top+n.offsetHeight-u)-10),o(e)};return i.useEffect(()=>{if(f.refElement.current){const t=f.refElement.current.getBoundingClientRect();w(t),g(t),h(!0)}}),a?r.jsx("div",{"data-testid":"floater-position",style:{top:c,left:d,position:"fixed",zIndex:1e3},children:r.jsx("div",{ref:l,children:f.children})}):null};exports.Floater=O;
 //# sourceMappingURL=floater.js.map

package/dist/cjs/components/floater/floater.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"floater.js","sources":["../../../../src/components/floater/floater.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport type FloaterProps = {\n\tchildren?: React.ReactNode;\n\trefElement: React.MutableRefObject<any>;\n\tleftOffset?: number;\n\ttopOffset?: number;\n\tuseDefaultOffsets?: boolean;\n};\n\nexport const Floater = (props: FloaterProps) => {\n\tconst childRef = useRef<HTMLDivElement \| null>(null);\n\tconst [top, setTop] = useState<number>(0);\n\tconst [left, setLeft] = useState<number>(0);\n\tconst [show, setShow] = useState<boolean>(false);\n\n\tconst calculateLeft = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetLeft(rect.left);\n\t\t\treturn;\n\t\t}\n\n\t\tlet left = 0;\n\t\tif (props.leftOffset) {\n\t\t\tleft = rect.left + props.leftOffset;\n\t\t} else {\n\t\t\tleft = rect.left + rect.width + 30;\n\t\t}\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetLeft(left);\n\t\t\treturn;\n\t\t}\n\t\tif (left > window.innerWidth - childElement.offsetWidth) {\n\t\t\tleft = window.innerWidth - childElement.offsetWidth - 50;\n\t\t}\n\t\tsetLeft(left);\n\t};\n\n\tconst calculateTop = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetTop(rect.top);\n\t\t\treturn;\n\t\t}\n\t\tlet top: number = rect.top;\n\n\t\tif (props.topOffset) {\n\t\t\ttop = rect.top + props.topOffset;\n\t\t}\n\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetTop(top);\n\t\t\treturn;\n\t\t}\n\t\tconst windowHeight = window.innerHeight;\n\t\tif (rect.top + childElement.offsetHeight > windowHeight) {\n\t\t\ttop =\n\t\t\t\trect.top - (rect.top + childElement.offsetHeight - windowHeight) - 10;\n\t\t}\n\t\tsetTop(top);\n\t};\n\n\tuseEffect(() => {\n\t\tif (props.refElement.current) {\n\t\t\tconst rect = props.refElement.current.getBoundingClientRect();\n\t\t\tcalculateLeft(rect);\n\t\t\tcalculateTop(rect);\n\t\t\tsetShow(true);\n\t\t}\n\t});\n\n\tif (!show) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\ttop: top,\n\t\t\t\tleft: left,\n\t\t\t\tposition: 'fixed',\n\t\t\t\tzIndex: 1000,\n\t\t\t}}\n\t\t>\n\t\t\t<div ref={childRef}>{props.children}</div>\n\t\t</div>\n\t);\n};\n"],"names":["Floater","props","childRef","useRef","top","setTop","useState","left","setLeft","show","setShow","calculateLeft","rect","childElement","calculateTop","windowHeight","useEffect","jsx"],"mappings":"wIAUaA,EAAWC,GAAwB,CAC/C,MAAMC,EAAWC,EAAAA,OAA8B,IAAI,EAC7C,CAACC,EAAKC,CAAM,EAAIC,EAAAA,SAAiB,CAAC,EAClC,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAAiB,CAAC,EACpC,CAACG,EAAMC,CAAO,EAAIJ,EAAAA,SAAkB,EAAK,EAEzCK,EAAiBC,GAAkB,CACxC,GAAIX,EAAM,kBAAmB,CAC5BO,EAAQI,EAAK,IAAI,EACjB,MACD,CAEA,IAAIL,EAAO,EACPN,EAAM,WACTM,EAAOK,EAAK,KAAOX,EAAM,WAEzBM,EAAOK,EAAK,KAAOA,EAAK,MAAQ,GAEjC,MAAMC,EAAoBX,GAAU,QACpC,GAAI,CAACW,EAAc,CAClBL,EAAQD,CAAI,EACZ,MACD,CACIA,EAAO,OAAO,WAAaM,EAAa,cAC3CN,EAAO,OAAO,WAAaM,EAAa,YAAc,IAEvDL,EAAQD,CAAI,CACb,EAEMO,EAAgBF,GAAkB,CACvC,GAAIX,EAAM,kBAAmB,CAC5BI,EAAOO,EAAK,GAAG,EACf,MACD,CACA,IAAIR,EAAcQ,EAAK,IAEnBX,EAAM,YACTG,EAAMQ,EAAK,IAAMX,EAAM,WAGxB,MAAMY,EAAoBX,GAAU,QACpC,GAAI,CAACW,EAAc,CAClBR,EAAOD,CAAG,EACV,MACD,CACA,MAAMW,EAAe,OAAO,YACxBH,EAAK,IAAMC,EAAa,aAAeE,IAC1CX,EACCQ,EAAK,KAAOA,EAAK,IAAMC,EAAa,aAAeE,GAAgB,IAErEV,EAAOD,CAAG,CACX,EAWA,OATAY,EAAAA,UAAU,IAAM,CACf,GAAIf,EAAM,WAAW,QAAS,CAC7B,MAAMW,EAAOX,EAAM,WAAW,QAAQ,sBAAA,EACtCU,EAAcC,CAAI,EAClBE,EAAaF,CAAI,EACjBF,EAAQ,EAAI,CACb,CACD,CAAC,EAEID,EAKJQ,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,IAAAb,EACA,KAAAG,EACA,SAAU,QACV,OAAQ,GAAA,EAGT,SAAAU,EAAAA,IAAC,MAAA,CAAI,IAAKf,EAAW,WAAM,QAAA,CAAS,CAAA,CAAA,~~EAZ9B~~,~~IAeT~~"}
1	+ {"version":3,"file":"floater.js","sources":["../../../../src/components/floater/floater.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport type FloaterProps = {\n\tchildren?: React.ReactNode;\n\trefElement: React.MutableRefObject<any>;\n\tleftOffset?: number;\n\ttopOffset?: number;\n\tuseDefaultOffsets?: boolean;\n};\n\nexport const Floater = (props: FloaterProps) => {\n\tconst childRef = useRef<HTMLDivElement \| null>(null);\n\tconst [top, setTop] = useState<number>(0);\n\tconst [left, setLeft] = useState<number>(0);\n\tconst [show, setShow] = useState<boolean>(false);\n\n\tconst calculateLeft = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetLeft(rect.left);\n\t\t\treturn;\n\t\t}\n\n\t\tlet left = 0;\n\t\tif (props.leftOffset) {\n\t\t\tleft = rect.left + props.leftOffset;\n\t\t} else {\n\t\t\tleft = rect.left + rect.width + 30;\n\t\t}\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetLeft(left);\n\t\t\treturn;\n\t\t}\n\t\tif (left > window.innerWidth - childElement.offsetWidth) {\n\t\t\tleft = window.innerWidth - childElement.offsetWidth - 50;\n\t\t}\n\t\tsetLeft(left);\n\t};\n\n\tconst calculateTop = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetTop(rect.top);\n\t\t\treturn;\n\t\t}\n\t\tlet top: number = rect.top;\n\n\t\tif (props.topOffset) {\n\t\t\ttop = rect.top + props.topOffset;\n\t\t}\n\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetTop(top);\n\t\t\treturn;\n\t\t}\n\t\tconst windowHeight = window.innerHeight;\n\t\tif (rect.top + childElement.offsetHeight > windowHeight) {\n\t\t\ttop =\n\t\t\t\trect.top - (rect.top + childElement.offsetHeight - windowHeight) - 10;\n\t\t}\n\t\tsetTop(top);\n\t};\n\n\tuseEffect(() => {\n\t\tif (props.refElement.current) {\n\t\t\tconst rect = props.refElement.current.getBoundingClientRect();\n\t\t\tcalculateLeft(rect);\n\t\t\tcalculateTop(rect);\n\t\t\tsetShow(true);\n\t\t}\n\t});\n\n\tif (!show) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"floater-position\"\n\t\t\tstyle={{\n\t\t\t\ttop: top,\n\t\t\t\tleft: left,\n\t\t\t\tposition: 'fixed',\n\t\t\t\tzIndex: 1000,\n\t\t\t}}\n\t\t>\n\t\t\t<div ref={childRef}>{props.children}</div>\n\t\t</div>\n\t);\n};\n"],"names":["Floater","props","childRef","useRef","top","setTop","useState","left","setLeft","show","setShow","calculateLeft","rect","childElement","calculateTop","windowHeight","useEffect","jsx"],"mappings":"wIAUaA,EAAWC,GAAwB,CAC/C,MAAMC,EAAWC,EAAAA,OAA8B,IAAI,EAC7C,CAACC,EAAKC,CAAM,EAAIC,EAAAA,SAAiB,CAAC,EAClC,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAAiB,CAAC,EACpC,CAACG,EAAMC,CAAO,EAAIJ,EAAAA,SAAkB,EAAK,EAEzCK,EAAiBC,GAAkB,CACxC,GAAIX,EAAM,kBAAmB,CAC5BO,EAAQI,EAAK,IAAI,EACjB,MACD,CAEA,IAAIL,EAAO,EACPN,EAAM,WACTM,EAAOK,EAAK,KAAOX,EAAM,WAEzBM,EAAOK,EAAK,KAAOA,EAAK,MAAQ,GAEjC,MAAMC,EAAoBX,GAAU,QACpC,GAAI,CAACW,EAAc,CAClBL,EAAQD,CAAI,EACZ,MACD,CACIA,EAAO,OAAO,WAAaM,EAAa,cAC3CN,EAAO,OAAO,WAAaM,EAAa,YAAc,IAEvDL,EAAQD,CAAI,CACb,EAEMO,EAAgBF,GAAkB,CACvC,GAAIX,EAAM,kBAAmB,CAC5BI,EAAOO,EAAK,GAAG,EACf,MACD,CACA,IAAIR,EAAcQ,EAAK,IAEnBX,EAAM,YACTG,EAAMQ,EAAK,IAAMX,EAAM,WAGxB,MAAMY,EAAoBX,GAAU,QACpC,GAAI,CAACW,EAAc,CAClBR,EAAOD,CAAG,EACV,MACD,CACA,MAAMW,EAAe,OAAO,YACxBH,EAAK,IAAMC,EAAa,aAAeE,IAC1CX,EACCQ,EAAK,KAAOA,EAAK,IAAMC,EAAa,aAAeE,GAAgB,IAErEV,EAAOD,CAAG,CACX,EAWA,OATAY,EAAAA,UAAU,IAAM,CACf,GAAIf,EAAM,WAAW,QAAS,CAC7B,MAAMW,EAAOX,EAAM,WAAW,QAAQ,sBAAA,EACtCU,EAAcC,CAAI,EAClBE,EAAaF,CAAI,EACjBF,EAAQ,EAAI,CACb,CACD,CAAC,EAEID,EAKJQ,EAAAA,IAAC,MAAA,CACA,cAAY,mBACZ,MAAO,CACN,IAAAb,EACA,KAAAG,EACA,SAAU,QACV,OAAQ,GAAA,EAGT,SAAAU,EAAAA,IAAC,MAAA,CAAI,IAAKf,EAAW,WAAM,QAAA,CAAS,CAAA,CAAA,EAb9B,IAgBT"}

package/dist/cjs/components/modals/styledModal.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_back.svg.js"),c=require("react-dom"),u=require("styled-components"),h=require("./Modal.js"),i=require("../TypographyStyle.js"),d=require("../../constants/Theme.js"),a=require("../button/Button.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=o(c),n=o(u),x=n.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("../../assets/icons/arrow_back.svg.js"),r=require("react-dom"),u=require("styled-components"),h=require("./Modal.js"),i=require("../TypographyStyle.js"),d=require("../../constants/Theme.js"),a=require("../button/Button.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=o(r),n=o(u),x=n.default.div`
 	display: flex;
 	flex-direction: column;
 	flex: 1;
@@ -44,5 +44,5 @@
 	box-shadow: ${e=>e.showShadow?"inset 0 -3px 6px rgba(0, 0, 0, 0.12)":"none"};
 `,w=n.default(a.Button)`
 	margin-right: 8px;
-`,B=e=>typeof window>"u"?null:f.default.createPortal(t.jsx(h.Modal,{"data-test":e["data-test"],id:e.id,zIndex:e.zIndex,open:e.open,onClose:e.onClose,closeOnOutsideClick:e.closeOnOutsideClick,closeOnEscapeKey:e.closeOnEscapeKey,centralContainerStyles:e.centralContainerStyles,hideCrossButton:e.hideCrossButton,width:e.width,skipModalWithTimer:e.skipModalWithTimer,timeOut:e.timeOut,children:t.jsxs(x,{style:e.wrapperStyle??{},id:e.innerModalId,children:[(e.headingTitle||e.headingSubtitle||e.headerRightCustomElement)&&t.jsxs(y,{style:e.modalHeaderStyles??{},tintedHeader:e.tintedHeader??!1,children:[e.onBackPress&&t.jsx("div",{style:{cursor:"pointer"},onClick:r=>{e.onBackPress?e.onBackPress():r.stopPropagation()},children:t.jsx(s.default,{width:18,height:18})}),t.jsxs("div",{style:{flex:1},children:[t.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[t.jsxs(l,{children:[" ",e.headingTitle&&t.jsx(i.TitleMedium,{children:e.headingTitle})," "]}),e.isBeta&&t.jsx("div",{style:{padding:"2px 8px",borderRadius:"16px",backgroundColor:"#1877f2",height:"fit-content",width:"fit-content"},children:t.jsx(i.BodyCaption,{style:{color:d.COLORS.surface.standard},children:"BETA"})}),e.headerLeftCustomElement]}),t.jsxs(l,{children:[" ",e.headingSubtitle&&t.jsx(g,{children:e.headingSubtitle})," "]})]}),e.headerRightCustomElement&&t.jsxs(m,{children:[" ",e.headerRightCustomElement," "]})," "]}),e.children&&t.jsxs(S,{style:e.modalBodyStyles??{},showShadow:e.footerShadow??!1,children:[e.children," "]}),(e.primaryButton||e.secondaryButton||e.footerLeftCustomElement)&&t.jsxs(j,{style:e.footerContainerStyle,children:[e.footerLeftCustomElement&&t.jsx(C,{children:e.footerLeftCustomElement}),e.secondaryButton&&t.jsx(w,{...e.secondaryButton}),e.primaryButton&&t.jsx(a.Button,{...e.primaryButton})]})," "]})}),document.body);exports.StyledModal=B;
+`,B=e=>typeof window>"u"?null:f.default.createPortal(t.jsx(h.Modal,{"data-test":e["data-test"],id:e.id,zIndex:e.zIndex,open:e.open,onClose:e.onClose,closeOnOutsideClick:e.closeOnOutsideClick,closeOnEscapeKey:e.closeOnEscapeKey,centralContainerStyles:e.centralContainerStyles,hideCrossButton:e.hideCrossButton,width:e.width,skipModalWithTimer:e.skipModalWithTimer,timeOut:e.timeOut,children:t.jsxs(x,{style:e.wrapperStyle??{},id:e.innerModalId,children:[(e.headingTitle||e.headingSubtitle||e.headerRightCustomElement)&&t.jsxs(y,{style:e.modalHeaderStyles??{},tintedHeader:e.tintedHeader??!1,children:[e.onBackPress&&t.jsx("div",{"data-test":(e["data-test"]||"")+"-back-button",style:{cursor:"pointer"},onClick:s=>{e.onBackPress?e.onBackPress():s.stopPropagation()},children:t.jsx(c.default,{width:18,height:18})}),t.jsxs("div",{style:{flex:1},children:[t.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[t.jsxs(l,{children:[" ",e.headingTitle&&t.jsx(i.TitleMedium,{children:e.headingTitle})," "]}),e.isBeta&&t.jsx("div",{style:{padding:"2px 8px",borderRadius:"16px",backgroundColor:"#1877f2",height:"fit-content",width:"fit-content"},children:t.jsx(i.BodyCaption,{style:{color:d.COLORS.surface.standard},children:"BETA"})}),e.headerLeftCustomElement]}),t.jsxs(l,{children:[" ",e.headingSubtitle&&t.jsx(g,{children:e.headingSubtitle})," "]})]}),e.headerRightCustomElement&&t.jsxs(m,{children:[" ",e.headerRightCustomElement," "]})," "]}),e.children&&t.jsxs(S,{style:e.modalBodyStyles??{},showShadow:e.footerShadow??!1,children:[e.children," "]}),(e.primaryButton||e.secondaryButton||e.footerLeftCustomElement)&&t.jsxs(j,{style:e.footerContainerStyle,children:[e.footerLeftCustomElement&&t.jsx(C,{children:e.footerLeftCustomElement}),e.secondaryButton&&t.jsx(w,{...e.secondaryButton}),e.primaryButton&&t.jsx(a.Button,{...e.primaryButton})]})," "]})}),document.body);exports.StyledModal=B;
 //# sourceMappingURL=styledModal.js.map

package/dist/cjs/components/modals/styledModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styledModal.js","sources":["../../../../src/components/modals/styledModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Modal } from '@src/components/modals/Modal';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tTitleMedium,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\n\nconst ModalWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\talign-items: flex-start;\n\toverflow: hidden;\n\tmax-width: 100%;\n`;\nconst ModalHeader = styled.div<{\n\ttintedHeader: boolean;\n}>`\n\tpadding: 16px 24px;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: center;\n\tbackground-color: ${(props) =>\n\t\tprops.tintedHeader ? COLORS.background.warning.light : 'transparent'};\n\tborder-top-left-radius: ${(props) => (props.tintedHeader ? '4px' : 'none')};\n`;\n\nconst ModalTitles = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nconst ModalCustomisation = styled.div`\n\tdisplay: flex;\n\tmargin-left: auto;\n\tjustify-content: flex-end;\n\talign-items: center;\n`;\n\nconst ModalSubtitle = styled(BodyPrimary)`\n\tmargin-top: 4px;\n\tcolor: ${COLORS.content.secondary} !important;\n`;\n\nconst ModalFooter = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: end;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nconst ModalFooterRightCustomisation = styled.div`\n\tmargin-right: auto;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: calc(100% - 32px);\n`;\n\nconst ModalBody = styled.div<{\n\tshowShadow: boolean;\n}>`\n\twidth: 100%;\n\tz-index: 1;\n\tbox-shadow: ${(props) =>\n\t\tprops.showShadow ? 'inset 0 -3px 6px rgba(0, 0, 0, 0.12)' : 'none'};\n`;\nconst SecondaryButtonWrapper = styled(Button)`\n\tmargin-right: 8px;\n`;\nexport const StyledModal: React.FC<{\n\t'data-test'?: string;\n\topen: boolean;\n\tonClose?: () => void;\n\tchildren?: React.ReactNode;\n\tcentralContainerStyles?: React.CSSProperties;\n\tcloseOnOutsideClick?: boolean;\n\tcloseOnEscapeKey?: boolean;\n\theadingTitle?: string;\n\theadingSubtitle?: string;\n\ttintedHeader?: boolean;\n\tprimaryButton?: ButtonProps;\n\tsecondaryButton?: ButtonProps;\n\tfooterShadow?: boolean;\n\tfooterLeftCustomElement?: React.ReactNode;\n\theaderLeftCustomElement?: React.ReactNode;\n\theaderRightCustomElement?: React.ReactNode;\n\tzIndex?: number;\n\thideCrossButton?: boolean;\n\twidth?: string;\n\twrapperStyle?: React.CSSProperties;\n\tonBackPress?: () => void;\n\tfooterContainerStyle?: React.CSSProperties;\n\tid?: string;\n\tmodalHeaderStyles?: React.CSSProperties;\n\tinnerModalId?: string;\n\tisBeta?: boolean;\n\tmodalBodyStyles?: React.CSSProperties;\n\tskipModalWithTimer?: boolean;\n\ttimeOut?: number;\n}> = (props) => {\n\tif (typeof window === 'undefined') return null;\n\n\treturn ReactDOM.createPortal(\n\t\t<Modal\n\t\t\tdata-test={props['data-test']}\n\t\t\tid={props.id}\n\t\t\tzIndex={props.zIndex}\n\t\t\topen={props.open}\n\t\t\tonClose={props.onClose}\n\t\t\tcloseOnOutsideClick={props.closeOnOutsideClick}\n\t\t\tcloseOnEscapeKey={props.closeOnEscapeKey}\n\t\t\tcentralContainerStyles={props.centralContainerStyles}\n\t\t\thideCrossButton={props.hideCrossButton}\n\t\t\twidth={props.width}\n\t\t\tskipModalWithTimer={props.skipModalWithTimer}\n\t\t\ttimeOut={props.timeOut}\n\t\t>\n\t\t\t<ModalWrapper style={props.wrapperStyle ?? {}} id={props.innerModalId}>\n\t\t\t\t{(props.headingTitle \|\|\n\t\t\t\t\tprops.headingSubtitle \|\|\n\t\t\t\t\tprops.headerRightCustomElement) && (\n\t\t\t\t\t<ModalHeader\n\t\t\t\t\t\tstyle={props.modalHeaderStyles ?? {}}\n\t\t\t\t\t\ttintedHeader={props.tintedHeader ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.onBackPress && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tprops.onBackPress ? props.onBackPress() : e.stopPropagation();\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<BackIcon width={18} height={18} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tgap: '8px',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\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<ModalTitles>\n\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t{props.headingTitle && (\n\t\t\t\t\t\t\t\t\t\t<TitleMedium>{props.headingTitle}</TitleMedium>\n\t\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t\t\t{props.isBeta && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#1877f2',\n\t\t\t\t\t\t\t\t\t\t\theight: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.surface.standard }}>\n\t\t\t\t\t\t\t\t\t\t\tBETA\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.headerLeftCustomElement}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headingSubtitle && (\n\t\t\t\t\t\t\t\t\t<ModalSubtitle>{props.headingSubtitle}</ModalSubtitle>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props.headerRightCustomElement && (\n\t\t\t\t\t\t\t<ModalCustomisation>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headerRightCustomElement}{' '}\n\t\t\t\t\t\t\t</ModalCustomisation>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t</ModalHeader>\n\t\t\t\t)}\n\t\t\t\t{props.children && (\n\t\t\t\t\t<ModalBody\n\t\t\t\t\t\tstyle={props.modalBodyStyles ?? {}}\n\t\t\t\t\t\tshowShadow={props.footerShadow ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.children}{' '}\n\t\t\t\t\t</ModalBody>\n\t\t\t\t)}\n\t\t\t\t{(props.primaryButton \|\|\n\t\t\t\t\tprops.secondaryButton \|\|\n\t\t\t\t\tprops.footerLeftCustomElement) && (\n\t\t\t\t\t<ModalFooter style={props.footerContainerStyle}>\n\t\t\t\t\t\t{props.footerLeftCustomElement && (\n\t\t\t\t\t\t\t<ModalFooterRightCustomisation>\n\t\t\t\t\t\t\t\t{props.footerLeftCustomElement}\n\t\t\t\t\t\t\t</ModalFooterRightCustomisation>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.secondaryButton && (\n\t\t\t\t\t\t\t<SecondaryButtonWrapper {...props.secondaryButton} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.primaryButton && <Button {...props.primaryButton} />}\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</ModalWrapper>\n\t\t</Modal>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["ModalWrapper","styled","ModalHeader","props","COLORS","ModalTitles","ModalCustomisation","ModalSubtitle","BodyPrimary","ModalFooter","ModalFooterRightCustomisation","ModalBody","SecondaryButtonWrapper","Button","StyledModal","ReactDOM","jsx","Modal","jsxs","e","BackIcon","TitleMedium","BodyCaption"],"mappings":"qaAcMA,EAAeC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQtBC,EAAcD,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBASLE,GACpBA,EAAM,aAAeC,EAAAA,OAAO,WAAW,QAAQ,MAAQ,aAAa;AAAA,2BAC1CD,GAAWA,EAAM,aAAe,MAAQ,MAAO;AAAA,EAGrEE,EAAcJ,EAAAA,QAAO;AAAA;AAAA;AAAA,EAKrBK,EAAqBL,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5BM,EAAgBN,EAAAA,QAAOO,aAAW;AAAA;AAAA,UAE9BJ,EAAAA,OAAO,QAAQ,SAAS;AAAA,EAG5BK,EAAcR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASrBS,EAAgCT,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQvCU,EAAYV,EAAAA,QAAO;AAAA;AAAA;AAAA,eAKTE,GACdA,EAAM,WAAa,uCAAyC,MAAM;AAAA,EAE9DS,EAAyBX,EAAAA,QAAOY,QAAM;AAAA;AAAA,EAG/BC,EA8BPX,GACD,OAAO,OAAW,IAAoB,KAEnCY,EAAAA,QAAS,aACfC,EAAAA,IAACC,EAAAA,MAAA,CACA,YAAWd,EAAM,WAAW,EAC5B,GAAIA,EAAM,GACV,OAAQA,EAAM,OACd,KAAMA,EAAM,KACZ,QAASA,EAAM,QACf,oBAAqBA,EAAM,oBAC3B,iBAAkBA,EAAM,iBACxB,uBAAwBA,EAAM,uBAC9B,gBAAiBA,EAAM,gBACvB,MAAOA,EAAM,MACb,mBAAoBA,EAAM,mBAC1B,QAASA,EAAM,QAEf,SAAAe,EAAAA,KAAClB,GAAa,MAAOG,EAAM,cAAgB,CAAA,EAAI,GAAIA,EAAM,aACtD,SAAA,EAAAA,EAAM,cACPA,EAAM,iBACNA,EAAM,2BACNe,EAAAA,KAAChB,EAAA,CACA,MAAOC,EAAM,mBAAqB,CAAA,EAClC,aAAcA,EAAM,cAAgB,GAEnC,SAAA,CAAAA,EAAM,aACNa,EAAAA,IAAC,MAAA,CACA,MAAO,CAAE,OAAQ,SAAA,EACjB,~~QAAUG~~,GAAM,CACfhB,EAAM,YAAcA,EAAM,YAAA,EAAgBgB,EAAE,gBAAA,CAC7C,EAEA,SAAAH,EAAAA,IAACI,UAAA,CAAS,MAAO,GAAI,OAAQ,EAAA,CAAI,CAAA,CAAA,SAGlC,MAAA,CAAI,MAAO,CAAE,KAAM,GACnB,SAAA,CAAAF,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,IAAK,MACL,WAAY,QAAA,EAGb,SAAA,CAAAA,OAACb,EAAA,CACC,SAAA,CAAA,IACAF,EAAM,cACNa,MAACK,EAAAA,YAAA,CAAa,WAAM,aAAa,EAC/B,GAAA,EACJ,EACClB,EAAM,QACNa,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,QAAS,UACT,aAAc,OACd,gBAAiB,UACjB,OAAQ,cACR,MAAO,aAAA,EAGR,SAAAA,EAAAA,IAACM,eAAY,MAAO,CAAE,MAAOlB,EAAAA,OAAO,QAAQ,UAAY,SAAA,MAAA,CAExD,CAAA,CAAA,EAGDD,EAAM,uBAAA,CAAA,CAAA,SAEPE,EAAA,CACC,SAAA,CAAA,IACAF,EAAM,iBACNa,MAACT,EAAA,CAAe,WAAM,gBAAgB,EACpC,GAAA,CAAA,CACJ,CAAA,EACD,EACCJ,EAAM,0BACNe,EAAAA,KAACZ,EAAA,CACC,SAAA,CAAA,IACAH,EAAM,yBAA0B,GAAA,EAClC,EACE,GAAA,CAAA,CAAA,EAGJA,EAAM,UACNe,EAAAA,KAACP,EAAA,CACA,MAAOR,EAAM,iBAAmB,CAAA,EAChC,WAAYA,EAAM,cAAgB,GAEjC,SAAA,CAAAA,EAAM,SAAU,GAAA,CAAA,CAAA,GAGjBA,EAAM,eACPA,EAAM,iBACNA,EAAM,0BACNe,EAAAA,KAACT,EAAA,CAAY,MAAON,EAAM,qBACxB,SAAA,CAAAA,EAAM,yBACNa,MAACN,EAAA,CACC,SAAAP,EAAM,wBACR,EAEAA,EAAM,iBACNa,MAACJ,EAAA,CAAwB,GAAGT,EAAM,gBAAiB,EAEnDA,EAAM,eAAiBa,EAAAA,IAACH,EAAAA,OAAA,CAAQ,GAAGV,EAAM,aAAA,CAAe,CAAA,EAC1D,EACE,GAAA,CAAA,CACJ,CAAA,CAAA,EAED,SAAS,IAAA"}
1	+ {"version":3,"file":"styledModal.js","sources":["../../../../src/components/modals/styledModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Modal } from '@src/components/modals/Modal';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tTitleMedium,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\n\nconst ModalWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\talign-items: flex-start;\n\toverflow: hidden;\n\tmax-width: 100%;\n`;\nconst ModalHeader = styled.div<{\n\ttintedHeader: boolean;\n}>`\n\tpadding: 16px 24px;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: center;\n\tbackground-color: ${(props) =>\n\t\tprops.tintedHeader ? COLORS.background.warning.light : 'transparent'};\n\tborder-top-left-radius: ${(props) => (props.tintedHeader ? '4px' : 'none')};\n`;\n\nconst ModalTitles = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nconst ModalCustomisation = styled.div`\n\tdisplay: flex;\n\tmargin-left: auto;\n\tjustify-content: flex-end;\n\talign-items: center;\n`;\n\nconst ModalSubtitle = styled(BodyPrimary)`\n\tmargin-top: 4px;\n\tcolor: ${COLORS.content.secondary} !important;\n`;\n\nconst ModalFooter = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: end;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nconst ModalFooterRightCustomisation = styled.div`\n\tmargin-right: auto;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: calc(100% - 32px);\n`;\n\nconst ModalBody = styled.div<{\n\tshowShadow: boolean;\n}>`\n\twidth: 100%;\n\tz-index: 1;\n\tbox-shadow: ${(props) =>\n\t\tprops.showShadow ? 'inset 0 -3px 6px rgba(0, 0, 0, 0.12)' : 'none'};\n`;\nconst SecondaryButtonWrapper = styled(Button)`\n\tmargin-right: 8px;\n`;\nexport const StyledModal: React.FC<{\n\t'data-test'?: string;\n\topen: boolean;\n\tonClose?: () => void;\n\tchildren?: React.ReactNode;\n\tcentralContainerStyles?: React.CSSProperties;\n\tcloseOnOutsideClick?: boolean;\n\tcloseOnEscapeKey?: boolean;\n\theadingTitle?: string;\n\theadingSubtitle?: string;\n\ttintedHeader?: boolean;\n\tprimaryButton?: ButtonProps;\n\tsecondaryButton?: ButtonProps;\n\tfooterShadow?: boolean;\n\tfooterLeftCustomElement?: React.ReactNode;\n\theaderLeftCustomElement?: React.ReactNode;\n\theaderRightCustomElement?: React.ReactNode;\n\tzIndex?: number;\n\thideCrossButton?: boolean;\n\twidth?: string;\n\twrapperStyle?: React.CSSProperties;\n\tonBackPress?: () => void;\n\tfooterContainerStyle?: React.CSSProperties;\n\tid?: string;\n\tmodalHeaderStyles?: React.CSSProperties;\n\tinnerModalId?: string;\n\tisBeta?: boolean;\n\tmodalBodyStyles?: React.CSSProperties;\n\tskipModalWithTimer?: boolean;\n\ttimeOut?: number;\n}> = (props) => {\n\tif (typeof window === 'undefined') return null;\n\n\treturn ReactDOM.createPortal(\n\t\t<Modal\n\t\t\tdata-test={props['data-test']}\n\t\t\tid={props.id}\n\t\t\tzIndex={props.zIndex}\n\t\t\topen={props.open}\n\t\t\tonClose={props.onClose}\n\t\t\tcloseOnOutsideClick={props.closeOnOutsideClick}\n\t\t\tcloseOnEscapeKey={props.closeOnEscapeKey}\n\t\t\tcentralContainerStyles={props.centralContainerStyles}\n\t\t\thideCrossButton={props.hideCrossButton}\n\t\t\twidth={props.width}\n\t\t\tskipModalWithTimer={props.skipModalWithTimer}\n\t\t\ttimeOut={props.timeOut}\n\t\t>\n\t\t\t<ModalWrapper style={props.wrapperStyle ?? {}} id={props.innerModalId}>\n\t\t\t\t{(props.headingTitle \|\|\n\t\t\t\t\tprops.headingSubtitle \|\|\n\t\t\t\t\tprops.headerRightCustomElement) && (\n\t\t\t\t\t<ModalHeader\n\t\t\t\t\t\tstyle={props.modalHeaderStyles ?? {}}\n\t\t\t\t\t\ttintedHeader={props.tintedHeader ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.onBackPress && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tdata-test={(props['data-test'] \|\| '') + '-back-button'}\n\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tprops.onBackPress ? props.onBackPress() : e.stopPropagation();\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<BackIcon width={18} height={18} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tgap: '8px',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\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<ModalTitles>\n\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t{props.headingTitle && (\n\t\t\t\t\t\t\t\t\t\t<TitleMedium>{props.headingTitle}</TitleMedium>\n\t\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t\t\t{props.isBeta && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#1877f2',\n\t\t\t\t\t\t\t\t\t\t\theight: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.surface.standard }}>\n\t\t\t\t\t\t\t\t\t\t\tBETA\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.headerLeftCustomElement}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headingSubtitle && (\n\t\t\t\t\t\t\t\t\t<ModalSubtitle>{props.headingSubtitle}</ModalSubtitle>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props.headerRightCustomElement && (\n\t\t\t\t\t\t\t<ModalCustomisation>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headerRightCustomElement}{' '}\n\t\t\t\t\t\t\t</ModalCustomisation>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t</ModalHeader>\n\t\t\t\t)}\n\t\t\t\t{props.children && (\n\t\t\t\t\t<ModalBody\n\t\t\t\t\t\tstyle={props.modalBodyStyles ?? {}}\n\t\t\t\t\t\tshowShadow={props.footerShadow ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.children}{' '}\n\t\t\t\t\t</ModalBody>\n\t\t\t\t)}\n\t\t\t\t{(props.primaryButton \|\|\n\t\t\t\t\tprops.secondaryButton \|\|\n\t\t\t\t\tprops.footerLeftCustomElement) && (\n\t\t\t\t\t<ModalFooter style={props.footerContainerStyle}>\n\t\t\t\t\t\t{props.footerLeftCustomElement && (\n\t\t\t\t\t\t\t<ModalFooterRightCustomisation>\n\t\t\t\t\t\t\t\t{props.footerLeftCustomElement}\n\t\t\t\t\t\t\t</ModalFooterRightCustomisation>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.secondaryButton && (\n\t\t\t\t\t\t\t<SecondaryButtonWrapper {...props.secondaryButton} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.primaryButton && <Button {...props.primaryButton} />}\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</ModalWrapper>\n\t\t</Modal>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["ModalWrapper","styled","ModalHeader","props","COLORS","ModalTitles","ModalCustomisation","ModalSubtitle","BodyPrimary","ModalFooter","ModalFooterRightCustomisation","ModalBody","SecondaryButtonWrapper","Button","StyledModal","ReactDOM","jsx","Modal","jsxs","e","BackIcon","TitleMedium","BodyCaption"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),y=require("react"),o=require("../TypographyStyle.js"),r=require("../../constants/Theme.js"),i=require("./Pagination.styled.js"),s=y.forwardRef(({id:a,onShowMore:t,isLoading:l,numberOfItemsLoaded:c,totalNumberOfItems:e,...d})=>n.jsx(i.Pagination,{id:a,...d,children:l?n.jsx(n.Fragment,{children:"loading..."}):n.jsx("div",{children:c<e?n.jsxs(i.Pagination,{children:[n.jsxs(o.BodySecondary,{style:{color:r.COLORS.content.secondary},children:["Showing ",c," out of ",e," ","results"]}),n.jsx(o.ButtonRegular,{style:{color:r.COLORS.content.brand,cursor:"pointer"},onClick:()=>t&&t(),children:"Show more"})]}):n.jsx(i.Pagination,{children:n.jsxs(o.BodySecondary,{style:{color:r.COLORS.content.secondary},children:["Showing all ",e," results"]})})})}));s.displayName="Pagination";exports.Pagination=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),y=require("react"),o=require("../TypographyStyle.js"),r=require("../../constants/Theme.js"),i=require("./Pagination.styled.js"),c=y.forwardRef(({id:t,onShowMore:s,isLoading:l,numberOfItemsLoaded:a,totalNumberOfItems:e,...d})=>n.jsx(i.Pagination,{id:t,"data-testid":t,...d,children:l?n.jsx(n.Fragment,{children:"loading..."}):n.jsx("div",{children:a<e?n.jsxs(i.Pagination,{children:[n.jsxs(o.BodySecondary,{style:{color:r.COLORS.content.secondary},children:["Showing ",a," out of ",e," ","results"]}),n.jsx(o.ButtonRegular,{style:{color:r.COLORS.content.brand,cursor:"pointer"},onClick:()=>s&&s(),children:"Show more"})]}):n.jsx(i.Pagination,{children:n.jsxs(o.BodySecondary,{style:{color:r.COLORS.content.secondary},children:["Showing all ",e," results"]})})})}));c.displayName="Pagination";exports.Pagination=c;
 //# sourceMappingURL=Pagination.js.map

package/dist/cjs/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":"qPAaaA,EAAaC,EAAAA,WACzB,CAAC,CACA,GAAAC,EACA,WAAAC,EACA,UAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,GAAGC,CAAA,~~UAGDC~~,EAAAA,WAAA,CAAc,~~GAAAN~~,~~EAAS~~,GAAGK,~~EACzB~~,SAAAH,oBAEE,SAAA,YAAA,CAAU,QAEX,MAAA,CACC,SAAAC,EAAsBC,~~EACtBG~~,EAAAA,KAACD,aAAA,CACA,SAAA,CAAAC,OAACC,EAAAA,eAAc,MAAO,CAAE,MAAOC,EAAAA,OAAO,QAAQ,WAAa,SAAA,CAAA,~~WACjDN~~,EAAoB,WAASC,EAAoB,IAAI,SAAA,EAE/D,~~EACAM~~,EAAAA,~~IAACC~~,EAAAA,cAAA,CACA,MAAO,CAAE,~~MAAOF~~,EAAAA,OAAO,QAAQ,MAAO,OAAQ,SAAA,EAC9C,QAAS,~~IAAMR~~,GAAcA,EAAA,EAC7B,SAAA,WAAA,CAAA,CAED,CAAA,CACD,~~EAEAS~~,EAAAA,~~IAACJ~~,EAAAA,WAAA,CACA,SAAAC,EAAAA,KAACC,EAAAA,cAAA,CAAc,MAAO,CAAE,MAAOC,EAAAA,OAAO,QAAQ,WAAa,SAAA,CAAA,~~eAC7CL~~,EAAmB,UAAA,EACjC,CAAA,CACD,EAEF,EAEF,CAGH,EAEAN,EAAW,YAAc"}
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":"qPAaaA,EAAaC,EAAAA,WACzB,CAAC,CACA,GAAAC,EACA,WAAAC,EACA,UAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,GAAGC,CAAA,IAGFC,EAAAA,IAACC,EAAAA,WAAA,CAAc,GAAAP,EAAQ,cAAaA,EAAK,GAAGK,EAC1C,SAAAH,oBAEE,SAAA,YAAA,CAAU,QAEX,MAAA,CACC,SAAAC,EAAsBC,EACtBI,EAAAA,KAACD,aAAA,CACA,SAAA,CAAAC,OAACC,EAAAA,eAAc,MAAO,CAAE,MAAOC,EAAAA,OAAO,QAAQ,WAAa,SAAA,CAAA,WACjDP,EAAoB,WAASC,EAAoB,IAAI,SAAA,EAE/D,EACAE,EAAAA,IAACK,EAAAA,cAAA,CACA,MAAO,CAAE,MAAOD,EAAAA,OAAO,QAAQ,MAAO,OAAQ,SAAA,EAC9C,QAAS,IAAMT,GAAcA,EAAA,EAC7B,SAAA,WAAA,CAAA,CAED,CAAA,CACD,EAEAK,EAAAA,IAACC,EAAAA,WAAA,CACA,SAAAC,EAAAA,KAACC,EAAAA,cAAA,CAAc,MAAO,CAAE,MAAOC,EAAAA,OAAO,QAAQ,WAAa,SAAA,CAAA,eAC7CN,EAAmB,UAAA,EACjC,CAAA,CACD,EAEF,EAEF,CAGH,EAEAN,EAAW,YAAc"}

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

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

package/dist/cjs/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":"sMAIMA,EAID,CAAC,CAAE,WAAAC,EAAY,MAAAC,EAAQ,IAAK,eAAAC,KAAqB,CACrD,MAAMC,EACLH,EAAa,EAAI,EAAIA,EAAa,IAAM,IAAMA,EACzCI,EAASH,EAAQ,EAAIA,EAAQ,GAC7BI,EAAYD,EAAS,KAAK,GAAK,EAC/BE,EAAaD,EAAaA,EAAYF,EAAqB,IAC3DI,EAAcN,EAAQ,GACtBO,EAAiBP,EAAQ,EAC/B,OACCQ,EAAAA,IAAC,MAAA,CAAI,MAAOP,~~EACX~~,~~gBAAC~~,MAAA,~~CAAI~~,~~MAAAD~~,~~EAAc~~,OAAQA,~~EAAO~~,QAAS,OAAOA,CAAK,IAAIA,CAAK,~~GAC/D~~,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACA,SAAAC,EAAAA,KAAC,iBAAA,CAAe,GAAG,iBAAiB,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,KAChE,SAAA,CAAAD,EAAAA,IAAC,OAAA,CAAK,OAAO,KAAK,UAAU,UAAU,EACtCA,EAAAA,IAAC,OAAA,CAAK,OAAO,OAAO,UAAU,SAAA,CAAU,CAAA,CAAA,CACzC,CAAA,CACD,EACAA,EAAAA,IAAC,SAAA,CACA,GAAIR,EAAQ,EACZ,GAAIA,EAAQ,EACZ,YAAAM,EACA,EAAGH,EACH,cAAe,GACf,KAAM,OACN,MAAO,CACN,OAAQ,SAAA,~~CACT~~,CAAA,~~EAEDK~~,EAAAA,IAAC,SAAA,CACA,GAAIR,EAAQ,EACZ,GAAIA,EAAQ,EACZ,YAAAM,EACA,EAAGH,EACH,MAAO,CACN,OAAQ,uBACR,gBAAiBC,EACjB,iBAAkBC,CAAA,EAEnB,UAAW,cAAcL,EAAQ,CAAC,IAAIA,EAAQ,CAAC,IAC/C,KAAM,OACN,cAAe,QACf,eAAgB,~~OAAA~~,CAAA,~~EAEjBQ~~,EAAAA,IAACE,EAAAA,QAAA,CACA,EAAGV,EAAQ,EAAIO,EAAiB,EAChC,MAAOA,CAAA,CAAA,CACR,CAAA,~~CACD,~~CAAA,~~CACD~~,CAEF"}
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":"sMAIMA,EAID,CAAC,CAAE,WAAAC,EAAY,MAAAC,EAAQ,IAAK,eAAAC,KAAqB,CACrD,MAAMC,EACLH,EAAa,EAAI,EAAIA,EAAa,IAAM,IAAMA,EACzCI,EAASH,EAAQ,EAAIA,EAAQ,GAC7BI,EAAYD,EAAS,KAAK,GAAK,EAC/BE,EAAaD,EAAaA,EAAYF,EAAqB,IAC3DI,EAAcN,EAAQ,GACtBO,EAAiBP,EAAQ,EAC/B,OACCQ,EAAAA,IAAC,MAAA,CAAI,MAAOP,EAAgB,cAAY,8BACvC,SAAAQ,EAAAA,KAAC,MAAA,CACA,MAAAT,EACA,OAAQA,EACR,QAAS,OAAOA,CAAK,IAAIA,CAAK,GAC9B,cAAY,wBAEZ,SAAA,CAAAQ,EAAAA,IAAC,OAAA,CACA,SAAAC,EAAAA,KAAC,iBAAA,CAAe,GAAG,iBAAiB,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,KAChE,SAAA,CAAAD,EAAAA,IAAC,OAAA,CAAK,OAAO,KAAK,UAAU,UAAU,EACtCA,EAAAA,IAAC,OAAA,CAAK,OAAO,OAAO,UAAU,SAAA,CAAU,CAAA,CAAA,CACzC,CAAA,CACD,EACAA,EAAAA,IAAC,SAAA,CACA,GAAIR,EAAQ,EACZ,GAAIA,EAAQ,EACZ,YAAAM,EACA,EAAGH,EACH,cAAe,GACf,KAAM,OACN,MAAO,CACN,OAAQ,SAAA,EAET,cAAY,yBAAA,CAAA,EAEbK,EAAAA,IAAC,SAAA,CACA,GAAIR,EAAQ,EACZ,GAAIA,EAAQ,EACZ,YAAAM,EACA,EAAGH,EACH,MAAO,CACN,OAAQ,uBACR,gBAAiBC,EACjB,iBAAkBC,CAAA,EAEnB,UAAW,cAAcL,EAAQ,CAAC,IAAIA,EAAQ,CAAC,IAC/C,KAAM,OACN,cAAe,QACf,eAAgB,QAChB,cAAY,wBAAA,CAAA,EAEbQ,EAAAA,IAACE,EAAAA,QAAA,CACA,EAAGV,EAAQ,EAAIO,EAAiB,EAChC,MAAOA,CAAA,CAAA,CACR,CAAA,CAAA,EAEF,CAEF"}

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

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react-bootstrap"),n=require("styled-components"),s=require("../../constants/Theme.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=a(n),l=e=>t.jsx(o,{color:e.color?e.color:s.COLORS.content.brand,children:t.jsx(r.ProgressBar,{animated:e.isAnimated,now:e.completed,style:{height:`${e.height?e.height:8}px`}})}),o=c.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react-bootstrap"),s=require("styled-components"),n=require("../../constants/Theme.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=a(s),l=e=>t.jsx(r,{color:e.color?e.color:n.COLORS.content.brand,children:t.jsx(o.ProgressBar,{animated:e.isAnimated,now:e.completed,style:{height:`${e.height?e.height:8}px`},"data-testid":"progress-bar-wrapper"})}),r=c.default.div`
 	flex: 50%;
 	.progress-bar {
 		background: ${e=>e.color};
 	}
-`;exports.ProgressBarComponent=l;exports.ProgressCompletedBar=o;
+`;exports.ProgressBarComponent=l;exports.ProgressCompletedBar=r;
 //# sourceMappingURL=ProgressBarComponent.js.map

package/dist/cjs/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":"sRAWaA,EAAwBC,GAEnCC,EAAAA,IAACC,EAAA,CACA,MAAOF,EAAM,MAAQA,EAAM,MAAQG,EAAAA,OAAO,QAAQ,MAElD,SAAAF,EAAAA,IAACG,EAAAA,YAAA,CACA,SAAUJ,EAAM,WAChB,IAAKA,EAAM,UACX,MAAO,CAAE,OAAQ,GAAGA,EAAM,OAASA,EAAM,OAAS,CAAC,IAAA,~~CAAK~~,CAAA,~~CACzD~~,CAAA,EAKUE,EAAuBG,EAAAA,QAAO;AAAA;AAAA;AAAA,gBAG1BL,GAAUA,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":"sRAWaA,EAAwBC,GAEnCC,EAAAA,IAACC,EAAA,CACA,MAAOF,EAAM,MAAQA,EAAM,MAAQG,EAAAA,OAAO,QAAQ,MAElD,SAAAF,EAAAA,IAACG,EAAAA,YAAA,CACA,SAAUJ,EAAM,WAChB,IAAKA,EAAM,UACX,MAAO,CAAE,OAAQ,GAAGA,EAAM,OAASA,EAAM,OAAS,CAAC,IAAA,EACnD,cAAY,sBAAA,CAAA,CACb,CAAA,EAKUE,EAAuBG,EAAAA,QAAO;AAAA;AAAA;AAAA,gBAG1BL,GAAUA,EAAM,KAAK;AAAA;AAAA"}

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

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

package/dist/cjs/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":"4RAIO,IAAKA,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,IAAM,MACNA,EAAA,OAAS,SAJEA,IAAAA,GAAA,CAAA,CAAA,EAOAC,GAAAA,IACXA,EAAA,OAAS,SACTA,EAAA,KAAO,OAFIA,IAAAA,GAAA,CAAA,CAAA,EAiBL,MAAMC,EAAiBC,GAA8B,CAC3D,KAAM,CACL,KAAAC,EACA,SAAAC,EACA,qBAAAC,EACA,KAAAC,EACA,MAAAC,EACA,KAAAC,EACA,aAAAC,EACA,aAAAC,EACA,iBAAAC,EAAmB,EAAA,EAChBT,EAEJ,IAAIU,EAAYH,EAChB,OAAKG,IACJA,EAAY,QAIZC,~~OAACC~~,~~GAAc~~,UAAAF,~~EACb~~,SAAA,CAAAF,IACCE,IAAc,OACdA,IAAc,SACdG,EAAAA,IAACC,EAAAA,SAAA,CACA,MAAO,CACN,aAAcJ,IAAc,MAAoB,MAAQ,OACxD,YAAaA,IAAc,OAAqB,MAAQ,MAAA,EAEzD,MAAOK,EAAAA,OAAO,QAAQ,UAErB,SAAAT,GAAQ,GAAGJ,CAAQ,gBAAA,CAAA,EAGtBD,IAAS,OACTY,EAAAA,IAACG,EAAA,CACA,KAAAZ,EACA,qBAAAD,EACA,iBAAAM,~~EAEA~~,SAAAI,EAAAA,IAACI,EAAA,~~CAAkB~~,SAAAf,~~EAAoB~~,MAAAG,~~CAAA~~,~~CAAc~~,CAAA,CAAA,~~EAGtDQ~~,EAAAA,IAACK,EAAA,~~CAAgB~~,SAAAhB,~~EAAoB~~,MAAAG,~~EAAc~~,KAAAD,~~EAClD~~,SAAAS,EAAAA,IAACM,EAAA,CACA,SAAAjB,EACA,KAAAE,EACA,qBAAAD,CAAA,CAAA,~~EAEF~~,~~EAEAK,~~IACCE,IAAc,UACdA,IAAc,UACdG,EAAAA,IAACC,EAAAA,SAAA,CACA,MAAO,CACN,UAAWJ,IAAc,SAAuB,MAAQ,OACxD,WAAYA,IAAc,QAAsB,MAAQ,MAAA,EAEzD,MAAOK,EAAAA,OAAO,QAAQ,UAErB,SAAAT,GAAQ,GAAGJ,CAAQ,gBAAA,CAAA,CACrB,EAEH,CAEF,EAEMU,EAAgBQ,EAAAA,QAAO;AAAA;AAAA,mBAETpB,GAClBA,GAAO,YAAc,OACrBA,GAAO,YAAc,SAClB,SACA,KAAK;AAAA;AAAA;AAAA,EAKJkB,EAAkBE,EAAAA,QAAO;AAAA,UAKpBpB,GAAUA,EAAM,MAAQ,EAAE;AAAA,WACzBA,GAAUA,EAAM,MAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,IAIjCA,GAAUA,EAAM,OAASe,EAAAA,OAAO,WAAW,KAAK;AAAA,KAC/Cf,GAAUA,EAAM,SAAW,GAAG;AAAA,IAChCe,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,EAKrBI,EAAuBC,EAAAA,QAAO;AAAA,qBAKfL,EAAAA,OAAO,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMpCf,GACTA,EAAM,qBACHA,EAAM,MAAQ,GAAKA,EAAM,qBACzB,EAAE;AAAA,WACKA,GACVA,EAAM,qBACHA,EAAM,MAAQ,GAAKA,EAAM,qBACzB,EAAE;AAAA;AAAA,eAEQe,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGhCC,EAAeI,EAAAA,QAAO;AAAA,UAKjBpB,GACTA,EAAM,iBAAmB,OAAS,GAAGA,EAAM,MAAQ,EAAE,IAAI;AAAA,WAC/CA,GAAUA,EAAM,sBAAwB,CAAC;AAAA,qBAChCe,EAAAA,OAAO,WAAW,QAAQ;AAAA;AAAA;AAAA,EAKzCE,EAAoBG,EAAAA,QAAO;AAAA;AAAA,UAKtBpB,GAAUA,EAAM,QAAQ;AAAA,qBACbA,GAAUA,EAAM,OAASe,EAAAA,OAAO,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/cjs/components/shimmer-image/ShimmerImage.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),f=require("../shimmer/ShimmerComponent/BikShimmer.js"),g="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",h=({imageUrl:s,width:o,height:a,borderRadius:r,alt:c,useDynamicInfoImageSize:n,defaultImageUrl:u=g,imagePreviewStyles:b})=>{const[l,m]=i.useState(!0),[p,d]=i.useState(!1);return i.useEffect(()=>{const e=new Image;return e.src=s,e.onload=()=>{d(!1),m(!1)},e.onerror=()=>{d(!0),m(!1)},()=>{e.onload=null,e.onerror=null}},[s]),t.jsxs("div",{style:{position:"relative",width:n?`min(100%, ${o}px)`:o,...n?{aspectRatio:1}:{height:a},borderRadius:r},children:[l&&t.jsx(f.BikShimmer,{boxes:[{height:`${a}px`,width:`${o}px`,marginTop:"0px"}]}),p?t.jsx("img",{src:u,alt:c??"Image",style:{borderRadius:r??0,display:"block",width:"100%",height:"100%",objectFit:"cover"}}):t.jsx("img",{src:s,alt:c??"Image",style:{borderRadius:r??0,display:l?"none":"block",width:"100%",height:"100%",objectFit:"cover",...b}})]})};exports.DEFAULT_IMAGE=g;exports.ShimmerImage=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),f=require("../shimmer/ShimmerComponent/BikShimmer.js"),g="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",h=({imageUrl:s,width:o,height:a,borderRadius:i,alt:c,useDynamicInfoImageSize:n,defaultImageUrl:u=g,imagePreviewStyles:b})=>{const[l,m]=r.useState(!0),[p,d]=r.useState(!1);return r.useEffect(()=>{const e=new Image;return e.src=s,e.onload=()=>{d(!1),m(!1)},e.onerror=()=>{d(!0),m(!1)},()=>{e.onload=null,e.onerror=null}},[s]),t.jsxs("div",{style:{position:"relative",width:n?`min(100%, ${o}px)`:o,...n?{aspectRatio:1}:{height:a},borderRadius:i},"data-testid":"shimmer-image-container",children:[l&&t.jsx(f.BikShimmer,{boxes:[{height:`${a}px`,width:`${o}px`,marginTop:"0px"}]}),p?t.jsx("img",{src:u,alt:c??"Image",style:{borderRadius:i??0,display:"block",width:"100%",height:"100%",objectFit:"cover"}}):t.jsx("img",{src:s,alt:c??"Image",style:{borderRadius:i??0,display:l?"none":"block",width:"100%",height:"100%",objectFit:"cover",...b}})]})};exports.DEFAULT_IMAGE=g;exports.ShimmerImage=h;
 //# sourceMappingURL=ShimmerImage.js.map

package/dist/cjs/components/shimmer-image/ShimmerImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ShimmerImage.js","sources":["../../../../src/components/shimmer-image/ShimmerImage.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { BikShimmer } from '../shimmer';\n\nexport type ShimmerImageProps = {\n\timageUrl: string;\n\twidth: number \| string;\n\theight: number \| string;\n\talt?: string;\n\tborderRadius?: number;\n\tdefaultImageUrl?: string;\n\tuseDynamicInfoImageSize?: boolean;\n\timagePreviewStyles?: React.CSSProperties;\n};\n\nexport const DEFAULT_IMAGE =\n\t'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c';\n\nexport const ShimmerImage: React.FC<ShimmerImageProps> = ({\n\timageUrl,\n\twidth,\n\theight,\n\tborderRadius,\n\talt,\n\tuseDynamicInfoImageSize,\n\tdefaultImageUrl = DEFAULT_IMAGE,\n\timagePreviewStyles\n}) => {\n\tconst [isLoading, setIsLoading] = useState(true);\n\tconst [isError, setIsError] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst image = new Image();\n\t\timage.src = imageUrl;\n\n\t\timage.onload = () => {\n\t\t\tsetIsError(false);\n\t\t\tsetIsLoading(false);\n\t\t};\n\n\t\timage.onerror = () => {\n\t\t\tsetIsError(true);\n\t\t\tsetIsLoading(false);\n\t\t};\n\n\t\treturn () => {\n\t\t\timage.onload = null;\n\t\t\timage.onerror = null;\n\t\t};\n\t}, [imageUrl]);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t\twidth: useDynamicInfoImageSize ? `min(100%, ${width}px)` : width,\n\t\t\t\t...(useDynamicInfoImageSize ? { aspectRatio: 1 } : { height }),\n\t\t\t\tborderRadius,\n\t\t\t}}\n\t\t>\n\t\t\t{isLoading && (\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{ height: `${height}px`, width: `${width}px`, marginTop: '0px' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{isError ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={defaultImageUrl}\n\t\t\t\t\talt={alt ?? 'Image'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: borderRadius ?? 0,\n\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t}}\n\t\t\t\t~~\t\n\t\t\t\t~~/>\n\t\t\t) : (\n\t\t\t\t<img\n\t\t\t\t\tsrc={imageUrl}\n\t\t\t\t\talt={alt ?? 'Image'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: borderRadius ?? 0,\n\t\t\t\t\t\tdisplay: isLoading ? 'none' : 'block',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t...imagePreviewStyles\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["DEFAULT_IMAGE","ShimmerImage","imageUrl","width","height","borderRadius","alt","useDynamicInfoImageSize","defaultImageUrl","imagePreviewStyles","isLoading","setIsLoading","useState","isError","setIsError","useEffect","image","jsxs","jsx","BikShimmer"],"mappings":"+LAcaA,EACZ,+KAEYC,EAA4C,CAAC,CACzD,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,IAAAC,EACA,wBAAAC,EACA,gBAAAC,EAAkBR,EAClB,mBAAAS,CACD,IAAM,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAI,EACzC,CAACC,EAASC,CAAU,EAAIF,EAAAA,SAAS,EAAK,EAE5CG,OAAAA,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAQ,IAAI,MAClB,OAAAA,EAAM,IAAMd,EAEZc,EAAM,OAAS,IAAM,CACpBF,EAAW,EAAK,EAChBH,EAAa,EAAK,CACnB,EAEAK,EAAM,QAAU,IAAM,CACrBF,EAAW,EAAI,EACfH,EAAa,EAAK,CACnB,EAEO,IAAM,CACZK,EAAM,OAAS,KACfA,EAAM,QAAU,IACjB,CACD,EAAG,CAACd,CAAQ,CAAC,EAGZe,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,MAAOV,EAA0B,aAAaJ,CAAK,MAAQA,EAC3D,GAAII,EAA0B,CAAE,YAAa,CAAA,EAAM,CAAE,OAAAH,CAAA,EACrD,aAAAC,CAAA,~~EAGA~~,SAAA,CAAAK,GACAQ,EAAAA,IAACC,EAAAA,WAAA,CACA,MAAO,CACN,CAAE,OAAQ,GAAGf,CAAM,KAAM,MAAO,GAAGD,CAAK,KAAM,UAAW,KAAA,CAAM,CAChE,CAAA,EAGDU,EACAK,EAAAA,IAAC,MAAA,CACA,IAAKV,EACL,IAAKF,GAAO,QACZ,MAAO,CACN,aAAcD,GAAgB,EAC9B,QAAS,QACT,MAAO,OACP,OAAQ,OACR,UAAW,OAAA,CACZ,CAAA,~~EAIDa~~,EAAAA,IAAC,MAAA,CACA,IAAKhB,EACL,IAAKI,GAAO,QACZ,MAAO,CACN,aAAcD,GAAgB,EAC9B,QAASK,EAAY,OAAS,QAC9B,MAAO,OACP,OAAQ,OACR,UAAW,QACX,GAAGD,CAAA,CACJ,CAAA,CACD,CAAA,CAAA,CAIJ"}
1	+ {"version":3,"file":"ShimmerImage.js","sources":["../../../../src/components/shimmer-image/ShimmerImage.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { BikShimmer } from '../shimmer';\n\nexport type ShimmerImageProps = {\n\timageUrl: string;\n\twidth: number \| string;\n\theight: number \| string;\n\talt?: string;\n\tborderRadius?: number;\n\tdefaultImageUrl?: string;\n\tuseDynamicInfoImageSize?: boolean;\n\timagePreviewStyles?: React.CSSProperties;\n};\n\nexport const DEFAULT_IMAGE =\n\t'https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c';\n\nexport const ShimmerImage: React.FC<ShimmerImageProps> = ({\n\timageUrl,\n\twidth,\n\theight,\n\tborderRadius,\n\talt,\n\tuseDynamicInfoImageSize,\n\tdefaultImageUrl = DEFAULT_IMAGE,\n\timagePreviewStyles,\n}) => {\n\tconst [isLoading, setIsLoading] = useState(true);\n\tconst [isError, setIsError] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst image = new Image();\n\t\timage.src = imageUrl;\n\n\t\timage.onload = () => {\n\t\t\tsetIsError(false);\n\t\t\tsetIsLoading(false);\n\t\t};\n\n\t\timage.onerror = () => {\n\t\t\tsetIsError(true);\n\t\t\tsetIsLoading(false);\n\t\t};\n\n\t\treturn () => {\n\t\t\timage.onload = null;\n\t\t\timage.onerror = null;\n\t\t};\n\t}, [imageUrl]);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t\twidth: useDynamicInfoImageSize ? `min(100%, ${width}px)` : width,\n\t\t\t\t...(useDynamicInfoImageSize ? { aspectRatio: 1 } : { height }),\n\t\t\t\tborderRadius,\n\t\t\t}}\n\t\t\tdata-testid=\"shimmer-image-container\"\n\t\t>\n\t\t\t{isLoading && (\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{ height: `${height}px`, width: `${width}px`, marginTop: '0px' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{isError ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={defaultImageUrl}\n\t\t\t\t\talt={alt ?? 'Image'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: borderRadius ?? 0,\n\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<img\n\t\t\t\t\tsrc={imageUrl}\n\t\t\t\t\talt={alt ?? 'Image'}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: borderRadius ?? 0,\n\t\t\t\t\t\tdisplay: isLoading ? 'none' : 'block',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t...imagePreviewStyles,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["DEFAULT_IMAGE","ShimmerImage","imageUrl","width","height","borderRadius","alt","useDynamicInfoImageSize","defaultImageUrl","imagePreviewStyles","isLoading","setIsLoading","useState","isError","setIsError","useEffect","image","jsxs","jsx","BikShimmer"],"mappings":"+LAcaA,EACZ,+KAEYC,EAA4C,CAAC,CACzD,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,aAAAC,EACA,IAAAC,EACA,wBAAAC,EACA,gBAAAC,EAAkBR,EAClB,mBAAAS,CACD,IAAM,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAI,EACzC,CAACC,EAASC,CAAU,EAAIF,EAAAA,SAAS,EAAK,EAE5CG,OAAAA,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAQ,IAAI,MAClB,OAAAA,EAAM,IAAMd,EAEZc,EAAM,OAAS,IAAM,CACpBF,EAAW,EAAK,EAChBH,EAAa,EAAK,CACnB,EAEAK,EAAM,QAAU,IAAM,CACrBF,EAAW,EAAI,EACfH,EAAa,EAAK,CACnB,EAEO,IAAM,CACZK,EAAM,OAAS,KACfA,EAAM,QAAU,IACjB,CACD,EAAG,CAACd,CAAQ,CAAC,EAGZe,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,MAAOV,EAA0B,aAAaJ,CAAK,MAAQA,EAC3D,GAAII,EAA0B,CAAE,YAAa,CAAA,EAAM,CAAE,OAAAH,CAAA,EACrD,aAAAC,CAAA,EAED,cAAY,0BAEX,SAAA,CAAAK,GACAQ,EAAAA,IAACC,EAAAA,WAAA,CACA,MAAO,CACN,CAAE,OAAQ,GAAGf,CAAM,KAAM,MAAO,GAAGD,CAAK,KAAM,UAAW,KAAA,CAAM,CAChE,CAAA,EAGDU,EACAK,EAAAA,IAAC,MAAA,CACA,IAAKV,EACL,IAAKF,GAAO,QACZ,MAAO,CACN,aAAcD,GAAgB,EAC9B,QAAS,QACT,MAAO,OACP,OAAQ,OACR,UAAW,OAAA,CACZ,CAAA,EAGDa,EAAAA,IAAC,MAAA,CACA,IAAKhB,EACL,IAAKI,GAAO,QACZ,MAAO,CACN,aAAcD,GAAgB,EAC9B,QAASK,EAAY,OAAS,QAC9B,MAAO,OACP,OAAQ,OACR,UAAW,QACX,GAAGD,CAAA,CACJ,CAAA,CACD,CAAA,CAAA,CAIJ"}

package/dist/cjs/components/spinner/Spinner.js CHANGED Viewed

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("styled-components"),n=require("../../constants/Theme.js"),r=require("./themes.js"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=l(d),o=({size:e,color:a,className:s})=>t.jsx("div",{className:`spinner-container ${s}`,children:t.jsx(i,{width:`${r.SizeMap[e]}px`,height:`${r.SizeMap[e]}px`,size:e,color:a??n.COLORS.stroke.brand})});o.displayName="Spinner";const i=c.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("styled-components"),n=require("../../constants/Theme.js"),t=require("./themes.js"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=l(d),i=({size:e,color:a,className:s})=>r.jsx("div",{className:`spinner-container ${s}`,"data-testid":"spinner-container",children:r.jsx(o,{width:`${t.SizeMap[e]}px`,height:`${t.SizeMap[e]}px`,size:e,color:a??n.COLORS.stroke.brand,"data-testid":"spinner"})});i.displayName="Spinner";const o=c.default.div`
 	width: ${e=>e.width};
 	height: ${e=>e.height};
-	border: ${e=>e.size?r.BorderMap[e.size]:5}px solid
+	border: ${e=>e.size?t.BorderMap[e.size]:5}px solid
 		${e=>e.backgroundColor??"transparent"};
 	border-bottom-color: ${e=>e.color??n.COLORS.stroke.brand};
 	border-radius: 50%;
@@ -16,5 +16,5 @@
 			transform: rotate(360deg);
 		}
 	}
-`;exports.PureSpinner=i;exports.Spinner=o;
+`;exports.PureSpinner=o;exports.Spinner=i;
 //# sourceMappingURL=Spinner.js.map

package/dist/cjs/components/spinner/Spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.js","sources":["../../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-var-requires */\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { SpinnerProps } from './model';\nimport { BorderMap, SizeMap } from './themes';\n\nexport const Spinner = ({ size, color, className }: SpinnerProps) => {\n\treturn (\n\t\t<div ~~className~~={`spinner-container ${className}`}>\n\t\t\t<PureSpinner\n\t\t\t\twidth={`${SizeMap[size]}px`}\n\t\t\t\theight={`${SizeMap[size]}px`}\n\t\t\t\tsize={size}\n\t\t\t\tcolor={color ?? COLORS.stroke.brand}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nSpinner.displayName = 'Spinner';\n\nexport const PureSpinner = styled.div<{\n\twidth: string;\n\theight: string;\n\tsize?: 'small' \| 'large';\n\tcolor?: string;\n\tbackgroundColor?: string;\n}>`\n\twidth: ${(props) => props.width};\n\theight: ${(props) => props.height};\n\tborder: ${(props) => (props.size ? BorderMap[props.size] : 5)}px solid\n\t\t${(props) => props.backgroundColor ?? 'transparent'};\n\tborder-bottom-color: ${(props) => props.color ?? COLORS.stroke.brand};\n\tborder-radius: 50%;\n\tdisplay: inline-block;\n\tanimation: rotation 1s linear infinite;\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\n"],"names":["Spinner","size","color","className","jsx","PureSpinner","SizeMap","COLORS","styled","props","BorderMap"],"mappings":"kRAMaA,EAAU,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,KAErCC,EAAAA,IAAC,MAAA,~~CAAI~~,UAAW,qBAAqBD,CAAS,~~GAC7C~~,SAAAC,EAAAA,IAACC,EAAA,CACA,MAAO,GAAGC,EAAAA,QAAQL,CAAI,CAAC,KACvB,OAAQ,GAAGK,EAAAA,QAAQL,CAAI,CAAC,KACxB,KAAAA,EACA,MAAOC,GAASK,~~EAAAA~~,OAAO,~~OAAO~~,~~KAAA~~,CAAA,~~EAEhC~~,~~EAIFP~~,EAAQ,YAAc,UAEf,MAAMK,EAAcG,EAAAA,QAAO;AAAA,UAOvBC,GAAUA,EAAM,KAAK;AAAA,WACpBA,GAAUA,EAAM,MAAM;AAAA,WACtBA,GAAWA,EAAM,KAAOC,EAAAA,UAAUD,EAAM,IAAI,EAAI,CAAE;AAAA,IACzDA,GAAUA,EAAM,iBAAmB,aAAa;AAAA,wBAC5BA,GAAUA,EAAM,OAASF,EAAAA,OAAO,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"Spinner.js","sources":["../../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-var-requires */\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { SpinnerProps } from './model';\nimport { BorderMap, SizeMap } from './themes';\n\nexport const Spinner = ({ size, color, className }: SpinnerProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={`spinner-container ${className}`}\n\t\t\tdata-testid=\"spinner-container\"\n\t\t>\n\t\t\t<PureSpinner\n\t\t\t\twidth={`${SizeMap[size]}px`}\n\t\t\t\theight={`${SizeMap[size]}px`}\n\t\t\t\tsize={size}\n\t\t\t\tcolor={color ?? COLORS.stroke.brand}\n\t\t\t\tdata-testid=\"spinner\"\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nSpinner.displayName = 'Spinner';\n\nexport const PureSpinner = styled.div<{\n\twidth: string;\n\theight: string;\n\tsize?: 'small' \| 'large';\n\tcolor?: string;\n\tbackgroundColor?: string;\n}>`\n\twidth: ${(props) => props.width};\n\theight: ${(props) => props.height};\n\tborder: ${(props) => (props.size ? BorderMap[props.size] : 5)}px solid\n\t\t${(props) => props.backgroundColor ?? 'transparent'};\n\tborder-bottom-color: ${(props) => props.color ?? COLORS.stroke.brand};\n\tborder-radius: 50%;\n\tdisplay: inline-block;\n\tanimation: rotation 1s linear infinite;\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\n"],"names":["Spinner","size","color","className","jsx","PureSpinner","SizeMap","COLORS","styled","props","BorderMap"],"mappings":"kRAMaA,EAAU,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,UAAAC,KAErCC,EAAAA,IAAC,MAAA,CACA,UAAW,qBAAqBD,CAAS,GACzC,cAAY,oBAEZ,SAAAC,EAAAA,IAACC,EAAA,CACA,MAAO,GAAGC,EAAAA,QAAQL,CAAI,CAAC,KACvB,OAAQ,GAAGK,EAAAA,QAAQL,CAAI,CAAC,KACxB,KAAAA,EACA,MAAOC,GAASK,SAAO,OAAO,MAC9B,cAAY,SAAA,CAAA,CACb,CAAA,EAKHP,EAAQ,YAAc,UAEf,MAAMK,EAAcG,EAAAA,QAAO;AAAA,UAOvBC,GAAUA,EAAM,KAAK;AAAA,WACpBA,GAAUA,EAAM,MAAM;AAAA,WACtBA,GAAWA,EAAM,KAAOC,EAAAA,UAAUD,EAAM,IAAI,EAAI,CAAE;AAAA,IACzDA,GAAUA,EAAM,iBAAmB,aAAa;AAAA,wBAC5BA,GAAUA,EAAM,OAASF,EAAAA,OAAO,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/states/StateComponent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("../../constants/Theme.js"),E=require("../../assets/icons/errorIcon.svg.js"),I=require("../../assets/icons/retryIcon.svg.js"),z=require("../../assets/icons/state_icon.svg.js"),A=require("../../assets/icons/successIcon.svg.js"),N=require("../../assets/icons/warningIcon.svg.js"),w=require("../spinner/Spinner.js"),r=require("../TypographyStyle.js"),i=require("./StateComponent.styled.js"),h=require("../button/Button.js");var y=(e=>(e.SUCCESS="success",e.ERROR="error",e.WARNING="warning",e.LOADING="loading",e.RETRY="retry",e.INFO="info",e))(y||{}),x=(e=>(e.CANCEL="cancel",e.OTHER="other",e))(x||{}),S=(e=>(e.SINGLE="SINGLE",e.DOUBLE="DOUBLE",e))(S||{});const M=e=>{const j=()=>{if(n=="success")return t.jsx(A.default,{});if(n=="warning")return t.jsx(N.default,{});if(n=="error")return t.jsx(E.default,{});if(n==="loading")return t.jsx(w.Spinner,{size:"large"});if(n==="retry")return t.jsx(I.default,{});if(n=="info")return t.jsx(z.default,{})},{states:n,heading:a,subline:u,errorText:d,icon:g=j(),isButtonEnabled:L,type:m,buttonText:T,buttonType:C,onButtonClick:o,leadingIcon:B,width:O,headerImage:l,iconWidth:R,iconHeight:b,closeButtonType:f,secondaryButtonText:q,"data-test":s}=e;return t.jsxs(i.StateComponentContainer,{width:O,"data-test":s,children:[t.jsx(i.StateIcon,{iconWidth:R,iconHeight:b,children:l?t.jsx("img",{src:l,width:"100%",height:"auto",alt:""}):g}),t.jsxs(i.StateHeading,{size:e.size,children:[e.size==="SMALL"&&t.jsx(r.TitleRegular,{children:a}),e.size!=="SMALL"&&t.jsx(r.TitleMedium,{children:a})]}),t.jsxs(i.StateSubline,{children:[e.size!=="SMALL"&&t.jsx(r.BodyPrimary,{color:c.COLORS.content.secondary,children:u}),e.size==="SMALL"&&t.jsx(r.BodySecondary,{color:c.COLORS.content.secondary,children:u}),d&&t.jsx(r.BodySecondary,{color:c.COLORS.content.negative,style:{marginTop:8,whiteSpace:"pre-line"},children:d})]}),e.children??t.jsx(t.Fragment,{}),L&&t.jsx(t.Fragment,{children:t.jsxs(i.ButtonContainer,{size:e.size,children:[m=="DOUBLE"&&t.jsx(h.Button,{"data-test":`${s}-cancel`,onClick:()=>o&&o("cancel"),buttonType:f||"secondary",buttonText:q||"Cancel",matchParentWidth:!0}),t.jsx(h.Button,{"data-test":`${s}-primary`,onClick:()=>o&&o("other"),buttonType:C??"primary",LeadingIcon:B,buttonText:T??"Retry",matchParentWidth:!0})]})})]})};exports.ButtonActions=x;exports.ButtonTypes=S;exports.StateComponent=M;exports.StateInterface=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),E=require("../../assets/icons/errorIcon.svg.js"),I=require("../../assets/icons/retryIcon.svg.js"),z=require("../../assets/icons/state_icon.svg.js"),A=require("../../assets/icons/successIcon.svg.js"),N=require("../../assets/icons/warningIcon.svg.js"),w=require("../spinner/Spinner.js"),r=require("../TypographyStyle.js"),i=require("./StateComponent.styled.js"),h=require("../button/Button.js");var y=(t=>(t.SUCCESS="success",t.ERROR="error",t.WARNING="warning",t.LOADING="loading",t.RETRY="retry",t.INFO="info",t))(y||{}),x=(t=>(t.CANCEL="cancel",t.OTHER="other",t))(x||{}),S=(t=>(t.SINGLE="SINGLE",t.DOUBLE="DOUBLE",t))(S||{});const M=t=>{const g=()=>{if(n=="success")return e.jsx(A.default,{"data-test":"static-icon"});if(n=="warning")return e.jsx(N.default,{"data-test":"static-icon"});if(n=="error")return e.jsx(E.default,{"data-test":"static-icon"});if(n==="loading")return e.jsx(w.Spinner,{size:"large"});if(n==="retry")return e.jsx(I.default,{"data-test":"static-icon"});if(n=="info")return e.jsx(z.default,{"data-test":"static-icon"})},{states:n,heading:c,subline:d,errorText:u,icon:j=g(),isButtonEnabled:m,type:L,buttonText:T,buttonType:C,onButtonClick:o,leadingIcon:B,width:O,headerImage:l,iconWidth:R,iconHeight:b,closeButtonType:f,secondaryButtonText:q,"data-test":a}=t;return e.jsxs(i.StateComponentContainer,{width:O,"data-test":a,children:[e.jsx(i.StateIcon,{iconWidth:R,iconHeight:b,"data-test":"state-icon",children:l?e.jsx("img",{"data-test":"header-image",src:l,width:"100%",height:"auto",alt:""}):j}),e.jsxs(i.StateHeading,{size:t.size,children:[t.size==="SMALL"&&e.jsx(r.TitleRegular,{children:c}),t.size!=="SMALL"&&e.jsx(r.TitleMedium,{children:c})]}),e.jsxs(i.StateSubline,{children:[t.size!=="SMALL"&&e.jsx(r.BodyPrimary,{color:s.COLORS.content.secondary,children:d}),t.size==="SMALL"&&e.jsx(r.BodySecondary,{color:s.COLORS.content.secondary,children:d}),u&&e.jsx(r.BodySecondary,{color:s.COLORS.content.negative,style:{marginTop:8,whiteSpace:"pre-line"},children:u})]}),t.children??e.jsx(e.Fragment,{}),m&&e.jsx(e.Fragment,{children:e.jsxs(i.ButtonContainer,{size:t.size,children:[L=="DOUBLE"&&e.jsx(h.Button,{"data-test":`${a}-cancel`,onClick:()=>o&&o("cancel"),buttonType:f||"secondary",buttonText:q||"Cancel",matchParentWidth:!0}),e.jsx(h.Button,{"data-test":`${a}-primary`,onClick:()=>o&&o("other"),buttonType:C??"primary",LeadingIcon:B,buttonText:T??"Retry",matchParentWidth:!0})]})})]})};exports.ButtonActions=x;exports.ButtonTypes=S;exports.StateComponent=M;exports.StateInterface=y;
 //# sourceMappingURL=StateComponent.js.map

package/dist/cjs/components/states/StateComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StateComponent.js","sources":["../../../../src/components/states/StateComponent.tsx"],"sourcesContent":["import React from 'react';\nimport { Type } from '@src/components/button/model';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorIcon.svg';\nimport RetryIcon from '../../assets/icons/retryIcon.svg';\nimport InfoIcon from '../../assets/icons/state_icon.svg';\nimport SuccessIcon from '../../assets/icons/successIcon.svg';\nimport WarningIcon from '../../assets/icons/warningIcon.svg';\nimport { Button } from '../button';\nimport { Spinner } from '../spinner/Spinner';\nimport {\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleRegular,\n} from '../TypographyStyle';\nimport {\n\tButtonContainer,\n\tStateComponentContainer,\n\tStateHeading,\n\tStateIcon,\n\tStateSubline,\n} from './StateComponent.styled';\n\nexport enum StateInterface {\n\tSUCCESS = 'success',\n\tERROR = 'error',\n\tWARNING = 'warning',\n\tLOADING = 'loading',\n\tRETRY = 'retry',\n\tINFO = 'info',\n}\n\nexport enum ButtonActions {\n\tCANCEL = 'cancel',\n\tOTHER = 'other',\n}\nexport enum ButtonTypes {\n\tSINGLE = 'SINGLE',\n\tDOUBLE = 'DOUBLE',\n}\n\nexport type StateComponentProps = {\n\theaderImage?: string;\n\tstates: StateInterface;\n\theading: string;\n\tsubline: string;\n\terrorText?: string;\n\ticon?: JSX.Element;\n\tisButtonEnabled: boolean;\n\ttype?: ButtonTypes;\n\tbuttonText?: string;\n\tbuttonType?: Type;\n\tbuttonIcon?: React.ReactElement;\n\tonButtonClick?: (buttonClicked: ButtonActions) => void;\n\tleadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\twidth: number;\n\tsize?: 'DEFAULT' \| 'SMALL';\n\ticonHeight?: number;\n\ticonWidth?: number;\n\tcloseButtonType?: Type;\n\tsecondaryButtonText?: string;\n\t'data-test'?: string;\n};\n\nexport const StateComponent: React.FC<\n\tReact.PropsWithChildren<StateComponentProps>\n> = (props) => {\n\tconst findIcon = () => {\n\t\tif (states == StateInterface.SUCCESS) {\n\t\t\treturn <SuccessIcon />;\n\t\t}\n\t\tif (states == StateInterface.WARNING) {\n\t\t\treturn <WarningIcon />;\n\t\t}\n\t\tif (states == StateInterface.ERROR) {\n\t\t\treturn <ErrorIcon />;\n\t\t}\n\t\tif (states === StateInterface.LOADING) {\n\t\t\treturn <Spinner size={'large'} />;\n\t\t}\n\t\tif (states === StateInterface.RETRY) {\n\t\t\treturn <RetryIcon />;\n\t\t}\n\t\tif (states == StateInterface.INFO) {\n\t\t\treturn <InfoIcon />;\n\t\t}\n\t};\n\tconst {\n\t\tstates,\n\t\theading,\n\t\tsubline,\n\t\terrorText,\n\t\ticon = findIcon(),\n\t\tisButtonEnabled,\n\t\ttype,\n\t\tbuttonText,\n\t\tbuttonType,\n\t\tonButtonClick,\n\t\tleadingIcon,\n\t\twidth,\n\t\theaderImage,\n\t\ticonWidth,\n\t\ticonHeight,\n\t\tcloseButtonType,\n\t\tsecondaryButtonText,\n\t\t'data-test': dataTest,\n\t} = props;\n\n\treturn (\n\t\t<StateComponentContainer width={width} data-test={dataTest}>\n\t\t\t<StateIcon ~~iconWidth~~={iconWidth} ~~iconHeight~~={iconHeight}>\n\t\t\t\t{headerImage ? (\n\t\t\t\t\t<img ~~src~~={headerImage} ~~width~~={'100%'} ~~height~~={'auto'} ~~alt~~={''} />\n\t\t\t\t) : (\n\t\t\t\t\ticon\n\t\t\t\t)}\n\t\t\t</StateIcon>\n\t\t\t<StateHeading size={props.size}>\n\t\t\t\t{props.size === 'SMALL' && <TitleRegular>{heading}</TitleRegular>}\n\t\t\t\t{props.size !== 'SMALL' && <TitleMedium>{heading}</TitleMedium>}\n\t\t\t</StateHeading>\n\t\t\t<StateSubline>\n\t\t\t\t{props.size !== 'SMALL' && (\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>{subline}</BodyPrimary>\n\t\t\t\t)}\n\t\t\t\t{props.size === 'SMALL' && (\n\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{subline}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t{errorText && (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\tstyle={{ marginTop: 8, whiteSpace: 'pre-line' }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{errorText}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t</StateSubline>\n\t\t\t{props.children ?? <></>}\n\t\t\t{isButtonEnabled && (\n\t\t\t\t<>\n\t\t\t\t\t<ButtonContainer size={props.size}>\n\t\t\t\t\t\t{type == ButtonTypes.DOUBLE && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test={`${dataTest}-cancel`}\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tonButtonClick && onButtonClick(ButtonActions.CANCEL)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tbuttonType={closeButtonType \|\| 'secondary'}\n\t\t\t\t\t\t\t\tbuttonText={secondaryButtonText \|\| 'Cancel'}\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test={`${dataTest}-primary`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tonButtonClick && onButtonClick(ButtonActions.OTHER)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbuttonType={buttonType ?? 'primary'}\n\t\t\t\t\t\t\tLeadingIcon={leadingIcon}\n\t\t\t\t\t\t\tbuttonText={buttonText ?? 'Retry'}\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ButtonContainer>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</StateComponentContainer>\n\t);\n};\n"],"names":["StateInterface","ButtonActions","ButtonTypes","StateComponent","props","findIcon","states","SuccessIcon","WarningIcon","ErrorIcon","~~jsx","~~Spinner","RetryIcon","InfoIcon","heading","subline","errorText","icon","isButtonEnabled","type","buttonText","buttonType","onButtonClick","leadingIcon","width","headerImage","iconWidth","iconHeight","closeButtonType","secondaryButtonText","dataTest","jsxs","StateComponentContainer","StateIcon","StateHeading","TitleRegular","TitleMedium","StateSubline","BodyPrimary","COLORS","BodySecondary","Fragment","ButtonContainer","Button"],"mappings":"oiBAwBO,IAAKA,GAAAA,IACXA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,KAAO,OANIA,IAAAA,GAAA,CAAA,CAAA,EASAC,GAAAA,IACXA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFGA,IAAAA,GAAA,CAAA,CAAA,EAIAC,GAAAA,IACXA,EAAA,OAAS,SACTA,EAAA,OAAS,SAFEA,IAAAA,GAAA,CAAA,CAAA,EA4BL,MAAMC,EAERC,GAAU,CACd,MAAMC,EAAW,IAAM,CACtB,GAAIC,GAAU,UACb,~~aAAQC~~,EAAAA,QAAA,~~EAAY~~,~~EAErB~~,~~GAAID~~,GAAU,UACb,~~aAAQE~~,EAAAA,QAAA,~~EAAY~~,~~EAErB~~,~~GAAIF~~,GAAU,QACb,~~aAAQG~~,EAAAA,QAAA,~~EAAU~~,~~EAEnB~~,~~GAAIH~~,IAAW,UACd,~~OAAOI~~,EAAAA,~~IAACC~~,EAAAA,QAAA,CAAQ,KAAM,OAAA,CAAS,EAEhC,GAAIL,IAAW,QACd,~~aAAQM~~,EAAAA,QAAA,~~EAAU~~,~~EAEnB~~,GAAIN,GAAU,OACb,~~aAAQO~~,EAAAA,QAAA,~~EAAS~~,~~CAEnB~~,EACM,CACL,OAAAP,EACA,QAAAQ,EACA,QAAAC,EACA,UAAAC,EACA,KAAAC,EAAOZ,EAAA,EACP,gBAAAa,EACA,KAAAC,EACA,WAAAC,EACA,WAAAC,EACA,cAAAC,EACA,YAAAC,EACA,MAAAC,EACA,YAAAC,EACA,UAAAC,EACA,WAAAC,EACA,gBAAAC,EACA,oBAAAC,EACA,YAAaC,CAAA,EACV1B,EAEJ,OACC2B,EAAAA,KAACC,EAAAA,wBAAA,CAAwB,MAAAR,EAAc,YAAWM,EACjD,SAAA,~~CAAApB~~,~~MAACuB~~,EAAAA,UAAA,~~CAAU~~,UAAAP,~~EAAsB~~,WAAAC,~~EAC/B~~,SAAAF,~~QACC~~,MAAA,~~CAAI~~,~~IAAKA~~,~~EAAa~~,MAAO,~~OAAQ~~,OAAQ,~~OAAQ~~,IAAK,EAAA,~~CAAI~~,~~EAE/DR~~,~~EAEF~~,~~EACAc~~,EAAAA,KAACG,EAAAA,aAAA,CAAa,KAAM9B,EAAM,KACxB,SAAA,CAAAA,EAAM,OAAS,~~SAAWM~~,EAAAA,~~IAACyB~~,EAAAA,aAAA,CAAc,SAAArB,EAAQ,EACjDV,EAAM,OAAS,~~SAAWM~~,EAAAA,~~IAAC0B~~,EAAAA,aAAa,SAAAtB,CAAA,CAAQ,CAAA,EAClD,SACCuB,EAAAA,aAAA,CACC,SAAA,CAAAjC,EAAM,OAAS,~~SACfM~~,EAAAA,~~IAAC4B~~,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,UAAY,SAAAxB,CAAA,CAAQ,EAEvDX,EAAM,OAAS,~~SACfM~~,EAAAA,~~IAAC8B~~,EAAAA,eAAc,MAAOD,EAAAA,OAAO,QAAQ,UACnC,SAAAxB,CAAA,CACF,EAEAC,~~GACAN~~,EAAAA,~~IAAC8B~~,EAAAA,cAAA,CACA,MAAOD,EAAAA,OAAO,QAAQ,SACtB,MAAO,CAAE,UAAW,EAAG,WAAY,UAAA,EAElC,SAAAvB,CAAA,CAAA,CACF,EAEF,EACCZ,EAAM,~~UAAYM~~,~~MAAA+B~~,EAAAA,SAAA,CAAA,CAAE,EACpBvB,~~GACAR~~,EAAAA,~~IAAA+B~~,WAAA,CACC,SAAAV,EAAAA,KAACW,EAAAA,gBAAA,CAAgB,KAAMtC,EAAM,KAC3B,SAAA,CAAAe,GAAQ,~~UACRT~~,EAAAA,~~IAACiC~~,EAAAA,OAAA,CACA,YAAW,GAAGb,CAAQ,UACtB,QAAS,IACRR,GAAiBA,EAAc,QAAA,EAEhC,WAAYM,GAAmB,YAC/B,WAAYC,GAAuB,SACnC,iBAAgB,EAAA,CAAA,~~EAGlBnB~~,EAAAA,~~IAACiC~~,EAAAA,OAAA,CACA,YAAW,GAAGb,CAAQ,WACtB,QAAS,IACRR,GAAiBA,EAAc,OAAA,EAEhC,WAAYD,GAAc,UAC1B,YAAaE,EACb,WAAYH,GAAc,QAC1B,iBAAgB,EAAA,CAAA,CACjB,CAAA,CACD,CAAA,CACD,CAAA,EAEF,CAEF"}
1	+ {"version":3,"file":"StateComponent.js","sources":["../../../../src/components/states/StateComponent.tsx"],"sourcesContent":["import React from 'react';\nimport { Type } from '@src/components/button/model';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorIcon.svg';\nimport RetryIcon from '../../assets/icons/retryIcon.svg';\nimport InfoIcon from '../../assets/icons/state_icon.svg';\nimport SuccessIcon from '../../assets/icons/successIcon.svg';\nimport WarningIcon from '../../assets/icons/warningIcon.svg';\nimport { Button } from '../button';\nimport { Spinner } from '../spinner/Spinner';\nimport {\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleRegular,\n} from '../TypographyStyle';\nimport {\n\tButtonContainer,\n\tStateComponentContainer,\n\tStateHeading,\n\tStateIcon,\n\tStateSubline,\n} from './StateComponent.styled';\n\nexport enum StateInterface {\n\tSUCCESS = 'success',\n\tERROR = 'error',\n\tWARNING = 'warning',\n\tLOADING = 'loading',\n\tRETRY = 'retry',\n\tINFO = 'info',\n}\n\nexport enum ButtonActions {\n\tCANCEL = 'cancel',\n\tOTHER = 'other',\n}\nexport enum ButtonTypes {\n\tSINGLE = 'SINGLE',\n\tDOUBLE = 'DOUBLE',\n}\n\nexport type StateComponentProps = {\n\theaderImage?: string;\n\tstates: StateInterface;\n\theading: string;\n\tsubline: string;\n\terrorText?: string;\n\ticon?: JSX.Element;\n\tisButtonEnabled: boolean;\n\ttype?: ButtonTypes;\n\tbuttonText?: string;\n\tbuttonType?: Type;\n\tbuttonIcon?: React.ReactElement;\n\tonButtonClick?: (buttonClicked: ButtonActions) => void;\n\tleadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\twidth: number;\n\tsize?: 'DEFAULT' \| 'SMALL';\n\ticonHeight?: number;\n\ticonWidth?: number;\n\tcloseButtonType?: Type;\n\tsecondaryButtonText?: string;\n\t'data-test'?: string;\n};\n\nexport const StateComponent: React.FC<\n\tReact.PropsWithChildren<StateComponentProps>\n> = (props) => {\n\tconst findIcon = () => {\n\t\tif (states == StateInterface.SUCCESS) {\n\t\t\treturn <SuccessIcon data-test=\"static-icon\" />;\n\t\t}\n\t\tif (states == StateInterface.WARNING) {\n\t\t\treturn <WarningIcon data-test=\"static-icon\" />;\n\t\t}\n\t\tif (states == StateInterface.ERROR) {\n\t\t\treturn <ErrorIcon data-test=\"static-icon\" />;\n\t\t}\n\t\tif (states === StateInterface.LOADING) {\n\t\t\treturn <Spinner size={'large'} />;\n\t\t}\n\t\tif (states === StateInterface.RETRY) {\n\t\t\treturn <RetryIcon data-test=\"static-icon\" />;\n\t\t}\n\t\tif (states == StateInterface.INFO) {\n\t\t\treturn <InfoIcon data-test=\"static-icon\" />;\n\t\t}\n\t};\n\tconst {\n\t\tstates,\n\t\theading,\n\t\tsubline,\n\t\terrorText,\n\t\ticon = findIcon(),\n\t\tisButtonEnabled,\n\t\ttype,\n\t\tbuttonText,\n\t\tbuttonType,\n\t\tonButtonClick,\n\t\tleadingIcon,\n\t\twidth,\n\t\theaderImage,\n\t\ticonWidth,\n\t\ticonHeight,\n\t\tcloseButtonType,\n\t\tsecondaryButtonText,\n\t\t'data-test': dataTest,\n\t} = props;\n\n\treturn (\n\t\t<StateComponentContainer width={width} data-test={dataTest}>\n\t\t\t<StateIcon\n\t\t\t\ticonWidth={iconWidth}\n\t\t\t\ticonHeight={iconHeight}\n\t\t\t\tdata-test=\"state-icon\"\n\t\t\t>\n\t\t\t\t{headerImage ? (\n\t\t\t\t\t<img\n\t\t\t\t\t\tdata-test=\"header-image\"\n\t\t\t\t\t\tsrc={headerImage}\n\t\t\t\t\t\twidth={'100%'}\n\t\t\t\t\t\theight={'auto'}\n\t\t\t\t\t\talt={''}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\ticon\n\t\t\t\t)}\n\t\t\t</StateIcon>\n\t\t\t<StateHeading size={props.size}>\n\t\t\t\t{props.size === 'SMALL' && <TitleRegular>{heading}</TitleRegular>}\n\t\t\t\t{props.size !== 'SMALL' && <TitleMedium>{heading}</TitleMedium>}\n\t\t\t</StateHeading>\n\t\t\t<StateSubline>\n\t\t\t\t{props.size !== 'SMALL' && (\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>{subline}</BodyPrimary>\n\t\t\t\t)}\n\t\t\t\t{props.size === 'SMALL' && (\n\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{subline}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t{errorText && (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\tstyle={{ marginTop: 8, whiteSpace: 'pre-line' }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{errorText}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t</StateSubline>\n\t\t\t{props.children ?? <></>}\n\t\t\t{isButtonEnabled && (\n\t\t\t\t<>\n\t\t\t\t\t<ButtonContainer size={props.size}>\n\t\t\t\t\t\t{type == ButtonTypes.DOUBLE && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-test={`${dataTest}-cancel`}\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tonButtonClick && onButtonClick(ButtonActions.CANCEL)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tbuttonType={closeButtonType \|\| 'secondary'}\n\t\t\t\t\t\t\t\tbuttonText={secondaryButtonText \|\| 'Cancel'}\n\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test={`${dataTest}-primary`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tonButtonClick && onButtonClick(ButtonActions.OTHER)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tbuttonType={buttonType ?? 'primary'}\n\t\t\t\t\t\t\tLeadingIcon={leadingIcon}\n\t\t\t\t\t\t\tbuttonText={buttonText ?? 'Retry'}\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ButtonContainer>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</StateComponentContainer>\n\t);\n};\n"],"names":["StateInterface","ButtonActions","ButtonTypes","StateComponent","props","findIcon","states","jsx","SuccessIcon","WarningIcon","ErrorIcon","Spinner","RetryIcon","InfoIcon","heading","subline","errorText","icon","isButtonEnabled","type","buttonText","buttonType","onButtonClick","leadingIcon","width","headerImage","iconWidth","iconHeight","closeButtonType","secondaryButtonText","dataTest","jsxs","StateComponentContainer","StateIcon","StateHeading","TitleRegular","TitleMedium","StateSubline","BodyPrimary","COLORS","BodySecondary","Fragment","ButtonContainer","Button"],"mappings":"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"}

package/dist/cjs/components/stepper/Stepper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../constants/Theme.js"),v=require("../../assets/icons/check.svg.js"),C=require("../../assets/icons/errorInfo.svg.js"),d=require("../TypographyStyle.js"),h=require("./Stepper.styled.js"),j=r=>{const{steps:t,activeStep:o,onClickingEachStep:l,hideHoverState:a}=r;return e.jsx(h.StepperContainer,{children:t.map((s,i)=>e.jsx(x,{stepsCount:t.length,eachStep:s,onClickingStep:n=>{l(n)},isActive:o?.stepKey==s?.stepKey,isLastElement:i==t.length-1,index:i,hideHoverState:a},i))})},x=r=>{const{eachStep:t,isLastElement:o,index:l,isActive:a,onClickingStep:s,hideHoverState:i}=r,{stepName:n,isCompleted:u,isError:S,isInActive:c}=t,g=()=>{!c&&s(t)},p=()=>a?"active":u?"completed":S?"error":c?"inactive":"default";return e.jsxs(h.SingleStepperChildContainer,{stepsCount:r.stepsCount,onClick:g,selectedState:p(),isInActive:c||i,children:[e.jsxs("div",{className:`hover-container ${c?"blocked":"pointer"} `,children:[e.jsx("div",{className:"badge",children:p()=="completed"?e.jsx(v.default,{height:16,width:16,color:m.COLORS.content.positive}):p()=="error"?e.jsx(C.default,{height:16,width:16}):e.jsx(d.BodySecondary,{className:"badge-text",children:l+1})}),e.jsx(d.BodyPrimary,{className:"step-text",title:n,children:n})]}),e.jsx("div",{className:o?"":"horizontal-divider"})]})};exports.Stepper=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../constants/Theme.js"),v=require("../../assets/icons/check.svg.js"),C=require("../../assets/icons/errorInfo.svg.js"),p=require("../TypographyStyle.js"),h=require("./Stepper.styled.js"),y=s=>{const{steps:t,activeStep:o,onClickingEachStep:a,hideHoverState:d}=s;return e.jsx(h.StepperContainer,{children:t.map((r,i)=>e.jsx(j,{stepsCount:t.length,eachStep:r,onClickingStep:n=>{a(n)},isActive:o?.stepKey==r?.stepKey,isLastElement:i==t.length-1,index:i,hideHoverState:d},i))})},j=s=>{const{eachStep:t,isLastElement:o,index:a,isActive:d,onClickingStep:r,hideHoverState:i}=s,{stepName:n,isCompleted:u,isError:S,isInActive:c}=t,g=()=>{!c&&r(t)},l=()=>d?"active":u?"completed":S?"error":c?"inactive":"default";return e.jsxs(h.SingleStepperChildContainer,{stepsCount:s.stepsCount,onClick:g,selectedState:l(),isInActive:c||i,children:[e.jsxs("div",{className:`hover-container ${c?"blocked":"pointer"} `,children:[e.jsx("div",{className:"badge","data-testid":`step-badge-${t.stepKey}`,children:l()=="completed"?e.jsx(v.default,{"data-testid":"badge-icon",height:16,width:16,color:m.COLORS.content.positive}):l()=="error"?e.jsx(C.default,{"data-testid":"badge-icon",height:16,width:16}):e.jsx(p.BodySecondary,{className:"badge-text",children:a+1})}),e.jsx(p.BodyPrimary,{className:"step-text",title:n,children:n})]}),e.jsx("div",{className:o?"":"horizontal-divider"})]})};exports.Stepper=y;
 //# sourceMappingURL=Stepper.js.map

package/dist/cjs/components/stepper/Stepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.js","sources":["../../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport Check from '../../assets/icons/check.svg';\nimport ErrorInfo from '../../assets/icons/errorInfo.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { EachStep, SingleStepperProps } from './Stepper.model';\nimport {\n\tSingleStepperChildContainer,\n\tStepperContainer,\n} from './Stepper.styled';\n\nexport interface StepperProps {\n\tsteps: EachStep[];\n\tactiveStep: EachStep;\n\tonClickingEachStep: (step: EachStep) => void;\n\thideHoverState?: boolean;\n}\n\nexport const Stepper = (stepperDetails: StepperProps) => {\n\tconst { steps, activeStep, onClickingEachStep, hideHoverState } =\n\t\tstepperDetails;\n\n\treturn (\n\t\t<StepperContainer>\n\t\t\t{steps.map((eachStepper, index) => (\n\t\t\t\t<SingleStepper\n\t\t\t\t\tstepsCount={steps.length}\n\t\t\t\t\teachStep={eachStepper}\n\t\t\t\t\tonClickingStep={(step) => {\n\t\t\t\t\t\tonClickingEachStep(step);\n\t\t\t\t\t}}\n\t\t\t\t\tisActive={activeStep?.stepKey == eachStepper?.stepKey}\n\t\t\t\t\tkey={index}\n\t\t\t\t\tisLastElement={index == steps.length - 1}\n\t\t\t\t\tindex={index}\n\t\t\t\t\thideHoverState={hideHoverState}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</StepperContainer>\n\t);\n};\n\nconst SingleStepper = (props: SingleStepperProps) => {\n\tconst {\n\t\teachStep,\n\t\tisLastElement,\n\t\tindex,\n\t\tisActive,\n\t\tonClickingStep,\n\t\thideHoverState,\n\t} = props;\n\tconst { stepName, isCompleted, isError, isInActive } = eachStep;\n\tconst OnClicking = () => {\n\t\t!isInActive && onClickingStep(eachStep);\n\t};\n\tconst ClassMapping = () => {\n\t\tif (isActive) {\n\t\t\treturn 'active';\n\t\t}\n\t\tif (isCompleted) {\n\t\t\treturn 'completed';\n\t\t}\n\t\tif (isError) {\n\t\t\treturn 'error';\n\t\t}\n\t\tif (isInActive) {\n\t\t\treturn 'inactive';\n\t\t}\n\t\treturn 'default';\n\t};\n\treturn (\n\t\t<SingleStepperChildContainer\n\t\t\tstepsCount={props.stepsCount}\n\t\t\tonClick={OnClicking}\n\t\t\tselectedState={ClassMapping()}\n\t\t\tisInActive={isInActive \|\| hideHoverState}\n\t\t>\n\t\t\t<div className={`hover-container ${isInActive ? 'blocked' : 'pointer'} `}>\n\t\t\t\t<div className=\"badge\">\n\t\t\t\t\t{ClassMapping() == 'completed' ? (\n\t\t\t\t\t\t<Check ~~height~~={16} ~~width~~={16} ~~color~~={COLORS.content.positive} />\n\t\t\t\t\t) : ClassMapping() == 'error' ? (\n\t\t\t\t\t\t<ErrorInfo height={16} width={16} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary className=\"badge-text\">{index + 1}</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<BodyPrimary className=\"step-text\" title={stepName}>\n\t\t\t\t\t{stepName}\n\t\t\t\t</BodyPrimary>\n\t\t\t</div>\n\t\t\t<div className={!isLastElement ? 'horizontal-divider' : ''} />\n\t\t</SingleStepperChildContainer>\n\t);\n};\n"],"names":["Stepper","stepperDetails","steps","activeStep","onClickingEachStep","hideHoverState","StepperContainer","eachStepper","index","jsx","SingleStepper","step","props","eachStep","isLastElement","isActive","onClickingStep","stepName","isCompleted","isError","isInActive","OnClicking","ClassMapping","jsxs","SingleStepperChildContainer","Check","COLORS","ErrorInfo","BodySecondary","BodyPrimary"],"mappings":"6TAiBaA,EAAWC,GAAiC,CACxD,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,mBAAAC,EAAoB,eAAAC,GAC9CJ,EAED,aACEK,EAAAA,iBAAA,CACC,SAAAJ,EAAM,IAAI,CAACK,EAAaC,IACxBC,EAAAA,IAACC,EAAA,CACA,WAAYR,EAAM,OAClB,SAAUK,EACV,eAAiBI,GAAS,CACzBP,EAAmBO,CAAI,CACxB,EACA,SAAUR,GAAY,SAAWI,GAAa,QAE9C,cAAeC,GAASN,EAAM,OAAS,EACvC,MAAAM,EACA,eAAAH,CAAA,EAHKG,CAAA,CAKN,EACF,CAEF,EAEME,EAAiBE,GAA8B,CACpD,KAAM,CACL,SAAAC,EACA,cAAAC,EACA,MAAAN,EACA,SAAAO,EACA,eAAAC,EACA,eAAAX,CAAA,EACGO,EACE,CAAE,SAAAK,EAAU,YAAAC,EAAa,QAAAC,EAAS,WAAAC,GAAeP,EACjDQ,EAAa,IAAM,CACxB,CAACD,GAAcJ,EAAeH,CAAQ,CACvC,EACMS,EAAe,IAChBP,EACI,SAEJG,EACI,YAEJC,EACI,QAEJC,EACI,WAED,UAER,OACCG,EAAAA,KAACC,EAAAA,4BAAA,CACA,WAAYZ,EAAM,WAClB,QAASS,EACT,cAAeC,EAAA,EACf,WAAYF,GAAcf,EAE1B,SAAA,CAAAkB,EAAAA,KAAC,OAAI,UAAW,mBAAmBH,EAAa,UAAY,SAAS,IACpE,SAAA,CAAAX,~~MAAC~~,MAAA,CAAI,UAAU,~~QACb~~,~~SAAAa~~,EAAA,GAAkB,YAClBb,EAAAA,IAACgB,EAAAA,QAAA,~~CAAM~~,OAAQ,~~GAAI~~,MAAO,~~GAAI~~,MAAOC,EAAAA,OAAO,QAAQ,QAAA,~~CAAU~~,~~EAC3DJ~~,~~KAAkB~~,QACrBb,~~EAAAA~~,~~IAACkB,~~EAAAA,QAAA,CAAU,OAAQ,GAAI,MAAO,EAAA,CAAI,~~QAEjCC~~,EAAAA,cAAA,CAAc,UAAU,aAAc,SAAApB,EAAQ,EAAE,EAEnD,QACCqB,EAAAA,YAAA,CAAY,UAAU,YAAY,MAAOZ,EACxC,SAAAA,CAAA,CACF,CAAA,EACD,QACC,MAAA,CAAI,UAAYH,EAAuC,GAAvB,oBAAuB,CAAI,CAAA,CAAA,CAAA,CAG/D"}
1	+ {"version":3,"file":"Stepper.js","sources":["../../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport Check from '../../assets/icons/check.svg';\nimport ErrorInfo from '../../assets/icons/errorInfo.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { EachStep, SingleStepperProps } from './Stepper.model';\nimport {\n\tSingleStepperChildContainer,\n\tStepperContainer,\n} from './Stepper.styled';\n\nexport interface StepperProps {\n\tsteps: EachStep[];\n\tactiveStep: EachStep;\n\tonClickingEachStep: (step: EachStep) => void;\n\thideHoverState?: boolean;\n}\n\nexport const Stepper = (stepperDetails: StepperProps) => {\n\tconst { steps, activeStep, onClickingEachStep, hideHoverState } =\n\t\tstepperDetails;\n\n\treturn (\n\t\t<StepperContainer>\n\t\t\t{steps.map((eachStepper, index) => (\n\t\t\t\t<SingleStepper\n\t\t\t\t\tstepsCount={steps.length}\n\t\t\t\t\teachStep={eachStepper}\n\t\t\t\t\tonClickingStep={(step) => {\n\t\t\t\t\t\tonClickingEachStep(step);\n\t\t\t\t\t}}\n\t\t\t\t\tisActive={activeStep?.stepKey == eachStepper?.stepKey}\n\t\t\t\t\tkey={index}\n\t\t\t\t\tisLastElement={index == steps.length - 1}\n\t\t\t\t\tindex={index}\n\t\t\t\t\thideHoverState={hideHoverState}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</StepperContainer>\n\t);\n};\n\nconst SingleStepper = (props: SingleStepperProps) => {\n\tconst {\n\t\teachStep,\n\t\tisLastElement,\n\t\tindex,\n\t\tisActive,\n\t\tonClickingStep,\n\t\thideHoverState,\n\t} = props;\n\tconst { stepName, isCompleted, isError, isInActive } = eachStep;\n\tconst OnClicking = () => {\n\t\t!isInActive && onClickingStep(eachStep);\n\t};\n\tconst ClassMapping = () => {\n\t\tif (isActive) {\n\t\t\treturn 'active';\n\t\t}\n\t\tif (isCompleted) {\n\t\t\treturn 'completed';\n\t\t}\n\t\tif (isError) {\n\t\t\treturn 'error';\n\t\t}\n\t\tif (isInActive) {\n\t\t\treturn 'inactive';\n\t\t}\n\t\treturn 'default';\n\t};\n\treturn (\n\t\t<SingleStepperChildContainer\n\t\t\tstepsCount={props.stepsCount}\n\t\t\tonClick={OnClicking}\n\t\t\tselectedState={ClassMapping()}\n\t\t\tisInActive={isInActive \|\| hideHoverState}\n\t\t>\n\t\t\t<div className={`hover-container ${isInActive ? 'blocked' : 'pointer'} `}>\n\t\t\t\t<div className=\"badge\" data-testid={`step-badge-${eachStep.stepKey}`}>\n\t\t\t\t\t{ClassMapping() == 'completed' ? (\n\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\tdata-testid=\"badge-icon\"\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\tcolor={COLORS.content.positive}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : ClassMapping() == 'error' ? (\n\t\t\t\t\t\t<ErrorInfo data-testid=\"badge-icon\" height={16} width={16} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary className=\"badge-text\">{index + 1}</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<BodyPrimary className=\"step-text\" title={stepName}>\n\t\t\t\t\t{stepName}\n\t\t\t\t</BodyPrimary>\n\t\t\t</div>\n\t\t\t<div className={!isLastElement ? 'horizontal-divider' : ''} />\n\t\t</SingleStepperChildContainer>\n\t);\n};\n"],"names":["Stepper","stepperDetails","steps","activeStep","onClickingEachStep","hideHoverState","StepperContainer","eachStepper","index","jsx","SingleStepper","step","props","eachStep","isLastElement","isActive","onClickingStep","stepName","isCompleted","isError","isInActive","OnClicking","ClassMapping","jsxs","SingleStepperChildContainer","Check","COLORS","ErrorInfo","BodySecondary","BodyPrimary"],"mappings":"6TAiBaA,EAAWC,GAAiC,CACxD,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,mBAAAC,EAAoB,eAAAC,GAC9CJ,EAED,aACEK,EAAAA,iBAAA,CACC,SAAAJ,EAAM,IAAI,CAACK,EAAaC,IACxBC,EAAAA,IAACC,EAAA,CACA,WAAYR,EAAM,OAClB,SAAUK,EACV,eAAiBI,GAAS,CACzBP,EAAmBO,CAAI,CACxB,EACA,SAAUR,GAAY,SAAWI,GAAa,QAE9C,cAAeC,GAASN,EAAM,OAAS,EACvC,MAAAM,EACA,eAAAH,CAAA,EAHKG,CAAA,CAKN,EACF,CAEF,EAEME,EAAiBE,GAA8B,CACpD,KAAM,CACL,SAAAC,EACA,cAAAC,EACA,MAAAN,EACA,SAAAO,EACA,eAAAC,EACA,eAAAX,CAAA,EACGO,EACE,CAAE,SAAAK,EAAU,YAAAC,EAAa,QAAAC,EAAS,WAAAC,GAAeP,EACjDQ,EAAa,IAAM,CACxB,CAACD,GAAcJ,EAAeH,CAAQ,CACvC,EACMS,EAAe,IAChBP,EACI,SAEJG,EACI,YAEJC,EACI,QAEJC,EACI,WAED,UAER,OACCG,EAAAA,KAACC,EAAAA,4BAAA,CACA,WAAYZ,EAAM,WAClB,QAASS,EACT,cAAeC,EAAA,EACf,WAAYF,GAAcf,EAE1B,SAAA,CAAAkB,EAAAA,KAAC,OAAI,UAAW,mBAAmBH,EAAa,UAAY,SAAS,IACpE,SAAA,CAAAX,EAAAA,IAAC,MAAA,CAAI,UAAU,QAAQ,cAAa,cAAcI,EAAS,OAAO,GAChE,SAAAS,EAAA,GAAkB,YAClBb,EAAAA,IAACgB,EAAAA,QAAA,CACA,cAAY,aACZ,OAAQ,GACR,MAAO,GACP,MAAOC,EAAAA,OAAO,QAAQ,QAAA,CAAA,EAEpBJ,EAAA,GAAkB,QACrBb,MAACkB,EAAAA,QAAA,CAAU,cAAY,aAAa,OAAQ,GAAI,MAAO,EAAA,CAAI,EAE3DlB,EAAAA,IAACmB,EAAAA,cAAA,CAAc,UAAU,aAAc,SAAApB,EAAQ,EAAE,EAEnD,QACCqB,EAAAA,YAAA,CAAY,UAAU,YAAY,MAAOZ,EACxC,SAAAA,CAAA,CACF,CAAA,EACD,QACC,MAAA,CAAI,UAAYH,EAAuC,GAAvB,oBAAuB,CAAI,CAAA,CAAA,CAAA,CAG/D"}

package/dist/cjs/components/testimonial-card/TestimonialCard.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../TypographyStyle.js"),o=require("../../constants/Theme.js"),d=require("../../assets/icons/card_footer_arraw.svg.js"),t=require("./TestimonialCard.style.js"),h=require("../star-rating/StarRating.js"),u=require("../avatar/Avatar.js"),a=require("../avatar/AvatarHelper.js"),x=r=>{const n=r.version??"v1",l=()=>n=="v2"?e.jsxs(t.TestimonialProfileInfo2,{children:[e.jsx(t.Logo,{src:r.avatarUrl}),e.jsx(i.BodyPrimary,{color:o.COLORS.content.secondary,children:r.reviewerName})]}):e.jsxs(t.TestimonialProfileCard,{children:[e.jsx(u.Avatar,{type:a.AVATAR_TYPES.IMAGE,size:r.avatarSize??a.SIZE.MEDIUM,background:a.AVATAR_BACKGROUND.LIGHT,photoUrl:r.avatarUrl}),e.jsxs(t.TestimonialProfileInfo,{children:[e.jsx(i.TitleMedium,{color:o.COLORS.content.secondary,children:r.reviewerName}),e.jsx(i.BodyPrimary,{color:o.COLORS.content.secondary,children:r.reviewerCaption})]})]}),c=()=>n==="v2"?e.jsxs(t.TestimonialProfileFooter,{width:r.width,children:[e.jsx(t.FooterText,{children:e.jsx(i.TitleRegular,{color:o.COLORS.text.white,children:r?.footerText})}),e.jsx(t.FooterStat,{children:e.jsx(i.TitleLarge,{color:o.COLORS.text.white,children:r?.footerStat})}),e.jsx(t.FooterArrow,{children:e.jsx(d.default,{})})]}):null;return e.jsxs(e.Fragment,{children:[e.jsxs(t.TestimonialCardStyle,{width:r.width,height:r.height,version:n,children:[e.jsx(h.StarRating,{starSize:24,maxValue:r.ratingMaxValue??5,value:r.ratingValue,onChange:s=>console.log(s),mode:"VIEW",version:n}),e.jsx(i.BodyLarge,{color:o.COLORS.content.secondary,children:r.testimonial}),l()]}),c()]})};exports.TestimonialCard=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../TypographyStyle.js"),o=require("../../constants/Theme.js"),d=require("../../assets/icons/card_footer_arraw.svg.js"),r=require("./TestimonialCard.style.js"),h=require("../star-rating/StarRating.js"),u=require("../avatar/Avatar.js"),a=require("../avatar/AvatarHelper.js"),x=t=>{const n=t.version??"v1",l=()=>n=="v2"?e.jsxs(r.TestimonialProfileInfo2,{children:[e.jsx(r.Logo,{src:t.avatarUrl}),e.jsx(i.BodyPrimary,{color:o.COLORS.content.secondary,children:t.reviewerName})]}):e.jsxs(r.TestimonialProfileCard,{children:[e.jsx(u.Avatar,{type:a.AVATAR_TYPES.IMAGE,size:t.avatarSize??a.SIZE.MEDIUM,background:a.AVATAR_BACKGROUND.LIGHT,photoUrl:t.avatarUrl}),e.jsxs(r.TestimonialProfileInfo,{children:[e.jsx(i.TitleMedium,{color:o.COLORS.content.secondary,children:t.reviewerName}),e.jsx(i.BodyPrimary,{color:o.COLORS.content.secondary,children:t.reviewerCaption})]})]}),c=()=>n==="v2"?e.jsxs(r.TestimonialProfileFooter,{width:t.width,children:[e.jsx(r.FooterText,{children:e.jsx(i.TitleRegular,{color:o.COLORS.text.white,children:t?.footerText})}),e.jsx(r.FooterStat,{children:e.jsx(i.TitleLarge,{color:o.COLORS.text.white,children:t?.footerStat})}),e.jsx(r.FooterArrow,{children:e.jsx(d.default,{})})]}):null;return e.jsxs(e.Fragment,{children:[e.jsxs(r.TestimonialCardStyle,{"data-testid":"testimonial-card",width:t.width,height:t.height,version:n,children:[e.jsx(h.StarRating,{starSize:24,maxValue:t.ratingMaxValue??5,value:t.ratingValue,onChange:s=>console.log(s),mode:"VIEW",version:n}),e.jsx(i.BodyLarge,{color:o.COLORS.content.secondary,children:t.testimonial}),l()]}),c()]})};exports.TestimonialCard=x;
 //# sourceMappingURL=TestimonialCard.js.map