@bikdotai/bik-component-library 0.0.814 → 0.0.815

package/dist/cjs/components/floating-input-dropdown/FloatingInputDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingInputDropdown.js","sources":["../../../../src/components/floating-input-dropdown/FloatingInputDropdown.tsx"],"sourcesContent":["import React, { LegacyRef, Ref, useEffect, useRef, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport styled from 'styled-components';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement } from '@src/components/tooltips';\nimport { OpenDropdownContainer } from '../dropdown/Common.styled';\nimport { OpenedDropdown } from '../dropdown/OpenedDropdown';\nimport { DropdownOption, OpenDropdownProps } from '../dropdown/type';\nimport { Floater } from '../floater';\nimport { FloaterProps } from '../floater/floater';\nimport { Input } from '../input';\nimport { InputProps } from '../input/Input.model';\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};\n\ntype FloatingInputDropdownProps = {\n\tinputProps: InputProps;\n\tdropdownProps: DropdownProps;\n\tfloaterProps: FloaterProps;\n\tchildren?: React.ReactNode;\n\tisVisible?: boolean;\n\tonDropdownOptionClick?: (option: DropdownOption) => void;\n\tonChangeText?: (text: string, event?: Event) => void;\n};\n\nconst AnimatedDropdownContainer = styled(OpenDropdownContainer)<{\n\tvisible: boolean;\n}>`\n\topacity: ${({ visible }) => (visible ? 1 : 0)};\n\tvisibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};\n\ttransition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n`;\n\nexport const FloatingInputDropdown: React.FC<FloatingInputDropdownProps> = ({\n\tinputProps,\n\tdropdownProps,\n\tfloaterProps,\n\tchildren,\n\tisVisible,\n\tonDropdownOptionClick,\n\tonChangeText,\n}) => {\n\tconst headerRef = useRef(null);\n\tconst childRef = useRef(null);\n\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\tconst [popperElement, setPopperElement] = useState<HTMLDivElement | null>(\n\t\tnull,\n\t);\n\tconst [referenceElement, setReferenceElement] =\n\t\tuseState<HTMLDivElement | null>(null);\n\tconst [animateDropdown, setAnimateDropdown] = useState(false);\n\n\tconst { styles, attributes, update, forceUpdate } = usePopper(\n\t\treferenceElement,\n\t\tpopperElement,\n\t\t{\n\t\t\tplacement: dropdownProps.placement,\n\t\t\tstrategy: dropdownProps.strategy,\n\t\t\tmodifiers: [\n\t\t\t\t{\n\t\t\t\t\tname: 'offset',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\toffset: [0, 0],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'preventOverflow',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tpadding: { top: 0, bottom: 10, left: 0, right: 0 },\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'flip',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tfallbackPlacements: ['bottom', 'top'],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t);\n\n\tuseEffect(() => {\n\t\tif (openDropdown) {\n\t\t\tsetAnimateDropdown(true);\n\t\t\tif (update) update();\n\t\t} else {\n\t\t\tconst timer = setTimeout(() => setAnimateDropdown(false), 200);\n\t\t\treturn () => clearTimeout(timer);\n\t\t}\n\t}, [openDropdown, update]);\n\n\tuseEffect(() => {\n\t\tif (headerRef.current) {\n\t\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (update) update();\n\t\t\t});\n\t\t\tresizeObserver.observe(headerRef.current);\n\n\t\t\treturn () => {\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t};\n\t\t}\n\t}, [headerRef.current, update]);\n\n\tconst onCloseHandle = (data) => {\n\t\tif (\n\t\t\tdropdownProps.version === '2.0' &&\n\t\t\tdropdownProps.isMultiSelect &&\n\t\t\tdata\n\t\t) {\n\t\t\tdropdownProps.onSelect?.([...data]);\n\t\t}\n\t\tsetDropdownVisibility(false);\n\t\tdropdownProps?.onClose?.();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{isVisible && (\n\t\t\t\t<Floater {...floaterProps} refElement={childRef}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{ position: 'relative' }}\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tdropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\t\tif (!dropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tforceUpdate?.();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\t\tonChangeText={(text, event) => {\n\t\t\t\t\t\t\t\t\tonChangeText?.(text, event);\n\t\t\t\t\t\t\t\t\tif (update) update();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t</div>\n\t\t\t\t\t<AnimatedDropdownContainer\n\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\tstyle={{ ...styles['popper'], zIndex: 3 }}\n\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\tvisible={openDropdown || animateDropdown}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<OpenedDropdown\n\t\t\t\t\t\t\t\t{...dropdownProps}\n\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\tdropdownProps.version === '2.0' &&\n\t\t\t\t\t\t\t\t\t\tdropdownProps.isMultiSelect\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tdropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\tversion={dropdownProps.version}\n\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\tonDropdownItemClick={(option) => {\n\t\t\t\t\t\t\t\t\tonDropdownOptionClick?.(option);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t</AnimatedDropdownContainer>\n\t\t\t\t</Floater>\n\t\t\t)}\n\n\t\t\t<div ref={childRef}>{children && <div>{children}</div>}</div>\n\t\t</>\n\t);\n};\n"],"names":["AnimatedDropdownContainer","styled","OpenDropdownContainer","visible","FloatingInputDropdown","inputProps","dropdownProps","floaterProps","children","isVisible","onDropdownOptionClick","onChangeText","headerRef","useRef","childRef","openDropdown","setDropdownVisibility","useState","popperElement","setPopperElement","referenceElement","setReferenceElement","animateDropdown","setAnimateDropdown","styles","attributes","update","forceUpdate","usePopper","useEffect","timer","resizeObserver","onCloseHandle","data","jsxs","Fragment","Floater","jsx","DropShadow","Input","text","event","OpenedDropdown","options","option"],"mappings":"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"}
+{"version":3,"file":"FloatingInputDropdown.js","sources":["../../../../src/components/floating-input-dropdown/FloatingInputDropdown.tsx"],"sourcesContent":["import React, { LegacyRef, Ref, useEffect, useRef, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport styled from 'styled-components';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement } from '@src/components/tooltips';\nimport { OpenDropdownContainer } from '../dropdown/Common.styled';\nimport { OpenedDropdown } from '../dropdown/OpenedDropdown';\nimport { DropdownOption, OpenDropdownProps } from '../dropdown/type';\nimport { Floater } from '../floater';\nimport { FloaterProps } from '../floater/floater';\nimport { Input } from '../input';\nimport { InputProps } from '../input/Input.model';\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};\n\ntype FloatingInputDropdownProps = {\n\tinputProps: InputProps;\n\tdropdownProps: DropdownProps;\n\tfloaterProps: FloaterProps;\n\tchildren?: React.ReactNode;\n\tisVisible?: boolean;\n\tonDropdownOptionClick?: (option: DropdownOption) => void;\n\tonChangeText?: (text: string, event?: Event) => void;\n};\n\nconst AnimatedDropdownContainer = styled(OpenDropdownContainer)<{\n\tvisible: boolean;\n}>`\n\topacity: ${({ visible }) => (visible ? 1 : 0)};\n\tvisibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};\n\ttransition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n`;\n\nexport const FloatingInputDropdown: React.FC<FloatingInputDropdownProps> = ({\n\tinputProps,\n\tdropdownProps,\n\tfloaterProps,\n\tchildren,\n\tisVisible,\n\tonDropdownOptionClick,\n\tonChangeText,\n}) => {\n\tconst headerRef = useRef(null);\n\tconst childRef = useRef(null);\n\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\tconst [popperElement, setPopperElement] = useState<HTMLDivElement | null>(\n\t\tnull,\n\t);\n\tconst [referenceElement, setReferenceElement] =\n\t\tuseState<HTMLDivElement | null>(null);\n\tconst [animateDropdown, setAnimateDropdown] = useState(false);\n\n\tconst { styles, attributes, update, forceUpdate } = usePopper(\n\t\treferenceElement,\n\t\tpopperElement,\n\t\t{\n\t\t\tplacement: dropdownProps.placement,\n\t\t\tstrategy: dropdownProps.strategy,\n\t\t\tmodifiers: [\n\t\t\t\t{\n\t\t\t\t\tname: 'offset',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\toffset: [0, 0],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'preventOverflow',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tpadding: { top: 0, bottom: 10, left: 0, right: 0 },\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'flip',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tfallbackPlacements: ['bottom', 'top'],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t);\n\n\tuseEffect(() => {\n\t\tif (openDropdown) {\n\t\t\tsetAnimateDropdown(true);\n\t\t\tif (update) update();\n\t\t} else {\n\t\t\tconst timer = setTimeout(() => setAnimateDropdown(false), 200);\n\t\t\treturn () => clearTimeout(timer);\n\t\t}\n\t}, [openDropdown, update]);\n\n\tuseEffect(() => {\n\t\tif (headerRef.current) {\n\t\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (update) update();\n\t\t\t});\n\t\t\tresizeObserver.observe(headerRef.current);\n\n\t\t\treturn () => {\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t};\n\t\t}\n\t}, [headerRef.current, update]);\n\n\tconst onCloseHandle = (data) => {\n\t\tif (\n\t\t\tdropdownProps.version === '2.0' &&\n\t\t\tdropdownProps.isMultiSelect &&\n\t\t\tdata\n\t\t) {\n\t\t\tdropdownProps.onSelect?.([...data]);\n\t\t}\n\t\tsetDropdownVisibility(false);\n\t\tdropdownProps?.onClose?.();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{isVisible && (\n\t\t\t\t<Floater {...floaterProps} refElement={childRef}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{ position: 'relative' }}\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tdropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\t\tif (!dropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tforceUpdate?.();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\t\tonChangeText={(text, event) => {\n\t\t\t\t\t\t\t\t\tonChangeText?.(text, event);\n\t\t\t\t\t\t\t\t\tif (update) update();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t</div>\n\t\t\t\t\t<AnimatedDropdownContainer\n\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\tstyle={{ ...styles['popper'], zIndex: 3 }}\n\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\tvisible={openDropdown || animateDropdown}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<OpenedDropdown\n\t\t\t\t\t\t\t\t{...dropdownProps}\n\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\tdropdownProps.version === '2.0' &&\n\t\t\t\t\t\t\t\t\t\tdropdownProps.isMultiSelect\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tdropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\tversion={dropdownProps.version}\n\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\tonDropdownItemClick={(option) => {\n\t\t\t\t\t\t\t\t\tonDropdownOptionClick?.(option);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t</AnimatedDropdownContainer>\n\t\t\t\t</Floater>\n\t\t\t)}\n\n\t\t\t<div ref={childRef}>{children && <div>{children}</div>}</div>\n\t\t</>\n\t);\n};\n"],"names":["AnimatedDropdownContainer","styled","OpenDropdownContainer","visible","FloatingInputDropdown","inputProps","dropdownProps","floaterProps","children","isVisible","onDropdownOptionClick","onChangeText","headerRef","useRef","childRef","openDropdown","setDropdownVisibility","useState","popperElement","setPopperElement","referenceElement","setReferenceElement","animateDropdown","setAnimateDropdown","styles","attributes","update","forceUpdate","usePopper","useEffect","timer","resizeObserver","onCloseHandle","data","jsxs","Fragment","Floater","jsx","DropShadow","Input","text","event","OpenedDropdown","options","option"],"mappings":"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"}

package/dist/cjs/components/half-doughnut-chart/HalfDoughnutChart.styled.js

@@ -1,34 +1,34 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),n=e.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=a(n),l=e.default.div`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	width: 100%;
 	gap: 12px;
-`,r=e.div`
+`,d=e.default.div`
 	display: flex;
 	gap: 12px;
 	align-self: flex-end;
-`,a=e.div`
+`,o=e.default.div`
 	display: flex;
 	align-items: center;
 	gap: 4px;
-`,o=e.div`
+`,r=e.default.div`
 	width: 10px;
 	height: 10px;
 	border-radius: 2px;
-	background-color: ${i=>i.color};
+	background-color: ${t=>t.color};
 	flex-shrink: 0;
-`,t="380px",d=e.div`
+`,i="380px",p=e.default.div`
 	position: relative;
 	width: 100%;
-	max-width: ${t};
+	max-width: ${i};
 	overflow: visible;
-`,l=e.div`
+`,s=e.default.div`
 	width: 100%;
 	overflow: hidden;
 	z-index: 10;
 	position: relative;
-`,p=e.div`
+`,c=e.default.div`
 	position: absolute;
 	bottom: 0;
 	left: 50%;
@@ -39,13 +39,13 @@
 	justify-content: center;
 	gap: 8px;
 	z-index: 5;
-`,s=e.div`
+`,f=e.default.div`
 	text-align: center;
 	width: fit-content;
-	max-width: ${t};
+	max-width: ${i};
 	white-space: nowrap;
-`,c=e.div`
+`,x=e.default.div`
 	text-align: center;
-	max-width: ${t};
-`;exports.CanvasClip=l;exports.ChartWrapper=d;exports.DescriptionText=c;exports.ElementWrapper=p;exports.Legend=r;exports.LegendDot=o;exports.LegendItem=a;exports.PercentageLabel=s;exports.Wrapper=n;
+	max-width: ${i};
+`;exports.CanvasClip=s;exports.ChartWrapper=p;exports.DescriptionText=x;exports.ElementWrapper=c;exports.Legend=d;exports.LegendDot=r;exports.LegendItem=o;exports.PercentageLabel=f;exports.Wrapper=l;
 //# sourceMappingURL=HalfDoughnutChart.styled.js.map

package/dist/cjs/components/half-doughnut-chart/HalfDoughnutChart.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"HalfDoughnutChart.styled.js","sources":["../../../../src/components/half-doughnut-chart/HalfDoughnutChart.styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Wrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\twidth: 100%;\n\tgap: 12px;\n`;\n\nexport const Legend = styled.div`\n\tdisplay: flex;\n\tgap: 12px;\n\talign-self: flex-end;\n`;\n\nexport const LegendItem = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n`;\n\nexport const LegendDot = styled.div<{ color: string }>`\n\twidth: 10px;\n\theight: 10px;\n\tborder-radius: 2px;\n\tbackground-color: ${(props) => props.color};\n\tflex-shrink: 0;\n`;\n\nconst maxWidth = '380px';\n/**\n * Contains the Doughnut canvas. Width is fluid; height is set inline to\n * canvasSize/2 so only the top semicircle of the square canvas is visible.\n * overflow:hidden clips the bottom half away.\n */\nexport const ChartWrapper = styled.div`\n\tposition: relative;\n\twidth: 100%;\n\tmax-width: ${maxWidth};\n\toverflow: visible;\n`;\n\nexport const CanvasClip = styled.div`\n\twidth: 100%;\n\toverflow: hidden;\n\tz-index: 10;\n\tposition: relative;\n`;\n\nexport const ElementWrapper = styled.div`\n\tposition: absolute;\n\tbottom: 0;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tz-index: 5;\n`;\n\nexport const PercentageLabel = styled.div`\n\ttext-align: center;\n\twidth: fit-content;\n\tmax-width: ${maxWidth};\n\twhite-space: nowrap;\n`;\n\nexport const DescriptionText = styled.div`\n\ttext-align: center;\n\tmax-width: ${maxWidth};\n`;\n"],"names":["Wrapper","styled","Legend","LegendItem","LegendDot","props","maxWidth","ChartWrapper","CanvasClip","ElementWrapper","PercentageLabel","DescriptionText"],"mappings":"qHAEaA,EAAUC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjBC,EAASD,EAAO;AAAA;AAAA;AAAA;AAAA,EAMhBE,EAAaF,EAAO;AAAA;AAAA;AAAA;AAAA,EAMpBG,EAAYH,EAAO;AAAA;AAAA;AAAA;AAAA,qBAIVI,GAAUA,EAAM,KAAK;AAAA;AAAA,EAIrCC,EAAW,QAMJC,EAAeN,EAAO;AAAA;AAAA;AAAA,cAGrBK,CAAQ;AAAA;AAAA,EAITE,EAAaP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOpBQ,EAAiBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaxBS,EAAkBT,EAAO;AAAA;AAAA;AAAA,cAGxBK,CAAQ;AAAA;AAAA,EAITK,EAAkBV,EAAO;AAAA;AAAA,cAExBK,CAAQ;AAAA"}
+{"version":3,"file":"HalfDoughnutChart.styled.js","sources":["../../../../src/components/half-doughnut-chart/HalfDoughnutChart.styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Wrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\twidth: 100%;\n\tgap: 12px;\n`;\n\nexport const Legend = styled.div`\n\tdisplay: flex;\n\tgap: 12px;\n\talign-self: flex-end;\n`;\n\nexport const LegendItem = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n`;\n\nexport const LegendDot = styled.div<{ color: string }>`\n\twidth: 10px;\n\theight: 10px;\n\tborder-radius: 2px;\n\tbackground-color: ${(props) => props.color};\n\tflex-shrink: 0;\n`;\n\nconst maxWidth = '380px';\n/**\n * Contains the Doughnut canvas. Width is fluid; height is set inline to\n * canvasSize/2 so only the top semicircle of the square canvas is visible.\n * overflow:hidden clips the bottom half away.\n */\nexport const ChartWrapper = styled.div`\n\tposition: relative;\n\twidth: 100%;\n\tmax-width: ${maxWidth};\n\toverflow: visible;\n`;\n\nexport const CanvasClip = styled.div`\n\twidth: 100%;\n\toverflow: hidden;\n\tz-index: 10;\n\tposition: relative;\n`;\n\nexport const ElementWrapper = styled.div`\n\tposition: absolute;\n\tbottom: 0;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tz-index: 5;\n`;\n\nexport const PercentageLabel = styled.div`\n\ttext-align: center;\n\twidth: fit-content;\n\tmax-width: ${maxWidth};\n\twhite-space: nowrap;\n`;\n\nexport const DescriptionText = styled.div`\n\ttext-align: center;\n\tmax-width: ${maxWidth};\n`;\n"],"names":["Wrapper","styled","Legend","LegendItem","LegendDot","props","maxWidth","ChartWrapper","CanvasClip","ElementWrapper","PercentageLabel","DescriptionText"],"mappings":"oLAEaA,EAAUC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjBC,EAASD,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMhBE,EAAaF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMpBG,EAAYH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,qBAIVI,GAAUA,EAAM,KAAK;AAAA;AAAA,EAIrCC,EAAW,QAMJC,EAAeN,EAAAA,QAAO;AAAA;AAAA;AAAA,cAGrBK,CAAQ;AAAA;AAAA,EAITE,EAAaP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOpBQ,EAAiBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaxBS,EAAkBT,EAAAA,QAAO;AAAA;AAAA;AAAA,cAGxBK,CAAQ;AAAA;AAAA,EAITK,EAAkBV,EAAAA,QAAO;AAAA;AAAA,cAExBK,CAAQ;AAAA"}

package/dist/cjs/components/icon-button/IconButton.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),h=require("./IconButton.styled.js"),x=require("./theme.js"),B=require("../tooltips/Tooltip.js"),s=l.forwardRef(({id:u,iconButtonType:e="default",Icon:i,height:a=20,width:y=20,bordered:d,disabled:o,isSelected:n,style:m,svgStyle:p,iconColor:I,disabledTooltip:r,...j},q)=>{const f=x.getIconColor(e,o,n),c=t.jsx(h.IconButton,{id:u,ref:q,style:m,iconButtonType:e,bordered:d,disabled:o,isSelected:n,...j,children:l.createElement(i,{height:a,width:y,color:I||f,style:{display:"block",...p??{}}})});return o&&r?t.jsx(B.Tooltip,{body:r,children:t.jsx("span",{style:{display:"inline-block",cursor:"not-allowed"},children:c})}):c});s.displayName="IconButton";exports.IconButton=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),b=require("./IconButton.styled.js"),h=require("./theme.js"),x=require("../tooltips/Tooltip.js"),B=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},C=B(u),s=u.forwardRef(({id:t,iconButtonType:n="default",Icon:a,height:i=20,width:d=20,bordered:f,disabled:o,isSelected:c,style:p,svgStyle:y,iconColor:m,disabledTooltip:r,...j},I)=>{const q=h.getIconColor(n,o,c),l=e.jsx(b.IconButton,{id:t,ref:I,style:p,iconButtonType:n,bordered:f,disabled:o,isSelected:c,...j,children:C.default.createElement(a,{height:i,width:d,color:m||q,style:{display:"block",...y??{}}})});return o&&r?e.jsx(x.Tooltip,{body:r,children:e.jsx("span",{style:{display:"inline-block",cursor:"not-allowed"},children:l})}):l});s.displayName="IconButton";exports.IconButton=s;
 //# sourceMappingURL=IconButton.js.map

package/dist/cjs/components/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { forwardRef } from 'react';\nimport { Tooltip } from '../tooltips';\nimport * as Sc from './IconButton.styled';\nimport { IconButtonProps } from './model';\nimport { getIconColor } from './theme';\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\ticonButtonType = 'default',\n\t\t\tIcon,\n\t\t\theight = 20,\n\t\t\twidth = 20,\n\t\t\tbordered,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t\tstyle,\n\t\t\tsvgStyle,\n\t\t\ticonColor,\n\t\t\tdisabledTooltip,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst iconColorComputed = getIconColor(\n\t\t\ticonButtonType,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t);\n\t\tconst button = (\n\t\t\t<Sc.IconButton\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={style}\n\t\t\t\ticonButtonType={iconButtonType}\n\t\t\t\tbordered={bordered}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisSelected={isSelected}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{React.createElement(Icon, {\n\t\t\t\t\theight: height,\n\t\t\t\t\twidth: width,\n\t\t\t\t\tcolor: iconColor || iconColorComputed,\n\t\t\t\t\tstyle: { display: 'block', ...(svgStyle ?? {}) },\n\t\t\t\t})}\n\t\t\t</Sc.IconButton>\n\t\t);\n\n\t\treturn disabled && disabledTooltip ? (\n\t\t\t<Tooltip body={disabledTooltip}>\n\t\t\t\t<span style={{ display: 'inline-block', cursor: 'not-allowed' }}>\n\t\t\t\t\t{button}\n\t\t\t\t</span>\n\t\t\t</Tooltip>\n\t\t) : (\n\t\t\tbutton\n\t\t);\n\t},\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["IconButton","forwardRef","id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip","rest","ref","iconColorComputed","getIconColor","button","jsx","Sc.IconButton","React","Tooltip"],"mappings":"wOAOaA,EAAaC,EAAAA,WACzB,CACC,CACC,GAAAC,EACA,eAAAC,EAAiB,UACjB,KAAAC,EACA,OAAAC,EAAS,GACT,MAAAC,EAAQ,GACR,SAAAC,EACA,SAAAC,EACA,WAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,aACzBd,EACAK,EACAC,CAAA,EAEKS,EACLC,EAAAA,IAACC,EAAAA,WAAA,CACA,GAAAlB,EACA,IAAAa,EACA,MAAAL,EACA,eAAAP,EACA,SAAAI,EACA,SAAAC,EACA,WAAAC,EACC,GAAGK,EAEH,SAAAO,EAAM,cAAcjB,EAAM,CAC1B,OAAAC,EACA,MAAAC,EACA,MAAOM,GAAaI,EACpB,MAAO,CAAE,QAAS,QAAS,GAAIL,GAAY,CAAA,CAAC,CAAG,CAC/C,CAAA,CAAA,EAIH,OAAOH,GAAYK,EAClBM,EAAAA,IAACG,EAAAA,QAAA,CAAQ,KAAMT,EACd,SAAAM,EAAAA,IAAC,OAAA,CAAK,MAAO,CAAE,QAAS,eAAgB,OAAQ,eAC9C,SAAAD,CAAA,CACF,EACD,EAEAA,CAEF,CACD,EAEAlB,EAAW,YAAc"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { forwardRef } from 'react';\nimport { Tooltip } from '../tooltips';\nimport * as Sc from './IconButton.styled';\nimport { IconButtonProps } from './model';\nimport { getIconColor } from './theme';\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\ticonButtonType = 'default',\n\t\t\tIcon,\n\t\t\theight = 20,\n\t\t\twidth = 20,\n\t\t\tbordered,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t\tstyle,\n\t\t\tsvgStyle,\n\t\t\ticonColor,\n\t\t\tdisabledTooltip,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst iconColorComputed = getIconColor(\n\t\t\ticonButtonType,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t);\n\t\tconst button = (\n\t\t\t<Sc.IconButton\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={style}\n\t\t\t\ticonButtonType={iconButtonType}\n\t\t\t\tbordered={bordered}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisSelected={isSelected}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{React.createElement(Icon, {\n\t\t\t\t\theight: height,\n\t\t\t\t\twidth: width,\n\t\t\t\t\tcolor: iconColor || iconColorComputed,\n\t\t\t\t\tstyle: { display: 'block', ...(svgStyle ?? {}) },\n\t\t\t\t})}\n\t\t\t</Sc.IconButton>\n\t\t);\n\n\t\treturn disabled && disabledTooltip ? (\n\t\t\t<Tooltip body={disabledTooltip}>\n\t\t\t\t<span style={{ display: 'inline-block', cursor: 'not-allowed' }}>\n\t\t\t\t\t{button}\n\t\t\t\t</span>\n\t\t\t</Tooltip>\n\t\t) : (\n\t\t\tbutton\n\t\t);\n\t},\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["IconButton","forwardRef","id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip","rest","ref","iconColorComputed","getIconColor","button","jsx","Sc.IconButton","React","Tooltip"],"mappings":"uSAOaA,EAAaC,EAAAA,WACzB,CACC,CACC,GAAAC,EACA,eAAAC,EAAiB,UACjB,KAAAC,EACA,OAAAC,EAAS,GACT,MAAAC,EAAQ,GACR,SAAAC,EACA,SAAAC,EACA,WAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,aACzBd,EACAK,EACAC,CAAA,EAEKS,EACLC,EAAAA,IAACC,EAAAA,WAAA,CACA,GAAAlB,EACA,IAAAa,EACA,MAAAL,EACA,eAAAP,EACA,SAAAI,EACA,SAAAC,EACA,WAAAC,EACC,GAAGK,EAEH,SAAAO,EAAAA,QAAM,cAAcjB,EAAM,CAC1B,OAAAC,EACA,MAAAC,EACA,MAAOM,GAAaI,EACpB,MAAO,CAAE,QAAS,QAAS,GAAIL,GAAY,CAAA,CAAC,CAAG,CAC/C,CAAA,CAAA,EAIH,OAAOH,GAAYK,EAClBM,EAAAA,IAACG,EAAAA,QAAA,CAAQ,KAAMT,EACd,SAAAM,EAAAA,IAAC,OAAA,CAAK,MAAO,CAAE,QAAS,eAAgB,OAAQ,eAC9C,SAAAD,CAAA,CACF,EACD,EAEAA,CAEF,CACD,EAEAlB,EAAW,YAAc"}

package/dist/cjs/components/icon-button/IconButton.styled.js

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=require("../../constants/Theme.js"),t=require("./theme.js"),n=o.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),o=require("../../constants/Theme.js"),r=require("./theme.js"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(t),d=a.default.button`
 	${e=>`
 	all: unset;
 	cursor: pointer;
 	padding: 6px;
 	border-radius: 4px;
 	flex-wrap: wrap;
-	${e.bordered&&e.iconButtonType!=="ai"?`border: 1px solid ${r.COLORS.stroke.primary};`:""}
+	${e.bordered&&e.iconButtonType!=="ai"?`border: 1px solid ${o.COLORS.stroke.primary};`:""}
 	${e.isSelected?`
-			background: ${t.generateBackgroundColor(e.iconButtonType)};
+			background: ${r.generateBackgroundColor(e.iconButtonType)};
 				`:`
 				:hover {
 					background-color: rgba(0, 0, 0, 0.03);
@@ -19,5 +19,5 @@
 		`}
 
 	`}
-`;exports.IconButton=n;
+`;exports.IconButton=d;
 //# sourceMappingURL=IconButton.styled.js.map

package/dist/cjs/components/icon-button/IconButton.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered && props.iconButtonType !== 'ai'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.isSelected\n\t\t\t? `\n\t\t\tbackground: ${generateBackgroundColor(props.iconButtonType)};\n\t\t\t\t`\n\t\t\t: `\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled &&\n\t\t`\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t`\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":"mLAKaA,EAAaC,EAAO;AAAA,GAK7BC,GAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOZA,EAAM,UAAYA,EAAM,iBAAmB,KACxC,qBAAqBC,EAAAA,OAAO,OAAO,OAAO,IAC1C,EACJ;AAAA,GAECD,EAAM,WACH;AAAA,iBACYE,EAAAA,wBAAwBF,EAAM,cAAc,CAAC;AAAA,MAEzD;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,UACN;AAAA;AAAA;AAAA,GAID;AAAA;AAAA,EAEC;AAAA"}
+{"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered && props.iconButtonType !== 'ai'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.isSelected\n\t\t\t? `\n\t\t\tbackground: ${generateBackgroundColor(props.iconButtonType)};\n\t\t\t\t`\n\t\t\t: `\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled &&\n\t\t`\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t`\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":"kPAKaA,EAAaC,EAAAA,QAAO;AAAA,GAK7BC,GAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOZA,EAAM,UAAYA,EAAM,iBAAmB,KACxC,qBAAqBC,EAAAA,OAAO,OAAO,OAAO,IAC1C,EACJ;AAAA,GAECD,EAAM,WACH;AAAA,iBACYE,EAAAA,wBAAwBF,EAAM,cAAc,CAAC;AAAA,MAEzD;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,UACN;AAAA;AAAA;AAAA,GAID;AAAA;AAAA,EAEC;AAAA"}

package/dist/cjs/components/image-compress/ImageCompress.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("browser-image-compression");class n{static base64ToImage=e=>{const t=atob(e.split(",")[1]),r=e.split(",")[0].split(":")[1].split(";")[0],s=new ArrayBuffer(t.length),o=new Uint8Array(s);for(let a=0;a<t.length;a++)o[a]=t.charCodeAt(a);const i=new Blob([s],{type:r});return new File([i],"image",{type:r})};static compressImage=async(e,t)=>{let r=e,s="";const o=t?t.maxSizeMB:e.size/1024/1024*.8;try{const i={maxSizeMB:o,maxWidthOrHeight:1920,useWebWorker:!0};e.size/1024/1024>.1&&(r=await c(e,i)),s=await c.getDataUrlFromFile(r)}catch(i){console.error(i)}return{base64:s,compressedFile:r}}}exports.ImageService=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("browser-image-compression"),m=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},c=m(l);class u{static base64ToImage=e=>{const a=atob(e.split(",")[1]),r=e.split(",")[0].split(":")[1].split(";")[0],o=new ArrayBuffer(a.length),n=new Uint8Array(o);for(let i=0;i<a.length;i++)n[i]=a.charCodeAt(i);const s=new Blob([o],{type:r});return new File([s],"image",{type:r})};static compressImage=async(e,a)=>{let r=e,o="";const n=a?a.maxSizeMB:e.size/1024/1024*.8;try{const s={maxSizeMB:n,maxWidthOrHeight:1920,useWebWorker:!0};e.size/1024/1024>.1&&(r=await c.default(e,s)),o=await c.default.getDataUrlFromFile(r)}catch(s){console.error(s)}return{base64:o,compressedFile:r}}}exports.ImageService=u;
 //# sourceMappingURL=ImageCompress.js.map

package/dist/cjs/components/image-compress/ImageCompress.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCompress.js","sources":["../../../../src/components/image-compress/ImageCompress.tsx"],"sourcesContent":["import imageCompression from 'browser-image-compression';\n\nexport interface CompressImageOptions {\n\tmaxSizeMB?: number;\n}\n\nexport interface CompressImageReturnType {\n\tbase64: string;\n\tcompressedFile: File;\n}\n\nexport class ImageService {\n\tstatic base64ToImage = (base64String: string) => {\n\t\tconst byteString = atob(base64String.split(',')[1]);\n\t\tconst mimeString = base64String.split(',')[0].split(':')[1].split(';')[0];\n\t\tconst ab = new ArrayBuffer(byteString.length);\n\t\tconst ia = new Uint8Array(ab);\n\t\tfor (let i = 0; i < byteString.length; i++)\n\t\t\tia[i] = byteString.charCodeAt(i);\n\t\tconst blob = new Blob([ab], { type: mimeString });\n\t\tconst file = new File([blob], 'image', { type: mimeString });\n\t\treturn file;\n\t};\n\n\tstatic compressImage = async (\n\t\tfile: File,\n\t\toptions?: CompressImageOptions,\n\t): Promise<CompressImageReturnType> => {\n\t\tlet compressedFile = file;\n\t\tlet compressedBase64 = '';\n\n\t\tconst maximumSize = options\n\t\t\t? options.maxSizeMB\n\t\t\t: (file.size / 1024 / 1024) * 0.8;\n\n\t\ttry {\n\t\t\tconst options = {\n\t\t\t\tmaxSizeMB: maximumSize,\n\t\t\t\tmaxWidthOrHeight: 1920,\n\t\t\t\tuseWebWorker: true,\n\t\t\t};\n\t\t\tif (file.size / 1024 / 1024 > 0.1) {\n\t\t\t\tcompressedFile = await imageCompression(file, options);\n\t\t\t}\n\t\t\tcompressedBase64 = await imageCompression.getDataUrlFromFile(\n\t\t\t\tcompressedFile!,\n\t\t\t);\n\t\t} catch (error) {\n\t\t\tconsole.error(error);\n\t\t}\n\t\treturn { base64: compressedBase64, compressedFile: compressedFile! };\n\t};\n}\n"],"names":["ImageService","base64String","byteString","mimeString","ab","ia","i","blob","file","options","compressedFile","compressedBase64","maximumSize","imageCompression","error"],"mappings":"6HAWO,MAAMA,CAAa,CACzB,OAAO,cAAiBC,GAAyB,CAChD,MAAMC,EAAa,KAAKD,EAAa,MAAM,GAAG,EAAE,CAAC,CAAC,EAC5CE,EAAaF,EAAa,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,EAClEG,EAAK,IAAI,YAAYF,EAAW,MAAM,EACtCG,EAAK,IAAI,WAAWD,CAAE,EAC5B,QAASE,EAAI,EAAGA,EAAIJ,EAAW,OAAQI,IACtCD,EAAGC,CAAC,EAAIJ,EAAW,WAAWI,CAAC,EAChC,MAAMC,EAAO,IAAI,KAAK,CAACH,CAAE,EAAG,CAAE,KAAMD,EAAY,EAEhD,OADa,IAAI,KAAK,CAACI,CAAI,EAAG,QAAS,CAAE,KAAMJ,EAAY,CAE5D,EAEA,OAAO,cAAgB,MACtBK,EACAC,IACsC,CACtC,IAAIC,EAAiBF,EACjBG,EAAmB,GAEvB,MAAMC,EAAcH,EACjBA,EAAQ,UACPD,EAAK,KAAO,KAAO,KAAQ,GAE/B,GAAI,CACH,MAAMC,EAAU,CACf,UAAWG,EACX,iBAAkB,KAClB,aAAc,EAAA,EAEXJ,EAAK,KAAO,KAAO,KAAO,KAC7BE,EAAiB,MAAMG,EAAiBL,EAAMC,CAAO,GAEtDE,EAAmB,MAAME,EAAiB,mBACzCH,CAAA,CAEF,OAASI,EAAO,CACf,QAAQ,MAAMA,CAAK,CACpB,CACA,MAAO,CAAE,OAAQH,EAAkB,eAAAD,CAAA,CACpC,CACD"}
+{"version":3,"file":"ImageCompress.js","sources":["../../../../src/components/image-compress/ImageCompress.tsx"],"sourcesContent":["import imageCompression from 'browser-image-compression';\n\nexport interface CompressImageOptions {\n\tmaxSizeMB?: number;\n}\n\nexport interface CompressImageReturnType {\n\tbase64: string;\n\tcompressedFile: File;\n}\n\nexport class ImageService {\n\tstatic base64ToImage = (base64String: string) => {\n\t\tconst byteString = atob(base64String.split(',')[1]);\n\t\tconst mimeString = base64String.split(',')[0].split(':')[1].split(';')[0];\n\t\tconst ab = new ArrayBuffer(byteString.length);\n\t\tconst ia = new Uint8Array(ab);\n\t\tfor (let i = 0; i < byteString.length; i++)\n\t\t\tia[i] = byteString.charCodeAt(i);\n\t\tconst blob = new Blob([ab], { type: mimeString });\n\t\tconst file = new File([blob], 'image', { type: mimeString });\n\t\treturn file;\n\t};\n\n\tstatic compressImage = async (\n\t\tfile: File,\n\t\toptions?: CompressImageOptions,\n\t): Promise<CompressImageReturnType> => {\n\t\tlet compressedFile = file;\n\t\tlet compressedBase64 = '';\n\n\t\tconst maximumSize = options\n\t\t\t? options.maxSizeMB\n\t\t\t: (file.size / 1024 / 1024) * 0.8;\n\n\t\ttry {\n\t\t\tconst options = {\n\t\t\t\tmaxSizeMB: maximumSize,\n\t\t\t\tmaxWidthOrHeight: 1920,\n\t\t\t\tuseWebWorker: true,\n\t\t\t};\n\t\t\tif (file.size / 1024 / 1024 > 0.1) {\n\t\t\t\tcompressedFile = await imageCompression(file, options);\n\t\t\t}\n\t\t\tcompressedBase64 = await imageCompression.getDataUrlFromFile(\n\t\t\t\tcompressedFile!,\n\t\t\t);\n\t\t} catch (error) {\n\t\t\tconsole.error(error);\n\t\t}\n\t\treturn { base64: compressedBase64, compressedFile: compressedFile! };\n\t};\n}\n"],"names":["ImageService","base64String","byteString","mimeString","ab","ia","blob","file","options","compressedFile","compressedBase64","maximumSize","imageCompression","error"],"mappings":"4LAWO,MAAMA,CAAa,CACzB,OAAO,cAAiBC,GAAyB,CAChD,MAAMC,EAAa,KAAKD,EAAa,MAAM,GAAG,EAAE,CAAC,CAAC,EAC5CE,EAAaF,EAAa,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,EAClEG,EAAK,IAAI,YAAYF,EAAW,MAAM,EACtCG,EAAK,IAAI,WAAWD,CAAE,EAC5B,QAAS,EAAI,EAAG,EAAIF,EAAW,OAAQ,IACtCG,EAAG,CAAC,EAAIH,EAAW,WAAW,CAAC,EAChC,MAAMI,EAAO,IAAI,KAAK,CAACF,CAAE,EAAG,CAAE,KAAMD,EAAY,EAEhD,OADa,IAAI,KAAK,CAACG,CAAI,EAAG,QAAS,CAAE,KAAMH,EAAY,CAE5D,EAEA,OAAO,cAAgB,MACtBI,EACAC,IACsC,CACtC,IAAIC,EAAiBF,EACjBG,EAAmB,GAEvB,MAAMC,EAAcH,EACjBA,EAAQ,UACPD,EAAK,KAAO,KAAO,KAAQ,GAE/B,GAAI,CACH,MAAMC,EAAU,CACf,UAAWG,EACX,iBAAkB,KAClB,aAAc,EAAA,EAEXJ,EAAK,KAAO,KAAO,KAAO,KAC7BE,EAAiB,MAAMG,EAAAA,QAAiBL,EAAMC,CAAO,GAEtDE,EAAmB,MAAME,EAAAA,QAAiB,mBACzCH,CAAA,CAEF,OAASI,EAAO,CACf,QAAQ,MAAMA,CAAK,CACpB,CACA,MAAO,CAAE,OAAQH,EAAkB,eAAAD,CAAA,CACpC,CACD"}

package/dist/cjs/components/image-cropper/BikImageCropper.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("react"),I=require("react-image-crop");require("react-image-crop/dist/ReactCrop.css");const j=require("../modals/styledModal.js"),m=a=>{const[c,u]=s.useState(!1),[h,C]=s.useState(void 0),[d,w]=s.useState({width:0,height:0}),[x,g]=s.useState(!1),y=async t=>{if(g(!0),a.src&&t?.width&&t?.height){const e=new Image;e.src=a.src;const i=e.naturalWidth/d.width,r=e.naturalHeight/d.height,n=await f(e,t,i,r);await a?.onCropComplete?.(n,c)}else await a?.onCropComplete?.(a.src,c);g(!1)},f=async(t,e,i,r)=>{const n=document.createElement("canvas");n.width=e.width,n.height=e.height;const l=n.getContext("2d");if(!l)throw new Error("Failed to get 2D context of canvas.");l.drawImage(t,e.x*i,e.y*r,e.width*i,e.height*r,0,0,e.width,e.height);try{return n.toDataURL("image/png")}catch{throw new Error("Failed to create blob for cropped image.")}};return o.jsx(j.StyledModal,{open:!0,onClose:a.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:x,onClick:()=>{y(h)}},children:o.jsx("div",{style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:o.jsx("div",{children:o.jsx(I,{crop:h,onChange:t=>{C(t)},circularCrop:!1,onDragStart:()=>{u(!0)},aspect:a.aspectRatio,children:o.jsx("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:a.src,alt:"image cropper",onLoad:t=>{const e=t.target,i=e.width;w({width:i,height:e.height})}})})})})})};exports.BikImageCropper=m;exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("react"),p=require("react-image-crop");require("react-image-crop/dist/ReactCrop.css");const j=require("../modals/styledModal.js"),I=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},b=I(p),m=t=>{const[c,u]=s.useState(!1),[d,C]=s.useState(void 0),[h,w]=s.useState({width:0,height:0}),[f,g]=s.useState(!1),x=async a=>{if(g(!0),t.src&&a?.width&&a?.height){const e=new Image;e.src=t.src;const i=e.naturalWidth/h.width,r=e.naturalHeight/h.height,n=await y(e,a,i,r);await t?.onCropComplete?.(n,c)}else await t?.onCropComplete?.(t.src,c);g(!1)},y=async(a,e,i,r)=>{const n=document.createElement("canvas");n.width=e.width,n.height=e.height;const l=n.getContext("2d");if(!l)throw new Error("Failed to get 2D context of canvas.");l.drawImage(a,e.x*i,e.y*r,e.width*i,e.height*r,0,0,e.width,e.height);try{return n.toDataURL("image/png")}catch{throw new Error("Failed to create blob for cropped image.")}};return o.jsx(j.StyledModal,{open:!0,onClose:t.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:f,onClick:()=>{x(d)}},children:o.jsx("div",{style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:o.jsx("div",{children:o.jsx(b.default,{crop:d,onChange:a=>{C(a)},circularCrop:!1,onDragStart:()=>{u(!0)},aspect:t.aspectRatio,children:o.jsx("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:t.src,alt:"image cropper",onLoad:a=>{const e=a.target,i=e.width;w({width:i,height:e.height})}})})})})})};exports.BikImageCropper=m;exports.default=m;
 //# sourceMappingURL=BikImageCropper.js.map

package/dist/cjs/components/image-cropper/BikImageCropper.js.map

@@ -1 +1 @@
-{"version":3,"file":"BikImageCropper.js","sources":["../../../../src/components/image-cropper/BikImageCropper.tsx"],"sourcesContent":["import { useState } from 'react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\nimport { StyledModal } from '@src/components/modals';\nimport { BikImageCropperProps } from './BikImageCropper.model';\n\nexport const BikImageCropper = (props: BikImageCropperProps) => {\n\tconst [didChange, setDidChange] = useState(false);\n\tconst [crop, setCrop] = useState<Crop | undefined>(undefined);\n\tconst [imageDimensions, setImageDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t}>({ width: 0, height: 0 });\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleCropComplete = async (cropResult: Crop) => {\n\t\tsetIsLoading(true);\n\t\tif (props.src && cropResult?.width && cropResult?.height) {\n\t\t\tconst image = new Image();\n\t\t\timage.src = props.src;\n\n\t\t\tconst scaleX = image.naturalWidth / imageDimensions.width;\n\t\t\tconst scaleY = image.naturalHeight / imageDimensions.height;\n\t\t\tconst croppedImageData = await getCroppedImage(\n\t\t\t\timage,\n\t\t\t\tcropResult,\n\t\t\t\tscaleX,\n\t\t\t\tscaleY,\n\t\t\t);\n\t\t\tawait props?.onCropComplete?.(croppedImageData, didChange);\n\t\t} else {\n\t\t\tawait props?.onCropComplete?.(props.src, didChange);\n\t\t}\n\t\tsetIsLoading(false);\n\t};\n\n\tconst getCroppedImage = async (\n\t\timage: HTMLImageElement,\n\t\tcrop: Crop,\n\t\tscaleX: number,\n\t\tscaleY: number,\n\t): Promise<string> => {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = crop.width;\n\t\tcanvas.height = crop.height;\n\t\tconst ctx = canvas.getContext('2d');\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Failed to get 2D context of canvas.');\n\t\t}\n\n\t\tctx.drawImage(\n\t\t\timage,\n\t\t\tcrop.x * scaleX,\n\t\t\tcrop.y * scaleY,\n\t\t\tcrop.width * scaleX,\n\t\t\tcrop.height * scaleY,\n\t\t\t0,\n\t\t\t0,\n\t\t\tcrop.width,\n\t\t\tcrop.height,\n\t\t);\n\n\t\ttry {\n\t\t\tconst base64String = canvas.toDataURL('image/png');\n\t\t\treturn base64String;\n\t\t} catch (error) {\n\t\t\tthrow new Error('Failed to create blob for cropped image.');\n\t\t}\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\tonClose={props.onCancel}\n\t\t\tcentralContainerStyles={{ width: 700, maxHeight: 700 }}\n\t\t\theadingTitle={'Crop Image'}\n\t\t\tprimaryButton={{\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tisLoading: isLoading,\n\t\t\t\tonClick: () => {\n\t\t\t\t\thandleCropComplete(crop!);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<ReactCrop\n\t\t\t\t\t\tcrop={crop}\n\t\t\t\t\t\tonChange={(c) => {\n\t\t\t\t\t\t\tsetCrop(c);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcircularCrop={false}\n\t\t\t\t\t\tonDragStart={() => {\n\t\t\t\t\t\t\tsetDidChange(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taspect={props.aspectRatio}\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tstyle={{ maxWidth: 700, maxHeight: 550, objectFit: 'contain' }}\n\t\t\t\t\t\t\tsrc={props.src}\n\t\t\t\t\t\t\talt={'image cropper'}\n\t\t\t\t\t\t\tonLoad={(e) => {\n\t\t\t\t\t\t\t\tconst imgElement = e.target as HTMLImageElement;\n\t\t\t\t\t\t\t\tconst imgWidth = imgElement.width;\n\t\t\t\t\t\t\t\tsetImageDimensions({\n\t\t\t\t\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\t\t\t\t\theight: imgElement.height,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ReactCrop>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</StyledModal>\n\t);\n};\n\nexport default BikImageCropper;\n"],"names":["BikImageCropper","props","didChange","setDidChange","useState","crop","setCrop","imageDimensions","setImageDimensions","isLoading","setIsLoading","handleCropComplete","cropResult","image","scaleX","scaleY","croppedImageData","getCroppedImage","canvas","ctx","jsx","StyledModal","ReactCrop","c","e","imgElement","imgWidth"],"mappings":"6RAMaA,EAAmBC,GAAgC,CAC/D,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAC1C,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAA2B,MAAS,EACtD,CAACG,EAAiBC,CAAkB,EAAIJ,EAAAA,SAG3C,CAAE,MAAO,EAAG,OAAQ,EAAG,EACpB,CAACK,EAAWC,CAAY,EAAIN,EAAAA,SAAS,EAAK,EAE1CO,EAAqB,MAAOC,GAAqB,CAEtD,GADAF,EAAa,EAAI,EACbT,EAAM,KAAOW,GAAY,OAASA,GAAY,OAAQ,CACzD,MAAMC,EAAQ,IAAI,MAClBA,EAAM,IAAMZ,EAAM,IAElB,MAAMa,EAASD,EAAM,aAAeN,EAAgB,MAC9CQ,EAASF,EAAM,cAAgBN,EAAgB,OAC/CS,EAAmB,MAAMC,EAC9BJ,EACAD,EACAE,EACAC,CAAA,EAED,MAAMd,GAAO,iBAAiBe,EAAkBd,CAAS,CAC1D,MACC,MAAMD,GAAO,iBAAiBA,EAAM,IAAKC,CAAS,EAEnDQ,EAAa,EAAK,CACnB,EAEMO,EAAkB,MACvBJ,EACAR,EACAS,EACAC,IACqB,CACrB,MAAMG,EAAS,SAAS,cAAc,QAAQ,EAC9CA,EAAO,MAAQb,EAAK,MACpBa,EAAO,OAASb,EAAK,OACrB,MAAMc,EAAMD,EAAO,WAAW,IAAI,EAElC,GAAI,CAACC,EACJ,MAAM,IAAI,MAAM,qCAAqC,EAGtDA,EAAI,UACHN,EACAR,EAAK,EAAIS,EACTT,EAAK,EAAIU,EACTV,EAAK,MAAQS,EACbT,EAAK,OAASU,EACd,EACA,EACAV,EAAK,MACLA,EAAK,MAAA,EAGN,GAAI,CAEH,OADqBa,EAAO,UAAU,WAAW,CAElD,MAAgB,CACf,MAAM,IAAI,MAAM,0CAA0C,CAC3D,CACD,EAEA,OACCE,EAAAA,IAACC,EAAAA,YAAA,CACA,KAAM,GACN,QAASpB,EAAM,SACf,uBAAwB,CAAE,MAAO,IAAK,UAAW,GAAA,EACjD,aAAc,aACd,cAAe,CACd,WAAY,OACZ,UAAAQ,EACA,QAAS,IAAM,CACdE,EAAmBN,CAAK,CACzB,CAAA,EAGD,SAAAe,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,MAAO,OACP,OAAQ,OACR,QAAS,OACT,eAAgB,SAChB,WAAY,QAAA,EAGb,eAAC,MAAA,CACA,SAAAA,EAAAA,IAACE,EAAA,CACA,KAAAjB,EACA,SAAWkB,GAAM,CAChBjB,EAAQiB,CAAC,CACV,EACA,aAAc,GACd,YAAa,IAAM,CAClBpB,EAAa,EAAI,CAClB,EACA,OAAQF,EAAM,YAEd,SAAAmB,EAAAA,IAAC,MAAA,CACA,MAAO,CAAE,SAAU,IAAK,UAAW,IAAK,UAAW,SAAA,EACnD,IAAKnB,EAAM,IACX,IAAK,gBACL,OAASuB,GAAM,CACd,MAAMC,EAAaD,EAAE,OACfE,EAAWD,EAAW,MAC5BjB,EAAmB,CAClB,MAAOkB,EACP,OAAQD,EAAW,MAAA,CACnB,CACF,CAAA,CAAA,CACD,CAAA,CACD,CACD,CAAA,CAAA,CACD,CAAA,CAGH"}
+{"version":3,"file":"BikImageCropper.js","sources":["../../../../src/components/image-cropper/BikImageCropper.tsx"],"sourcesContent":["import { useState } from 'react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\nimport { StyledModal } from '@src/components/modals';\nimport { BikImageCropperProps } from './BikImageCropper.model';\n\nexport const BikImageCropper = (props: BikImageCropperProps) => {\n\tconst [didChange, setDidChange] = useState(false);\n\tconst [crop, setCrop] = useState<Crop | undefined>(undefined);\n\tconst [imageDimensions, setImageDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t}>({ width: 0, height: 0 });\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleCropComplete = async (cropResult: Crop) => {\n\t\tsetIsLoading(true);\n\t\tif (props.src && cropResult?.width && cropResult?.height) {\n\t\t\tconst image = new Image();\n\t\t\timage.src = props.src;\n\n\t\t\tconst scaleX = image.naturalWidth / imageDimensions.width;\n\t\t\tconst scaleY = image.naturalHeight / imageDimensions.height;\n\t\t\tconst croppedImageData = await getCroppedImage(\n\t\t\t\timage,\n\t\t\t\tcropResult,\n\t\t\t\tscaleX,\n\t\t\t\tscaleY,\n\t\t\t);\n\t\t\tawait props?.onCropComplete?.(croppedImageData, didChange);\n\t\t} else {\n\t\t\tawait props?.onCropComplete?.(props.src, didChange);\n\t\t}\n\t\tsetIsLoading(false);\n\t};\n\n\tconst getCroppedImage = async (\n\t\timage: HTMLImageElement,\n\t\tcrop: Crop,\n\t\tscaleX: number,\n\t\tscaleY: number,\n\t): Promise<string> => {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = crop.width;\n\t\tcanvas.height = crop.height;\n\t\tconst ctx = canvas.getContext('2d');\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Failed to get 2D context of canvas.');\n\t\t}\n\n\t\tctx.drawImage(\n\t\t\timage,\n\t\t\tcrop.x * scaleX,\n\t\t\tcrop.y * scaleY,\n\t\t\tcrop.width * scaleX,\n\t\t\tcrop.height * scaleY,\n\t\t\t0,\n\t\t\t0,\n\t\t\tcrop.width,\n\t\t\tcrop.height,\n\t\t);\n\n\t\ttry {\n\t\t\tconst base64String = canvas.toDataURL('image/png');\n\t\t\treturn base64String;\n\t\t} catch (error) {\n\t\t\tthrow new Error('Failed to create blob for cropped image.');\n\t\t}\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\tonClose={props.onCancel}\n\t\t\tcentralContainerStyles={{ width: 700, maxHeight: 700 }}\n\t\t\theadingTitle={'Crop Image'}\n\t\t\tprimaryButton={{\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tisLoading: isLoading,\n\t\t\t\tonClick: () => {\n\t\t\t\t\thandleCropComplete(crop!);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<ReactCrop\n\t\t\t\t\t\tcrop={crop}\n\t\t\t\t\t\tonChange={(c) => {\n\t\t\t\t\t\t\tsetCrop(c);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcircularCrop={false}\n\t\t\t\t\t\tonDragStart={() => {\n\t\t\t\t\t\t\tsetDidChange(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taspect={props.aspectRatio}\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tstyle={{ maxWidth: 700, maxHeight: 550, objectFit: 'contain' }}\n\t\t\t\t\t\t\tsrc={props.src}\n\t\t\t\t\t\t\talt={'image cropper'}\n\t\t\t\t\t\t\tonLoad={(e) => {\n\t\t\t\t\t\t\t\tconst imgElement = e.target as HTMLImageElement;\n\t\t\t\t\t\t\t\tconst imgWidth = imgElement.width;\n\t\t\t\t\t\t\t\tsetImageDimensions({\n\t\t\t\t\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\t\t\t\t\theight: imgElement.height,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ReactCrop>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</StyledModal>\n\t);\n};\n\nexport default BikImageCropper;\n"],"names":["BikImageCropper","props","didChange","setDidChange","useState","crop","setCrop","imageDimensions","setImageDimensions","isLoading","setIsLoading","handleCropComplete","cropResult","image","scaleX","scaleY","croppedImageData","getCroppedImage","canvas","ctx","jsx","StyledModal","ReactCrop","c","e","imgElement","imgWidth"],"mappings":"4VAMaA,EAAmBC,GAAgC,CAC/D,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAC1C,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAA2B,MAAS,EACtD,CAACG,EAAiBC,CAAkB,EAAIJ,EAAAA,SAG3C,CAAE,MAAO,EAAG,OAAQ,EAAG,EACpB,CAACK,EAAWC,CAAY,EAAIN,EAAAA,SAAS,EAAK,EAE1CO,EAAqB,MAAOC,GAAqB,CAEtD,GADAF,EAAa,EAAI,EACbT,EAAM,KAAOW,GAAY,OAASA,GAAY,OAAQ,CACzD,MAAMC,EAAQ,IAAI,MAClBA,EAAM,IAAMZ,EAAM,IAElB,MAAMa,EAASD,EAAM,aAAeN,EAAgB,MAC9CQ,EAASF,EAAM,cAAgBN,EAAgB,OAC/CS,EAAmB,MAAMC,EAC9BJ,EACAD,EACAE,EACAC,CAAA,EAED,MAAMd,GAAO,iBAAiBe,EAAkBd,CAAS,CAC1D,MACC,MAAMD,GAAO,iBAAiBA,EAAM,IAAKC,CAAS,EAEnDQ,EAAa,EAAK,CACnB,EAEMO,EAAkB,MACvBJ,EACAR,EACAS,EACAC,IACqB,CACrB,MAAMG,EAAS,SAAS,cAAc,QAAQ,EAC9CA,EAAO,MAAQb,EAAK,MACpBa,EAAO,OAASb,EAAK,OACrB,MAAMc,EAAMD,EAAO,WAAW,IAAI,EAElC,GAAI,CAACC,EACJ,MAAM,IAAI,MAAM,qCAAqC,EAGtDA,EAAI,UACHN,EACAR,EAAK,EAAIS,EACTT,EAAK,EAAIU,EACTV,EAAK,MAAQS,EACbT,EAAK,OAASU,EACd,EACA,EACAV,EAAK,MACLA,EAAK,MAAA,EAGN,GAAI,CAEH,OADqBa,EAAO,UAAU,WAAW,CAElD,MAAgB,CACf,MAAM,IAAI,MAAM,0CAA0C,CAC3D,CACD,EAEA,OACCE,EAAAA,IAACC,EAAAA,YAAA,CACA,KAAM,GACN,QAASpB,EAAM,SACf,uBAAwB,CAAE,MAAO,IAAK,UAAW,GAAA,EACjD,aAAc,aACd,cAAe,CACd,WAAY,OACZ,UAAAQ,EACA,QAAS,IAAM,CACdE,EAAmBN,CAAK,CACzB,CAAA,EAGD,SAAAe,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,MAAO,OACP,OAAQ,OACR,QAAS,OACT,eAAgB,SAChB,WAAY,QAAA,EAGb,eAAC,MAAA,CACA,SAAAA,EAAAA,IAACE,EAAAA,QAAA,CACA,KAAAjB,EACA,SAAWkB,GAAM,CAChBjB,EAAQiB,CAAC,CACV,EACA,aAAc,GACd,YAAa,IAAM,CAClBpB,EAAa,EAAI,CAClB,EACA,OAAQF,EAAM,YAEd,SAAAmB,EAAAA,IAAC,MAAA,CACA,MAAO,CAAE,SAAU,IAAK,UAAW,IAAK,UAAW,SAAA,EACnD,IAAKnB,EAAM,IACX,IAAK,gBACL,OAASuB,GAAM,CACd,MAAMC,EAAaD,EAAE,OACfE,EAAWD,EAAW,MAC5BjB,EAAmB,CAClB,MAAOkB,EACP,OAAQD,EAAW,MAAA,CACnB,CACF,CAAA,CAAA,CACD,CAAA,CACD,CACD,CAAA,CAAA,CACD,CAAA,CAGH"}

package/dist/cjs/components/input/Input.styled.js

@@ -1,29 +1,29 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),n=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),o=({isActive:e,isInvalid:r,hightlightInputColor:a})=>e?a||i.COLORS.stroke.brand:r?i.COLORS.stroke.negative.vibrant:i.COLORS.stroke.primary,d=e=>e.hideBorder?0:e.version==="2.0"?.5:1,h=t.div`
-	border-radius: ${e=>e.version==="2.0"?8:4}px;
-	background: ${e=>["disabled","read-only","disabled-invalid"].includes(e.state)?i.COLORS.background.base:"#fff"};
-	border: ${e=>d(e)}px solid
-		${e=>o({isActive:e.isActive,isInvalid:e.isInvalid,hightlightInputColor:e.hightlightInputColor})};
-	${e=>e.isActive?`box-shadow: inset 0px 0px 0px 1px ${e.hightlightInputColor?e.hightlightInputColor:i.COLORS.stroke.brand};`:""};
-	padding: ${e=>e.variant==="small"?"6px":"8px"};
-	height: ${e=>e.height||"100%"};
-	${e=>e.variant&&["small","x-small"].includes(e.variant)?"max-height: 44px":"min-height: 48px"};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),n=require("../TypographyStyle.js"),e=require("../../constants/Theme.js"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=d(a),s=({isActive:t,isInvalid:r,hightlightInputColor:l})=>t?l||e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary,h=t=>t.hideBorder?0:t.version==="2.0"?.5:1,x=i.default.div`
+	border-radius: ${t=>t.version==="2.0"?8:4}px;
+	background: ${t=>["disabled","read-only","disabled-invalid"].includes(t.state)?e.COLORS.background.base:"#fff"};
+	border: ${t=>h(t)}px solid
+		${t=>s({isActive:t.isActive,isInvalid:t.isInvalid,hightlightInputColor:t.hightlightInputColor})};
+	${t=>t.isActive?`box-shadow: inset 0px 0px 0px 1px ${t.hightlightInputColor?t.hightlightInputColor:e.COLORS.stroke.brand};`:""};
+	padding: ${t=>t.variant==="small"?"6px":"8px"};
+	height: ${t=>t.height||"100%"};
+	${t=>t.variant&&["small","x-small"].includes(t.variant)?"max-height: 44px":"min-height: 48px"};
 	display: flex;
 	align-items: center;
 	box-sizing: border-box;
 	gap: 8px;
 	overflow: hidden;
 
-	${e=>e.state==="read-only"?"opacity: 0.7":""};
-	${e=>e.state==="read-only"?"pointer-events: none":""};
-`,s=t.div`
-	min-height: ${e=>e.iconSize};
-	min-width: ${e=>e.iconSize};
+	${t=>t.state==="read-only"?"opacity: 0.7":""};
+	${t=>t.state==="read-only"?"pointer-events: none":""};
+`,c=i.default.div`
+	min-height: ${t=>t.iconSize};
+	min-width: ${t=>t.iconSize};
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	overflow: hidden;
-	${e=>e.isLeft?`margin-left:${e.variant&&["small","x-small"].includes(e.variant)?"0px":"8px"}`:`margin-right: ${e.variant&&["small","x-small"].includes(e.variant)?"0px":"8px"}`};
-`,l=t.css`
+	${t=>t.isLeft?`margin-left:${t.variant&&["small","x-small"].includes(t.variant)?"0px":"8px"}`:`margin-right: ${t.variant&&["small","x-small"].includes(t.variant)?"0px":"8px"}`};
+`,o=a.css`
 	flex-grow: 1;
 	overflow: hidden;
 	height: 100%;
@@ -44,7 +44,7 @@
 		background: transparent;
 		&::placeholder {
 			font-family: Inter;
-			color: ${i.COLORS.content.placeholder};
+			color: ${e.COLORS.content.placeholder};
 		}
 
 		&::-webkit-outer-spin-button,
@@ -60,19 +60,19 @@
 		min-height: 100px;
 		resize: none;
 	}
-`,x=t(n.BodyPrimary)`
-	${l};
-	${e=>e.height&&e.type!=="multiline"?{height:e.height}:{}};
+`,g=i.default(n.BodyPrimary)`
+	${o};
+	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
 
-	${e=>e.autoGrow&&e.minHeight&&`
+	${t=>t.autoGrow&&t.minHeight&&`
 	textarea {
-		height: ${e.minHeight};
-		min-height: ${e.minHeight};
-		max-height: ${e.maxHeight||"100px"};
+		height: ${t.minHeight};
+		min-height: ${t.minHeight};
+		max-height: ${t.maxHeight||"100px"};
 	}
 	`}
-`,g=t(n.BodySecondary)`
-	${l};
+`,m=i.default(n.BodySecondary)`
+	${o};
 	input {
 		min-height: 20px;
 		&::-webkit-outer-spin-button,
@@ -81,32 +81,32 @@
 			margin: 0;
 		}
 	}
-	${e=>e.height&&e.type!=="multiline"?{height:e.height}:{}};
-`,c=t.div`
+	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
+`,p=i.default.div`
 	display: flex;
 	justify-content: space-between;
-	${e=>e.maxCharAlignment?"align-items: flex-end;":""}
+	${t=>t.maxCharAlignment?"align-items: flex-end;":""}
 	margin-bottom: 8px;
 	.label__container {
 		display: flex;
 		align-items: center;
 		gap: 2px;
 		> div:first-of-type {
-			${e=>e.invalid?`color: ${i.COLORS.content.negative} !important`:""};
+			${t=>t.invalid?`color: ${e.COLORS.content.negative} !important`:""};
 		}
 	}
 
 	span {
-		color: ${i.COLORS.content.negative};
+		color: ${e.COLORS.content.negative};
 		padding-left: 4px;
 	}
-`,m=t(n.BodySecondary)`
-	color: ${i.COLORS.content.secondary} !important;
-	margin-top: ${e=>e.position==="BOTTOM"?"8px":"0px"};
-`,p=t(n.BodyCaption)`
+`,u=i.default(n.BodySecondary)`
+	color: ${e.COLORS.content.secondary} !important;
+	margin-top: ${t=>t.position==="BOTTOM"?"8px":"0px"};
+`,f=i.default(n.BodyCaption)`
 	white-space: pre-wrap;
 	margin-top: 8px;
-	color: ${e=>e.invalid?i.COLORS.content.negative:i.COLORS.content.secondary} !important;
+	color: ${t=>t.invalid?e.COLORS.content.negative:e.COLORS.content.secondary} !important;
 	/* position: absolute; */
 	/* left: 0px;
 	top: 100%; */
@@ -117,10 +117,10 @@
 		width: 16px;
 		height: 16px;
 	}
-`,u=t.div`
-	${e=>e.width?`width: ${e.width}`:""};
-	${e=>e.height&&e.type=="multiline"?`height: ${e.height}`:""};
-	${e=>e.state==="disabled"||e.state==="disabled-invalid"?t.css`
+`,v=i.default.div`
+	${t=>t.width?`width: ${t.width}`:""};
+	${t=>t.height&&t.type=="multiline"?`height: ${t.height}`:""};
+	${t=>t.state==="disabled"||t.state==="disabled-invalid"?a.css`
 					opacity: 0.5;
 					pointer-events: none;
 			  `:""};
@@ -138,15 +138,15 @@
 		align-items: center;
 		justify-content: space-between;
 	}
-`,v=t(n.BodyPrimary)`
+`,y=i.default(n.BodyPrimary)`
 	overflow: unset;
-	margin-left: ${e=>e.variant&&["small","x-small"].includes(e.variant)?"":"16px"};
-	font-size: ${e=>e.variant==="x-small"?"12px":e.variant==="small"?"14px":"16px"};
-	line-height: ${e=>e.variant==="x-small"?"16px":e.variant==="small"?"20px":"24px"};
-`,f=t(n.BodyPrimary)`
+	margin-left: ${t=>t.variant&&["small","x-small"].includes(t.variant)?"":"16px"};
+	font-size: ${t=>t.variant==="x-small"?"12px":t.variant==="small"?"14px":"16px"};
+	line-height: ${t=>t.variant==="x-small"?"16px":t.variant==="small"?"20px":"24px"};
+`,$=i.default(n.BodyPrimary)`
 	overflow: unset;
-	margin-right: ${e=>e.variant&&["small","x-small"].includes(e.variant)?"":"16px"};
-	font-size: ${e=>e.variant==="x-small"?"12px":e.variant==="small"?"14px":"16px"};
-	line-height: ${e=>e.variant==="x-small"?"16px":e.variant==="small"?"20px":"24px"};
-`;exports.IconHolder=s;exports.InputContainer=x;exports.InputContainerSmall=g;exports.InputFooter=p;exports.InputHeader=c;exports.InputWrapper=h;exports.MaxCharStyle=m;exports.PrefixHolder=v;exports.RootContainer=u;exports.SuffixHolder=f;
+	margin-right: ${t=>t.variant&&["small","x-small"].includes(t.variant)?"":"16px"};
+	font-size: ${t=>t.variant==="x-small"?"12px":t.variant==="small"?"14px":"16px"};
+	line-height: ${t=>t.variant==="x-small"?"16px":t.variant==="small"?"20px":"24px"};
+`;exports.IconHolder=c;exports.InputContainer=g;exports.InputContainerSmall=m;exports.InputFooter=f;exports.InputHeader=p;exports.InputWrapper=x;exports.MaxCharStyle=u;exports.PrefixHolder=y;exports.RootContainer=v;exports.SuffixHolder=$;
 //# sourceMappingURL=Input.styled.js.map

package/dist/cjs/components/input/Input.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' | '2.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' | '2.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t  };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height || '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) => (props.state === 'read-only' ? 'opacity: 0.7' : '')};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight || '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; */\n\t/* left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' || props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t  `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","IconHolder","inputCss","css","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputHeader","MaxCharStyle","InputFooter","BodyCaption","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}
+{"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' | '2.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' | '2.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t  };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height || '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) => (props.state === 'read-only' ? 'opacity: 0.7' : '')};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight || '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; */\n\t/* left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' || props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t  `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","IconHolder","inputCss","css","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputHeader","MaxCharStyle","InputFooter","BodyCaption","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}

package/dist/cjs/components/input/context/InputStyleProvider.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext({});exports.InputStyleContext=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=o(e),a=n.default.createContext({});exports.InputStyleContext=a;
 //# sourceMappingURL=InputStyleProvider.js.map

package/dist/cjs/components/input/context/InputStyleProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputStyleProvider.js","sources":["../../../../../src/components/input/context/InputStyleProvider.tsx"],"sourcesContent":["import React from 'react';\n\nexport const InputStyleContext = React.createContext<{\n\tRootContainer?: React.CSSProperties;\n\tInputWrapper?: React.CSSProperties;\n\tIconHolder?: React.CSSProperties;\n\tinput?: React.CSSProperties;\n}>({});\n"],"names":["InputStyleContext","React"],"mappings":"yGAEaA,EAAoBC,EAAM,cAKpC,CAAA,CAAE"}
+{"version":3,"file":"InputStyleProvider.js","sources":["../../../../../src/components/input/context/InputStyleProvider.tsx"],"sourcesContent":["import React from 'react';\n\nexport const InputStyleContext = React.createContext<{\n\tRootContainer?: React.CSSProperties;\n\tInputWrapper?: React.CSSProperties;\n\tIconHolder?: React.CSSProperties;\n\tinput?: React.CSSProperties;\n}>({});\n"],"names":["InputStyleContext","React"],"mappings":"wKAEaA,EAAoBC,EAAAA,QAAM,cAKpC,CAAA,CAAE"}

package/dist/cjs/components/input-with-vars/InputWithVariables.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),G=require("../../assets/icons/PlusIcon.js"),a=require("react"),J=require("styled-components"),Q=require("uuid"),U=require("../../constants/Theme.js"),X=require("../add-variableV2/AddVariableBox.styled.js"),Y=require("../TypographyStyle.js"),p=require("../variable-picker-v3/model.js"),Z=require("./customPortal.js"),ee=require("../input/Input.js"),C=require("../variable-picker-v3/VariablePicker.js"),te=require("../floater/floater.js"),ae=({type:y,allowMix:b,onChange:g,prevVariable:k,variablesList:v,onBlur:q,onlyVariables:E,placeHolder:I,showAddButton:A=!0,showHelp:D,errorMessage:h,maxCharLimit:F,noMaxCharCheck:P,labelText:w,labelElement:B,isRequired:O=!1,hintText:x,onEnterPress:M,pickerType:N=p.PickerType.FLOATER,portalElement:$,showVarHeader:z,varHeaderText:L,onPickerToggle:i})=>{const S=a.useRef(),j=a.useRef(!0),r=a.useRef(null),[W,d]=a.useState(!1),[_]=a.useState(Q.v4()),[s,m]=a.useState(),[l,c]=a.useState(k),[V,n]=a.useState(!1),[H,T]=a.useState(!1),[R,o]=a.useState(0);function K(e,f,u){return e.slice(0,u)+f+e.slice(u)}return a.useEffect(()=>{if(!(!s||!s.actualValue))if(b){if(c(e=>({actualValue:K(e.actualValue,s.actualValue,R),variableType:"string"})),r.current){o(r.current.selectionStart);const e=R+s.actualValue.length+2;r.current.setSelectionRange(e,e),o(e)}}else c(e=>({actualValue:s.actualValue,variableType:s.variableType,needsFetching:s.needsFetching}))},[s]),a.useEffect(()=>{j.current?j.current=!1:g(l)},[l]),t.jsxs(t.Fragment,{children:[t.jsxs(re,{isVar:/^{{.*}}$/.test(l.actualValue),onKeyDown:e=>{e.key==="Enter"&&M?.(l.actualValue)},children:[t.jsx(ee.Input,{isRequired:O,hintText:x,type:y??"text",id:_,ref:r,skipFocus:!0,isActive:W,value:l.actualValue,validate:e=>[!0,""],errorMessage:h,noMaxCharCheck:P,maxCharLimit:F,labelText:w,labelElement:B,placeholder:I||"Add a value",onClick:e=>{r.current&&o(r.current.selectionStart)},onChangeText:(e,f)=>{if(r.current&&o(r.current.selectionStart),E){const u=f?.keyCode||f?.charCode;(u===8||u===46)&&c({actualValue:"",variableType:"string"});return}c(b?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{d(!0),T(!0)},onBlur:e=>{q?.(e,l),e.relatedTarget?.id==="addVar"||e.relatedTarget?.id==="variable-picker-v3"||e.relatedTarget?.className?.includes("accordion")||e.relatedTarget?.id==="back-btn-v3"?(r.current&&r.current.focus(),d(!0)):e.relatedTarget?.id==="search-bar-v3-picker"?d(!0):(d(!1),n(!1),i?.(!1),T(!1))}}),t.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[l.actualValue&&D&&t.jsx("div",{style:{marginTop:4},children:t.jsx(Y.BodyCaption,{children:`This value is of type ${l.variableType}`})}),A&&H&&t.jsx("div",{style:{marginTop:h||x?"-24px":"0px"},children:t.jsx(X.AddVariableStyled,{ref:S,id:"addVar",onClick:()=>{n(!V),i?.(!V)},children:t.jsxs("div",{className:"add",children:[t.jsx(G.default,{color:"white"}),t.jsx("div",{className:"variable",children:"Add variable"})]})})})]})]}),V&&t.jsx(t.Fragment,{children:N===p.PickerType.EMBEDDED?t.jsx(Z.CustomPortal,{zIndex:101,element:$??document.body,children:t.jsx(C.VariablePicker,{width:"344px",showHeader:z,headerText:L,onClose:()=>{n(!1),i?.(!1)},type:p.PickerType.EMBEDDED,data:v,onSelect:e=>{m(e),n(!1),i?.(!1)}})}):t.jsx("div",{style:{zIndex:101,position:"relative"},children:t.jsx(te.Floater,{refElement:S,children:t.jsx("div",{style:{height:500},children:t.jsx(C.VariablePicker,{onClose:()=>{n(!1),i?.(!1)},type:p.PickerType.FLOATER,data:v,onSelect:e=>{m(e),n(!1),i?.(!1)}})})})})})]})},re=J.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),G=require("../../assets/icons/PlusIcon.js"),a=require("react"),J=require("styled-components"),Q=require("uuid"),U=require("../../constants/Theme.js"),X=require("../add-variableV2/AddVariableBox.styled.js"),Y=require("../TypographyStyle.js"),y=require("../variable-picker-v3/model.js"),Z=require("./customPortal.js"),ee=require("../input/Input.js"),R=require("../variable-picker-v3/VariablePicker.js"),te=require("../floater/floater.js"),ae=s=>s&&typeof s=="object"&&"default"in s?s:{default:s},re=ae(J),se=({type:s,allowMix:b,onChange:g,prevVariable:k,variablesList:v,onBlur:q,onlyVariables:E,placeHolder:D,showAddButton:I=!0,showHelp:A,errorMessage:h,maxCharLimit:F,noMaxCharCheck:P,labelText:w,labelElement:B,isRequired:O=!1,hintText:x,onEnterPress:_,pickerType:M=y.PickerType.FLOATER,portalElement:N,showVarHeader:$,varHeaderText:z,onPickerToggle:n})=>{const j=a.useRef(),S=a.useRef(!0),r=a.useRef(null),[L,o]=a.useState(!1),[W]=a.useState(Q.v4()),[l,m]=a.useState(),[i,u]=a.useState(k),[V,c]=a.useState(!1),[H,T]=a.useState(!1),[C,f]=a.useState(0);function K(e,p,d){return e.slice(0,d)+p+e.slice(d)}return a.useEffect(()=>{if(!(!l||!l.actualValue))if(b){if(u(e=>({actualValue:K(e.actualValue,l.actualValue,C),variableType:"string"})),r.current){f(r.current.selectionStart);const e=C+l.actualValue.length+2;r.current.setSelectionRange(e,e),f(e)}}else u(e=>({actualValue:l.actualValue,variableType:l.variableType,needsFetching:l.needsFetching}))},[l]),a.useEffect(()=>{S.current?S.current=!1:g(i)},[i]),t.jsxs(t.Fragment,{children:[t.jsxs(le,{isVar:/^{{.*}}$/.test(i.actualValue),onKeyDown:e=>{e.key==="Enter"&&_?.(i.actualValue)},children:[t.jsx(ee.Input,{isRequired:O,hintText:x,type:s??"text",id:W,ref:r,skipFocus:!0,isActive:L,value:i.actualValue,validate:e=>[!0,""],errorMessage:h,noMaxCharCheck:P,maxCharLimit:F,labelText:w,labelElement:B,placeholder:D||"Add a value",onClick:e=>{r.current&&f(r.current.selectionStart)},onChangeText:(e,p)=>{if(r.current&&f(r.current.selectionStart),E){const d=p?.keyCode||p?.charCode;(d===8||d===46)&&u({actualValue:"",variableType:"string"});return}u(b?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{o(!0),T(!0)},onBlur:e=>{q?.(e,i),e.relatedTarget?.id==="addVar"||e.relatedTarget?.id==="variable-picker-v3"||e.relatedTarget?.className?.includes("accordion")||e.relatedTarget?.id==="back-btn-v3"?(r.current&&r.current.focus(),o(!0)):e.relatedTarget?.id==="search-bar-v3-picker"?o(!0):(o(!1),c(!1),n?.(!1),T(!1))}}),t.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[i.actualValue&&A&&t.jsx("div",{style:{marginTop:4},children:t.jsx(Y.BodyCaption,{children:`This value is of type ${i.variableType}`})}),I&&H&&t.jsx("div",{style:{marginTop:h||x?"-24px":"0px"},children:t.jsx(X.AddVariableStyled,{ref:j,id:"addVar",onClick:()=>{c(!V),n?.(!V)},children:t.jsxs("div",{className:"add",children:[t.jsx(G.default,{color:"white"}),t.jsx("div",{className:"variable",children:"Add variable"})]})})})]})]}),V&&t.jsx(t.Fragment,{children:M===y.PickerType.EMBEDDED?t.jsx(Z.CustomPortal,{zIndex:101,element:N??document.body,children:t.jsx(R.VariablePicker,{width:"344px",showHeader:$,headerText:z,onClose:()=>{c(!1),n?.(!1)},type:y.PickerType.EMBEDDED,data:v,onSelect:e=>{m(e),c(!1),n?.(!1)}})}):t.jsx("div",{style:{zIndex:101,position:"relative"},children:t.jsx(te.Floater,{refElement:j,children:t.jsx("div",{style:{height:500},children:t.jsx(R.VariablePicker,{onClose:()=>{c(!1),n?.(!1)},type:y.PickerType.FLOATER,data:v,onSelect:e=>{m(e),c(!1),n?.(!1)}})})})})})]})},le=re.default.div`
 	position: relative;
 	margin-bottom: 12px;
 	input {
-		color: ${y=>y.isVar?U.COLORS.stroke.brand:"black"};
+		color: ${s=>s.isVar?U.COLORS.stroke.brand:"black"};
 	}
-`;exports.InputWithVariables=ae;
+`;exports.InputWithVariables=se;
 //# sourceMappingURL=InputWithVariables.js.map