npm - @chayns-components/core - Versions diffs - 5.0.38 → 5.0.40 - Mend

@chayns-components/core 5.0.38 → 5.0.40

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 (20) hide show

package/lib/cjs/components/input/Input.js CHANGED Viewed

@@ -30,7 +30,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   onKeyDown,
   onPaste,
   placeholder,
-  placeholderColor,
+  color,
   rightElement,
   shouldShowOnlyBottomBorder,
   shouldRemainPlaceholder = false,
@@ -97,12 +97,12 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     }
   }, [value]);
   let backgroundColor;
-  let color;
+  let internalColor;
   if (shouldShowTransparentBackground) {
     backgroundColor = 'transparent';
   } else if (areaProvider.contentCardType && [_contentCard.ContentCardType.Error, _contentCard.ContentCardType.Success, _contentCard.ContentCardType.Warning].includes(areaProvider.contentCardType)) {
     backgroundColor = 'white';
-    color = '#555';
+    internalColor = '#555';
   } else if (areaProvider.shouldChangeColor) {
     backgroundColor = theme['000'];
   }
@@ -130,11 +130,12 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     $isInvalid: isInvalid,
     $shouldRoundRightCorners: shouldShowBorder,
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
-    $size: size
+    $size: size,
+    $borderColor: color === null || color === void 0 ? void 0 : color.border
   }, leftElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputIconWrapper, null, leftElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
   }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
-    $color: color,
+    $color: internalColor,
     $placeholderWidth: placeholderWidth,
     id: id,
     disabled: isDisabled,
@@ -172,7 +173,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
       duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
     }
   }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputLabel, {
-    $color: placeholderColor,
+    $color: color === null || color === void 0 ? void 0 : color.placeholder,
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
@@ -188,7 +189,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-times'],
     color: isInvalid ? theme.wrong : undefined
-  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [autoComplete, backgroundColor, color, handleClearIconClick, handleInputFieldChange, hasValue, id, inputMode, isDisabled, isInvalid, labelPosition, leftElement, onBlur, onFocus, onKeyDown, onPaste, placeholder, placeholderColor, placeholderWidth, rightElement, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowBorder, shouldShowCenteredContent, shouldShowClearIcon, shouldShowOnlyBottomBorder, shouldShowTransparentBackground, shouldUseAutoFocus, size, theme.fontSize, theme.wrong, type, value]);
+  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement)), [isDisabled, shouldShowTransparentBackground, backgroundColor, isInvalid, shouldShowBorder, shouldShowOnlyBottomBorder, size, leftElement, internalColor, placeholderWidth, id, onBlur, handleInputFieldChange, onFocus, onKeyDown, onPaste, type, value, shouldUseAutoFocus, inputMode, autoComplete, shouldShowCenteredContent, shouldPreventPlaceholderAnimation, hasValue, shouldRemainPlaceholder, theme.fontSize, theme.wrong, labelPosition, color === null || color === void 0 ? void 0 : color.placeholder, placeholder, shouldShowClearIcon, handleClearIconClick, rightElement]);
   if (isDisabled && typeof disabledHint === 'string') {
     return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
       item: {

package/lib/cjs/components/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","placeholderColor","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","blur","_inputRef$current2","color","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","useMemo","right","top","bottom","Small","left","inputElement","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","wrong","StyledInputRightElement","item","text","shouldUseFullWidth","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /*\n If set and the input is disabled, the input will display a tooltip with this message.\n /\n disabledHint?: string;\n /\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n Color of the placeholder text.\n /\n placeholderColor?: CSSProperties['color'];\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n placeholderColor,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let color: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n color = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1, top: -1.5 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={color}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $color={placeholderColor} $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n ),\n [\n autoComplete,\n backgroundColor,\n color,\n handleClearIconClick,\n handleInputFieldChange,\n hasValue,\n id,\n inputMode,\n isDisabled,\n isInvalid,\n labelPosition,\n leftElement,\n onBlur,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n placeholderColor,\n placeholderWidth,\n rightElement,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowBorder,\n shouldShowCenteredContent,\n shouldShowClearIcon,\n shouldShowOnlyBottomBorder,\n shouldShowTransparentBackground,\n shouldUseAutoFocus,\n size,\n theme.fontSize,\n theme.wrong,\n type,\n value,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_element","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_contentCard","_resize","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","color","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","useCursorRepaint","placeholderSize","useElementSize","useEffect","width","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","blur","_inputRef$current2","internalColor","contentCardType","ContentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","useMemo","right","top","bottom","Small","left","inputElement","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","border","StyledInputIconWrapper","StyledInputContent","StyledInputField","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","wrong","StyledInputRightElement","item","text","shouldUseFullWidth","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\ninterface Color {\n placeholder?: CSSProperties['color'];\n border?: CSSProperties['borderColor'];\n}\n\nexport type InputProps = {\n /*\n If set and the input is disabled, the input will display a tooltip with this message.\n /\n disabledHint?: string;\n /\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n Colors for different parts of the input. You can set the color of the placeholder and the border color.\n /\n color?: Color;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n color,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let internalColor: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n internalColor = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1, top: -1.5 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n $borderColor={color?.border}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={internalColor}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel\n $color={color?.placeholder}\n $isInvalid={isInvalid}\n >\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n ),\n [\n isDisabled,\n shouldShowTransparentBackground,\n backgroundColor,\n isInvalid,\n shouldShowBorder,\n shouldShowOnlyBottomBorder,\n size,\n leftElement,\n internalColor,\n placeholderWidth,\n id,\n onBlur,\n handleInputFieldChange,\n onFocus,\n onKeyDown,\n onPaste,\n type,\n value,\n shouldUseAutoFocus,\n inputMode,\n autoComplete,\n shouldShowCenteredContent,\n shouldPreventPlaceholderAnimation,\n hasValue,\n shouldRemainPlaceholder,\n theme.fontSize,\n theme.wrong,\n labelPosition,\n color?.placeholder,\n placeholder,\n shouldShowClearIcon,\n handleClearIconClick,\n rightElement,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/input/Input.styles.js CHANGED Viewed

@@ -32,8 +32,12 @@ const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledCom
     ${({
   theme,
   $isInvalid,
-  $shouldShowTransparentBackground
+  $shouldShowTransparentBackground,
+  $borderColor
 }) => {
+  if ($borderColor) return (0, _styledComponents.css)`
+                border-color: ${$borderColor};
+            `;
   if ($isInvalid) {
     return (0, _styledComponents.css)`
                 border-color: ${theme.wrong};

package/lib/cjs/components/input/Input.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOzC,MAAMkB,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAqB;AACvD,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,CAAC;AAWM,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAGH,yBAAM,CAACC,GAAmC;AACnF;AACA,wBAAwB,CAAC;EAAEG,KAAK;EAAEC;AAAiD,CAAC,KAC5EA,gBAAgB,IAAID,KAAK,CAAC,KAAK,CAAC;AACxC;AACA,aAAa,CAAC;EAAEA;AAAsC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACxE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEA,KAAK;EAAEE,UAAU;EAAEC;AAAiC,CAAC,KAAK;EAC3D,IAAID,UAAU,EAAE;IACZ,OAAO,IAAAE,qBAAG;AACtB,gCAAgCJ,KAAK,CAACK,KAAK;AAC3C,aAAa;EACL;EAEA,IAAIF,gCAAgC,EAAE;IAClC,IAAIH,KAAK,CAACM,SAAS,KAAK,MAAM,EAAE;MAC5B,OAAO,IAAAF,qBAAG;AAC1B;AACA,iBAAiB;IACL;IAEA,OAAO,IAAAA,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEG;AAAM,CAAC,KACRA,KAAK,KAAK,OAAO,IACjB,IAAAH,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEI,2BAA2B;EAAED;AAAM,CAAC,KACrC,CAACC,2BAA2B,IAC5B,IAAAJ,qBAAG;AACX,0BAA0BG,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAC9D,SAAS;AACT;AACA,MAAM,CAAC;EAAEE,wBAAwB;EAAED,2BAA2B;EAAER;AAAM,CAAC,KAAK;EACpE,IAAIQ,2BAA2B,EAAE;IAC7B,OAAO,IAAAJ,qBAAG;AACtB;AACA;AACA;AACA;AACA,gCAAgCJ,KAAK,CAAC,KAAK,CAAC;AAC5C,aAAa;EACL;EAEA,IAAIS,wBAAwB,EAAE;IAC1B,OAAO,IAAAL,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAIM,MAAMM,kBAAkB,GAAAf,OAAA,CAAAe,kBAAA,GAAGd,yBAAM,CAACC,GAA4B;AACrE;AACA;AACA;AACA,cAAc,CAAC;EAAEW;AAA4B,CAAC,KACtC,CAACA,2BAA2B,GAAG,UAAU,GAAG,OAAO;AAC3D;AACA,CAAC;AASM,MAAMG,gBAAgB,GAAAhB,OAAA,CAAAgB,gBAAA,GAAGf,yBAAM,CAACgB,KAA4B;AACnE;AACA;AACA,aAAa,CAAC;EAAEZ,KAAK;EAAEa,MAAM;EAAEX;AAAkC,CAAC,KAC1DW,MAAM,KAAKX,UAAU,GAAGF,KAAK,CAACK,KAAK,GAAGL,KAAK,CAACc,IAAI,CAAC;AACzD;AACA,aAAa,CAAC;EAAEC;AAAkB,CAAC,KAAK,eAAeA,iBAAiB,KAAK;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAA2B,CAAC,KAC7BA,0BAA0B,IAC1B,IAAAZ,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAMa,6BAA6B,GAAAtB,OAAA,CAAAsB,6BAAA,GAAG,IAAArB,yBAAM,EAACsB,aAAM,CAACC,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,wBAAwB,GAAAzB,OAAA,CAAAyB,wBAAA,GAAG,IAAAxB,yBAAM,EAACsB,aAAM,CAACrB,GAAG,CAAC;AAC1D;AACA,CAAC;AAOM,MAAMwB,gBAAgB,GAAA1B,OAAA,CAAA0B,gBAAA,GAAGzB,yBAAM,CAACuB,KAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEnB,KAAK;EAAEa,MAAM;EAAEX;AAAkC,CAAC,KAC1DW,MAAM,KAAKX,UAAU,GAAGF,KAAK,CAACK,KAAK,GAAG,QAAQL,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC;AACvF,CAAC;AAOM,MAAMsB,0BAA0B,GAAA3B,OAAA,CAAA2B,0BAAA,GAAG,IAAA1B,yBAAM,EAACsB,aAAM,CAACrB,GAAG,CAAkC;AAC7F;AACA,mBAAmB,CAAC;EAAEW;AAA4B,CAAC,KAC3CA,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AACnF;AACA;AACA;AACA,cAAc,CAAC;EAAED;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACnE;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAClE,CAAC;AAEM,MAAMgB,sBAAsB,GAAA5B,OAAA,CAAA4B,sBAAA,GAAG3B,yBAAM,CAACC,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAM2B,uBAAuB,GAAA7B,OAAA,CAAA6B,uBAAA,GAAG5B,yBAAM,CAACC,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","$borderColor","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground, $borderColor }) => {\n if ($borderColor)\n return css`\n border-color: ${$borderColor};\n `;\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/progress-bar/ProgressBar.js CHANGED Viewed

@@ -184,6 +184,7 @@ const ProgressBar = t0 => {
           return (_popupRef$current3 = popupRef.current) === null || _popupRef$current3 === void 0 ? void 0 : _popupRef$current3.show();
         }
       }, showShine && shineEffect, thumbLabel && /*#__PURE__*/_react.default.createElement(_ProgressBar.StyledProgressBarThumbLabel, {
+        $height: height,
         onClick: _temp
       }, /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
         theme: {

package/lib/cjs/components/progress-bar/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","_popup","_styledComponents","_Popup","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","t0","$","_reactCompilerRuntime","c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","useUuid","coordinates","setCoordinates","useState","popupRef","useRef","hostContainer","setHostContainer","theme","useContext","ThemeContext","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","StyledProgressBarShine","key","$delay","shineEffect","getBoundingClientRect","useLayoutEffect","t7","t8","_popupRef$current","current","show","useEffect","t9","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","thumbLabelColor","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","ref","instance","style","border","position","StyledProgressBarStepWrapper","step","StyledProgressBarStep","onUpdate","_popupRef$current2","onAnimationComplete","_popupRef$current3","StyledProgressBarThumbLabel","onClick","_temp","ThemeProvider","text","alignment","PopupAlignment","TopCenter","onHide","_popupRef$current4","container","shouldBeOpen","shouldScrollWithContent","yOffset","StyledProgressBarLabel","$primaryColor","$secondaryColor","progressBar","t10","t11","StyledProgressBar","displayName","_default","exports","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, {\n FC,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n thumbLabelColor?: string;\n}\n\nexport type ProgressBarProps = {\n /*\n The colors of the ProgressBar.\n /\n colors?: Colors;\n /\n The label that should be displayed under the progressbar.\n /\n label?: string;\n /\n The percentage of the progress. Number between 0 and 100.\n /\n percentage?: Range<0, 101>;\n /\n Whether the progress should be hide and just display the label.\n /\n shouldHideProgress?: boolean;\n /\n Whether the label should be displayed inside the ProgressBar.\n /\n shouldShowLabelInline?: boolean;\n /\n Visual marked steps.\n /\n steps?: Range<0, 101>[];\n /\n The label that should be displayed on the thumb of the progress bar.\n /\n thumbLabel?: React.ReactNode;\n /\n Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n /\n showShine?: boolean;\n /\n The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n /\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();\n const popupRef = useRef<PopupRef \| null>(null);\n const [hostContainer, setHostContainer] = useState<HTMLDivElement \| null>(null);\n\n const theme = useContext(ThemeContext) as Theme \| undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine \|\| percentage === undefined) return null;\n const MIN_ANIMATION_LENGTH = 1;\n const MAX_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n const t = percentage / 100;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT t);\n\n const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;\n\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key /\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={-(speed / shineCount) index}\n />\n ));\n }, [percentage, showShine]);\n\n useLayoutEffect(() => {\n if (thumbLabel) setCoordinates(hostContainer?.getBoundingClientRect());\n }, [hostContainer, thumbLabel]);\n\n useEffect(() => {\n if (coordinates) popupRef.current?.show();\n }, [coordinates]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <div\n ref={(instance) => setHostContainer(instance)}\n style={{ border: 0, position: 'relative' }}\n >\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $height={height}\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel\n onClick={(event) => event.stopPropagation()}\n >\n <ThemeProvider\n theme={{\n '000': colors?.thumbLabelColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n container={hostContainer ?? undefined}\n shouldBeOpen\n shouldScrollWithContent\n yOffset={-12}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </div>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n colors?.thumbLabelColor,\n height,\n hostContainer,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ProgressBar.js","names":["_react","_interopRequireWildcard","require","_uuid","_ProgressBar","_popup","_styledComponents","_Popup","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ProgressBar","t0","$","_reactCompilerRuntime","c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","useUuid","coordinates","setCoordinates","useState","popupRef","useRef","hostContainer","setHostContainer","theme","useContext","ThemeContext","t4","bb0","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","StyledProgressBarShine","key","$delay","shineEffect","getBoundingClientRect","useLayoutEffect","t7","t8","_popupRef$current","current","show","useEffect","t9","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","thumbLabelColor","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","StyledProgressBarBackground","ref","instance","style","border","position","StyledProgressBarStepWrapper","step","StyledProgressBarStep","onUpdate","_popupRef$current2","onAnimationComplete","_popupRef$current3","StyledProgressBarThumbLabel","onClick","_temp","ThemeProvider","text","alignment","PopupAlignment","TopCenter","onHide","_popupRef$current4","container","shouldBeOpen","shouldScrollWithContent","yOffset","StyledProgressBarLabel","$primaryColor","$secondaryColor","progressBar","t10","t11","StyledProgressBar","displayName","_default","exports","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, {\n FC,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n thumbLabelColor?: string;\n}\n\nexport type ProgressBarProps = {\n /*\n The colors of the ProgressBar.\n /\n colors?: Colors;\n /\n The label that should be displayed under the progressbar.\n /\n label?: string;\n /\n The percentage of the progress. Number between 0 and 100.\n /\n percentage?: Range<0, 101>;\n /\n Whether the progress should be hide and just display the label.\n /\n shouldHideProgress?: boolean;\n /\n Whether the label should be displayed inside the ProgressBar.\n /\n shouldShowLabelInline?: boolean;\n /\n Visual marked steps.\n /\n steps?: Range<0, 101>[];\n /\n The label that should be displayed on the thumb of the progress bar.\n /\n thumbLabel?: React.ReactNode;\n /\n Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n /\n showShine?: boolean;\n /\n The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n /\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();\n const popupRef = useRef<PopupRef \| null>(null);\n const [hostContainer, setHostContainer] = useState<HTMLDivElement \| null>(null);\n\n const theme = useContext(ThemeContext) as Theme \| undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine \|\| percentage === undefined) return null;\n const MIN_ANIMATION_LENGTH = 1;\n const MAX_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n const t = percentage / 100;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT t);\n\n const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;\n\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key /\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={-(speed / shineCount) index}\n />\n ));\n }, [percentage, showShine]);\n\n useLayoutEffect(() => {\n if (thumbLabel) setCoordinates(hostContainer?.getBoundingClientRect());\n }, [hostContainer, thumbLabel]);\n\n useEffect(() => {\n if (coordinates) popupRef.current?.show();\n }, [coordinates]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <div\n ref={(instance) => setHostContainer(instance)}\n style={{ border: 0, position: 'relative' }}\n >\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $height={height}\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel\n $height={height}\n onClick={(event) => event.stopPropagation()}\n >\n <ThemeProvider\n theme={{\n '000': colors?.thumbLabelColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n container={hostContainer ?? undefined}\n shouldBeOpen\n shouldScrollWithContent\n yOffset={-12}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </div>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n colors?.thumbLabelColor,\n height,\n hostContainer,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/progress-bar/ProgressBar.styles.js CHANGED Viewed

@@ -136,7 +136,15 @@ const StyledProgressBarStep = exports.StyledProgressBarStep = _styledComponents.
 `;
 const StyledProgressBarThumbLabel = exports.StyledProgressBarThumbLabel = _styledComponents.default.div`
     position: absolute;
-    right: 0;
+    right: ${({
+  $height,
+  $isBig
+}) => {
+  // set div exactly to end of border radius
+  if ($height) return $height / 2;
+  if ($isBig) return 20 / 2;
+  return 10 / 2;
+}}px;
     top: 0;
     // revert till POPUPALIGNMENT respect if top or bottom
     // height: 100%;

package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledProgressBar","exports","styled","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","keyframes","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }> & {\n $height?: number;\n $isBig?: boolean;\n};\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n top: 0;\n // revert till POPUPALIGNMENT respect if top or bottom\n // height: 100%;\n`;\n"],"mappings":"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~~AAEM~~,MAAMC,2BAA2B,GAAA7B,OAAA,CAAA6B,2BAAA,GAAG5B,yBAAM,CAACC,~~GAAG~~;~~AACrD~~;AACA;~~AACA~~;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ProgressBar.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledProgressBar","exports","styled","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","keyframes","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","motion","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","css","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }> & {\n $height?: number;\n $isBig?: boolean;\n};\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\ntype StyledProgressBarThumbLabelProps = WithTheme<{\n $height?: number;\n $isBig?: boolean;\n}>;\nexport const StyledProgressBarThumbLabel = styled.div<StyledProgressBarThumbLabelProps>`\n position: absolute;\n right: ${({ $height, $isBig }) => {\n // set div exactly to end of border radius\n if ($height) return $height / 2;\n if ($isBig) return 20 / 2;\n return 10 / 2;\n }}px;\n top: 0;\n // revert till POPUPALIGNMENT respect if top or bottom\n // height: 100%;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/input/Input.js CHANGED Viewed

@@ -22,7 +22,7 @@ const Input = /*#__PURE__*/forwardRef(({
   onKeyDown,
   onPaste,
   placeholder,
-  placeholderColor,
+  color,
   rightElement,
   shouldShowOnlyBottomBorder,
   shouldRemainPlaceholder = false,
@@ -82,12 +82,12 @@ const Input = /*#__PURE__*/forwardRef(({
     }
   }, [value]);
   let backgroundColor;
-  let color;
+  let internalColor;
   if (shouldShowTransparentBackground) {
     backgroundColor = 'transparent';
   } else if (areaProvider.contentCardType && [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(areaProvider.contentCardType)) {
     backgroundColor = 'white';
-    color = '#555';
+    internalColor = '#555';
   } else if (areaProvider.shouldChangeColor) {
     backgroundColor = theme['000'];
   }
@@ -115,11 +115,12 @@ const Input = /*#__PURE__*/forwardRef(({
     $isInvalid: isInvalid,
     $shouldRoundRightCorners: shouldShowBorder,
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
-    $size: size
+    $size: size,
+    $borderColor: color?.border
   }, leftElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, leftElement), /*#__PURE__*/React.createElement(StyledInputContent, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
   }, /*#__PURE__*/React.createElement(StyledInputField, {
-    $color: color,
+    $color: internalColor,
     $placeholderWidth: placeholderWidth,
     id: id,
     disabled: isDisabled,
@@ -157,7 +158,7 @@ const Input = /*#__PURE__*/forwardRef(({
       duration: shouldPreventPlaceholderAnimation ? 0 : 0.1
     }
   }, /*#__PURE__*/React.createElement(StyledInputLabel, {
-    $color: placeholderColor,
+    $color: color?.placeholder,
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/React.createElement(StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
@@ -173,7 +174,7 @@ const Input = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-times'],
     color: isInvalid ? theme.wrong : undefined
-  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [autoComplete, backgroundColor, color, handleClearIconClick, handleInputFieldChange, hasValue, id, inputMode, isDisabled, isInvalid, labelPosition, leftElement, onBlur, onFocus, onKeyDown, onPaste, placeholder, placeholderColor, placeholderWidth, rightElement, shouldPreventPlaceholderAnimation, shouldRemainPlaceholder, shouldShowBorder, shouldShowCenteredContent, shouldShowClearIcon, shouldShowOnlyBottomBorder, shouldShowTransparentBackground, shouldUseAutoFocus, size, theme.fontSize, theme.wrong, type, value]);
+  })), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)), [isDisabled, shouldShowTransparentBackground, backgroundColor, isInvalid, shouldShowBorder, shouldShowOnlyBottomBorder, size, leftElement, internalColor, placeholderWidth, id, onBlur, handleInputFieldChange, onFocus, onKeyDown, onPaste, type, value, shouldUseAutoFocus, inputMode, autoComplete, shouldShowCenteredContent, shouldPreventPlaceholderAnimation, hasValue, shouldRemainPlaceholder, theme.fontSize, theme.wrong, labelPosition, color?.placeholder, placeholder, shouldShowClearIcon, handleClearIconClick, rightElement]);
   if (isDisabled && typeof disabledHint === 'string') {
     return /*#__PURE__*/React.createElement(Tooltip, {
       item: {

package/lib/esm/components/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","Tooltip","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","placeholderColor","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","color","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","item","text","shouldUseFullWidth","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\nexport type InputProps = {\n /*\n If set and the input is disabled, the input will display a tooltip with this message.\n /\n disabledHint?: string;\n /\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n Color of the placeholder text.\n /\n placeholderColor?: CSSProperties['color'];\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n placeholderColor,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let color: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n color = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1, top: -1.5 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={color}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel $color={placeholderColor} $isInvalid={isInvalid}>\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n ),\n [\n autoComplete,\n backgroundColor,\n color,\n handleClearIconClick,\n handleInputFieldChange,\n hasValue,\n id,\n inputMode,\n isDisabled,\n isInvalid,\n labelPosition,\n leftElement,\n onBlur,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n placeholderColor,\n placeholderWidth,\n rightElement,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowBorder,\n shouldShowCenteredContent,\n shouldShowClearIcon,\n shouldShowOnlyBottomBorder,\n shouldShowTransparentBackground,\n shouldUseAutoFocus,\n size,\n theme.fontSize,\n theme.wrong,\n type,\n value,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","Tooltip","InputSize","Input","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","color","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","disabledHint","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","shouldShowTransparentBackground","autoComplete","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","internalColor","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","border","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","item","text","shouldUseFullWidth","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n type ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/element';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputContentWrapper,\n StyledInputField,\n StyledInputIconWrapper,\n StyledInputLabel,\n StyledInputRightElement,\n StyledMotionInputClearIcon,\n StyledMotionInputLabelWrapper,\n} from './Input.styles';\nimport { ContentCardType } from '../../types/contentCard';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport Tooltip from '../tooltip/Tooltip';\n\nexport interface InputRef {\n focus: VoidFunction;\n blur: VoidFunction;\n}\n\ntype InputMode =\n \| 'email'\n \| 'search'\n \| 'tel'\n \| 'text'\n \| 'url'\n \| 'none'\n \| 'numeric'\n \| 'decimal'\n \| undefined;\n\ntype AutoComplete =\n \| 'on'\n \| 'off'\n \| 'name'\n \| 'username'\n \| 'email'\n \| 'new-password'\n \| 'current-password'\n \| 'tel'\n \| 'url'\n \| 'street-address'\n \| 'postal-code'\n \| 'country'\n \| undefined;\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n}\n\ninterface Color {\n placeholder?: CSSProperties['color'];\n border?: CSSProperties['borderColor'];\n}\n\nexport type InputProps = {\n /*\n If set and the input is disabled, the input will display a tooltip with this message.\n /\n disabledHint?: string;\n /\n An element to be displayed on the left side of the input field\n /\n leftElement?: ReactNode;\n /\n The id of the input\n /\n id?: string;\n /\n Defines the input mode of the input\n /\n inputMode?: InputMode;\n /\n Defines the auto Complete of the input\n /\n autoComplete?: AutoComplete;\n /\n Disables the input so that it cannot be changed anymore\n /\n isDisabled?: boolean;\n /\n If true, the input field is marked as invalid\n /\n isInvalid?: boolean;\n /\n Function that is executed when the input field loses focus\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the input changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Function that is executed when content is pasted into the input field\n /\n onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /\n Placeholder for the input field\n /\n placeholder?: ReactNode;\n /\n Colors for different parts of the input. You can set the color of the placeholder and the border color.\n /\n color?: Color;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Whether the placeholder animation should be prevented.\n /\n shouldPreventPlaceholderAnimation?: boolean;\n /\n Whether the placeholder should remain at its position if a value is typed.\n /\n shouldRemainPlaceholder?: boolean;\n /\n Whether the content should be displayed centered inside the input.\n /\n shouldShowCenteredContent?: boolean;\n /\n If true, a clear icon is displayed at the end of the input field\n /\n shouldShowClearIcon?: boolean;\n /\n Whether only the bottom border should be displayed\n /\n shouldShowOnlyBottomBorder?: boolean;\n /\n Whether the background should be transparent.\n /\n shouldShowTransparentBackground?: boolean;\n /\n If true, the input field is focused when the component is mounted\n /\n shouldUseAutoFocus?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Input type set for an input element (e.g. 'text', 'number' or 'password')\n /\n type?: HTMLInputTypeAttribute;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n (\n {\n leftElement,\n inputMode,\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onPaste,\n placeholder,\n color,\n rightElement,\n shouldShowOnlyBottomBorder,\n shouldRemainPlaceholder = false,\n shouldShowClearIcon = false,\n shouldShowCenteredContent = false,\n size = InputSize.Medium,\n type = 'text',\n value,\n disabledHint,\n shouldUseAutoFocus = false,\n isInvalid = false,\n shouldPreventPlaceholderAnimation = false,\n id,\n shouldShowTransparentBackground = false,\n autoComplete,\n },\n ref,\n ) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n const areaProvider = useContext(AreaContext);\n\n const theme = useTheme() as Theme;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const placeholderRef = useRef<HTMLLabelElement>(null);\n\n useCursorRepaint(inputRef);\n\n const placeholderSize = useElementSize(placeholderRef);\n\n useEffect(() => {\n if (placeholderSize && shouldShowOnlyBottomBorder) {\n setPlaceholderWidth(placeholderSize.width + 5);\n }\n }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n const handleClearIconClick = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = '';\n\n setHasValue(false);\n\n if (typeof onChange === 'function') {\n onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n }\n }\n }, [onChange]);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n let backgroundColor: CSSProperties['backgroundColor'] \| undefined;\n let internalColor: CSSProperties['color'] \| undefined;\n\n if (shouldShowTransparentBackground) {\n backgroundColor = 'transparent';\n } else if (\n areaProvider.contentCardType &&\n [ContentCardType.Error, ContentCardType.Success, ContentCardType.Warning].includes(\n areaProvider.contentCardType,\n )\n ) {\n backgroundColor = 'white';\n internalColor = '#555';\n } else if (areaProvider.shouldChangeColor) {\n backgroundColor = theme['000'];\n }\n\n const labelPosition = useMemo(() => {\n if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n return shouldShowOnlyBottomBorder\n ? { right: 3, top: -1.5 }\n : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n }\n\n return { left: -1, top: -1.5 };\n }, [\n hasValue,\n shouldPreventPlaceholderAnimation,\n shouldRemainPlaceholder,\n shouldShowOnlyBottomBorder,\n size,\n ]);\n\n const inputElement = useMemo(\n () => (\n <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n <StyledInputContentWrapper\n $shouldShowTransparentBackground={shouldShowTransparentBackground}\n $backgroundColor={backgroundColor}\n $isInvalid={isInvalid}\n $shouldRoundRightCorners={shouldShowBorder}\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n $borderColor={color?.border}\n >\n {leftElement && (\n <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>\n )}\n <StyledInputContent\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n >\n <StyledInputField\n $color={internalColor}\n $placeholderWidth={placeholderWidth}\n id={id}\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n }}\n onPaste={onPaste}\n ref={inputRef}\n type={type}\n value={value}\n autoFocus={shouldUseAutoFocus}\n inputMode={inputMode}\n autoComplete={autoComplete}\n $isInvalid={isInvalid}\n $shouldShowCenteredContent={shouldShowCenteredContent}\n />\n <StyledMotionInputLabelWrapper\n animate={\n shouldPreventPlaceholderAnimation\n ? {\n opacity: hasValue ? 0 : 1,\n }\n : {\n fontSize:\n hasValue &&\n !shouldShowOnlyBottomBorder &&\n !shouldRemainPlaceholder\n ? '9px'\n : `${Number(theme.fontSize)}px`,\n }\n }\n initial={false}\n layout\n ref={placeholderRef}\n style={{ ...labelPosition }}\n transition={{\n type: 'tween',\n duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n }}\n >\n <StyledInputLabel\n $color={color?.placeholder}\n $isInvalid={isInvalid}\n >\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\n transition={{ type: 'tween' }}\n >\n <Icon\n icons={['fa fa-times']}\n color={isInvalid ? theme.wrong : undefined}\n />\n </StyledMotionInputClearIcon>\n )}\n {rightElement && shouldShowBorder && rightElement}\n </StyledInputContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledInput>\n ),\n [\n isDisabled,\n shouldShowTransparentBackground,\n backgroundColor,\n isInvalid,\n shouldShowBorder,\n shouldShowOnlyBottomBorder,\n size,\n leftElement,\n internalColor,\n placeholderWidth,\n id,\n onBlur,\n handleInputFieldChange,\n onFocus,\n onKeyDown,\n onPaste,\n type,\n value,\n shouldUseAutoFocus,\n inputMode,\n autoComplete,\n shouldShowCenteredContent,\n shouldPreventPlaceholderAnimation,\n hasValue,\n shouldRemainPlaceholder,\n theme.fontSize,\n theme.wrong,\n labelPosition,\n color?.placeholder,\n placeholder,\n shouldShowClearIcon,\n handleClearIconClick,\n rightElement,\n ],\n );\n\n if (isDisabled && typeof disabledHint === 'string') {\n return (\n <Tooltip item={{ text: disabledHint }} shouldUseFullWidth>\n {inputElement}\n </Tooltip>\n );\n }\n\n return inputElement;\n },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/input/Input.styles.js CHANGED Viewed

@@ -25,8 +25,12 @@ export const StyledInputContentWrapper = styled.div`
     ${({
   theme,
   $isInvalid,
-  $shouldShowTransparentBackground
+  $shouldShowTransparentBackground,
+  $borderColor
 }) => {
+  if ($borderColor) return css`
+                border-color: ${$borderColor};
+            `;
   if ($isInvalid) {
     return css`
                 border-color: ${theme.wrong};

package/lib/esm/components/input/Input.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,WAAW,GAAGF,MAAM,CAACG,GAAqB;AACvD,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,CAAC;~~AAWD~~,OAAO,MAAMC,yBAAyB,GAAGL,MAAM,CAACG,GAAmC;AACnF;AACA,wBAAwB,CAAC;EAAEG,KAAK;EAAEC;AAAiD,CAAC,KAC5EA,gBAAgB,IAAID,KAAK,CAAC,KAAK,CAAC;AACxC;AACA,aAAa,CAAC;EAAEA;AAAsC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACxE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEA,KAAK;EAAEE,UAAU;EAAEC;~~AAAiC~~,CAAC,KAAK;~~EAC3D~~,~~IAAID~~,UAAU,EAAE;IACZ,OAAOP,GAAG;AACtB,gCAAgCK,KAAK,~~CAACI~~,KAAK;AAC3C,aAAa;EACL;EAEA,~~IAAID~~,gCAAgC,EAAE;IAClC,IAAIH,KAAK,~~CAACK~~,SAAS,KAAK,MAAM,EAAE;MAC5B,~~OAAOV~~,GAAG;AAC1B;AACA,iBAAiB;IACL;IAEA,OAAOA,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;~~EAAEW~~;AAAM,CAAC,KACRA,KAAK,KAAK,OAAO,~~IACjBX~~,GAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;~~EAAEY~~,2BAA2B;EAAED;AAAM,CAAC,KACrC,CAACC,2BAA2B,~~IAC5BZ~~,GAAG;AACX,~~0BAA0BW~~,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM;AAC9D,SAAS;AACT;AACA,MAAM,CAAC;EAAEE,wBAAwB;EAAED,2BAA2B;~~EAAEP~~;AAAM,CAAC,KAAK;EACpE,~~IAAIO~~,2BAA2B,EAAE;IAC7B,~~OAAOZ~~,GAAG;AACtB;AACA;AACA;AACA;AACA,gCAAgCK,KAAK,CAAC,KAAK,CAAC;AAC5C,aAAa;EACL;EAEA,~~IAAIQ~~,wBAAwB,EAAE;IAC1B,~~OAAOb~~,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAID,OAAO,~~MAAMc~~,kBAAkB,~~GAAGf~~,MAAM,CAACG,GAA4B;AACrE;AACA;AACA;AACA,cAAc,CAAC;~~EAAEU~~;AAA4B,CAAC,KACtC,CAACA,2BAA2B,GAAG,UAAU,GAAG,OAAO;AAC3D;AACA,CAAC;AASD,OAAO,MAAMG,gBAAgB,~~GAAGhB~~,MAAM,~~CAACiB~~,KAA4B;AACnE;AACA;AACA,aAAa,CAAC;~~EAAEX~~,KAAK;~~EAAEY~~,MAAM;~~EAAEV~~;AAAkC,CAAC,~~KAC1DU~~,MAAM,~~KAAKV~~,UAAU,GAAGF,KAAK,~~CAACI~~,KAAK,~~GAAGJ~~,KAAK,~~CAACa~~,IAAI,CAAC;AACzD;AACA,aAAa,CAAC;EAAEC;AAAkB,CAAC,KAAK,eAAeA,iBAAiB,KAAK;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAA2B,CAAC,KAC7BA,0BAA0B,~~IAC1BpB~~,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,~~MAAMqB~~,6BAA6B,~~GAAGtB~~,MAAM,CAACD,MAAM,~~CAACwB~~,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,~~GAAGxB~~,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AAC1D;AACA,CAAC;AAOD,OAAO,~~MAAMsB~~,gBAAgB,~~GAAGzB~~,MAAM,~~CAACuB~~,KAA4B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;~~EAAEjB~~,KAAK;~~EAAEY~~,MAAM;~~EAAEV~~;AAAkC,CAAC,~~KAC1DU~~,MAAM,~~KAAKV~~,UAAU,GAAGF,KAAK,~~CAACI~~,KAAK,GAAG,~~QAAQJ~~,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC;AACvF,CAAC;AAOD,OAAO,~~MAAMoB~~,0BAA0B,~~GAAG1B~~,MAAM,CAACD,MAAM,CAACI,GAAG,CAAkC;AAC7F;AACA,mBAAmB,CAAC;~~EAAEU~~;AAA4B,CAAC,KAC3CA,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AACnF;AACA;AACA;AACA,cAAc,CAAC;EAAED;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACnE;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAClE,CAAC;AAED,OAAO,MAAMe,sBAAsB,~~GAAG3B~~,MAAM,CAACG,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMyB~~,uBAAuB,~~GAAG5B~~,MAAM,CAACG,GAAG;AACjD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","$borderColor","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n display: flex;\n width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n $backgroundColor?: CSSProperties['backgroundColor'];\n $shouldRoundRightCorners: boolean;\n $shouldShowOnlyBottomBorder?: boolean;\n $isInvalid?: boolean;\n $size: InputSize;\n $shouldShowTransparentBackground: boolean;\n $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n align-items: center;\n background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n $backgroundColor ?? theme['100']};\n border: 1px solid transparent;\n color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n display: flex;\n justify-content: space-between;\n width: 100%;\n transition: opacity 0.3s ease;\n\n ${({ theme, $isInvalid, $shouldShowTransparentBackground, $borderColor }) => {\n if ($borderColor)\n return css`\n border-color: ${$borderColor};\n `;\n if ($isInvalid) {\n return css`\n border-color: ${theme.wrong};\n `;\n }\n\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n `;\n }}\n\n ${({ $size }) =>\n $size === 'small' &&\n css`\n height: 32px;\n `}\n\n ${({ $shouldShowOnlyBottomBorder, $size }) =>\n !$shouldShowOnlyBottomBorder &&\n css`\n min-height: ${$size === 'medium' ? '42px' : '32px'};\n `}\n\n ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n if ($shouldShowOnlyBottomBorder) {\n return css`\n border-top: none;\n border-right: none;\n border-left: none;\n background-color: transparent;\n border-color: ${theme['408']};\n `;\n }\n\n if ($shouldRoundRightCorners) {\n return css`\n border-radius: 3px;\n `;\n }\n\n return css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n border-right: none;\n `;\n }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n margin: ${({ $shouldShowOnlyBottomBorder }) =>\n !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n $placeholderWidth: number;\n $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n background: none;\n border: none;\n color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n $color ?? ($isInvalid ? theme.wrong : theme.text)};\n padding: 0;\n width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n line-height: 1em;\n\n ${({ $shouldShowCenteredContent }) =>\n $shouldShowCenteredContent &&\n css`\n text-align: center;\n `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{\n $color?: CSSProperties['color'];\n $isInvalid?: boolean;\n}>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n line-height: 1.3;\n pointer-events: none;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, $color, $isInvalid }: StyledInputLabelProps) =>\n $color ?? ($isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`)};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n $shouldShowOnlyBottomBorder?: boolean;\n $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n align-items: center;\n border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n justify-content: center;\n width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.js CHANGED Viewed

@@ -169,6 +169,7 @@ const ProgressBar = t0 => {
         onUpdate: () => popupRef.current?.show(),
         onAnimationComplete: () => popupRef.current?.show()
       }, showShine && shineEffect, thumbLabel && /*#__PURE__*/React.createElement(StyledProgressBarThumbLabel, {
+        $height: height,
         onClick: _temp
       }, /*#__PURE__*/React.createElement(ThemeProvider, {
         theme: {

package/lib/esm/components/progress-bar/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","names":["React","useContext","useEffect","useLayoutEffect","useMemo","useRef","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","coordinates","setCoordinates","popupRef","hostContainer","setHostContainer","theme","t4","bb0","t","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","getBoundingClientRect","t7","t8","current","show","t9","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","thumbLabelColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","ref","instance","style","border","position","step","onUpdate","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","container","shouldBeOpen","shouldScrollWithContent","yOffset","$primaryColor","$secondaryColor","progressBar","t10","t11","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, {\n FC,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n thumbLabelColor?: string;\n}\n\nexport type ProgressBarProps = {\n /*\n The colors of the ProgressBar.\n /\n colors?: Colors;\n /\n The label that should be displayed under the progressbar.\n /\n label?: string;\n /\n The percentage of the progress. Number between 0 and 100.\n /\n percentage?: Range<0, 101>;\n /\n Whether the progress should be hide and just display the label.\n /\n shouldHideProgress?: boolean;\n /\n Whether the label should be displayed inside the ProgressBar.\n /\n shouldShowLabelInline?: boolean;\n /\n Visual marked steps.\n /\n steps?: Range<0, 101>[];\n /\n The label that should be displayed on the thumb of the progress bar.\n /\n thumbLabel?: React.ReactNode;\n /\n Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n /\n showShine?: boolean;\n /\n The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n /\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();\n const popupRef = useRef<PopupRef \| null>(null);\n const [hostContainer, setHostContainer] = useState<HTMLDivElement \| null>(null);\n\n const theme = useContext(ThemeContext) as Theme \| undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine \|\| percentage === undefined) return null;\n const MIN_ANIMATION_LENGTH = 1;\n const MAX_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n const t = percentage / 100;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT t);\n\n const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;\n\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key /\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={-(speed / shineCount) index}\n />\n ));\n }, [percentage, showShine]);\n\n useLayoutEffect(() => {\n if (thumbLabel) setCoordinates(hostContainer?.getBoundingClientRect());\n }, [hostContainer, thumbLabel]);\n\n useEffect(() => {\n if (coordinates) popupRef.current?.show();\n }, [coordinates]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <div\n ref={(instance) => setHostContainer(instance)}\n style={{ border: 0, position: 'relative' }}\n >\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $height={height}\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel\n onClick={(event) => event.stopPropagation()}\n >\n <ThemeProvider\n theme={{\n '000': colors?.thumbLabelColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n container={hostContainer ?? undefined}\n shouldBeOpen\n shouldScrollWithContent\n yOffset={-12}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </div>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n colors?.thumbLabelColor,\n height,\n hostContainer,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ProgressBar.js","names":["React","useContext","useEffect","useLayoutEffect","useMemo","useRef","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","StyledProgressBarShine","StyledProgressBarStep","StyledProgressBarStepWrapper","StyledProgressBarThumbLabel","PopupAlignment","ThemeContext","ThemeProvider","Popup","ProgressBar","t0","$","_c","percentage","label","shouldHideProgress","t1","shouldShowLabelInline","t2","steps","colors","thumbLabel","showShine","t3","height","undefined","uuid","coordinates","setCoordinates","popupRef","hostContainer","setHostContainer","theme","t4","bb0","t","shineCount","Math","ceil","speed","t5","Array","from","length","t6","map","_","index","createElement","key","$delay","shineEffect","getBoundingClientRect","t7","t8","current","show","t9","backgroundColor","primaryTextColor","progressColor","secondaryTextColor","stepColor","thumbLabelColor","$color","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","ref","instance","style","border","position","step","onUpdate","onAnimationComplete","onClick","_temp","text","alignment","TopCenter","onHide","container","shouldBeOpen","shouldScrollWithContent","yOffset","$primaryColor","$secondaryColor","progressBar","t10","t11","displayName","event","stopPropagation"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, {\n FC,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n StyledMotionProgressBarProgress,\n StyledProgressBar,\n StyledProgressBarBackground,\n StyledProgressBarLabel,\n StyledProgressBarProgressWrapper,\n StyledProgressBarShine,\n StyledProgressBarStep,\n StyledProgressBarStepWrapper,\n StyledProgressBarThumbLabel,\n} from './ProgressBar.styles';\nimport { PopupAlignment, PopupRef } from '../../types/popup';\nimport { ThemeContext, ThemeProvider } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Popup from '../popup/Popup';\n\ntype Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N\n ? Acc[number]\n : Enumerate<N, [...Acc, Acc['length']]>;\n\ntype Range<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;\n\ninterface Colors {\n backgroundColor?: string;\n progressColor?: string;\n stepColor?: string;\n primaryTextColor?: string;\n secondaryTextColor?: string;\n thumbLabelColor?: string;\n}\n\nexport type ProgressBarProps = {\n /*\n The colors of the ProgressBar.\n /\n colors?: Colors;\n /\n The label that should be displayed under the progressbar.\n /\n label?: string;\n /\n The percentage of the progress. Number between 0 and 100.\n /\n percentage?: Range<0, 101>;\n /\n Whether the progress should be hide and just display the label.\n /\n shouldHideProgress?: boolean;\n /\n Whether the label should be displayed inside the ProgressBar.\n /\n shouldShowLabelInline?: boolean;\n /\n Visual marked steps.\n /\n steps?: Range<0, 101>[];\n /\n The label that should be displayed on the thumb of the progress bar.\n /\n thumbLabel?: React.ReactNode;\n /\n Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value.\n /\n showShine?: boolean;\n /\n The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true.\n /\n height?: number;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({\n percentage,\n label,\n shouldHideProgress = false,\n shouldShowLabelInline = false,\n steps,\n colors,\n thumbLabel,\n showShine = false,\n height,\n}) => {\n 'use memo';\n\n const uuid = useUuid();\n const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();\n const popupRef = useRef<PopupRef \| null>(null);\n const [hostContainer, setHostContainer] = useState<HTMLDivElement \| null>(null);\n\n const theme = useContext(ThemeContext) as Theme \| undefined;\n\n const shineEffect = useMemo(() => {\n if (!showShine \|\| percentage === undefined) return null;\n const MIN_ANIMATION_LENGTH = 1;\n const MAX_ANIMATION_LENGTH = 5;\n const MAX_SHINE_COUNT = 6;\n const t = percentage / 100;\n\n const shineCount = Math.ceil(MAX_SHINE_COUNT t);\n\n const speed = MIN_ANIMATION_LENGTH + (MAX_ANIMATION_LENGTH - MIN_ANIMATION_LENGTH) * t;\n\n return Array.from({ length: shineCount }).map((_, index) => (\n <StyledProgressBarShine\n /* eslint-disable-next-line react/no-array-index-key /\n key={`progress-bar-shine__${shineCount}__${index}`}\n $speed={speed}\n $delay={-(speed / shineCount) index}\n />\n ));\n }, [percentage, showShine]);\n\n useLayoutEffect(() => {\n if (thumbLabel) setCoordinates(hostContainer?.getBoundingClientRect());\n }, [hostContainer, thumbLabel]);\n\n useEffect(() => {\n if (coordinates) popupRef.current?.show();\n }, [coordinates]);\n\n const progressBar = useMemo(() => {\n if (shouldHideProgress) {\n return null;\n }\n\n if (percentage === undefined) {\n return (\n <StyledProgressBarProgressWrapper>\n <StyledMotionProgressBarProgress\n key={`progress-bar-loop__${uuid}`}\n $color={colors?.progressColor}\n initial={{ width: '200px', left: '-200px' }}\n animate={{ width: '200px', left: '100%' }}\n exit={{ width: '200px', left: '100%' }}\n transition={{\n type: 'tween',\n repeat: Infinity,\n repeatDelay: 0,\n duration: 1,\n }}\n />\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n );\n }\n\n return (\n <div\n ref={(instance) => setHostContainer(instance)}\n style={{ border: 0, position: 'relative' }}\n >\n <StyledProgressBarProgressWrapper $isBig={shouldShowLabelInline} $height={height}>\n {!!steps?.length && (\n <StyledProgressBarStepWrapper>\n {steps.map((step) => (\n <StyledProgressBarStep\n $position={step}\n key={`progress-step-${step}`}\n $color={colors?.stepColor}\n />\n ))}\n </StyledProgressBarStepWrapper>\n )}\n <StyledMotionProgressBarProgress\n $height={height}\n $color={colors?.progressColor}\n key={`progress-bar__${uuid}`}\n initial={{ width: '0%' }}\n animate={{ width: `${percentage}%` }}\n exit={{ width: '0%' }}\n transition={{ type: 'tween' }}\n onUpdate={() => popupRef.current?.show()}\n onAnimationComplete={() => popupRef.current?.show()}\n >\n {showShine && shineEffect}\n {thumbLabel && (\n <StyledProgressBarThumbLabel\n $height={height}\n onClick={(event) => event.stopPropagation()}\n >\n <ThemeProvider\n theme={{\n '000': colors?.thumbLabelColor ?? theme?.['104'],\n text: colors?.secondaryTextColor ?? theme?.['300'],\n }}\n >\n <Popup\n ref={popupRef}\n content={thumbLabel}\n alignment={PopupAlignment.TopCenter}\n onHide={() => popupRef.current?.show()}\n container={hostContainer ?? undefined}\n shouldBeOpen\n shouldScrollWithContent\n yOffset={-12}\n >\n {}\n </Popup>\n </ThemeProvider>\n </StyledProgressBarThumbLabel>\n )}\n </StyledMotionProgressBarProgress>\n\n {shouldShowLabelInline && label && (\n <StyledProgressBarLabel\n $shouldShowLabelInline={shouldShowLabelInline}\n $primaryColor={colors?.primaryTextColor}\n $secondaryColor={colors?.secondaryTextColor}\n $colorSplitPosition={percentage}\n >\n {label}\n </StyledProgressBarLabel>\n )}\n\n <StyledProgressBarBackground $color={colors?.backgroundColor} />\n </StyledProgressBarProgressWrapper>\n </div>\n );\n }, [\n colors?.backgroundColor,\n colors?.primaryTextColor,\n colors?.progressColor,\n colors?.secondaryTextColor,\n colors?.stepColor,\n colors?.thumbLabelColor,\n height,\n hostContainer,\n label,\n percentage,\n shineEffect,\n shouldHideProgress,\n shouldShowLabelInline,\n showShine,\n steps,\n theme,\n thumbLabel,\n uuid,\n ]);\n\n return useMemo(\n () => (\n <StyledProgressBar>\n {progressBar}\n {label && !shouldShowLabelInline && (\n <StyledProgressBarLabel $primaryColor={colors?.primaryTextColor}>\n {label}\n </StyledProgressBarLabel>\n )}\n </StyledProgressBar>\n ),\n [colors?.primaryTextColor, label, progressBar, shouldShowLabelInline],\n );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.styles.js CHANGED Viewed

@@ -129,7 +129,15 @@ export const StyledProgressBarStep = styled.div`
 `;
 export const StyledProgressBarThumbLabel = styled.div`
     position: absolute;
-    right: 0;
+    right: ${({
+  $height,
+  $isBig
+}) => {
+  // set div exactly to end of border radius
+  if ($height) return $height / 2;
+  if ($isBig) return 20 / 2;
+  return 10 / 2;
+}}px;
     top: 0;
     // revert till POPUPALIGNMENT respect if top or bottom
     // height: 100%;

package/lib/esm/components/progress-bar/ProgressBar.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }> & {\n $height?: number;\n $isBig?: boolean;\n};\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\nexport const StyledProgressBarThumbLabel = styled.div`\n position: absolute;\n right: 0;\n top: 0;\n // revert till POPUPALIGNMENT respect if top or bottom\n // height: 100%;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAG1D,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAAG;AAC3C;AACA,CAAC;AAID,OAAO,MAAMC,2BAA2B,GAAGL,MAAM,CAACI,GAAqC;AACvF;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAyC,CAAC,KACpEA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AAC9B,CAAC;AAOD,OAAO,MAAME,gCAAgC,GAAGR,MAAM,CAACI,GAA0C;AACjG;AACA;AACA;AACA,cAAc,CAAC;EAAEK,OAAO;EAAEC;AAAO,CAAC,KAAKD,OAAO,KAAKC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC;AACpE,qBAAqB,CAAC;EAAED,OAAO;EAAEC;AAAO,CAAC,KAAKD,OAAO,KAAKC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC;AAC3E,CAAC;AAED,MAAMC,SAAS,GAAGT,SAAS;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,sBAAsB,GAAGZ,MAAM,CAACI,GAAG,CAACS,KAAK,CAClD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IAAEC,cAAc,EAAE,GAAGF,MAAM,IAAI,CAAC;EAAI;AAC/C,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBH,SAAS,IAAI,CAAC;EAAEM,MAAM,GAAG;AAAE,CAAC,KAAK,GAAGA,MAAM,GAAG;AAC9D;AACA,CAAC;AAOD,OAAO,MAAMC,+BAA+B,GAAGlB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAuC,CAAC,KAClEA,MAAM,IAAID,KAAK,CAACa,QAAQ;AAChC,qBAAqB,CAAC;EAAEV,OAAO;EAAEC;AAAO,CAAC,KAAKD,OAAO,KAAKC,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC;AAC3E,CAAC;AASD,OAAO,MAAMU,sBAAsB,GAAGpB,MAAM,CAACI,GAAgC;AAC7E;AACA,aAAa,CAAC;EAAEE,KAAK;EAAEe;AAAoD,CAAC,KACpEA,sBAAsB,GAAGf,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACa,QAAQ;AAC9D;AACA;AACA,MAAM,CAAC;EAAEG,mBAAmB;EAAEC,aAAa;EAAEC,eAAe;EAAElB;AAAM,CAAC,KAC7DgB,mBAAmB,IACnBrB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBsB,aAAa,IAAIjB,KAAK,CAAC,KAAK,CAAC,IAAIgB,mBAAmB;AACtE,kBAAkBE,eAAe,IAAIlB,KAAK,CAAC,KAAK,CAAC,IAAIgB,mBAAmB;AACxE;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMG,4BAA4B,GAAGzB,MAAM,CAACI,GAAG;AACtD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMsB,qBAAqB,GAAG1B,MAAM,CAACI,GAA+B;AAC3E,wBAAwB,CAAC;EAAEE,KAAK;EAAEC;AAAmC,CAAC,KAAKA,MAAM,IAAID,KAAK,CAAC,KAAK,CAAC;AACjG;AACA;AACA;AACA;AACA,YAAY,CAAC;EAAEqB;AAAsC,CAAC,KAAKA,SAAS;AACpE,CAAC;~~AAED~~,OAAO,MAAMC,2BAA2B,GAAG5B,MAAM,CAACI,~~GAAG~~;~~AACrD~~;AACA;~~AACA~~;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","css","keyframes","StyledProgressBar","div","StyledProgressBarBackground","theme","$color","StyledProgressBarProgressWrapper","$height","$isBig","shineMove","StyledProgressBarShine","attrs","$delay","style","animationDelay","$speed","StyledMotionProgressBarProgress","headline","StyledProgressBarLabel","$shouldShowLabelInline","$colorSplitPosition","$primaryColor","$secondaryColor","StyledProgressBarStepWrapper","StyledProgressBarStep","$position","StyledProgressBarThumbLabel"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css, keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<{ $color?: string }>;\n\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n height: 100%;\n width: 100%;\n background-color: ${({ theme, $color }: StyledProgressBarBackgroundProps) =>\n $color ?? theme['104']};\n`;\n\ntype StyledProgressBarProgressWrapperProps = WithTheme<{\n $isBig?: boolean;\n $height?: number;\n}>;\n\nexport const StyledProgressBarProgressWrapper = styled.div<StyledProgressBarProgressWrapperProps>`\n overflow: hidden;\n position: relative;\n width: 100%;\n height: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\nconst shineMove = keyframes`\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(100%);\n }\n`;\n\nexport const StyledProgressBarShine = styled.div.attrs<{ $speed?: number; $delay?: number }>(\n ({ $delay }) => ({\n style: { animationDelay: `${$delay ?? 0}s` },\n }),\n)`\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 33%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 66%\n );\n transform: translateX(-150%);\n animation: ${shineMove} ${({ $speed = 5 }) => `${$speed}s`} linear infinite;\n opacity: 0.95;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<{ $color?: string }> & {\n $height?: number;\n $isBig?: boolean;\n};\n\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: 2;\n display: flex;\n align-items: center;\n padding-left: 12px;\n background-color: ${({ theme, $color }: StyledProgressBarProgressProps) =>\n $color ?? theme.headline};\n border-radius: ${({ $height, $isBig }) => $height \|\| ($isBig ? 20 : 10)}px;\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<{\n $shouldShowLabelInline?: boolean;\n $primaryColor?: string;\n $secondaryColor?: string;\n $colorSplitPosition?: number;\n}>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n font-size: 85%;\n color: ${({ theme, $shouldShowLabelInline }: StyledProgressBarLabelProps) =>\n $shouldShowLabelInline ? theme['100'] : theme.headline};\n white-space: nowrap;\n\n ${({ $colorSplitPosition, $primaryColor, $secondaryColor, theme }) =>\n $colorSplitPosition &&\n css`\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n\n display: flex;\n align-items: center;\n\n padding-left: 8px;\n\n font-weight: bold;\n\n -webkit-background-clip: text;\n\n color: transparent;\n background-image: linear-gradient(\n 90deg,\n ${$primaryColor ?? theme['100']} ${$colorSplitPosition}%,\n ${$secondaryColor ?? theme['300']} ${$colorSplitPosition}%\n );\n `}\n`;\n\nexport const StyledProgressBarStepWrapper = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledProgressBarStepProps = WithTheme<{\n $position: number;\n $color?: string;\n}>;\n\nexport const StyledProgressBarStep = styled.div<StyledProgressBarStepProps>`\n background-color: ${({ theme, $color }: StyledProgressBarStepProps) => $color ?? theme['102']};\n height: 100%;\n width: 2px;\n position: absolute;\n top: 0;\n left: ${({ $position }: StyledProgressBarStepProps) => $position}%;\n`;\n\ntype StyledProgressBarThumbLabelProps = WithTheme<{\n $height?: number;\n $isBig?: boolean;\n}>;\nexport const StyledProgressBarThumbLabel = styled.div<StyledProgressBarThumbLabelProps>`\n position: absolute;\n right: ${({ $height, $isBig }) => {\n // set div exactly to end of border radius\n if ($height) return $height / 2;\n if ($isBig) return 20 / 2;\n return 10 / 2;\n }}px;\n top: 0;\n // revert till POPUPALIGNMENT respect if top or bottom\n // height: 100%;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/input/Input.d.ts CHANGED Viewed

@@ -9,6 +9,10 @@ export declare enum InputSize {
     Small = "small",
     Medium = "medium"
 }
+interface Color {
+    placeholder?: CSSProperties['color'];
+    border?: CSSProperties['borderColor'];
+}
 export type InputProps = {
     /**
      * If set and the input is disabled, the input will display a tooltip with this message.
@@ -63,9 +67,9 @@ export type InputProps = {
      */
     placeholder?: ReactNode;
     /**
-     * Color of the placeholder text.
+     * Colors for different parts of the input. You can set the color of the placeholder and the border color.
      */
-    placeholderColor?: CSSProperties['color'];
+    color?: Color;
     /**
      * An element that should be displayed on the right side of the Input.
      */

package/lib/types/components/input/Input.styles.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ type StyledInputContentWrapperProps = WithTheme<{
     $isInvalid?: boolean;
     $size: InputSize;
     $shouldShowTransparentBackground: boolean;
+    $borderColor?: CSSProperties['borderColor'];
 }>;
 export declare const StyledInputContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputContentWrapperProps>> & string;
 type StyledInputContentProps = WithTheme<{

package/lib/types/components/progress-bar/ProgressBar.styles.d.ts CHANGED Viewed

@@ -37,5 +37,9 @@ type StyledProgressBarStepProps = WithTheme<{
     $color?: string;
 }>;
 export declare const StyledProgressBarStep: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarStepProps>> & string;
-export declare const StyledProgressBarThumbLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledProgressBarThumbLabelProps = WithTheme<{
+    $height?: number;
+    $isBig?: boolean;
+}>;
+export declare const StyledProgressBarThumbLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProgressBarThumbLabelProps>> & string;
 export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.38",
+    "version": "5.0.40",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -75,6 +75,7 @@
         "@chayns/colors": "^2.0.2",
         "@chayns/uac-service": "~0.0.62",
         "clsx": "^2.1.1",
+        "react-compiler-runtime": "^1.0.0",
         "uuid": "^10.0.0"
     },
     "peerDependencies": {
@@ -87,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "cf4df459695a29377b37b9da357937c0d1d675c4"
+    "gitHead": "3698c880771ee4a4b07bf3f83a1559244d056a56"
 }