npm - @vibe/core - Versions diffs - 3.70.2-alpha-23478.0 → 3.70.3 - Mend

@vibe/core 3.70.2-alpha-23478.0 → 3.70.3

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

package/dist/mocked_classnames/src/components/TextField/TextField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.js","sources":["../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n ChangeEvent,\n type ChangeEventHandler,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from \"react\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport Icon from \"../Icon/Icon\";\nimport Loader from \"../Loader/Loader\";\nimport Text from \"../Text/Text\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport {\n FEEDBACK_CLASSES,\n SIZE_MAPPER,\n TextFieldAriaLabel,\n TextFieldFeedbackState as TextFieldFeedbackStateEnum,\n TextFieldTextType as TextFieldTextTypeEnum\n} from \"./TextFieldConstants\";\nimport { type TextFieldType, type TextFieldSize } from \"./TextField.types\";\nimport { BASE_SIZES } from \"../../constants/sizes\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport Clickable from \"../../components/Clickable/Clickable\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./TextField.module.scss\";\nimport { Tooltip } from \"../Tooltip\";\nimport { HiddenText } from \"../HiddenText\";\n\nconst EMPTY_OBJECT = { primary: \"\", secondary: \"\" };\n\nexport interface TextFieldProps extends VibeComponentProps {\n /*\n The placeholder text displayed when the input is empty.\n /\n placeholder?: string;\n /\n Configures the browser's autocomplete behavior.\n /\n autoComplete?: string;\n /\n The current value of the text field.\n /\n value?: string;\n /\n Callback fired when the text field value changes.\n /\n onChange?: (\n value: string,\n event: React.ChangeEvent<HTMLInputElement> \| Pick<React.ChangeEvent<HTMLInputElement>, \"target\">\n ) => void;\n /\n Callback fired when the text field loses focus.\n /\n onBlur?: (event: React.FocusEvent) => void;\n /\n Callback fired when the text field gains focus.\n /\n onFocus?: (event: React.FocusEvent) => void;\n /\n Callback fired when a key is pressed inside the text field.\n /\n onKeyDown?: (event: React.KeyboardEvent) => void;\n /\n Callback fired when the mouse wheel is used inside the text field.\n /\n onWheel?: (event: React.WheelEvent) => void;\n /\n The debounce rate for input value changes.\n /\n debounceRate?: number;\n /\n If true, the input is automatically focused on mount.\n /\n autoFocus?: boolean;\n /\n If true, disables the text field.\n /\n disabled?: boolean;\n /\n If true, makes the text field read-only.\n /\n readonly?: boolean;\n /\n A function to set a reference to the input element.\n /\n setRef?: (node: HTMLElement) => void;\n /\n The primary icon displayed inside the text field.\n /\n iconName?: string \| React.FunctionComponent \| null;\n /\n The secondary icon displayed inside the text field.\n /\n secondaryIconName?: string \| React.FunctionComponent \| null;\n /\n The label displayed above the text field.\n /\n title?: string;\n /\n The size of the text field.\n /\n size?: TextFieldSize;\n /\n Validation state for the text field.\n /\n validation?: { status?: \"error\" \| \"success\"; text?: string \| React.ReactNode };\n /\n Class name applied to the text field wrapper.\n /\n wrapperClassName?: string;\n /\n Callback fired when the icon inside the text field is clicked.\n /\n onIconClick?: (icon: string \| React.FunctionComponent \| null) => void;\n /\n If true, clears the input when the icon is clicked.\n /\n clearOnIconClick?: boolean;\n /\n The icon displayed inside the label.\n /\n labelIconName?: string \| React.FunctionComponent \| null;\n /\n If true, displays the character count.\n /\n showCharCount?: boolean;\n /\n The ARIA label for the input field.\n /\n inputAriaLabel?: string;\n /\n The ID of the container where search results are displayed.\n /\n searchResultsContainerId?: string;\n /\n The ID of the currently active search result.\n /\n activeDescendant?: string;\n /\n Icon labels for accessibility.\n /\n iconsNames?: {\n primary: string;\n secondary: string;\n };\n /\n The type of the text field.\n /\n type?: TextFieldType;\n /\n The maximum number of characters allowed.\n /\n maxLength?: number;\n /\n If true, allows the user to exceed the character limit set by `maxLength`.\n /\n allowExceedingMaxLength?: boolean;\n /\n If true, trims whitespace from the input value.\n /\n trim?: boolean;\n /\n The ARIA role of the text field.\n /\n role?: string;\n /\n If true, marks the input as required.\n /\n required?: boolean;\n /\n The error message displayed when a required field is left empty.\n /\n requiredErrorText?: string;\n /\n If true, displays a loading indicator inside the text field.\n /\n loading?: boolean;\n /\n Test ID for the secondary icon.\n /\n secondaryDataTestId?: string;\n /\n The tab order of the input field.\n /\n tabIndex?: number;\n /\n The name attribute for the input field.\n /\n name?: string;\n /\n If true, renders only an underline style for the text field.\n /\n underline?: boolean;\n /\n If true, the component is controlled by an external state.\n /\n controlled?: boolean;\n /\n Tooltip content for the primary icon.\n /\n iconTooltipContent?: string;\n /\n Tooltip content for the secondary icon.\n /\n secondaryTooltipContent?: string;\n /\n The text direction of the input.\n /\n dir?: \"ltr\" \| \"rtl\" \| \"auto\";\n}\n\nconst TextField = forwardRef(\n (\n {\n className = \"\",\n placeholder = \"\",\n autoComplete = \"off\",\n value,\n onChange = NOOP,\n onBlur = NOOP,\n onFocus = NOOP,\n onKeyDown = NOOP,\n onWheel = NOOP,\n debounceRate = 0,\n autoFocus = false,\n disabled = false,\n readonly = false,\n setRef = NOOP,\n iconName,\n secondaryIconName,\n id = \"input\",\n title = \"\",\n size = \"small\",\n validation = null,\n wrapperClassName = \"\",\n onIconClick = NOOP,\n clearOnIconClick = false,\n labelIconName,\n showCharCount = false,\n inputAriaLabel,\n searchResultsContainerId = \"\",\n activeDescendant = \"\",\n iconsNames = EMPTY_OBJECT,\n type = \"text\",\n maxLength = null,\n allowExceedingMaxLength = false,\n trim = false,\n role = \"\",\n required = false,\n requiredErrorText = \"\",\n loading = false,\n \"data-testid\": dataTestId,\n secondaryDataTestId,\n tabIndex,\n underline = false,\n name,\n controlled = false,\n iconTooltipContent,\n secondaryTooltipContent,\n dir\n }: TextFieldProps,\n ref: React.ForwardedRef<unknown>\n ) => {\n const [isRequiredAndEmpty, setIsRequiredAndEmpty] = useState(false);\n\n const inputRef = useRef(null);\n const mergedRef = useMergeRef(ref, inputRef, setRef);\n\n const onBlurCallback = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (required && !e.target.value) {\n setIsRequiredAndEmpty(true);\n }\n onBlur(e);\n },\n [onBlur, required]\n );\n\n const onChangeCallback = useCallback(\n (value: string, e?: React.ChangeEvent<HTMLInputElement>) => {\n if (isRequiredAndEmpty && value) {\n setIsRequiredAndEmpty(false);\n }\n const event = e \|\| { target: inputRef.current };\n onChange(value, event);\n },\n [onChange, isRequiredAndEmpty]\n );\n\n const {\n inputValue: uncontrolledInput,\n onEventChanged,\n clearValue\n } = useDebounceEvent({\n delay: debounceRate,\n onChange: onChangeCallback,\n initialStateValue: value,\n trim\n });\n\n const inputValue = useMemo(() => {\n return controlled ? value : uncontrolledInput;\n }, [controlled, value, uncontrolledInput]);\n\n const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n event => {\n controlled ? onChangeCallback(event.target.value, event) : onEventChanged(event);\n },\n [controlled, onChangeCallback, onEventChanged]\n );\n\n const currentStateIconName = useMemo(() => {\n if (secondaryIconName) {\n return inputValue ? secondaryIconName : iconName;\n }\n return iconName;\n }, [iconName, secondaryIconName, inputValue]);\n\n const onIconClickCallback = useCallback(() => {\n if (disabled) {\n return;\n }\n\n if (clearOnIconClick) {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n // Do it cause otherwise the value is not cleared in target object\n inputRef.current.value = \"\";\n controlled ? onChangeCallback(\"\") : clearValue();\n }\n onIconClick(currentStateIconName);\n }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]);\n\n const validationClass = useMemo(() => {\n if (typeof maxLength === \"number\" && inputValue && inputValue.length > maxLength) {\n return FEEDBACK_CLASSES.error;\n }\n\n if ((!validation \|\| !validation.status) && !isRequiredAndEmpty) {\n return \"\";\n }\n const status = isRequiredAndEmpty ? \"error\" : validation.status;\n return FEEDBACK_CLASSES[status];\n }, [maxLength, validation, isRequiredAndEmpty, inputValue]);\n\n const hasIcon = iconName \|\| secondaryIconName;\n const shouldShowExtraText =\n showCharCount \|\| (validation && validation.text) \|\| (isRequiredAndEmpty && requiredErrorText);\n const isSecondary = secondaryIconName === currentStateIconName;\n const isPrimary = iconName === currentStateIconName;\n const shouldFocusOnPrimaryIcon =\n (onIconClick !== NOOP \|\| iconsNames.primary \|\| iconTooltipContent) && inputValue && iconName.length && isPrimary;\n const shouldFocusOnSecondaryIcon = (secondaryIconName \|\| secondaryTooltipContent) && isSecondary && !!inputValue;\n const allowExceedingMaxLengthTextId = allowExceedingMaxLength ? `${id}-allow-exceeding-max-length-text` : undefined;\n\n useEffect(() => {\n if (!inputRef?.current \|\| !autoFocus) {\n return;\n }\n\n const animationFrame = requestAnimationFrame(() => inputRef.current.focus());\n return () => cancelAnimationFrame(animationFrame);\n }, [inputRef, autoFocus]);\n\n const isIconContainerClickable = onIconClick !== NOOP \|\| clearOnIconClick;\n\n const primaryIconLabel = iconsNames.primary \|\| iconTooltipContent;\n const secondaryIconLabel = iconsNames.secondary \|\| secondaryTooltipContent;\n\n return (\n <div\n className={cx(styles.textField, wrapperClassName, {\n [styles.disabled]: disabled,\n [styles.onlyUnderline]: underline\n })}\n role={role}\n aria-busy={loading}\n >\n <div className={cx(styles.labelWrapper)}>\n <FieldLabel labelText={title} icon={labelIconName} labelFor={id} required={required} />\n <div className={cx(styles.inputWrapper, SIZE_MAPPER[size], validationClass)}>\n {/Programatical input (tabIndex={-1}) is working fine with aria-activedescendant attribute despite the rule/}\n {/eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex*/}\n <input\n className={cx(className, styles.input, {\n [styles.inputHasIcon]: !!hasIcon,\n [styles.readOnly]: readonly\n })}\n placeholder={placeholder}\n autoComplete={autoComplete}\n value={inputValue}\n onChange={handleChange}\n disabled={disabled}\n readOnly={readonly}\n ref={mergedRef}\n type={type}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TEXT_FIELD, id)}\n data-vibe={ComponentVibeId.TEXT_FIELD}\n name={name}\n onBlur={onBlurCallback}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onWheel={onWheel}\n maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n role={searchResultsContainerId && \"combobox\"} // For voice reader\n aria-label={inputAriaLabel \|\| placeholder}\n aria-invalid={(validation && validation.status === \"error\") \|\| isRequiredAndEmpty}\n aria-owns={searchResultsContainerId}\n aria-activedescendant={activeDescendant}\n aria-required={required}\n aria-describedby={allowExceedingMaxLengthTextId}\n required={required}\n tabIndex={tabIndex}\n dir={dir}\n />\n {loading && (\n <div\n className={cx(styles.loaderContainer, {\n [styles.loaderContainerHasIcon]: hasIcon\n })}\n >\n <div className={cx(styles.loader)}>\n <Loader className={cx(styles.loaderSvg)} />\n </div>\n </div>\n )}\n {iconName && (\n <Tooltip\n content={isPrimary ? iconTooltipContent : undefined}\n referenceWrapperClassName={styles.tooltipContainer}\n >\n <Clickable\n className={cx(styles.iconContainer, {\n [styles.iconContainerHasIcon]: hasIcon,\n [styles.iconContainerActive]: isPrimary,\n [styles.iconContainerClickable]: isIconContainerClickable\n })}\n onClick={onIconClickCallback}\n tabIndex={shouldFocusOnPrimaryIcon ? \"0\" : \"-1\"}\n ariaLabel={primaryIconLabel}\n >\n <Icon\n icon={iconName}\n className={cx(styles.icon)}\n iconType=\"font\"\n iconSize={size === \"small\" ? \"16px\" : \"18px\"}\n />\n </Clickable>\n </Tooltip>\n )}\n {secondaryIconName && (\n <Tooltip\n content={isSecondary ? secondaryTooltipContent : undefined}\n addKeyboardHideShowTriggersByDefault\n referenceWrapperClassName={styles.tooltipContainer}\n >\n <Clickable\n className={cx(styles.iconContainer, {\n [styles.iconContainerHasIcon]: hasIcon,\n [styles.iconContainerActive]: isSecondary,\n [styles.iconContainerClickable]: isIconContainerClickable\n })}\n onClick={onIconClickCallback}\n tabIndex={shouldFocusOnSecondaryIcon ? \"0\" : \"-1\"}\n data-testid={secondaryDataTestId \|\| getTestId(ComponentDefaultTestId.TEXT_FIELD_SECONDARY_BUTTON, id)}\n ariaLabel={secondaryIconLabel}\n >\n <Icon\n icon={secondaryIconName}\n className={cx(styles.icon)}\n iconType=\"font\"\n iconSize={size === \"small\" ? \"16px\" : \"18px\"}\n />\n </Clickable>\n </Tooltip>\n )}\n </div>\n {shouldShowExtraText && (\n <Text type=\"text2\" color=\"secondary\" className={cx(styles.subTextContainer)}>\n {((validation && validation.text) \|\| (isRequiredAndEmpty && requiredErrorText)) && (\n <span className={cx(styles.subTextContainerStatus)}>\n {isRequiredAndEmpty ? requiredErrorText : validation.text}\n </span>\n )}\n {showCharCount && (\n <span className={cx(styles.counter)} aria-label={TextFieldAriaLabel.CHAR}>\n {(inputValue && inputValue.length) \|\| 0}\n {typeof maxLength === \"number\" && `/${maxLength}`}\n <HiddenText id={allowExceedingMaxLengthTextId} text={`Maximum of ${maxLength} characters`} />\n </span>\n )}\n </Text>\n )}\n </div>\n </div>\n );\n }\n);\n\ninterface TextFieldStaticProps {\n sizes: typeof BASE_SIZES;\n types: typeof TextFieldTextTypeEnum;\n feedbacks: typeof TextFieldFeedbackStateEnum;\n}\n\nexport default withStaticProps<TextFieldProps, TextFieldStaticProps, unknown>(TextField, {\n sizes: BASE_SIZES,\n feedbacks: TextFieldFeedbackStateEnum,\n types: TextFieldTextTypeEnum\n});\n"],"names":["EMPTY_OBJECT","primary","secondary","withStaticProps","forwardRef","_ref","ref","_ref$className","className","_ref$placeholder","placeholder","_ref$autoComplete","autoComplete","value","_ref$onChange","onChange","NOOP","_ref$onBlur","onBlur","_ref$onFocus","onFocus","_ref$onKeyDown","onKeyDown","_ref$onWheel","onWheel","_ref$debounceRate","debounceRate","_ref$autoFocus","autoFocus","_ref$disabled","disabled","_ref$readonly","readonly","_ref$setRef","setRef","iconName","secondaryIconName","_ref$id","id","_ref$title","title","_ref$size","size","_ref$validation","validation","_ref$wrapperClassName","wrapperClassName","_ref$onIconClick","onIconClick","_ref$clearOnIconClick","clearOnIconClick","labelIconName","_ref$showCharCount","showCharCount","inputAriaLabel","_ref$searchResultsCon","searchResultsContainerId","_ref$activeDescendant","activeDescendant","_ref$iconsNames","iconsNames","_ref$type","type","_ref$maxLength","maxLength","_ref$allowExceedingMa","allowExceedingMaxLength","_ref$trim","trim","_ref$role","role","_ref$required","required","_ref$requiredErrorTex","requiredErrorText","_ref$loading","loading","dataTestId","secondaryDataTestId","tabIndex","_ref$underline","underline","name","_ref$controlled","controlled","iconTooltipContent","secondaryTooltipContent","dir","_useState","useState","_useState2","_slicedToArray","isRequiredAndEmpty","setIsRequiredAndEmpty","inputRef","useRef","mergedRef","useMergeRef","onBlurCallback","useCallback","e","target","onChangeCallback","current","_useDebounceEvent","useDebounceEvent","delay","initialStateValue","uncontrolledInput","inputValue","onEventChanged","clearValue","useMemo","handleChange","event","currentStateIconName","onIconClickCallback","focus","validationClass","length","FEEDBACK_CLASSES","error","status","hasIcon","shouldShowExtraText","text","isSecondary","isPrimary","shouldFocusOnPrimaryIcon","shouldFocusOnSecondaryIcon","allowExceedingMaxLengthTextId","concat","undefined","useEffect","animationFrame","requestAnimationFrame","cancelAnimationFrame","isIconContainerClickable","primaryIconLabel","secondaryIconLabel","React","createElement","cx","styles","textField","_defineProperty","onlyUnderline","labelWrapper","FieldLabel","labelText","icon","labelFor","inputWrapper","SIZE_MAPPER","input","inputHasIcon","readOnly","getTestId","ComponentDefaultTestId","TEXT_FIELD","ComponentVibeId","loaderContainer","loaderContainerHasIcon","loader","Loader","loaderSvg","Tooltip","content","referenceWrapperClassName","tooltipContainer","Clickable","iconContainer","iconContainerHasIcon","iconContainerActive","iconContainerClickable","onClick","ariaLabel","Icon","iconType","iconSize","addKeyboardHideShowTriggersByDefault","TEXT_FIELD_SECONDARY_BUTTON","Text","color","subTextContainer","subTextContainerStatus","counter","TextFieldAriaLabel","CHAR","HiddenText","sizes","BASE_SIZES","feedbacks","TextFieldFeedbackStateEnum","types","TextFieldTextTypeEnum"],"mappings":"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"}
1	+ {"version":3,"file":"TextField.js","sources":["../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n ChangeEvent,\n type ChangeEventHandler,\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from \"react\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport Text from \"../Text/Text\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport {\n FEEDBACK_CLASSES,\n SIZE_MAPPER,\n TextFieldAriaLabel,\n TextFieldFeedbackState as TextFieldFeedbackStateEnum,\n TextFieldTextType as TextFieldTextTypeEnum\n} from \"./TextFieldConstants\";\nimport { type TextFieldType, type TextFieldSize } from \"./TextField.types\";\nimport { BASE_SIZES } from \"../../constants/sizes\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport Clickable from \"../../components/Clickable/Clickable\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./TextField.module.scss\";\nimport { Tooltip } from \"../Tooltip\";\nimport { HiddenText } from \"../HiddenText\";\n\nconst EMPTY_OBJECT = { primary: \"\", secondary: \"\" };\n\nexport interface TextFieldProps extends VibeComponentProps {\n /*\n The placeholder text displayed when the input is empty.\n /\n placeholder?: string;\n /\n Configures the browser's autocomplete behavior.\n /\n autoComplete?: string;\n /\n The current value of the text field.\n /\n value?: string;\n /\n Callback fired when the text field value changes.\n /\n onChange?: (\n value: string,\n event: React.ChangeEvent<HTMLInputElement> \| Pick<React.ChangeEvent<HTMLInputElement>, \"target\">\n ) => void;\n /\n Callback fired when the text field loses focus.\n /\n onBlur?: (event: React.FocusEvent) => void;\n /\n Callback fired when the text field gains focus.\n /\n onFocus?: (event: React.FocusEvent) => void;\n /\n Callback fired when a key is pressed inside the text field.\n /\n onKeyDown?: (event: React.KeyboardEvent) => void;\n /\n Callback fired when the mouse wheel is used inside the text field.\n /\n onWheel?: (event: React.WheelEvent) => void;\n /\n The debounce rate for input value changes.\n /\n debounceRate?: number;\n /\n If true, the input is automatically focused on mount.\n /\n autoFocus?: boolean;\n /\n If true, disables the text field.\n /\n disabled?: boolean;\n /\n If true, makes the text field read-only.\n /\n readonly?: boolean;\n /\n A function to set a reference to the input element.\n /\n setRef?: (node: HTMLElement) => void;\n /\n The primary icon displayed inside the text field.\n /\n iconName?: string \| React.FunctionComponent \| null;\n /\n The secondary icon displayed inside the text field.\n /\n secondaryIconName?: string \| React.FunctionComponent \| null;\n /\n The label displayed above the text field.\n /\n title?: string;\n /\n The size of the text field.\n /\n size?: TextFieldSize;\n /\n Validation state for the text field.\n /\n validation?: { status?: \"error\" \| \"success\"; text?: string \| React.ReactNode };\n /\n Class name applied to the text field wrapper.\n /\n wrapperClassName?: string;\n /\n Callback fired when the icon inside the text field is clicked.\n /\n onIconClick?: (icon: string \| React.FunctionComponent \| null) => void;\n /\n If true, clears the input when the icon is clicked.\n /\n clearOnIconClick?: boolean;\n /\n The icon displayed inside the label.\n /\n labelIconName?: string \| React.FunctionComponent \| null;\n /\n If true, displays the character count.\n /\n showCharCount?: boolean;\n /\n The ARIA label for the input field.\n /\n inputAriaLabel?: string;\n /\n The ID of the container where search results are displayed.\n /\n searchResultsContainerId?: string;\n /\n The ID of the currently active search result.\n /\n activeDescendant?: string;\n /\n Icon labels for accessibility.\n /\n iconsNames?: {\n primary: string;\n secondary: string;\n };\n /\n The type of the text field.\n /\n type?: TextFieldType;\n /\n The maximum number of characters allowed.\n /\n maxLength?: number;\n /\n If true, allows the user to exceed the character limit set by `maxLength`.\n /\n allowExceedingMaxLength?: boolean;\n /\n If true, trims whitespace from the input value.\n /\n trim?: boolean;\n /\n The ARIA role of the text field.\n /\n role?: string;\n /\n If true, marks the input as required.\n /\n required?: boolean;\n /\n The error message displayed when a required field is left empty.\n /\n requiredErrorText?: string;\n /\n If true, displays a loading indicator inside the text field.\n /\n loading?: boolean;\n /\n Test ID for the secondary icon.\n /\n secondaryDataTestId?: string;\n /\n The tab order of the input field.\n /\n tabIndex?: number;\n /\n The name attribute for the input field.\n /\n name?: string;\n /\n If true, renders only an underline style for the text field.\n /\n underline?: boolean;\n /\n If true, the component is controlled by an external state.\n /\n controlled?: boolean;\n /\n Tooltip content for the primary icon.\n /\n iconTooltipContent?: string;\n /\n Tooltip content for the secondary icon.\n /\n secondaryTooltipContent?: string;\n /\n The text direction of the input.\n /\n dir?: \"ltr\" \| \"rtl\" \| \"auto\";\n}\n\nconst TextField = forwardRef(\n (\n {\n className = \"\",\n placeholder = \"\",\n autoComplete = \"off\",\n value,\n onChange = NOOP,\n onBlur = NOOP,\n onFocus = NOOP,\n onKeyDown = NOOP,\n onWheel = NOOP,\n debounceRate = 0,\n autoFocus = false,\n disabled = false,\n readonly = false,\n setRef = NOOP,\n iconName,\n secondaryIconName,\n id = \"input\",\n title = \"\",\n size = \"small\",\n validation = null,\n wrapperClassName = \"\",\n onIconClick = NOOP,\n clearOnIconClick = false,\n labelIconName,\n showCharCount = false,\n inputAriaLabel,\n searchResultsContainerId = \"\",\n activeDescendant = \"\",\n iconsNames = EMPTY_OBJECT,\n type = \"text\",\n maxLength = null,\n allowExceedingMaxLength = false,\n trim = false,\n role = \"\",\n required = false,\n requiredErrorText = \"\",\n loading = false,\n \"data-testid\": dataTestId,\n secondaryDataTestId,\n tabIndex,\n underline = false,\n name,\n controlled = false,\n iconTooltipContent,\n secondaryTooltipContent,\n dir\n }: TextFieldProps,\n ref: React.ForwardedRef<unknown>\n ) => {\n const [isRequiredAndEmpty, setIsRequiredAndEmpty] = useState(false);\n\n const inputRef = useRef(null);\n const mergedRef = useMergeRef(ref, inputRef, setRef);\n\n const onBlurCallback = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n if (required && !e.target.value) {\n setIsRequiredAndEmpty(true);\n }\n onBlur(e);\n },\n [onBlur, required]\n );\n\n const onChangeCallback = useCallback(\n (value: string, e?: React.ChangeEvent<HTMLInputElement>) => {\n if (isRequiredAndEmpty && value) {\n setIsRequiredAndEmpty(false);\n }\n const event = e \|\| { target: inputRef.current };\n onChange(value, event);\n },\n [onChange, isRequiredAndEmpty]\n );\n\n const {\n inputValue: uncontrolledInput,\n onEventChanged,\n clearValue\n } = useDebounceEvent({\n delay: debounceRate,\n onChange: onChangeCallback,\n initialStateValue: value,\n trim\n });\n\n const inputValue = useMemo(() => {\n return controlled ? value : uncontrolledInput;\n }, [controlled, value, uncontrolledInput]);\n\n const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n event => {\n controlled ? onChangeCallback(event.target.value, event) : onEventChanged(event);\n },\n [controlled, onChangeCallback, onEventChanged]\n );\n\n const currentStateIconName = useMemo(() => {\n if (secondaryIconName) {\n return inputValue ? secondaryIconName : iconName;\n }\n return iconName;\n }, [iconName, secondaryIconName, inputValue]);\n\n const onIconClickCallback = useCallback(() => {\n if (disabled) {\n return;\n }\n\n if (clearOnIconClick) {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n // Do it cause otherwise the value is not cleared in target object\n inputRef.current.value = \"\";\n controlled ? onChangeCallback(\"\") : clearValue();\n }\n onIconClick(currentStateIconName);\n }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]);\n\n const validationClass = useMemo(() => {\n if (typeof maxLength === \"number\" && inputValue && inputValue.length > maxLength) {\n return FEEDBACK_CLASSES.error;\n }\n\n if ((!validation \|\| !validation.status) && !isRequiredAndEmpty) {\n return \"\";\n }\n const status = isRequiredAndEmpty ? \"error\" : validation.status;\n return FEEDBACK_CLASSES[status];\n }, [maxLength, validation, isRequiredAndEmpty, inputValue]);\n\n const hasIcon = iconName \|\| secondaryIconName;\n const shouldShowExtraText =\n showCharCount \|\| (validation && validation.text) \|\| (isRequiredAndEmpty && requiredErrorText);\n const isSecondary = secondaryIconName === currentStateIconName;\n const isPrimary = iconName === currentStateIconName;\n const shouldFocusOnPrimaryIcon =\n (onIconClick !== NOOP \|\| iconsNames.primary \|\| iconTooltipContent) && inputValue && iconName.length && isPrimary;\n const shouldFocusOnSecondaryIcon = (secondaryIconName \|\| secondaryTooltipContent) && isSecondary && !!inputValue;\n const allowExceedingMaxLengthTextId = allowExceedingMaxLength ? `${id}-allow-exceeding-max-length-text` : undefined;\n\n useEffect(() => {\n if (!inputRef?.current \|\| !autoFocus) {\n return;\n }\n\n const animationFrame = requestAnimationFrame(() => inputRef.current.focus());\n return () => cancelAnimationFrame(animationFrame);\n }, [inputRef, autoFocus]);\n\n const isIconContainerClickable = onIconClick !== NOOP \|\| clearOnIconClick;\n\n const primaryIconLabel = iconsNames.primary \|\| iconTooltipContent;\n const secondaryIconLabel = iconsNames.secondary \|\| secondaryTooltipContent;\n\n return (\n <div\n className={cx(styles.textField, wrapperClassName, {\n [styles.disabled]: disabled,\n [styles.onlyUnderline]: underline\n })}\n role={role}\n aria-busy={loading}\n >\n <div className={cx(styles.labelWrapper)}>\n <FieldLabel labelText={title} icon={labelIconName} labelFor={id} required={required} />\n <div className={cx(styles.inputWrapper, SIZE_MAPPER[size], validationClass)}>\n {/Programatical input (tabIndex={-1}) is working fine with aria-activedescendant attribute despite the rule/}\n {/eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex*/}\n <input\n className={cx(className, styles.input, {\n [styles.inputHasIcon]: !!hasIcon,\n [styles.readOnly]: readonly\n })}\n placeholder={placeholder}\n autoComplete={autoComplete}\n value={inputValue}\n onChange={handleChange}\n disabled={disabled}\n readOnly={readonly}\n ref={mergedRef}\n type={type}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TEXT_FIELD, id)}\n data-vibe={ComponentVibeId.TEXT_FIELD}\n name={name}\n onBlur={onBlurCallback}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n onWheel={onWheel}\n maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n role={searchResultsContainerId && \"combobox\"} // For voice reader\n aria-label={inputAriaLabel \|\| placeholder}\n aria-invalid={(validation && validation.status === \"error\") \|\| isRequiredAndEmpty}\n aria-owns={searchResultsContainerId}\n aria-activedescendant={activeDescendant}\n aria-required={required}\n aria-describedby={allowExceedingMaxLengthTextId}\n required={required}\n tabIndex={tabIndex}\n dir={dir}\n />\n {loading && (\n <div\n className={cx(styles.loaderContainer, {\n [styles.loaderContainerHasIcon]: hasIcon\n })}\n >\n <div className={cx(styles.loader)}>\n <Loader className={cx(styles.loaderSvg)} />\n </div>\n </div>\n )}\n {iconName && (\n <Tooltip\n content={isPrimary ? iconTooltipContent : undefined}\n referenceWrapperClassName={styles.tooltipContainer}\n >\n <Clickable\n className={cx(styles.iconContainer, {\n [styles.iconContainerHasIcon]: hasIcon,\n [styles.iconContainerActive]: isPrimary,\n [styles.iconContainerClickable]: isIconContainerClickable\n })}\n onClick={onIconClickCallback}\n tabIndex={shouldFocusOnPrimaryIcon ? \"0\" : \"-1\"}\n ariaLabel={primaryIconLabel}\n >\n <Icon\n icon={iconName}\n className={cx(styles.icon)}\n iconType=\"font\"\n iconSize={size === \"small\" ? \"16px\" : \"18px\"}\n />\n </Clickable>\n </Tooltip>\n )}\n {secondaryIconName && (\n <Tooltip\n content={isSecondary ? secondaryTooltipContent : undefined}\n addKeyboardHideShowTriggersByDefault\n referenceWrapperClassName={styles.tooltipContainer}\n >\n <Clickable\n className={cx(styles.iconContainer, {\n [styles.iconContainerHasIcon]: hasIcon,\n [styles.iconContainerActive]: isSecondary,\n [styles.iconContainerClickable]: isIconContainerClickable\n })}\n onClick={onIconClickCallback}\n tabIndex={shouldFocusOnSecondaryIcon ? \"0\" : \"-1\"}\n data-testid={secondaryDataTestId \|\| getTestId(ComponentDefaultTestId.TEXT_FIELD_SECONDARY_BUTTON, id)}\n ariaLabel={secondaryIconLabel}\n >\n <Icon\n icon={secondaryIconName}\n className={cx(styles.icon)}\n iconType=\"font\"\n iconSize={size === \"small\" ? \"16px\" : \"18px\"}\n />\n </Clickable>\n </Tooltip>\n )}\n </div>\n {shouldShowExtraText && (\n <Text type=\"text2\" color=\"secondary\" className={cx(styles.subTextContainer)}>\n {((validation && validation.text) \|\| (isRequiredAndEmpty && requiredErrorText)) && (\n <span className={cx(styles.subTextContainerStatus)}>\n {isRequiredAndEmpty ? requiredErrorText : validation.text}\n </span>\n )}\n {showCharCount && (\n <span className={cx(styles.counter)} aria-label={TextFieldAriaLabel.CHAR}>\n {(inputValue && inputValue.length) \|\| 0}\n {typeof maxLength === \"number\" && `/${maxLength}`}\n <HiddenText id={allowExceedingMaxLengthTextId} text={`Maximum of ${maxLength} characters`} />\n </span>\n )}\n </Text>\n )}\n </div>\n </div>\n );\n }\n);\n\ninterface TextFieldStaticProps {\n sizes: typeof BASE_SIZES;\n types: typeof TextFieldTextTypeEnum;\n feedbacks: typeof TextFieldFeedbackStateEnum;\n}\n\nexport default withStaticProps<TextFieldProps, TextFieldStaticProps, unknown>(TextField, {\n sizes: BASE_SIZES,\n feedbacks: TextFieldFeedbackStateEnum,\n types: TextFieldTextTypeEnum\n});\n"],"names":["EMPTY_OBJECT","primary","secondary","withStaticProps","forwardRef","_ref","ref","_ref$className","className","_ref$placeholder","placeholder","_ref$autoComplete","autoComplete","value","_ref$onChange","onChange","NOOP","_ref$onBlur","onBlur","_ref$onFocus","onFocus","_ref$onKeyDown","onKeyDown","_ref$onWheel","onWheel","_ref$debounceRate","debounceRate","_ref$autoFocus","autoFocus","_ref$disabled","disabled","_ref$readonly","readonly","_ref$setRef","setRef","iconName","secondaryIconName","_ref$id","id","_ref$title","title","_ref$size","size","_ref$validation","validation","_ref$wrapperClassName","wrapperClassName","_ref$onIconClick","onIconClick","_ref$clearOnIconClick","clearOnIconClick","labelIconName","_ref$showCharCount","showCharCount","inputAriaLabel","_ref$searchResultsCon","searchResultsContainerId","_ref$activeDescendant","activeDescendant","_ref$iconsNames","iconsNames","_ref$type","type","_ref$maxLength","maxLength","_ref$allowExceedingMa","allowExceedingMaxLength","_ref$trim","trim","_ref$role","role","_ref$required","required","_ref$requiredErrorTex","requiredErrorText","_ref$loading","loading","dataTestId","secondaryDataTestId","tabIndex","_ref$underline","underline","name","_ref$controlled","controlled","iconTooltipContent","secondaryTooltipContent","dir","_useState","useState","_useState2","_slicedToArray","isRequiredAndEmpty","setIsRequiredAndEmpty","inputRef","useRef","mergedRef","useMergeRef","onBlurCallback","useCallback","e","target","onChangeCallback","current","_useDebounceEvent","useDebounceEvent","delay","initialStateValue","uncontrolledInput","inputValue","onEventChanged","clearValue","useMemo","handleChange","event","currentStateIconName","onIconClickCallback","focus","validationClass","length","FEEDBACK_CLASSES","error","status","hasIcon","shouldShowExtraText","text","isSecondary","isPrimary","shouldFocusOnPrimaryIcon","shouldFocusOnSecondaryIcon","allowExceedingMaxLengthTextId","concat","undefined","useEffect","animationFrame","requestAnimationFrame","cancelAnimationFrame","isIconContainerClickable","primaryIconLabel","secondaryIconLabel","React","createElement","cx","styles","textField","_defineProperty","onlyUnderline","labelWrapper","FieldLabel","labelText","icon","labelFor","inputWrapper","SIZE_MAPPER","input","inputHasIcon","readOnly","getTestId","ComponentDefaultTestId","TEXT_FIELD","ComponentVibeId","loaderContainer","loaderContainerHasIcon","loader","Loader","loaderSvg","Tooltip","content","referenceWrapperClassName","tooltipContainer","Clickable","iconContainer","iconContainerHasIcon","iconContainerActive","iconContainerClickable","onClick","ariaLabel","Icon","iconType","iconSize","addKeyboardHideShowTriggersByDefault","TEXT_FIELD_SECONDARY_BUTTON","Text","color","subTextContainer","subTextContainerStatus","counter","TextFieldAriaLabel","CHAR","HiddenText","sizes","BASE_SIZES","feedbacks","TextFieldFeedbackStateEnum","types","TextFieldTextTypeEnum"],"mappings":"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"}

package/dist/mocked_classnames/src/components/TextField/TextField.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={textField:"textField",labelWrapper:"labelWrapper",subTextContainer:"subTextContainer",counter:"counter",disabled:"disabled",icon:"icon",inputWrapper:"inputWrapper",input:"input",iconContainer:"iconContainer",iconContainerHasIcon:"iconContainerHasIcon",readOnly:"readOnly",inputHover:"inputHover",inputActive:"inputActive",inputHasIcon:"inputHasIcon",round:"round",square:"square",onlyUnderline:"onlyUnderline",tooltipContainer:"tooltipContainer",wrapperSizeMedium:"wrapperSizeMedium",wrapperSizeLarge:"wrapperSizeLarge",iconContainerActive:"iconContainerActive",iconContainerClickable:"iconContainerClickable",inputErrorValidation:"inputErrorValidation",subTextContainerStatus:"subTextContainerStatus",inputSuccessValidation:"inputSuccessValidation",wrapperSizeSmall:"wrapperSizeSmall",inputWrapperSizeSmall:"inputWrapperSizeSmall",loaderContainer:"loaderContainer",loaderContainerHasIcon:"loaderContainerHasIcon",loader:"loader",loaderSvg:"loaderSvg"};!function(n){const e="s_id-695413f4db8e_3_70_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".textField {\n  position: relative;\n  box-sizing: border-box;\n  font: var(--font-text2-normal);\n  width: 100%;\n}\n\n.textField * {\n  box-sizing: border-box;\n}\n\n.textField .labelWrapper {\n  width: 100%;\n}\n\n.textField .subTextContainer {\n  display: flex;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  padding-block: 1px;\n}\n\n.textField .subTextContainer .counter {\n  margin-left: auto;\n}\n\n.textField.disabled .icon {\n  cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper {\n  cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper .input {\n  user-select: none;\n  border: none;\n  pointer-events: none;\n  background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper .input::placeholder {\n  color: var(--disabled-text-color);\n}\n\n.textField.disabled .inputWrapper .iconContainer.iconContainerHasIcon:hover {\n  background-color: transparent;\n}\n\n.textField .inputWrapper {\n  width: 100%;\n  position: relative;\n}\n\n.textField .inputWrapper .input {\n  width: 100%;\n  height: 100%;\n  outline: 0;\n  background-color: var(--secondary-background-color);\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  transition: border-color var(--motion-productive-medium) ease-in;\n  padding: var(--spacing-small) var(--spacing-medium);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .input.readOnly {\n  background-color: var(--allgrey-background-color);\n  border: none;\n}\n\n.textField .inputWrapper .input.inputHover {\n  border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .input:focus,\n.textField .inputWrapper .input:active,\n.textField .inputWrapper .input.inputActive {\n  border-color: var(--primary-color);\n}\n\n.textField .inputWrapper .input::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n\n.textField .inputWrapper .input.inputHasIcon {\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);\n}\n\n.textField .inputWrapper .input.round {\n  border-radius: 50px;\n}\n\n.textField .inputWrapper .input.square {\n  border-radius: 0;\n}\n\n.textField .inputWrapper .input.onlyUnderline {\n  border-left: none;\n  border-right: none;\n  border-top: none;\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-xs);\n  border-radius: 0 !important;\n}\n\n.textField .inputWrapper .tooltipContainer {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .tooltipContainer {\n  width: 40px;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .tooltipContainer {\n  width: 46px;\n}\n\n.textField .inputWrapper .iconContainer {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-small);\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon.iconContainerClickable {\n  pointer-events: all;\n  cursor: pointer;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon:not(.iconContainerClickable) {\n  pointer-events: none;\n  cursor: default;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive {\n  opacity: 1;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive .icon {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:hover {\n  background-color: var(--primary-background-hover-color);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:active {\n  transform: translateY(-50%) scale(0.9);\n}\n\n.textField .inputWrapper .iconContainer .icon {\n  transform: rotate(90deg) scale(0.8);\n  color: var(--icon-color);\n  will-change: transform;\n  pointer-events: none;\n  transition: color var(--motion-productive-short) var(--motion-timing-enter), transform var(--motion-productive-short) var(--motion-timing-enter);\n  font-size: 14px;\n  font-family: var(--font-family);\n}\n\n.textField .inputWrapper.inputErrorValidation:hover .input {\n  border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .input {\n  border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .input:focus,\n.textField .inputWrapper.inputErrorValidation .input:active {\n  border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon {\n  color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon:hover {\n  color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .subTextContainerStatus,\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .counter {\n  color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation:hover .input {\n  border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .input {\n  border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .input:focus,\n.textField .inputWrapper.inputSuccessValidation .input:active {\n  border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon {\n  color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon:hover {\n  color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation + .subTextContainer .subTextContainerStatus {\n  color: var(--positive-color);\n}\n\n.textField .inputWrapper.wrapperSizeSmall {\n  height: 32px;\n}\n\n.textField .inputWrapper.wrapperSizeSmall .input {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.inputWrapperSizeSmall .input.inputHasIcon.onlyUnderline {\n  padding-left: var(--spacing-xs);\n}\n\n.textField .inputWrapper.wrapperSizeMedium {\n  height: 40px;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon.onlyUnderline {\n  padding-left: 4px;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer:hover + .iconContainer + .input {\n  border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper.wrapperSizeLarge {\n  height: 48px;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon.onlyUnderline {\n  padding-left: var(--spacing-xs);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .iconContainer {\n  height: 40px;\n  width: 40px;\n}\n\n.textField .inputWrapper:hover .input {\n  border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .loaderContainer {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.textField .inputWrapper .loaderContainer.loaderContainerHasIcon {\n  right: 32px;\n}\n\n.textField .inputWrapper .loaderContainer .loader {\n  width: 16px;\n  height: 16px;\n}\n\n.textField .inputWrapper .loaderContainer .loader .loaderSvg {\n  color: var(--secondary-text-color);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer .icon {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .iconContainer .icon {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n\n.dark-app-theme input[type=date]::-webkit-calendar-picker-indicator, .black-app-theme input[type=date]::-webkit-calendar-picker-indicator, .hacker_theme-app-theme input[type=date]::-webkit-calendar-picker-indicator,\n.dark-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.black-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.hacker_theme-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}");export{n as default};
+var n={textField:"textField",labelWrapper:"labelWrapper",subTextContainer:"subTextContainer",counter:"counter",disabled:"disabled",icon:"icon",inputWrapper:"inputWrapper",input:"input",iconContainer:"iconContainer",iconContainerHasIcon:"iconContainerHasIcon",readOnly:"readOnly",inputHover:"inputHover",inputActive:"inputActive",inputHasIcon:"inputHasIcon",round:"round",square:"square",onlyUnderline:"onlyUnderline",tooltipContainer:"tooltipContainer",wrapperSizeMedium:"wrapperSizeMedium",wrapperSizeLarge:"wrapperSizeLarge",iconContainerActive:"iconContainerActive",iconContainerClickable:"iconContainerClickable",inputErrorValidation:"inputErrorValidation",subTextContainerStatus:"subTextContainerStatus",inputSuccessValidation:"inputSuccessValidation",wrapperSizeSmall:"wrapperSizeSmall",inputWrapperSizeSmall:"inputWrapperSizeSmall",loaderContainer:"loaderContainer",loaderContainerHasIcon:"loaderContainerHasIcon",loader:"loader",loaderSvg:"loaderSvg"};!function(n){const e="s_id-695413f4db8e_3_70_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const i=document.createElement("style");i.id=e,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".textField {\n  position: relative;\n  box-sizing: border-box;\n  font: var(--font-text2-normal);\n  width: 100%;\n}\n\n.textField * {\n  box-sizing: border-box;\n}\n\n.textField .labelWrapper {\n  width: 100%;\n}\n\n.textField .subTextContainer {\n  display: flex;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  padding-block: 1px;\n}\n\n.textField .subTextContainer .counter {\n  margin-left: auto;\n}\n\n.textField.disabled .icon {\n  cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper {\n  cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper .input {\n  user-select: none;\n  border: none;\n  pointer-events: none;\n  background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n\n.textField.disabled .inputWrapper .input::placeholder {\n  color: var(--disabled-text-color);\n}\n\n.textField.disabled .inputWrapper .iconContainer.iconContainerHasIcon:hover {\n  background-color: transparent;\n}\n\n.textField .inputWrapper {\n  width: 100%;\n  position: relative;\n}\n\n.textField .inputWrapper .input {\n  width: 100%;\n  height: 100%;\n  outline: 0;\n  background-color: var(--secondary-background-color);\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  transition: border-color var(--motion-productive-medium) ease-in;\n  padding: var(--spacing-small) var(--spacing-medium);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .input.readOnly {\n  background-color: var(--allgrey-background-color);\n  border: none;\n}\n\n.textField .inputWrapper .input.inputHover {\n  border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .input:focus,\n.textField .inputWrapper .input:active,\n.textField .inputWrapper .input.inputActive {\n  border-color: var(--primary-color);\n}\n\n.textField .inputWrapper .input::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n\n.textField .inputWrapper .input.inputHasIcon {\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);\n}\n\n.textField .inputWrapper .input.round {\n  border-radius: 50px;\n}\n\n.textField .inputWrapper .input.square {\n  border-radius: 0;\n}\n\n.textField .inputWrapper .input.onlyUnderline {\n  border-left: none;\n  border-right: none;\n  border-top: none;\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-xs);\n  border-radius: 0 !important;\n}\n\n.textField .inputWrapper .tooltipContainer {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .tooltipContainer {\n  width: 40px;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .tooltipContainer {\n  width: 46px;\n}\n\n.textField .inputWrapper .iconContainer {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-small);\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon.iconContainerClickable {\n  pointer-events: all;\n  cursor: pointer;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive.iconContainerHasIcon:not(.iconContainerClickable) {\n  pointer-events: none;\n  cursor: default;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive {\n  opacity: 1;\n}\n\n.textField .inputWrapper .iconContainer.iconContainerActive .icon {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:hover {\n  background-color: var(--primary-background-hover-color);\n}\n\n.textField .inputWrapper .iconContainer.iconContainerHasIcon.iconContainerClickable:active {\n  transform: translateY(-50%) scale(0.9);\n}\n\n.textField .inputWrapper .iconContainer .icon {\n  transform: rotate(90deg) scale(0.8);\n  color: var(--icon-color);\n  will-change: transform;\n  pointer-events: none;\n  transition: color var(--motion-productive-short) var(--motion-timing-enter), transform var(--motion-productive-short) var(--motion-timing-enter);\n  font-size: 14px;\n  font-family: var(--font-family);\n}\n\n.textField .inputWrapper.inputErrorValidation:hover .input {\n  border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .input {\n  border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .input:focus,\n.textField .inputWrapper.inputErrorValidation .input:active {\n  border-color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon {\n  color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation .iconContainer .icon:hover {\n  color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .subTextContainerStatus,\n.textField .inputWrapper.inputErrorValidation + .subTextContainer .counter {\n  color: var(--negative-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation:hover .input {\n  border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .input {\n  border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .input:focus,\n.textField .inputWrapper.inputSuccessValidation .input:active {\n  border-color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon {\n  color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation .iconContainer .icon:hover {\n  color: var(--positive-color);\n}\n\n.textField .inputWrapper.inputSuccessValidation + .subTextContainer .subTextContainerStatus {\n  color: var(--positive-color);\n}\n\n.textField .inputWrapper.wrapperSizeSmall {\n  height: 32px;\n}\n\n.textField .inputWrapper.wrapperSizeSmall .input {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.inputWrapperSizeSmall .input.inputHasIcon.onlyUnderline {\n  padding-left: var(--spacing-xs);\n}\n\n.textField .inputWrapper.wrapperSizeMedium {\n  height: 40px;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .input.inputHasIcon.onlyUnderline {\n  padding-left: 4px;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer:hover + .iconContainer + .input {\n  border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper.wrapperSizeLarge {\n  height: 48px;\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .input.inputHasIcon.onlyUnderline {\n  padding-left: var(--spacing-xs);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .iconContainer {\n  height: 40px;\n  width: 40px;\n}\n\n.textField .inputWrapper:hover .input {\n  border-color: var(--primary-text-color);\n}\n\n.textField .inputWrapper .loaderContainer {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.textField .inputWrapper .loaderContainer.loaderContainerHasIcon {\n  right: 32px;\n}\n\n.textField .inputWrapper .loaderContainer .loader {\n  width: 16px;\n  height: 16px;\n}\n\n.textField .inputWrapper .loaderContainer .loader .loaderSvg {\n  color: var(--secondary-text-color);\n}\n\n.textField .inputWrapper.wrapperSizeMedium .iconContainer .icon {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n\n.textField .inputWrapper.wrapperSizeLarge .iconContainer .icon {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n\n.dark-app-theme input[type=date]::-webkit-calendar-picker-indicator, .black-app-theme input[type=date]::-webkit-calendar-picker-indicator, .hacker_theme-app-theme input[type=date]::-webkit-calendar-picker-indicator,\n.dark-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.black-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.hacker_theme-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}");export{n as default};
 //# sourceMappingURL=TextField.module.scss.js.map

package/dist/mocked_classnames/src/components/TextWithHighlight/TextWithHighlight.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={textWithHighlightWrapper:"textWithHighlightWrapper",highlightText:"highlightText",withEllipsis:"withEllipsis"};!function(e){const t="s_id-42c1fd2afe36_3_70_1";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".textWithHighlightWrapper {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n\n.textWithHighlightWrapper em.highlightText {\n  background-color: var(--primary-selected-color);\n  color: var(--primary-text-color);\n  border-radius: 2px;\n}\n\n.textWithHighlightWrapper.withEllipsis {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: var(--heading-clamp-lines);\n  -webkit-box-orient: vertical;\n  white-space: initial;\n  word-break: break-word;\n}");export{e as default};
+var e={textWithHighlightWrapper:"textWithHighlightWrapper",highlightText:"highlightText",withEllipsis:"withEllipsis"};!function(e){const t="s_id-42c1fd2afe36_3_70_2";if("undefined"!=typeof document){const i=document.head||document.getElementsByTagName("head")[0];if(i.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".textWithHighlightWrapper {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n\n.textWithHighlightWrapper em.highlightText {\n  background-color: var(--primary-selected-color);\n  color: var(--primary-text-color);\n  border-radius: 2px;\n}\n\n.textWithHighlightWrapper.withEllipsis {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: var(--heading-clamp-lines);\n  -webkit-box-orient: vertical;\n  white-space: initial;\n  word-break: break-word;\n}");export{e as default};
 //# sourceMappingURL=TextWithHighlight.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/Tipseen.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as i,useRef as r,useState as s,useEffect as n,useMemo as a,Fragment as l}from"react";import m from"classnames";import{AnimationType as d,HideShowEvent as p}from"../Dialog/DialogConstants.js";import c from"../../hooks/useMergeRef.js";import u from"../Tooltip/Tooltip.js";import f from"../IconButton/IconButton.js";import h from"./TipseenTitle.js";import{TipseenCloseButtonTheme as v,TipseenColor as T,TIPSEEN_CLOSE_BUTTON_ARIA_LABEL as y}from"./TipseenConstants.js";import{withStaticProps as g}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{ComponentDefaultTestId as C}from"../../tests/constants.js";import{getTestId as j}from"../../tests/testIds.js";import N from"../Text/Text.js";import E from"./Tipseen.module.scss.js";import{ButtonColor as w}from"../Button/ButtonConstants.js";import{TooltipPositions as B}from"../Tooltip/TooltipConstants.js";import x from"../../../icons/dist/react/CloseSmall.js";var D=o.createContext("primary"),W=g(i((function(i,d){var p=i.className,v=i.id,T=i.position,g=void 0===T?"bottom":T,B=i.animationType,W=void 0===B?"expand":B,A=i.hideDelay,R=void 0===A?0:A,S=i.showDelay,k=void 0===S?100:S,I=i.title,O=i.titleClassName,P=i.hideCloseButton,_=i.closeButtonTheme,b=void 0===_?"light":_,H=i.onClose,L=i.closeAriaLabel,M=i.children,z=void 0===M?null:M,G=i.content,K=i.containerSelector,U=i.hideTrigger,V=void 0===U?[]:U,Y=i.showTrigger,q=void 0===Y?[]:Y,F=i.width,J=i.moveBy,Q=i.hideWhenReferenceHidden,X=void 0!==Q&&Q,Z=i.referenceWrapperClassName,$=i.tip,ee=void 0===$||$,te=i.tooltipArrowClassName,oe=i.modifiers,ie=void 0===oe?[]:oe,re=i.floating,se=void 0!==re&&re,ne=i.color,ae=i["data-testid"],le=null!=ne?ne:"inverted",me=Array.isArray(q)&&Array.isArray(V)&&0===q.length&&k>0,de=r(null),pe=c(d,de),ce=s(!me),ue=e(ce,2),fe=ue[0],he=ue[1],ve=L||y;n((function(){var e;return k&&(e=setTimeout((function(){he(!0)}),k)),function(){clearTimeout(e)}}),[k,he]);var Te=a((function(){return"inverted"===le?"onInverted":"onPrimary"}),[le]),ye=a((function(){return"light"===b?"inverted"===le?w.ON_INVERTED_BACKGROUND:w.ON_PRIMARY_COLOR:b}),[le,b]),ge=d||v?"div":l,Ce=o.createElement("div",null,o.createElement("div",{className:m(E.tipseenHeader)},P?null:o.createElement(f,{hideTooltip:!0,className:m(E.tipseenCloseButton,t({},E.dark,"dark"===b||"fixed-dark"===b)),onClick:H,size:"xs",kind:"tertiary",color:ye,ariaLabel:ve,icon:x}),o.createElement(h,{text:I,className:m(E.tipseenTitle,O)})),o.createElement(N,{color:Te,type:"text2",element:"p",className:m(E.tipseenContent)},o.createElement(D.Provider,{value:le},G)));return o.createElement(ge,{ref:pe,id:v,"data-testid":ae||j(C.TIPSEEN,v)},o.createElement(u,{className:m(E.tipseenWrapper,p,t(t({},E.tipseenWrapperWithoutCustomWidth,!F),E.floating,se)),maxWidth:F,arrowClassName:te,style:F?{width:F}:void 0,shouldShowOnMount:!me,position:g,animationType:W,hideDelay:R,showDelay:0,hideTrigger:V,showTrigger:q,showOnDialogEnter:!1,content:Ce,theme:"inverted"===le?"dark":"primary",containerSelector:K,disableDialogSlide:!1,moveBy:J,hideWhenReferenceHidden:X,referenceWrapperClassName:Z,tip:ee&&!se,modifiers:ie,open:me?fe:void 0,forceRenderWithoutChildren:se},z))})),{closeButtonThemes:v,animationTypes:d,hideShowTriggers:p,colors:T,positions:B});export{D as TipseenContext,W as default};
+import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as i,useRef as r,useState as n,useEffect as s,useMemo as a,Fragment as l}from"react";import m from"classnames";import{AnimationType as d,HideShowEvent as p}from"../Dialog/DialogConstants.js";import c from"../../hooks/useMergeRef.js";import u from"../Tooltip/Tooltip.js";import f from"../IconButton/IconButton.js";import h from"./TipseenTitle.js";import{TipseenCloseButtonTheme as v,TipseenColor as T,TIPSEEN_CLOSE_BUTTON_ARIA_LABEL as g}from"./TipseenConstants.js";import{withStaticProps as y}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{ComponentDefaultTestId as C}from"../../tests/constants.js";import{getTestId as j}from"../../tests/testIds.js";import w from"../Text/Text.js";import N from"./Tipseen.module.scss.js";import{TooltipPositions as E}from"../Tooltip/TooltipConstants.js";import x from"../../../packages/icons/dist/react/CloseSmall.js";var W=o.createContext("primary"),k=y(i((function(i,d){var p=i.className,v=i.id,T=i.position,y=void 0===T?"bottom":T,E=i.animationType,k=void 0===E?"expand":E,B=i.hideDelay,D=void 0===B?0:B,S=i.showDelay,A=void 0===S?100:S,b=i.title,P=i.titleClassName,I=i.hideCloseButton,H=i.closeButtonTheme,R=void 0===H?"light":H,L=i.onClose,M=i.closeAriaLabel,O=i.children,_=void 0===O?null:O,z=i.content,q=i.containerSelector,F=i.hideTrigger,G=void 0===F?[]:F,J=i.showTrigger,K=void 0===J?[]:J,Q=i.width,U=i.moveBy,V=i.hideWhenReferenceHidden,X=void 0!==V&&V,Y=i.referenceWrapperClassName,Z=i.tip,$=void 0===Z||Z,ee=i.tooltipArrowClassName,te=i.modifiers,oe=void 0===te?[]:te,ie=i.floating,re=void 0!==ie&&ie,ne=i.color,se=i["data-testid"],ae=null!=ne?ne:"inverted",le=Array.isArray(K)&&Array.isArray(G)&&0===K.length&&A>0,me=r(null),de=c(d,me),pe=n(!le),ce=e(pe,2),ue=ce[0],fe=ce[1],he=M||g;s((function(){var e;return A&&(e=setTimeout((function(){fe(!0)}),A)),function(){clearTimeout(e)}}),[A,fe]);var ve=a((function(){return"inverted"===ae?"onInverted":"onPrimary"}),[ae]),Te=a((function(){return"light"===R?"inverted"===ae?"on-inverted-background":"on-primary-color":R}),[ae,R]),ge=d||v?"div":l,ye=o.createElement("div",null,o.createElement("div",{className:m(N.tipseenHeader)},I?null:o.createElement(f,{hideTooltip:!0,className:m(N.tipseenCloseButton,t({},N.dark,"dark"===R||"fixed-dark"===R)),onClick:L,size:"xs",kind:"tertiary",color:Te,ariaLabel:he,icon:x}),o.createElement(h,{text:b,className:m(N.tipseenTitle,P)})),o.createElement(w,{color:ve,type:"text2",element:"p",className:m(N.tipseenContent)},o.createElement(W.Provider,{value:ae},z)));return o.createElement(ge,{ref:de,id:v,"data-testid":se||j(C.TIPSEEN,v)},o.createElement(u,{className:m(N.tipseenWrapper,p,t(t({},N.tipseenWrapperWithoutCustomWidth,!Q),N.floating,re)),maxWidth:Q,arrowClassName:ee,style:Q?{width:Q}:void 0,shouldShowOnMount:!le,position:y,animationType:k,hideDelay:D,showDelay:0,hideTrigger:G,showTrigger:K,showOnDialogEnter:!1,content:ye,theme:"inverted"===ae?"dark":"primary",containerSelector:q,disableDialogSlide:!1,moveBy:U,hideWhenReferenceHidden:X,referenceWrapperClassName:Y,tip:$&&!re,modifiers:oe,open:le?ue:void 0,forceRenderWithoutChildren:re},_))})),{closeButtonThemes:v,animationTypes:d,hideShowTriggers:p,colors:T,positions:E});export{W as TipseenContext,k as default};
 //# sourceMappingURL=Tipseen.js.map

package/dist/mocked_classnames/src/components/Tipseen/Tipseen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tipseen.js","sources":["../../../../../src/components/Tipseen/Tipseen.tsx"],"sourcesContent":["import { forwardRef, Fragment, type ReactElement, useEffect, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { AnimationType as AnimationTypeEnum, HideShowEvent as HideShowEventEnum } from \"../Dialog/DialogConstants\";\nimport { type DialogAnimationType, type DialogTriggerEvent } from \"../Dialog/Dialog.types\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport Tooltip from \"../../components/Tooltip/Tooltip\";\nimport IconButton from \"../../components/IconButton/IconButton\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport TipseenTitle from \"./TipseenTitle\";\nimport {\n TIPSEEN_CLOSE_BUTTON_ARIA_LABEL,\n TipseenCloseButtonTheme as TipseenCloseButtonThemeEnum,\n TipseenColor as TipseenColorEnum\n} from \"./TipseenConstants\";\nimport { type TipseenCloseButtonTheme, type TipseenColor } from \"./Tipseen.types\";\nimport { type ElementContent, type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { type Modifier } from \"react-popper\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport Text from \"../Text/Text\";\nimport styles from \"./Tipseen.module.scss\";\nimport { ButtonColor } from \"../Button/ButtonConstants\";\nimport React from \"react\";\nimport { type TooltipPositions } from \"../Tooltip/Tooltip.types\";\nimport { TooltipPositions as TooltipPositionsEnum } from \"../Tooltip/TooltipConstants\";\n\nexport interface TipseenProps extends VibeComponentProps {\n /*\n Class name applied to the Tipseen title.\n /\n titleClassName?: string;\n /\n The position of the Tipseen relative to the target element.\n /\n position?: TooltipPositions;\n /\n The animation type used for showing/hiding the Tipseen.\n /\n animationType?: DialogAnimationType;\n /\n The delay in milliseconds before hiding the Tipseen.\n /\n hideDelay?: number;\n /\n The delay in milliseconds before showing the Tipseen.\n /\n showDelay?: number;\n /\n The title text of the Tipseen.\n /\n title?: string;\n /\n If true, hides the close button.\n /\n hideCloseButton?: boolean;\n /\n The child element that triggers the Tipseen.\n /\n children?: ReactElement;\n /\n The CSS selector of the container where the Tipseen should be rendered.\n /\n containerSelector?: string;\n /\n Events that trigger hiding the Tipseen.\n /\n hideTrigger?: DialogTriggerEvent \| Array<DialogTriggerEvent>;\n /\n Events that trigger showing the Tipseen.\n /\n showTrigger?: DialogTriggerEvent \| Array<DialogTriggerEvent>;\n /\n The width of the Tipseen.\n /\n width?: number;\n /\n Offset values for positioning adjustments.\n /\n moveBy?: MoveBy;\n /\n If true, hides the Tipseen when the reference element is hidden.\n /\n hideWhenReferenceHidden?: boolean;\n /\n Class name applied to the reference wrapper element.\n /\n referenceWrapperClassName?: string;\n /\n If false, hides the arrow of the Tipseen.\n /\n tip?: boolean;\n /\n Class name applied to the Tipseen arrow.\n /\n tooltipArrowClassName?: string;\n /\n Custom Popper.js modifiers.\n * https://popper.js.org/docs/v2/modifiers/\n /\n modifiers?: Array<Modifier<unknown>>;\n /\n The aria-label for the close button.\n /\n closeAriaLabel?: string;\n /\n Callback fired when the Tipseen is closed.\n /\n onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n /\n The content displayed inside the Tipseen.\n /\n content: ElementContent;\n /\n The theme of the Tipseen close button.\n /\n closeButtonTheme?: TipseenCloseButtonTheme;\n /\n If true, renders the Tipseen as a floating element without a reference.\n /\n floating?: boolean;\n /\n The color theme of the Tipseen.\n */\n color?: TipseenColor;\n}\n\nexport const TipseenContext = React.createContext<TipseenColor>(\"primary\");\n\nconst Tipseen = forwardRef(\n (\n {\n className,\n id,\n position = \"bottom\",\n animationType = \"expand\",\n hideDelay = 0,\n showDelay = 100,\n title,\n titleClassName,\n hideCloseButton,\n closeButtonTheme = \"light\",\n onClose,\n closeAriaLabel,\n children = null,\n content,\n containerSelector,\n hideTrigger = [],\n showTrigger = [],\n width,\n moveBy,\n hideWhenReferenceHidden = false,\n referenceWrapperClassName,\n tip = true,\n tooltipArrowClassName,\n modifiers = [],\n floating = false,\n color: colorProp,\n \"data-testid\": dataTestId\n }: TipseenProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const color = colorProp ?? \"inverted\";\n\n const defaultDelayOpen =\n Array.isArray(showTrigger) && Array.isArray(hideTrigger) && showTrigger.length === 0 && showDelay > 0;\n\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const [delayedOpen, setDelayOpen] = useState(!defaultDelayOpen);\n const overrideCloseAriaLabel = closeAriaLabel \|\| TIPSEEN_CLOSE_BUTTON_ARIA_LABEL;\n\n useEffect(() => {\n let timeout: NodeJS.Timeout;\n if (showDelay) {\n timeout = setTimeout(() => {\n setDelayOpen(true);\n }, showDelay);\n }\n return () => {\n clearTimeout(timeout);\n };\n }, [showDelay, setDelayOpen]);\n\n const textColor = useMemo(() => {\n return color === \"inverted\" ? \"onInverted\" : \"onPrimary\";\n }, [color]);\n const closeButtonColor = useMemo(() => {\n if (closeButtonTheme === \"light\") {\n return color === \"inverted\" ? ButtonColor.ON_INVERTED_BACKGROUND : ButtonColor.ON_PRIMARY_COLOR;\n } else {\n return closeButtonTheme;\n }\n }, [color, closeButtonTheme]);\n\n const TipseenWrapper = ref \|\| id ? \"div\" : Fragment;\n const tooltipContent = (\n <div>\n <div className={cx(styles.tipseenHeader)}>\n {hideCloseButton ? null : (\n <IconButton\n hideTooltip\n className={cx(styles.tipseenCloseButton, {\n [styles.dark]: closeButtonTheme === \"dark\" \|\| closeButtonTheme === \"fixed-dark\"\n })}\n onClick={onClose}\n size=\"xs\"\n kind=\"tertiary\"\n // @ts-ignore\n color={closeButtonColor}\n ariaLabel={overrideCloseAriaLabel}\n icon={CloseSmall}\n />\n )}\n <TipseenTitle text={title} className={cx(styles.tipseenTitle, titleClassName)} />\n </div>\n <Text color={textColor} type=\"text2\" element=\"p\" className={cx(styles.tipseenContent)}>\n <TipseenContext.Provider value={color}>{content}</TipseenContext.Provider>\n </Text>\n </div>\n );\n\n return (\n <TipseenWrapper ref={mergedRef} id={id} data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TIPSEEN, id)}>\n <Tooltip\n className={cx(styles.tipseenWrapper, className, {\n [styles.tipseenWrapperWithoutCustomWidth]: !width,\n [styles.floating]: floating\n })}\n maxWidth={width}\n arrowClassName={tooltipArrowClassName}\n style={width ? { width } : undefined}\n shouldShowOnMount={!defaultDelayOpen}\n position={position}\n animationType={animationType}\n hideDelay={hideDelay}\n showDelay={0}\n hideTrigger={hideTrigger}\n showTrigger={showTrigger}\n showOnDialogEnter={false}\n content={tooltipContent}\n theme={color === \"inverted\" ? \"dark\" : \"primary\"}\n containerSelector={containerSelector}\n disableDialogSlide={false}\n moveBy={moveBy}\n hideWhenReferenceHidden={hideWhenReferenceHidden}\n referenceWrapperClassName={referenceWrapperClassName}\n tip={tip && !floating}\n modifiers={modifiers}\n open={defaultDelayOpen ? delayedOpen : undefined}\n forceRenderWithoutChildren={floating}\n >\n {children}\n </Tooltip>\n </TipseenWrapper>\n );\n }\n);\n\ninterface TipseenStaticProps {\n closeButtonThemes: typeof TipseenCloseButtonThemeEnum;\n animationTypes: typeof AnimationTypeEnum;\n hideShowTriggers: typeof HideShowEventEnum;\n colors: typeof TipseenColorEnum;\n positions: typeof TooltipPositionsEnum;\n}\n\nexport default withStaticProps<TipseenProps, TipseenStaticProps>(Tipseen, {\n closeButtonThemes: TipseenCloseButtonThemeEnum,\n animationTypes: AnimationTypeEnum,\n hideShowTriggers: HideShowEventEnum,\n colors: TipseenColorEnum,\n positions: TooltipPositionsEnum\n});\n"],"names":["TipseenContext","React","createContext","withStaticProps","forwardRef","_ref","ref","className","id","_ref$position","position","_ref$animationType","animationType","_ref$hideDelay","hideDelay","_ref$showDelay","showDelay","title","titleClassName","hideCloseButton","_ref$closeButtonTheme","closeButtonTheme","onClose","closeAriaLabel","_ref$children","children","content","containerSelector","_ref$hideTrigger","hideTrigger","_ref$showTrigger","showTrigger","width","moveBy","_ref$hideWhenReferenc","hideWhenReferenceHidden","referenceWrapperClassName","_ref$tip","tip","tooltipArrowClassName","_ref$modifiers","modifiers","_ref$floating","floating","colorProp","color","dataTestId","defaultDelayOpen","Array","isArray","length","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","delayedOpen","setDelayOpen","overrideCloseAriaLabel","TIPSEEN_CLOSE_BUTTON_ARIA_LABEL","useEffect","timeout","setTimeout","clearTimeout","textColor","useMemo","closeButtonColor","ButtonColor","ON_INVERTED_BACKGROUND","ON_PRIMARY_COLOR","TipseenWrapper","Fragment","tooltipContent","createElement","cx","styles","tipseenHeader","IconButton","hideTooltip","tipseenCloseButton","_defineProperty","dark","onClick","size","kind","ariaLabel","icon","CloseSmall","TipseenTitle","text","tipseenTitle","Text","type","element","tipseenContent","Provider","value","getTestId","ComponentDefaultTestId","TIPSEEN","Tooltip","tipseenWrapper","tipseenWrapperWithoutCustomWidth","maxWidth","arrowClassName","style","undefined","shouldShowOnMount","showOnDialogEnter","theme","disableDialogSlide","open","forceRenderWithoutChildren","closeButtonThemes","TipseenCloseButtonThemeEnum","animationTypes","AnimationTypeEnum","hideShowTriggers","HideShowEventEnum","colors","TipseenColorEnum","positions","TooltipPositionsEnum"],"mappings":"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"}
1	+ {"version":3,"file":"Tipseen.js","sources":["../../../../../src/components/Tipseen/Tipseen.tsx"],"sourcesContent":["import { forwardRef, Fragment, type ReactElement, useEffect, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { AnimationType as AnimationTypeEnum, HideShowEvent as HideShowEventEnum } from \"../Dialog/DialogConstants\";\nimport { type DialogAnimationType, type DialogTriggerEvent } from \"../Dialog/Dialog.types\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport Tooltip from \"../../components/Tooltip/Tooltip\";\nimport IconButton from \"../../components/IconButton/IconButton\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport TipseenTitle from \"./TipseenTitle\";\nimport {\n TIPSEEN_CLOSE_BUTTON_ARIA_LABEL,\n TipseenCloseButtonTheme as TipseenCloseButtonThemeEnum,\n TipseenColor as TipseenColorEnum\n} from \"./TipseenConstants\";\nimport { type TipseenCloseButtonTheme, type TipseenColor } from \"./Tipseen.types\";\nimport { type ElementContent, type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { type MoveBy } from \"../../types/MoveBy\";\nimport { type Modifier } from \"react-popper\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport Text from \"../Text/Text\";\nimport styles from \"./Tipseen.module.scss\";\nimport React from \"react\";\nimport { type TooltipPositions } from \"../Tooltip/Tooltip.types\";\nimport { TooltipPositions as TooltipPositionsEnum } from \"../Tooltip/TooltipConstants\";\n\nexport interface TipseenProps extends VibeComponentProps {\n /*\n Class name applied to the Tipseen title.\n /\n titleClassName?: string;\n /\n The position of the Tipseen relative to the target element.\n /\n position?: TooltipPositions;\n /\n The animation type used for showing/hiding the Tipseen.\n /\n animationType?: DialogAnimationType;\n /\n The delay in milliseconds before hiding the Tipseen.\n /\n hideDelay?: number;\n /\n The delay in milliseconds before showing the Tipseen.\n /\n showDelay?: number;\n /\n The title text of the Tipseen.\n /\n title?: string;\n /\n If true, hides the close button.\n /\n hideCloseButton?: boolean;\n /\n The child element that triggers the Tipseen.\n /\n children?: ReactElement;\n /\n The CSS selector of the container where the Tipseen should be rendered.\n /\n containerSelector?: string;\n /\n Events that trigger hiding the Tipseen.\n /\n hideTrigger?: DialogTriggerEvent \| Array<DialogTriggerEvent>;\n /\n Events that trigger showing the Tipseen.\n /\n showTrigger?: DialogTriggerEvent \| Array<DialogTriggerEvent>;\n /\n The width of the Tipseen.\n /\n width?: number;\n /\n Offset values for positioning adjustments.\n /\n moveBy?: MoveBy;\n /\n If true, hides the Tipseen when the reference element is hidden.\n /\n hideWhenReferenceHidden?: boolean;\n /\n Class name applied to the reference wrapper element.\n /\n referenceWrapperClassName?: string;\n /\n If false, hides the arrow of the Tipseen.\n /\n tip?: boolean;\n /\n Class name applied to the Tipseen arrow.\n /\n tooltipArrowClassName?: string;\n /\n Custom Popper.js modifiers.\n * https://popper.js.org/docs/v2/modifiers/\n /\n modifiers?: Array<Modifier<unknown>>;\n /\n The aria-label for the close button.\n /\n closeAriaLabel?: string;\n /\n Callback fired when the Tipseen is closed.\n /\n onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n /\n The content displayed inside the Tipseen.\n /\n content: ElementContent;\n /\n The theme of the Tipseen close button.\n /\n closeButtonTheme?: TipseenCloseButtonTheme;\n /\n If true, renders the Tipseen as a floating element without a reference.\n /\n floating?: boolean;\n /\n The color theme of the Tipseen.\n */\n color?: TipseenColor;\n}\n\nexport const TipseenContext = React.createContext<TipseenColor>(\"primary\");\n\nconst Tipseen = forwardRef(\n (\n {\n className,\n id,\n position = \"bottom\",\n animationType = \"expand\",\n hideDelay = 0,\n showDelay = 100,\n title,\n titleClassName,\n hideCloseButton,\n closeButtonTheme = \"light\",\n onClose,\n closeAriaLabel,\n children = null,\n content,\n containerSelector,\n hideTrigger = [],\n showTrigger = [],\n width,\n moveBy,\n hideWhenReferenceHidden = false,\n referenceWrapperClassName,\n tip = true,\n tooltipArrowClassName,\n modifiers = [],\n floating = false,\n color: colorProp,\n \"data-testid\": dataTestId\n }: TipseenProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const color = colorProp ?? \"inverted\";\n\n const defaultDelayOpen =\n Array.isArray(showTrigger) && Array.isArray(hideTrigger) && showTrigger.length === 0 && showDelay > 0;\n\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const [delayedOpen, setDelayOpen] = useState(!defaultDelayOpen);\n const overrideCloseAriaLabel = closeAriaLabel \|\| TIPSEEN_CLOSE_BUTTON_ARIA_LABEL;\n\n useEffect(() => {\n let timeout: NodeJS.Timeout;\n if (showDelay) {\n timeout = setTimeout(() => {\n setDelayOpen(true);\n }, showDelay);\n }\n return () => {\n clearTimeout(timeout);\n };\n }, [showDelay, setDelayOpen]);\n\n const textColor = useMemo(() => {\n return color === \"inverted\" ? \"onInverted\" : \"onPrimary\";\n }, [color]);\n const closeButtonColor = useMemo(() => {\n if (closeButtonTheme === \"light\") {\n return color === \"inverted\" ? \"on-inverted-background\" : \"on-primary-color\";\n } else {\n return closeButtonTheme;\n }\n }, [color, closeButtonTheme]);\n\n const TipseenWrapper = ref \|\| id ? \"div\" : Fragment;\n const tooltipContent = (\n <div>\n <div className={cx(styles.tipseenHeader)}>\n {hideCloseButton ? null : (\n <IconButton\n hideTooltip\n className={cx(styles.tipseenCloseButton, {\n [styles.dark]: closeButtonTheme === \"dark\" \|\| closeButtonTheme === \"fixed-dark\"\n })}\n onClick={onClose}\n size=\"xs\"\n kind=\"tertiary\"\n // @ts-ignore\n color={closeButtonColor}\n ariaLabel={overrideCloseAriaLabel}\n icon={CloseSmall}\n />\n )}\n <TipseenTitle text={title} className={cx(styles.tipseenTitle, titleClassName)} />\n </div>\n <Text color={textColor} type=\"text2\" element=\"p\" className={cx(styles.tipseenContent)}>\n <TipseenContext.Provider value={color}>{content}</TipseenContext.Provider>\n </Text>\n </div>\n );\n\n return (\n <TipseenWrapper ref={mergedRef} id={id} data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TIPSEEN, id)}>\n <Tooltip\n className={cx(styles.tipseenWrapper, className, {\n [styles.tipseenWrapperWithoutCustomWidth]: !width,\n [styles.floating]: floating\n })}\n maxWidth={width}\n arrowClassName={tooltipArrowClassName}\n style={width ? { width } : undefined}\n shouldShowOnMount={!defaultDelayOpen}\n position={position}\n animationType={animationType}\n hideDelay={hideDelay}\n showDelay={0}\n hideTrigger={hideTrigger}\n showTrigger={showTrigger}\n showOnDialogEnter={false}\n content={tooltipContent}\n theme={color === \"inverted\" ? \"dark\" : \"primary\"}\n containerSelector={containerSelector}\n disableDialogSlide={false}\n moveBy={moveBy}\n hideWhenReferenceHidden={hideWhenReferenceHidden}\n referenceWrapperClassName={referenceWrapperClassName}\n tip={tip && !floating}\n modifiers={modifiers}\n open={defaultDelayOpen ? delayedOpen : undefined}\n forceRenderWithoutChildren={floating}\n >\n {children}\n </Tooltip>\n </TipseenWrapper>\n );\n }\n);\n\ninterface TipseenStaticProps {\n closeButtonThemes: typeof TipseenCloseButtonThemeEnum;\n animationTypes: typeof AnimationTypeEnum;\n hideShowTriggers: typeof HideShowEventEnum;\n colors: typeof TipseenColorEnum;\n positions: typeof TooltipPositionsEnum;\n}\n\nexport default withStaticProps<TipseenProps, TipseenStaticProps>(Tipseen, {\n closeButtonThemes: TipseenCloseButtonThemeEnum,\n animationTypes: AnimationTypeEnum,\n hideShowTriggers: HideShowEventEnum,\n colors: TipseenColorEnum,\n positions: TooltipPositionsEnum\n});\n"],"names":["TipseenContext","React","createContext","withStaticProps","forwardRef","_ref","ref","className","id","_ref$position","position","_ref$animationType","animationType","_ref$hideDelay","hideDelay","_ref$showDelay","showDelay","title","titleClassName","hideCloseButton","_ref$closeButtonTheme","closeButtonTheme","onClose","closeAriaLabel","_ref$children","children","content","containerSelector","_ref$hideTrigger","hideTrigger","_ref$showTrigger","showTrigger","width","moveBy","_ref$hideWhenReferenc","hideWhenReferenceHidden","referenceWrapperClassName","_ref$tip","tip","tooltipArrowClassName","_ref$modifiers","modifiers","_ref$floating","floating","colorProp","color","dataTestId","defaultDelayOpen","Array","isArray","length","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","delayedOpen","setDelayOpen","overrideCloseAriaLabel","TIPSEEN_CLOSE_BUTTON_ARIA_LABEL","useEffect","timeout","setTimeout","clearTimeout","textColor","useMemo","closeButtonColor","TipseenWrapper","Fragment","tooltipContent","createElement","cx","styles","tipseenHeader","IconButton","hideTooltip","tipseenCloseButton","_defineProperty","dark","onClick","size","kind","ariaLabel","icon","CloseSmall","TipseenTitle","text","tipseenTitle","Text","type","element","tipseenContent","Provider","value","getTestId","ComponentDefaultTestId","TIPSEEN","Tooltip","tipseenWrapper","tipseenWrapperWithoutCustomWidth","maxWidth","arrowClassName","style","undefined","shouldShowOnMount","showOnDialogEnter","theme","disableDialogSlide","open","forceRenderWithoutChildren","closeButtonThemes","TipseenCloseButtonThemeEnum","animationTypes","AnimationTypeEnum","hideShowTriggers","HideShowEventEnum","colors","TipseenColorEnum","positions","TooltipPositionsEnum"],"mappings":"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"}

package/dist/mocked_classnames/src/components/Tipseen/Tipseen.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tipseenWrapper:"tipseenWrapper",tipseenWrapperWithoutCustomWidth:"tipseenWrapperWithoutCustomWidth",floating:"floating",tipseenHeader:"tipseenHeader",tipseenTitle:"tipseenTitle",tipseenContent:"tipseenContent",tipseenCloseButton:"tipseenCloseButton",dark:"dark"};!function(e){const t="s_id-33da00d2ba25_3_70_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const i=document.createElement("style");i.id=t,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".tipseenWrapper {\n  min-width: 100px;\n  min-height: 40px;\n  --tooltip-padding: 0;\n  --tooltip-border-radius: var(--border-radius-medium);\n  --tooltip-max-width: initial;\n}\n.tipseenWrapper.tipseenWrapperWithoutCustomWidth {\n  --tooltip-max-width: 320px;\n}\n.tipseenWrapper.floating {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  margin-bottom: var(--spacing-medium);\n  margin-right: var(--spacing-medium);\n}\n.tipseenWrapper .tipseenHeader {\n  display: flex;\n  justify-content: flex-start;\n}\n.tipseenWrapper .tipseenTitle {\n  padding: var(--spacing-medium) var(--spacing-xl) 0 var(--spacing-medium);\n}\n.tipseenWrapper .tipseenContent {\n  margin: 0;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.tipseenWrapper .tipseenCloseButton {\n  position: absolute;\n  top: var(--spacing-small);\n  right: var(--spacing-small);\n  z-index: 2;\n}\n.tipseenWrapper .tipseenCloseButton.dark {\n  color: var(--color-asphalt);\n}");export{e as default};
+var e={tipseenWrapper:"tipseenWrapper",tipseenWrapperWithoutCustomWidth:"tipseenWrapperWithoutCustomWidth",floating:"floating",tipseenHeader:"tipseenHeader",tipseenTitle:"tipseenTitle",tipseenContent:"tipseenContent",tipseenCloseButton:"tipseenCloseButton",dark:"dark"};!function(e){const t="s_id-33da00d2ba25_3_70_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const i=document.createElement("style");i.id=t,n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".tipseenWrapper {\n  min-width: 100px;\n  min-height: 40px;\n  --tooltip-padding: 0;\n  --tooltip-border-radius: var(--border-radius-medium);\n  --tooltip-max-width: initial;\n}\n.tipseenWrapper.tipseenWrapperWithoutCustomWidth {\n  --tooltip-max-width: 320px;\n}\n.tipseenWrapper.floating {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  margin-bottom: var(--spacing-medium);\n  margin-right: var(--spacing-medium);\n}\n.tipseenWrapper .tipseenHeader {\n  display: flex;\n  justify-content: flex-start;\n}\n.tipseenWrapper .tipseenTitle {\n  padding: var(--spacing-medium) var(--spacing-xl) 0 var(--spacing-medium);\n}\n.tipseenWrapper .tipseenContent {\n  margin: 0;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.tipseenWrapper .tipseenCloseButton {\n  position: absolute;\n  top: var(--spacing-small);\n  right: var(--spacing-small);\n  z-index: 2;\n}\n.tipseenWrapper .tipseenCloseButton.dark {\n  color: var(--color-asphalt);\n}");export{e as default};
 //# sourceMappingURL=Tipseen.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenBasicContent.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tipseenBasicContent:"tipseenBasicContent"};!function(e){const n="s_id-e688002d63b5_3_70_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tipseenBasicContent {\n  padding: var(--spacing-medium) 20px var(--spacing-large) 20px;\n  display: flex;\n  flex-direction: column;\n}\n.tipseenBasicContent:not(:first-child) {\n  padding-top: 12px;\n}");export{e as default};
+var e={tipseenBasicContent:"tipseenBasicContent"};!function(e){const n="s_id-e688002d63b5_3_70_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tipseenBasicContent {\n  padding: var(--spacing-medium) 20px var(--spacing-large) 20px;\n  display: flex;\n  flex-direction: column;\n}\n.tipseenBasicContent:not(:first-child) {\n  padding-top: 12px;\n}");export{e as default};
 //# sourceMappingURL=TipseenBasicContent.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenContent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import t,{useContext as s,useMemo as e}from"react";import i from"classnames";import o from"../Button/Button.js";import{TipseenColor as n,SUBMIT_BUTTON_TEXT as m,DISMISS_BUTTON_TEXT as r}from"./TipseenConstants.js";import l from"./TipseenBasicContent.js";import a from"./TipseenContent.module.scss.js";import{getTestId as u}from"../../tests/testIds.js";import{ComponentDefaultTestId as c}from"../../tests/constants.js";import{TipseenContext as d}from"./Tipseen.js";import{ButtonColor as p}from"../Button/ButtonConstants.js";var E=function(E){var N=E.id,T=E.title,f=E.titleClassName,C=E.children,I=void 0===C?null:C,B=E.hideDismiss,j=void 0===B||B,S=E.hideSubmit,_=E.submitButtonText,v=void 0===_?m:_,O=E.submitButtonIcon,D=E.onSubmit,R=E.dismissButtonText,b=void 0===R?r:R,k=E.onDismiss,h=s(d),x=e((function(){return h===n.INVERTED?p.ON_INVERTED_BACKGROUND:p.ON_PRIMARY_COLOR}),[h]);return t.createElement(l,{title:T,titleClassName:f,id:N},I?t.createElement("span",null,I):null,t.createElement("div",{className:i(a.buttons)},j?null:t.createElement(o,{kind:"tertiary",color:x,className:a.dismiss,size:"small",onClick:k,"data-testid":u(c.TIPSEEN_CONTENT_DISMISS)},b),S?null:t.createElement(o,{kind:"primary",color:x,size:"small",onClick:D,"data-testid":u(c.TIPSEEN_CONTENT_SUBMIT),leftIcon:O},v)))};export{E as default};
+import t,{useContext as e,useMemo as s}from"react";import i from"classnames";import{TipseenColor as o,SUBMIT_BUTTON_TEXT as n,DISMISS_BUTTON_TEXT as r}from"./TipseenConstants.js";import m from"./TipseenBasicContent.js";import l from"./TipseenContent.module.scss.js";import{getTestId as a}from"../../tests/testIds.js";import{ComponentDefaultTestId as c}from"../../tests/constants.js";import{TipseenContext as d}from"./Tipseen.js";import u from"../../../components/button/dist/Button/Button.js";var p=function(p){var T=p.id,f=p.title,E=p.titleClassName,N=p.children,C=void 0===N?null:N,I=p.hideDismiss,v=void 0===I||I,S=p.hideSubmit,b=p.submitButtonText,j=void 0===b?n:b,B=p.submitButtonIcon,k=p.onSubmit,D=p.dismissButtonText,_=void 0===D?r:D,h=p.onDismiss,x=e(d),y=s((function(){return x===o.INVERTED?"on-inverted-background":"on-primary-color"}),[x]);return t.createElement(m,{title:f,titleClassName:E,id:T},C?t.createElement("span",null,C):null,t.createElement("div",{className:i(l.buttons)},v?null:t.createElement(u,{kind:"tertiary",color:y,className:l.dismiss,size:"small",onClick:h,"data-testid":a(c.TIPSEEN_CONTENT_DISMISS)},_),S?null:t.createElement(u,{kind:"primary",color:y,size:"small",onClick:k,"data-testid":a(c.TIPSEEN_CONTENT_SUBMIT),leftIcon:B},j)))};export{p as default};
 //# sourceMappingURL=TipseenContent.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TipseenContent.js","sources":["../../../../../src/components/Tipseen/TipseenContent.tsx"],"sourcesContent":["import React, { type FC, useContext, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport ~~Button from \"../../components/Button/Button\";\nimport~~ { DISMISS_BUTTON_TEXT, SUBMIT_BUTTON_TEXT, TipseenColor } from \"./TipseenConstants\";\nimport TipseenBasicContent from \"./TipseenBasicContent\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type ElementContent } from \"../../types/ElementContent\";\nimport styles from \"./TipseenContent.module.scss\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { TipseenContext } from \"./Tipseen\";\nimport { ~~ButtonColor~~ } from \"~~../Button~~/~~ButtonConstants~~\";\nimport { type SubIcon } from \"~~../../types~~\";\n\nexport interface TipseenContentProps extends VibeComponentProps {\n /*\n The title text displayed in the Tipseen content.\n /\n title?: string;\n /\n Class name applied to the Tipseen title.\n /\n titleClassName?: string;\n /\n If true, hides the dismiss button.\n /\n hideDismiss?: boolean;\n /\n The content inside the Tipseen.\n /\n children?: ElementContent;\n /\n If true, hides the submit button.\n /\n hideSubmit?: boolean;\n /\n The text displayed on the submit button.\n /\n submitButtonText?: string;\n /\n Icon to display in the submit button\n /\n submitButtonIcon?: SubIcon;\n /\n Callback fired when the submit button is clicked.\n /\n onSubmit?: (event: React.MouseEvent) => void;\n /\n The text displayed on the dismiss button.\n /\n dismissButtonText?: string;\n /\n Callback fired when the dismiss button is clicked.\n */\n onDismiss?: (event: React.MouseEvent) => void;\n}\n\nconst TipseenContent: FC<TipseenContentProps> = ({\n id,\n title,\n titleClassName,\n children = null,\n hideDismiss = true,\n hideSubmit,\n submitButtonText = SUBMIT_BUTTON_TEXT,\n submitButtonIcon,\n onSubmit,\n dismissButtonText = DISMISS_BUTTON_TEXT,\n onDismiss\n}) => {\n const color = useContext(TipseenContext);\n const buttonColor = useMemo(() => {\n return color === TipseenColor.INVERTED ? ~~ButtonColor.ON_INVERTED_BACKGROUND~~ : ~~ButtonColor.ON_PRIMARY_COLOR~~;\n }, [color]);\n\n return (\n <TipseenBasicContent title={title} titleClassName={titleClassName} id={id}>\n {children ? <span>{children}</span> : null}\n <div className={cx(styles.buttons)}>\n {hideDismiss ? null : (\n <Button\n kind=\"tertiary\"\n color={buttonColor}\n className={styles.dismiss}\n size=\"small\"\n onClick={onDismiss}\n data-testid={getTestId(ComponentDefaultTestId.TIPSEEN_CONTENT_DISMISS)}\n >\n {dismissButtonText}\n </Button>\n )}\n {hideSubmit ? null : (\n <Button\n kind=\"primary\"\n color={buttonColor}\n size=\"small\"\n onClick={onSubmit}\n data-testid={getTestId(ComponentDefaultTestId.TIPSEEN_CONTENT_SUBMIT)}\n leftIcon={submitButtonIcon}\n >\n {submitButtonText}\n </Button>\n )}\n </div>\n </TipseenBasicContent>\n );\n};\n\nexport default TipseenContent;\n"],"names":["TipseenContent","_ref","id","title","titleClassName","_ref$children","children","_ref$hideDismiss","hideDismiss","hideSubmit","_ref$submitButtonText","submitButtonText","SUBMIT_BUTTON_TEXT","submitButtonIcon","onSubmit","_ref$dismissButtonTex","dismissButtonText","DISMISS_BUTTON_TEXT","onDismiss","color","useContext","TipseenContext","buttonColor","useMemo","TipseenColor","INVERTED","~~ButtonColor","ON_INVERTED_BACKGROUND","ON_PRIMARY_COLOR","~~React","createElement","TipseenBasicContent","className","cx","styles","buttons","Button","kind","dismiss","size","onClick","getTestId","ComponentDefaultTestId","TIPSEEN_CONTENT_DISMISS","TIPSEEN_CONTENT_SUBMIT","leftIcon"],"mappings":"~~2gBAyDA~~,IAAMA,EAA0C,SAA5BC,GAYf,IAXHC,EAAED,EAAFC,GACAC,EAAKF,EAALE,MACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,SAAAA,OAAW,IAAHD,EAAG,KAAIA,EAAAE,EAAAN,EACfO,YAAAA,OAAc,IAAHD,GAAOA,EAClBE,EAAUR,EAAVQ,WAAUC,EAAAT,EACVU,iBAAAA,OAAmBC,IAAHF,EAAGE,EAAkBF,EACrCG,EAAgBZ,EAAhBY,iBACAC,EAAQb,EAARa,SAAQC,EAAAd,EACRe,kBAAAA,OAAoBC,IAAHF,EAAGE,EAAmBF,EACvCG,EAASjB,EAATiB,UAEMC,EAAQC,EAAWC,GACnBC,EAAcC,GAAQ,WAC1B,OAAOJ,IAAUK,EAAaC,~~SAAWC~~,~~EAAYC~~,~~uBAAyBD~~,~~EAAYE,gBAC5F,~~GAAG,~~CAACT~~,IAEJ,~~OACEU~~,EAAAC,cAACC,EAAmB,~~CAAC5B~~,MAAOA,EAAOC,eAAgBA,EAAgBF,GAAIA,GACpEI,~~EAAWuB~~,EAAAC,cAAA,OAAA,~~KAAOxB~~,GAAmB,~~KACtCuB~~,EAAAC,cAAA,MAAA,CAAKE,UAAWC,EAAGC,EAAOC,~~UACvB3B~~,EAAc,~~KACbqB~~,EAAAC,cAACM,EACC,CAAAC,KAAK,~~WACLlB~~,MAAOG,~~EACPU~~,UAAWE,EAAOI,QAClBC,KAAK,QACLC,~~QAAStB~~,~~gBACIuB~~,EAAUC,EAAuBC,~~0BAE7C3B~~,GAGJP,EAAa,~~KACZoB~~,EAACC,cAAAM,GACCC,KAAK,~~UACLlB~~,MAAOG,~~EACPiB~~,KAAK,QACLC,~~QAAS1B~~,EACI,~~cAAA2B~~,EAAUC,EAAuBE,wBAC9CC,~~SAAUhC~~,GAETF,IAMb"}
1	+ {"version":3,"file":"TipseenContent.js","sources":["../../../../../src/components/Tipseen/TipseenContent.tsx"],"sourcesContent":["import React, { type FC, useContext, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport { DISMISS_BUTTON_TEXT, SUBMIT_BUTTON_TEXT, TipseenColor } from \"./TipseenConstants\";\nimport TipseenBasicContent from \"./TipseenBasicContent\";\nimport { type VibeComponentProps } from \"../../types\";\nimport { type ElementContent } from \"../../types/ElementContent\";\nimport styles from \"./TipseenContent.module.scss\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport { TipseenContext } from \"./Tipseen\";\nimport { Button } from \"@vibe/button\";\nimport { type SubIcon } from \"@vibe/icon\";\n\nexport interface TipseenContentProps extends VibeComponentProps {\n /*\n The title text displayed in the Tipseen content.\n /\n title?: string;\n /\n Class name applied to the Tipseen title.\n /\n titleClassName?: string;\n /\n If true, hides the dismiss button.\n /\n hideDismiss?: boolean;\n /\n The content inside the Tipseen.\n /\n children?: ElementContent;\n /\n If true, hides the submit button.\n /\n hideSubmit?: boolean;\n /\n The text displayed on the submit button.\n /\n submitButtonText?: string;\n /\n Icon to display in the submit button\n /\n submitButtonIcon?: SubIcon;\n /\n Callback fired when the submit button is clicked.\n /\n onSubmit?: (event: React.MouseEvent) => void;\n /\n The text displayed on the dismiss button.\n /\n dismissButtonText?: string;\n /\n Callback fired when the dismiss button is clicked.\n */\n onDismiss?: (event: React.MouseEvent) => void;\n}\n\nconst TipseenContent: FC<TipseenContentProps> = ({\n id,\n title,\n titleClassName,\n children = null,\n hideDismiss = true,\n hideSubmit,\n submitButtonText = SUBMIT_BUTTON_TEXT,\n submitButtonIcon,\n onSubmit,\n dismissButtonText = DISMISS_BUTTON_TEXT,\n onDismiss\n}) => {\n const color = useContext(TipseenContext);\n const buttonColor = useMemo(() => {\n return color === TipseenColor.INVERTED ? \"on-inverted-background\" : \"on-primary-color\";\n }, [color]);\n\n return (\n <TipseenBasicContent title={title} titleClassName={titleClassName} id={id}>\n {children ? <span>{children}</span> : null}\n <div className={cx(styles.buttons)}>\n {hideDismiss ? null : (\n <Button\n kind=\"tertiary\"\n color={buttonColor}\n className={styles.dismiss}\n size=\"small\"\n onClick={onDismiss}\n data-testid={getTestId(ComponentDefaultTestId.TIPSEEN_CONTENT_DISMISS)}\n >\n {dismissButtonText}\n </Button>\n )}\n {hideSubmit ? null : (\n <Button\n kind=\"primary\"\n color={buttonColor}\n size=\"small\"\n onClick={onSubmit}\n data-testid={getTestId(ComponentDefaultTestId.TIPSEEN_CONTENT_SUBMIT)}\n leftIcon={submitButtonIcon}\n >\n {submitButtonText}\n </Button>\n )}\n </div>\n </TipseenBasicContent>\n );\n};\n\nexport default TipseenContent;\n"],"names":["TipseenContent","_ref","id","title","titleClassName","_ref$children","children","_ref$hideDismiss","hideDismiss","hideSubmit","_ref$submitButtonText","submitButtonText","SUBMIT_BUTTON_TEXT","submitButtonIcon","onSubmit","_ref$dismissButtonTex","dismissButtonText","DISMISS_BUTTON_TEXT","onDismiss","color","useContext","TipseenContext","buttonColor","useMemo","TipseenColor","INVERTED","React","createElement","TipseenBasicContent","className","cx","styles","buttons","Button","kind","dismiss","size","onClick","getTestId","ComponentDefaultTestId","TIPSEEN_CONTENT_DISMISS","TIPSEEN_CONTENT_SUBMIT","leftIcon"],"mappings":"6eAwDA,IAAMA,EAA0C,SAA5BC,GAYf,IAXHC,EAAED,EAAFC,GACAC,EAAKF,EAALE,MACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,SAAAA,OAAW,IAAHD,EAAG,KAAIA,EAAAE,EAAAN,EACfO,YAAAA,OAAc,IAAHD,GAAOA,EAClBE,EAAUR,EAAVQ,WAAUC,EAAAT,EACVU,iBAAAA,OAAmBC,IAAHF,EAAGE,EAAkBF,EACrCG,EAAgBZ,EAAhBY,iBACAC,EAAQb,EAARa,SAAQC,EAAAd,EACRe,kBAAAA,OAAoBC,IAAHF,EAAGE,EAAmBF,EACvCG,EAASjB,EAATiB,UAEMC,EAAQC,EAAWC,GACnBC,EAAcC,GAAQ,WAC1B,OAAOJ,IAAUK,EAAaC,SAAW,yBAA2B,kBACtE,GAAG,CAACN,IAEJ,OACEO,EAAAC,cAACC,EAAmB,CAACzB,MAAOA,EAAOC,eAAgBA,EAAgBF,GAAIA,GACpEI,EAAWoB,EAAAC,cAAA,OAAA,KAAOrB,GAAmB,KACtCoB,EAAAC,cAAA,MAAA,CAAKE,UAAWC,EAAGC,EAAOC,UACvBxB,EAAc,KACbkB,EAAAC,cAACM,EACC,CAAAC,KAAK,WACLf,MAAOG,EACPO,UAAWE,EAAOI,QAClBC,KAAK,QACLC,QAASnB,gBACIoB,EAAUC,EAAuBC,0BAE7CxB,GAGJP,EAAa,KACZiB,EAACC,cAAAM,GACCC,KAAK,UACLf,MAAOG,EACPc,KAAK,QACLC,QAASvB,EACI,cAAAwB,EAAUC,EAAuBE,wBAC9CC,SAAU7B,GAETF,IAMb"}

package/dist/mocked_classnames/src/components/Tipseen/TipseenContent.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={buttons:"buttons",dismiss:"dismiss"};!function(e){const t="s_id-91df242cd10d_3_70_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const s=document.createElement("style");s.id=t,n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".buttons {\n  margin-top: 20px;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.dismiss {\n  margin-right: var(--spacing-small);\n}");export{e as default};
+var e={buttons:"buttons",dismiss:"dismiss"};!function(e){const t="s_id-91df242cd10d_3_70_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const s=document.createElement("style");s.id=t,n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".buttons {\n  margin-top: 20px;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.dismiss {\n  margin-right: var(--spacing-small);\n}");export{e as default};
 //# sourceMappingURL=TipseenContent.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenImage.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tipseenImage:"tipseenImage"};!function(e){const t="s_id-5a749fe7aaee_3_70_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".tipseenImage {\n  object-fit: cover;\n  width: 100%;\n}");export{e as default};
+var e={tipseenImage:"tipseenImage"};!function(e){const t="s_id-5a749fe7aaee_3_70_2";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+t))return;const d=document.createElement("style");d.id=t,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".tipseenImage {\n  object-fit: cover;\n  width: 100%;\n}");export{e as default};
 //# sourceMappingURL=TipseenImage.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenMedia/TipseenMedia.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tipseenMedia:"tipseenMedia",colorInverted:"colorInverted"};!function(e){const n="s_id-71e151b2b729_3_70_1";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,d.firstChild?d.insertBefore(r,d.firstChild):d.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tipseenMedia {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  border: 2px solid var(--primary-color);\n  border-radius: var(--border-radius-medium);\n  position: relative;\n  z-index: 1;\n}\n\n.colorInverted {\n  border-color: var(--inverted-color-background);\n}");export{e as default};
+var e={tipseenMedia:"tipseenMedia",colorInverted:"colorInverted"};!function(e){const n="s_id-71e151b2b729_3_70_2";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,d.firstChild?d.insertBefore(r,d.firstChild):d.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".tipseenMedia {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  border: 2px solid var(--primary-color);\n  border-radius: var(--border-radius-medium);\n  position: relative;\n  z-index: 1;\n}\n\n.colorInverted {\n  border-color: var(--inverted-color-background);\n}");export{e as default};
 //# sourceMappingURL=TipseenMedia.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenTitle.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={title:"title"};!function(e){const t="s_id-52c2fd8cbf53_3_70_1";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".title {\n  padding-right: var(--spacing-medium);\n  padding-bottom: var(--spacing-xs);\n}");export{e as default};
+var e={title:"title"};!function(e){const t="s_id-52c2fd8cbf53_3_70_2";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".title {\n  padding-right: var(--spacing-medium);\n  padding-bottom: var(--spacing-xs);\n}");export{e as default};
 //# sourceMappingURL=TipseenTitle.module.scss.js.map

package/dist/mocked_classnames/src/components/Tipseen/TipseenWizard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TipseenWizard.js","sources":["../../../../../src/components/Tipseen/TipseenWizard.tsx"],"sourcesContent":["import React, { type FC, useContext, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport Steps, { type StepsProps } from \"../Steps/Steps\";\nimport TipseenBasicContent from \"./TipseenBasicContent\";\nimport styles from \"./TipseenWizard.module.scss\";\nimport { TipseenContext } from \"./Tipseen\";\nimport { TipseenColor } from \"./TipseenConstants\";\nimport { type ButtonSize, type ButtonType } from \"~~../Button~~\";\n\nconst FINISH_TEXT = \"Got it\";\n\nexport interface TipseenWizardProps extends StepsProps {\n /*\n The title text displayed in the Tipseen Wizard.\n /\n title?: string;\n /\n Class name applied to the Tipseen title.\n /\n titleClassName?: string;\n /\n Callback fired when the wizard is completed.\n */\n onFinish?: (e: React.MouseEvent \| React.KeyboardEvent) => void;\n}\n\nconst TipseenWizard: FC<TipseenWizardProps> = ({ id, title, onFinish, titleClassName, className, ...stepsProps }) => {\n const overrideStepsProps = stepsProps as StepsProps;\n const color = useContext(TipseenContext);\n const buttonColor = useMemo(() => {\n return color === TipseenColor.INVERTED ? \"on-inverted-background\" : \"on-primary-color\";\n }, [color]);\n\n const nextButtonProps = useMemo(\n () => ({\n kind: \"primary\" as ButtonType,\n size: \"small\" as ButtonSize\n }),\n []\n );\n const backButtonProps = useMemo(\n () => ({\n size: \"small\" as ButtonSize\n }),\n []\n );\n const finishButtonProps = useMemo(\n () => ({\n kind: \"primary\" as ButtonType,\n size: \"small\" as ButtonSize,\n children: FINISH_TEXT\n }),\n []\n );\n return (\n <TipseenBasicContent\n title={title}\n className={cx(styles.tipseenWizard, className)}\n titleClassName={titleClassName}\n id={id \|\| \"wizard\"}\n >\n <Steps\n className={cx(styles.tipseenWizardWizard)}\n color={buttonColor}\n isContentOnTop\n areButtonsIconsHidden\n backButtonProps={backButtonProps}\n nextButtonProps={nextButtonProps}\n finishButtonProps={finishButtonProps}\n onFinish={onFinish}\n {...overrideStepsProps}\n />\n </TipseenBasicContent>\n );\n};\nexport default TipseenWizard;\n"],"names":["TipseenWizard","_a","id","title","onFinish","titleClassName","className","overrideStepsProps","__rest","color","useContext","TipseenContext","buttonColor","useMemo","TipseenColor","INVERTED","nextButtonProps","kind","size","backButtonProps","finishButtonProps","children","React","createElement","TipseenBasicContent","cx","styles","tipseenWizard","Steps","Object","assign","tipseenWizardWizard","isContentOnTop","areButtonsIconsHidden"],"mappings":"4VASA,IAiBMA,EAAwC,SAACC,GAAA,IAAEC,EAA+DD,EAA/DC,GAAIC,EAA2DF,EAA3DE,MAAOC,EAAoDH,EAApDG,SAAUC,EAA0CJ,EAA1CI,eAAgBC,EAA0BL,EAA1BK,UAC9EC,EADsGC,EAAAP,EAA/D,wDAEvCQ,EAAQC,EAAWC,GACnBC,EAAcC,GAAQ,WAC1B,OAAOJ,IAAUK,EAAaC,SAAW,yBAA2B,kBACtE,GAAG,CAACN,IAEEO,EAAkBH,GACtB,WAAA,MAAO,CACLI,KAAM,UACNC,KAAM,QACN,GACF,IAEIC,EAAkBN,GACtB,WAAA,MAAO,CACLK,KAAM,QACN,GACF,IAEIE,EAAoBP,GACxB,WAAA,MAAO,CACLI,KAAM,UACNC,KAAM,QACNG,SAzCc,SA0Cd,GACF,IAEF,OACEC,EAACC,cAAAC,EACC,CAAArB,MAAOA,EACPG,UAAWmB,EAAGC,EAAOC,cAAerB,GACpCD,eAAgBA,EAChBH,GAAIA,GAAM,UAEVoB,EAAAC,cAACK,EACCC,OAAAC,OAAA,CAAAxB,UAAWmB,EAAGC,EAAOK,qBACrBtB,MAAOG,EACPoB,kBACAC,uBAAqB,EACrBd,gBAAiBA,EACjBH,gBAAiBA,EACjBI,kBAAmBA,EACnBhB,SAAUA,GACNG,IAIZ"}
1	+ {"version":3,"file":"TipseenWizard.js","sources":["../../../../../src/components/Tipseen/TipseenWizard.tsx"],"sourcesContent":["import React, { type FC, useContext, useMemo } from \"react\";\nimport cx from \"classnames\";\nimport Steps, { type StepsProps } from \"../Steps/Steps\";\nimport TipseenBasicContent from \"./TipseenBasicContent\";\nimport styles from \"./TipseenWizard.module.scss\";\nimport { TipseenContext } from \"./Tipseen\";\nimport { TipseenColor } from \"./TipseenConstants\";\nimport { type ButtonSize, type ButtonType } from \"@vibe/button\";\n\nconst FINISH_TEXT = \"Got it\";\n\nexport interface TipseenWizardProps extends StepsProps {\n /*\n The title text displayed in the Tipseen Wizard.\n /\n title?: string;\n /\n Class name applied to the Tipseen title.\n /\n titleClassName?: string;\n /\n Callback fired when the wizard is completed.\n */\n onFinish?: (e: React.MouseEvent \| React.KeyboardEvent) => void;\n}\n\nconst TipseenWizard: FC<TipseenWizardProps> = ({ id, title, onFinish, titleClassName, className, ...stepsProps }) => {\n const overrideStepsProps = stepsProps as StepsProps;\n const color = useContext(TipseenContext);\n const buttonColor = useMemo(() => {\n return color === TipseenColor.INVERTED ? \"on-inverted-background\" : \"on-primary-color\";\n }, [color]);\n\n const nextButtonProps = useMemo(\n () => ({\n kind: \"primary\" as ButtonType,\n size: \"small\" as ButtonSize\n }),\n []\n );\n const backButtonProps = useMemo(\n () => ({\n size: \"small\" as ButtonSize\n }),\n []\n );\n const finishButtonProps = useMemo(\n () => ({\n kind: \"primary\" as ButtonType,\n size: \"small\" as ButtonSize,\n children: FINISH_TEXT\n }),\n []\n );\n return (\n <TipseenBasicContent\n title={title}\n className={cx(styles.tipseenWizard, className)}\n titleClassName={titleClassName}\n id={id \|\| \"wizard\"}\n >\n <Steps\n className={cx(styles.tipseenWizardWizard)}\n color={buttonColor}\n isContentOnTop\n areButtonsIconsHidden\n backButtonProps={backButtonProps}\n nextButtonProps={nextButtonProps}\n finishButtonProps={finishButtonProps}\n onFinish={onFinish}\n {...overrideStepsProps}\n />\n </TipseenBasicContent>\n );\n};\nexport default TipseenWizard;\n"],"names":["TipseenWizard","_a","id","title","onFinish","titleClassName","className","overrideStepsProps","__rest","color","useContext","TipseenContext","buttonColor","useMemo","TipseenColor","INVERTED","nextButtonProps","kind","size","backButtonProps","finishButtonProps","children","React","createElement","TipseenBasicContent","cx","styles","tipseenWizard","Steps","Object","assign","tipseenWizardWizard","isContentOnTop","areButtonsIconsHidden"],"mappings":"4VASA,IAiBMA,EAAwC,SAACC,GAAA,IAAEC,EAA+DD,EAA/DC,GAAIC,EAA2DF,EAA3DE,MAAOC,EAAoDH,EAApDG,SAAUC,EAA0CJ,EAA1CI,eAAgBC,EAA0BL,EAA1BK,UAC9EC,EADsGC,EAAAP,EAA/D,wDAEvCQ,EAAQC,EAAWC,GACnBC,EAAcC,GAAQ,WAC1B,OAAOJ,IAAUK,EAAaC,SAAW,yBAA2B,kBACtE,GAAG,CAACN,IAEEO,EAAkBH,GACtB,WAAA,MAAO,CACLI,KAAM,UACNC,KAAM,QACN,GACF,IAEIC,EAAkBN,GACtB,WAAA,MAAO,CACLK,KAAM,QACN,GACF,IAEIE,EAAoBP,GACxB,WAAA,MAAO,CACLI,KAAM,UACNC,KAAM,QACNG,SAzCc,SA0Cd,GACF,IAEF,OACEC,EAACC,cAAAC,EACC,CAAArB,MAAOA,EACPG,UAAWmB,EAAGC,EAAOC,cAAerB,GACpCD,eAAgBA,EAChBH,GAAIA,GAAM,UAEVoB,EAAAC,cAACK,EACCC,OAAAC,OAAA,CAAAxB,UAAWmB,EAAGC,EAAOK,qBACrBtB,MAAOG,EACPoB,kBACAC,uBAAqB,EACrBd,gBAAiBA,EACjBH,gBAAiBA,EACjBI,kBAAmBA,EACnBhB,SAAUA,GACNG,IAIZ"}

package/dist/mocked_classnames/src/components/Tipseen/TipseenWizard.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={tipseenWizard:"tipseenWizard",tipseenWizardWizard:"tipseenWizardWizard"};!function(e){const i="s_id-98eba0c83d1f_3_70_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+i))return;const d=document.createElement("style");d.id=i,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".tipseenWizard {\n  display: flex;\n  flex-direction: column;\n}\n.tipseenWizardWizard {\n  width: 100%;\n}");export{e as default};
+var e={tipseenWizard:"tipseenWizard",tipseenWizardWizard:"tipseenWizardWizard"};!function(e){const i="s_id-98eba0c83d1f_3_70_2";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+i))return;const d=document.createElement("style");d.id=i,t.firstChild?t.insertBefore(d,t.firstChild):t.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[i]=e)}(".tipseenWizard {\n  display: flex;\n  flex-direction: column;\n}\n.tipseenWizardWizard {\n  width: 100%;\n}");export{e as default};
 //# sourceMappingURL=TipseenWizard.module.scss.js.map

package/dist/mocked_classnames/src/components/Toast/Toast.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as e}from"../../../_virtual/_tslib.js";import{camelCase as o}from"es-toolkit";import{getTestId as i,ComponentDefaultTestId as n}from"../../tests/testIds.js";import r from"classnames";import s,{useRef as a,useMemo as l,useCallback as c,useEffect as m}from"react";import{CSSTransition as u}from"react-transition-group";import p from"../Text/Text.js";import d from"../Loader/Loader.js";import f from"../Flex/Flex.js";import v from"./ToastLink/ToastLink.js";import T from"./ToastButton/ToastButton.js";import{ToastType as j,ToastActionType as y}from"./ToastConstants.js";import{getIcon as h}from"./ToastHelpers.js";import{NOOP as g}from"../../utils/function-utils.js";import{getStyle as x}from"../../helpers/typesciptCssModulesHelper.js";import{withStaticPropsWithoutForwardRef as E}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import N from"./Toast.module.scss.js";import k from"../IconButton/IconButton.js";import C from"../../hooks/usePrevious/index.js";import b from"../../../icons/dist/react/CloseSmall.js";var B=E((function(j){var y=j.open,E=void 0!==y&&y,B=j.loading,L=void 0!==B&&B,O=j.autoHideDuration,A=void 0===O?null:O,w=j.type,S=void 0===w?"normal":w,_=j.icon,H=j.hideIcon,I=void 0!==H&&H,P=j.action,z=j.actions,F=j.children,D=j.closeable,M=void 0===D||D,R=j.onClose,U=void 0===R?g:R,q=j.className,G=j.id,J=j.closeButtonAriaLabel,K=void 0===J?"Close":J,Q=j["data-testid"],V=a(null),W=a(null),X=C(null==z?void 0:z.length),Y=l((function(){return z?z.filter((function(t){return"link"===t.type})).map((function(t){var o=e(t,["type"]);return s.createElement(v,Object.assign({key:o.href,className:N.actionLink},o))})):null}),[z]),Z=l((function(){return void 0!==X&&(null==z?void 0:z.length)!==X}),[z,X]),$=l((function(){return z?z.filter((function(t){return"button"===t.type})).map((function(o,i){var n=o.content,a=e(o,["type","content"]);return s.createElement(T,Object.assign({key:"alert-button-".concat(i),className:r(N.actionButton,t({},N.withTransition,Z))},a),n)})):null}),[z,Z]),tt=l((function(){return r(N.toast,x(N,o("type-"+S)),q)}),[S,q]),et=c((function(){U&&U()}),[U]),ot=a(),it=c((function(t){U&&null!=t&&(clearTimeout(ot.current),ot.current=setTimeout((function(){et()}),t))}),[et,U]);m((function(){return E&&A>0&&it(A),function(){clearTimeout(ot.current)}}),[E,A,it]);var nt=!I&&h(S,_),rt=c((function(t){var e=t.style.width;t.style.width="auto";var o=getComputedStyle(t).width;t.style.width=e,t.style.width=o}),[]);return m((function(){V.current&&rt(V.current)}),[F,rt]),s.createElement(u,{in:E,nodeRef:W,classNames:{enterActive:N.enterActive,exitActive:N.exitActive},timeout:400,unmountOnExit:!0},s.createElement(p,{ref:W,id:G,"data-testid":Q||i(n.TOAST,G),type:"text2",element:"div",color:"fixedLight",className:tt,role:"alert","aria-live":"polite"},nt&&s.createElement("div",{className:r(N.icon)},nt),s.createElement(f,{align:"center",gap:"large",className:N.content},s.createElement(f,{gap:"medium","data-testid":i(n.TOAST_CONTENT),className:N.textContent},s.createElement("span",null,F),Y),($||P)&&($||P),L&&s.createElement(d,{size:"xs"})),M&&s.createElement(k,{className:r(N.closeButton),onClick:et,size:"small",kind:"tertiary",color:"fixed-light",ariaLabel:K,"data-testid":i(n.TOAST_CLOSE_BUTTON),icon:b,hideTooltip:!0})))}),{types:j,actionTypes:y});export{B as default};
+import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as e}from"../../../_virtual/_tslib.js";import{camelCase as o}from"es-toolkit";import{getTestId as n,ComponentDefaultTestId as i}from"../../tests/testIds.js";import r from"classnames";import s,{useRef as a,useMemo as l,useCallback as c,useEffect as m}from"react";import{CSSTransition as u}from"react-transition-group";import p from"../Text/Text.js";import d from"../Flex/Flex.js";import f from"./ToastLink/ToastLink.js";import v from"./ToastButton/ToastButton.js";import{ToastType as T,ToastActionType as j}from"./ToastConstants.js";import{getIcon as y}from"./ToastHelpers.js";import{NOOP as h}from"../../utils/function-utils.js";import{getStyle as g}from"../../helpers/typesciptCssModulesHelper.js";import{withStaticPropsWithoutForwardRef as x}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import E from"./Toast.module.scss.js";import N from"../IconButton/IconButton.js";import k from"../../hooks/usePrevious/index.js";import C from"../../../components/loader/dist/Loader/Loader.js";import b from"../../../packages/icons/dist/react/CloseSmall.js";var B=x((function(T){var j=T.open,x=void 0!==j&&j,B=T.loading,L=void 0!==B&&B,O=T.autoHideDuration,A=void 0===O?null:O,w=T.type,S=void 0===w?"normal":w,_=T.icon,H=T.hideIcon,I=void 0!==H&&H,P=T.action,z=T.actions,F=T.children,D=T.closeable,M=void 0===D||D,R=T.onClose,U=void 0===R?h:R,q=T.className,G=T.id,J=T.closeButtonAriaLabel,K=void 0===J?"Close":J,Q=T["data-testid"],V=a(null),W=a(null),X=k(null==z?void 0:z.length),Y=l((function(){return z?z.filter((function(t){return"link"===t.type})).map((function(t){var o=e(t,["type"]);return s.createElement(f,Object.assign({key:o.href,className:E.actionLink},o))})):null}),[z]),Z=l((function(){return void 0!==X&&(null==z?void 0:z.length)!==X}),[z,X]),$=l((function(){return z?z.filter((function(t){return"button"===t.type})).map((function(o,n){var i=o.content,a=e(o,["type","content"]);return s.createElement(v,Object.assign({key:"alert-button-".concat(n),className:r(E.actionButton,t({},E.withTransition,Z))},a),i)})):null}),[z,Z]),tt=l((function(){return r(E.toast,g(E,o("type-"+S)),q)}),[S,q]),et=c((function(){U&&U()}),[U]),ot=a(),nt=c((function(t){U&&null!=t&&(clearTimeout(ot.current),ot.current=setTimeout((function(){et()}),t))}),[et,U]);m((function(){return x&&A>0&&nt(A),function(){clearTimeout(ot.current)}}),[x,A,nt]);var it=!I&&y(S,_),rt=c((function(t){var e=t.style.width;t.style.width="auto";var o=getComputedStyle(t).width;t.style.width=e,t.style.width=o}),[]);return m((function(){V.current&&rt(V.current)}),[F,rt]),s.createElement(u,{in:x,nodeRef:W,classNames:{enterActive:E.enterActive,exitActive:E.exitActive},timeout:400,unmountOnExit:!0},s.createElement(p,{ref:W,id:G,"data-testid":Q||n(i.TOAST,G),type:"text2",element:"div",color:"fixedLight",className:tt,role:"alert","aria-live":"polite"},it&&s.createElement("div",{className:r(E.icon)},it),s.createElement(d,{align:"center",gap:"large",className:E.content},s.createElement(d,{gap:"medium","data-testid":n(i.TOAST_CONTENT),className:E.textContent},s.createElement("span",null,F),Y),($||P)&&($||P),L&&s.createElement(C,{size:"xs"})),M&&s.createElement(N,{className:r(E.closeButton),onClick:et,size:"small",kind:"tertiary",color:"fixed-light",ariaLabel:K,"data-testid":n(i.TOAST_CLOSE_BUTTON),icon:b,hideTooltip:!0})))}),{types:T,actionTypes:j});export{B as default};
 //# sourceMappingURL=Toast.js.map

package/dist/mocked_classnames/src/components/Toast/Toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type ReactElement, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type IconSubComponentProps } from \"../Icon/Icon\";\nimport Text from \"../Text/Text\";\nimport Loader from \"../Loader/Loader\";\nimport Flex from \"../Flex/Flex\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport ToastLink from \"./ToastLink/ToastLink\";\nimport ToastButton from \"./ToastButton/ToastButton\";\nimport { ToastActionType as ToastActionTypeEnum, ToastType as ToastTypeEnum } from \"./ToastConstants\";\nimport { type ToastType, type ToastAction } from \"./Toast.types\";\nimport { getIcon } from \"./ToastHelpers\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { type VibeComponentProps, withStaticPropsWithoutForwardRef } from \"../../types\";\nimport styles from \"./Toast.module.scss\";\nimport IconButton from \"../IconButton/IconButton\";\nimport usePrevious from \"../../hooks/usePrevious\";\n\nexport interface ToastProps extends VibeComponentProps {\n /*\n The actions available in the toast.\n /\n actions?: ToastAction[];\n /\n If true, the toast is open (visible).\n /\n open?: boolean;\n /\n If true, displays a loading indicator inside the toast.\n /\n loading?: boolean;\n /\n The type of toast.\n /\n type?: ToastType;\n /\n The icon displayed in the toast.\n /\n icon?: string \| React.FC<IconSubComponentProps> \| null;\n /\n If true, hides the toast icon.\n /\n hideIcon?: boolean;\n /\n The action element displayed in the toast.\n /\n action?: JSX.Element;\n /\n If false, hides the close button.\n /\n closeable?: boolean;\n /\n Callback fired when the toast is closed.\n /\n onClose?: () => void;\n /\n The number of milliseconds before the toast automatically closes.\n * (0 or null disables auto-close behavior).\n /\n autoHideDuration?: number;\n /\n The content displayed inside the toast.\n /\n children?: ReactElement \| ReactElement[] \| string;\n /\n The aria-label for the close button.\n /\n closeButtonAriaLabel?: string;\n}\n\nconst Toast = ({\n open = false,\n loading = false,\n autoHideDuration = null,\n type = \"normal\",\n icon,\n hideIcon = false,\n action: deprecatedAction,\n actions,\n children,\n closeable = true,\n onClose = NOOP,\n className,\n id,\n closeButtonAriaLabel = \"Close\",\n \"data-testid\": dataTestId\n}: ToastProps) => {\n const ref = useRef(null);\n const nodeRef = useRef<HTMLDivElement>(null);\n const prevActions = usePrevious(actions?.length);\n const toastLinks = useMemo(() => {\n return actions\n ? actions\n .filter(action => action.type === \"link\")\n .map(({ type: _type, ...otherProps }) => (\n <ToastLink key={otherProps.href} className={styles.actionLink} {...otherProps} />\n ))\n : null;\n }, [actions]);\n\n const shouldShowButtonTransition = useMemo(() => {\n return prevActions !== undefined && actions?.length !== prevActions;\n }, [actions, prevActions]);\n\n const toastButtons: JSX.Element[] \| null = useMemo(() => {\n return actions\n ? actions\n .filter(action => action.type === \"button\")\n .map(({ type: _type, content, ...otherProps }, index) => (\n <ToastButton\n key={`alert-button-${index}`}\n className={cx(styles.actionButton, { [styles.withTransition]: shouldShowButtonTransition })}\n {...otherProps}\n >\n {content}\n </ToastButton>\n ))\n : null;\n }, [actions, shouldShowButtonTransition]);\n\n const classNames = useMemo(\n () => cx(styles.toast, getStyle(styles, camelCase(\"type-\" + type)), className),\n [type, className]\n );\n\n const handleClose = useCallback(() => {\n if (onClose) {\n onClose();\n }\n }, [onClose]);\n\n / Timer */\n const timerAutoHide = useRef<NodeJS.Timeout>();\n const setAutoHideTimer = useCallback(\n (duration: number) => {\n if (!onClose \|\| duration == null) {\n return;\n }\n\n clearTimeout(timerAutoHide.current);\n timerAutoHide.current = setTimeout(() => {\n handleClose();\n }, duration);\n },\n [handleClose, onClose]\n );\n\n useEffect(() => {\n if (open && autoHideDuration > 0) {\n setAutoHideTimer(autoHideDuration);\n }\n\n return () => {\n clearTimeout(timerAutoHide.current);\n };\n }, [open, autoHideDuration, setAutoHideTimer]);\n\n const iconElement = !hideIcon && getIcon(type, icon);\n\n // https://n12v.com/css-transition-to-from-auto/\n const recalculateElementWidth = useCallback((element: HTMLElement) => {\n const prevWidth = element.style.width;\n element.style.width = \"auto\";\n const endWidth = getComputedStyle(element).width;\n element.style.width = prevWidth;\n element.offsetWidth; // force repaint\n element.style.width = endWidth;\n }, []);\n\n useEffect(() => {\n if (ref.current) {\n recalculateElementWidth(ref.current);\n }\n }, [children, recalculateElementWidth]);\n\n return (\n <CSSTransition\n in={open}\n nodeRef={nodeRef}\n classNames={{ enterActive: styles.enterActive, exitActive: styles.exitActive }}\n timeout={400}\n unmountOnExit\n >\n <Text\n ref={nodeRef}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TOAST, id)}\n type=\"text2\"\n element=\"div\"\n color=\"fixedLight\"\n className={classNames}\n role=\"alert\"\n aria-live=\"polite\"\n >\n {iconElement && <div className={cx(styles.icon)}>{iconElement}</div>}\n <Flex align=\"center\" gap=\"large\" className={styles.content}>\n <Flex\n gap=\"medium\"\n data-testid={getTestId(ComponentDefaultTestId.TOAST_CONTENT)}\n className={styles.textContent}\n >\n <span>{children}</span>\n {toastLinks}\n </Flex>\n {(toastButtons \|\| deprecatedAction) && (toastButtons \|\| deprecatedAction)}\n {loading && <Loader size=\"xs\" />}\n </Flex>\n {closeable && (\n <IconButton\n className={cx(styles.closeButton)}\n onClick={handleClose}\n size=\"small\"\n kind=\"tertiary\"\n color=\"fixed-light\"\n ariaLabel={closeButtonAriaLabel}\n data-testid={getTestId(ComponentDefaultTestId.TOAST_CLOSE_BUTTON)}\n icon={CloseSmall}\n hideTooltip\n />\n )}\n </Text>\n </CSSTransition>\n );\n};\n\ninterface ToastStaticProps {\n types: typeof ToastTypeEnum;\n actionTypes: typeof ToastActionTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<ToastProps, ToastStaticProps>(Toast, {\n types: ToastTypeEnum,\n actionTypes: ToastActionTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","_ref$open","open","_ref$loading","loading","_ref$autoHideDuration","autoHideDuration","_ref$type","type","icon","_ref$hideIcon","hideIcon","deprecatedAction","action","actions","children","_ref$closeable","closeable","_ref$onClose","onClose","NOOP","className","id","_ref$closeButtonAriaL","closeButtonAriaLabel","dataTestId","ref","useRef","nodeRef","prevActions","usePrevious","length","toastLinks","useMemo","filter","map","_a","otherProps","__rest","React","createElement","ToastLink","key","href","styles","actionLink","shouldShowButtonTransition","undefined","toastButtons","index","content","ToastButton","Object","assign","concat","cx","actionButton","_defineProperty","withTransition","classNames","toast","getStyle","camelCase","handleClose","useCallback","timerAutoHide","setAutoHideTimer","duration","clearTimeout","current","setTimeout","useEffect","iconElement","getIcon","recalculateElementWidth","element","prevWidth","style","width","endWidth","getComputedStyle","CSSTransition","in","enterActive","exitActive","timeout","unmountOnExit","Text","getTestId","ComponentDefaultTestId","TOAST","color","role","Flex","align","gap","TOAST_CONTENT","textContent","Loader","size","IconButton","closeButton","onClick","kind","ariaLabel","TOAST_CLOSE_BUTTON","CloseSmall","hideTooltip","types","ToastTypeEnum","actionTypes","ToastActionTypeEnum"],"mappings":"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"}
1	+ {"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { camelCase } from \"es-toolkit\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { type ReactElement, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { type IconSubComponentProps } from \"@vibe/icon\";\nimport Text from \"../Text/Text\";\nimport { Loader } from \"@vibe/loader\";\nimport Flex from \"../Flex/Flex\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport ToastLink from \"./ToastLink/ToastLink\";\nimport ToastButton from \"./ToastButton/ToastButton\";\nimport { ToastActionType as ToastActionTypeEnum, ToastType as ToastTypeEnum } from \"./ToastConstants\";\nimport { type ToastType, type ToastAction } from \"./Toast.types\";\nimport { getIcon } from \"./ToastHelpers\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { type VibeComponentProps, withStaticPropsWithoutForwardRef } from \"../../types\";\nimport styles from \"./Toast.module.scss\";\nimport IconButton from \"../IconButton/IconButton\";\nimport usePrevious from \"../../hooks/usePrevious\";\n\nexport interface ToastProps extends VibeComponentProps {\n /*\n The actions available in the toast.\n /\n actions?: ToastAction[];\n /\n If true, the toast is open (visible).\n /\n open?: boolean;\n /\n If true, displays a loading indicator inside the toast.\n /\n loading?: boolean;\n /\n The type of toast.\n /\n type?: ToastType;\n /\n The icon displayed in the toast.\n /\n icon?: string \| React.FC<IconSubComponentProps> \| null;\n /\n If true, hides the toast icon.\n /\n hideIcon?: boolean;\n /\n The action element displayed in the toast.\n /\n action?: JSX.Element;\n /\n If false, hides the close button.\n /\n closeable?: boolean;\n /\n Callback fired when the toast is closed.\n /\n onClose?: () => void;\n /\n The number of milliseconds before the toast automatically closes.\n * (0 or null disables auto-close behavior).\n /\n autoHideDuration?: number;\n /\n The content displayed inside the toast.\n /\n children?: ReactElement \| ReactElement[] \| string;\n /\n The aria-label for the close button.\n /\n closeButtonAriaLabel?: string;\n}\n\nconst Toast = ({\n open = false,\n loading = false,\n autoHideDuration = null,\n type = \"normal\",\n icon,\n hideIcon = false,\n action: deprecatedAction,\n actions,\n children,\n closeable = true,\n onClose = NOOP,\n className,\n id,\n closeButtonAriaLabel = \"Close\",\n \"data-testid\": dataTestId\n}: ToastProps) => {\n const ref = useRef(null);\n const nodeRef = useRef<HTMLDivElement>(null);\n const prevActions = usePrevious(actions?.length);\n const toastLinks = useMemo(() => {\n return actions\n ? actions\n .filter(action => action.type === \"link\")\n .map(({ type: _type, ...otherProps }) => (\n <ToastLink key={otherProps.href} className={styles.actionLink} {...otherProps} />\n ))\n : null;\n }, [actions]);\n\n const shouldShowButtonTransition = useMemo(() => {\n return prevActions !== undefined && actions?.length !== prevActions;\n }, [actions, prevActions]);\n\n const toastButtons: JSX.Element[] \| null = useMemo(() => {\n return actions\n ? actions\n .filter(action => action.type === \"button\")\n .map(({ type: _type, content, ...otherProps }, index) => (\n <ToastButton\n key={`alert-button-${index}`}\n className={cx(styles.actionButton, { [styles.withTransition]: shouldShowButtonTransition })}\n {...otherProps}\n >\n {content}\n </ToastButton>\n ))\n : null;\n }, [actions, shouldShowButtonTransition]);\n\n const classNames = useMemo(\n () => cx(styles.toast, getStyle(styles, camelCase(\"type-\" + type)), className),\n [type, className]\n );\n\n const handleClose = useCallback(() => {\n if (onClose) {\n onClose();\n }\n }, [onClose]);\n\n / Timer */\n const timerAutoHide = useRef<NodeJS.Timeout>();\n const setAutoHideTimer = useCallback(\n (duration: number) => {\n if (!onClose \|\| duration == null) {\n return;\n }\n\n clearTimeout(timerAutoHide.current);\n timerAutoHide.current = setTimeout(() => {\n handleClose();\n }, duration);\n },\n [handleClose, onClose]\n );\n\n useEffect(() => {\n if (open && autoHideDuration > 0) {\n setAutoHideTimer(autoHideDuration);\n }\n\n return () => {\n clearTimeout(timerAutoHide.current);\n };\n }, [open, autoHideDuration, setAutoHideTimer]);\n\n const iconElement = !hideIcon && getIcon(type, icon);\n\n // https://n12v.com/css-transition-to-from-auto/\n const recalculateElementWidth = useCallback((element: HTMLElement) => {\n const prevWidth = element.style.width;\n element.style.width = \"auto\";\n const endWidth = getComputedStyle(element).width;\n element.style.width = prevWidth;\n element.offsetWidth; // force repaint\n element.style.width = endWidth;\n }, []);\n\n useEffect(() => {\n if (ref.current) {\n recalculateElementWidth(ref.current);\n }\n }, [children, recalculateElementWidth]);\n\n return (\n <CSSTransition\n in={open}\n nodeRef={nodeRef}\n classNames={{ enterActive: styles.enterActive, exitActive: styles.exitActive }}\n timeout={400}\n unmountOnExit\n >\n <Text\n ref={nodeRef}\n id={id}\n data-testid={dataTestId \|\| getTestId(ComponentDefaultTestId.TOAST, id)}\n type=\"text2\"\n element=\"div\"\n color=\"fixedLight\"\n className={classNames}\n role=\"alert\"\n aria-live=\"polite\"\n >\n {iconElement && <div className={cx(styles.icon)}>{iconElement}</div>}\n <Flex align=\"center\" gap=\"large\" className={styles.content}>\n <Flex\n gap=\"medium\"\n data-testid={getTestId(ComponentDefaultTestId.TOAST_CONTENT)}\n className={styles.textContent}\n >\n <span>{children}</span>\n {toastLinks}\n </Flex>\n {(toastButtons \|\| deprecatedAction) && (toastButtons \|\| deprecatedAction)}\n {loading && <Loader size=\"xs\" />}\n </Flex>\n {closeable && (\n <IconButton\n className={cx(styles.closeButton)}\n onClick={handleClose}\n size=\"small\"\n kind=\"tertiary\"\n color=\"fixed-light\"\n ariaLabel={closeButtonAriaLabel}\n data-testid={getTestId(ComponentDefaultTestId.TOAST_CLOSE_BUTTON)}\n icon={CloseSmall}\n hideTooltip\n />\n )}\n </Text>\n </CSSTransition>\n );\n};\n\ninterface ToastStaticProps {\n types: typeof ToastTypeEnum;\n actionTypes: typeof ToastActionTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<ToastProps, ToastStaticProps>(Toast, {\n types: ToastTypeEnum,\n actionTypes: ToastActionTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","_ref$open","open","_ref$loading","loading","_ref$autoHideDuration","autoHideDuration","_ref$type","type","icon","_ref$hideIcon","hideIcon","deprecatedAction","action","actions","children","_ref$closeable","closeable","_ref$onClose","onClose","NOOP","className","id","_ref$closeButtonAriaL","closeButtonAriaLabel","dataTestId","ref","useRef","nodeRef","prevActions","usePrevious","length","toastLinks","useMemo","filter","map","_a","otherProps","__rest","React","createElement","ToastLink","key","href","styles","actionLink","shouldShowButtonTransition","undefined","toastButtons","index","content","ToastButton","Object","assign","concat","cx","actionButton","_defineProperty","withTransition","classNames","toast","getStyle","camelCase","handleClose","useCallback","timerAutoHide","setAutoHideTimer","duration","clearTimeout","current","setTimeout","useEffect","iconElement","getIcon","recalculateElementWidth","element","prevWidth","style","width","endWidth","getComputedStyle","CSSTransition","in","enterActive","exitActive","timeout","unmountOnExit","Text","getTestId","ComponentDefaultTestId","TOAST","color","role","Flex","align","gap","TOAST_CONTENT","textContent","Loader","size","IconButton","closeButton","onClick","kind","ariaLabel","TOAST_CLOSE_BUTTON","CloseSmall","hideTooltip","types","ToastTypeEnum","actionTypes","ToastActionTypeEnum"],"mappings":"mpCA0EA,IAgKeA,EAAAA,GAhKD,SAAHC,GAgBM,IAAAC,EAAAD,EAffE,KAAAA,OAAO,IAAHD,GAAQA,EAAAE,EAAAH,EACZI,QAAAA,OAAU,IAAHD,GAAQA,EAAAE,EAAAL,EACfM,iBAAAA,OAAmB,IAAHD,EAAG,KAAIA,EAAAE,EAAAP,EACvBQ,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAAIT,EAAJS,KAAIC,EAAAV,EACJW,SAAAA,OAAW,IAAHD,GAAQA,EACRE,EAAgBZ,EAAxBa,OACAC,EAAOd,EAAPc,QACAC,EAAQf,EAARe,SAAQC,EAAAhB,EACRiB,UAAAA,OAAY,IAAHD,GAAOA,EAAAE,EAAAlB,EAChBmB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EACdG,EAASrB,EAATqB,UACAC,EAAEtB,EAAFsB,GAAEC,EAAAvB,EACFwB,qBAAAA,OAAuB,IAAHD,EAAG,QAAOA,EACfE,EAAUzB,EAAzB,eAEM0B,EAAMC,EAAO,MACbC,EAAUD,EAAuB,MACjCE,EAAcC,EAAYhB,aAAO,EAAPA,EAASiB,QACnCC,EAAaC,GAAQ,WACzB,OAAOnB,EACHA,EACGoB,QAAO,SAAArB,GAAM,MAAoB,SAAhBA,EAAOL,IAAe,IACvC2B,KAAI,SAACC,GAAkBC,IAAAA,EAAUC,EAAAF,EAA5B,UAAmC,OACvCG,EAACC,cAAAC,iBAAUC,IAAKL,EAAWM,KAAMtB,UAAWuB,EAAOC,YAAgBR,GACpE,IACH,IACN,GAAG,CAACvB,IAEEgC,EAA6Bb,GAAQ,WACzC,YAAuBc,IAAhBlB,IAA6Bf,aAAO,EAAPA,EAASiB,UAAWF,CAC1D,GAAG,CAACf,EAASe,IAEPmB,EAAqCf,GAAQ,WACjD,OAAOnB,EACHA,EACGoB,QAAO,SAAArB,GAAM,MAAoB,WAAhBA,EAAOL,IAAiB,IACzC2B,KAAI,SAACC,EAAyCa,OAA1BC,IAAAA,QAAYb,EAA3BC,EAAAF,EAAA,CAAA,OAAA,YAAmD,OACvDG,EAAAC,cAACW,EAAWC,OAAAC,OAAA,CACVX,IAAGY,gBAAAA,OAAkBL,GACrB5B,UAAWkC,EAAGX,EAAOY,aAAYC,EAAA,CAAA,EAAKb,EAAOc,eAAiBZ,KAC1DT,GAEHa,EAEJ,IACH,IACN,GAAG,CAACpC,EAASgC,IAEPa,GAAa1B,GACjB,WAAA,OAAMsB,EAAGX,EAAOgB,MAAOC,EAASjB,EAAQkB,EAAU,QAAUtD,IAAQa,EAAU,GAC9E,CAACb,EAAMa,IAGH0C,GAAcC,GAAY,WAC1B7C,GACFA,GAEJ,GAAG,CAACA,IAGE8C,GAAgBtC,IAChBuC,GAAmBF,GACvB,SAACG,GACMhD,GAAuB,MAAZgD,IAIhBC,aAAaH,GAAcI,SAC3BJ,GAAcI,QAAUC,YAAW,WACjCP,IACD,GAAEI,GACL,GACA,CAACJ,GAAa5C,IAGhBoD,GAAU,WAKR,OAJIrE,GAAQI,EAAmB,GAC7B4D,GAAiB5D,GAGZ,WACL8D,aAAaH,GAAcI,SAE9B,GAAE,CAACnE,EAAMI,EAAkB4D,KAE5B,IAAMM,IAAe7D,GAAY8D,EAAQjE,EAAMC,GAGzCiE,GAA0BV,GAAY,SAACW,GAC3C,IAAMC,EAAYD,EAAQE,MAAMC,MAChCH,EAAQE,MAAMC,MAAQ,OACtB,IAAMC,EAAWC,iBAAiBL,GAASG,MAC3CH,EAAQE,MAAMC,MAAQF,EAEtBD,EAAQE,MAAMC,MAAQC,CACvB,GAAE,IAQH,OANAR,GAAU,WACJ7C,EAAI2C,SACNK,GAAwBhD,EAAI2C,QAEhC,GAAG,CAACtD,EAAU2D,KAGZnC,EAAAC,cAACyC,EAAa,CACZC,GAAIhF,EACJ0B,QAASA,EACT+B,WAAY,CAAEwB,YAAavC,EAAOuC,YAAaC,WAAYxC,EAAOwC,YAClEC,QAAS,IACTC,eAAa,GAEb/C,EAAAC,cAAC+C,EACC,CAAA7D,IAAKE,EACLN,GAAIA,EACS,cAAAG,GAAc+D,EAAUC,EAAuBC,MAAOpE,GACnEd,KAAK,QACLmE,QAAQ,MACRgB,MAAM,aACNtE,UAAWsC,GACXiC,KAAK,oBACK,UAETpB,IAAejC,EAAAC,cAAA,MAAA,CAAKnB,UAAWkC,EAAGX,EAAOnC,OAAQ+D,IAClDjC,EAAAC,cAACqD,EAAI,CAACC,MAAM,SAASC,IAAI,QAAQ1E,UAAWuB,EAAOM,SACjDX,EAAAC,cAACqD,EACC,CAAAE,IAAI,uBACSP,EAAUC,EAAuBO,eAC9C3E,UAAWuB,EAAOqD,aAElB1D,EAAAC,cAAA,OAAA,KAAOzB,GACNiB,IAEDgB,GAAgBpC,KAAsBoC,GAAgBpC,GACvDR,GAAWmC,gBAAC2D,EAAM,CAACC,KAAK,QAE1BlF,GACCsB,EAACC,cAAA4D,GACC/E,UAAWkC,EAAGX,EAAOyD,aACrBC,QAASvC,GACToC,KAAK,QACLI,KAAK,WACLZ,MAAM,cACNa,UAAWhF,EACE,cAAAgE,EAAUC,EAAuBgB,oBAC9ChG,KAAMiG,EACNC,kBAMZ,GAOqF,CACnFC,MAAOC,EACPC,YAAaC"}

package/dist/mocked_classnames/src/components/Toast/Toast.module.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n={toast:"toast",typeNormal:"typeNormal",typePositive:"typePositive",typeNegative:"typeNegative",typeWarning:"typeWarning",closeButton:"closeButton",actionButton:"actionButton",actionLink:"actionLink",typeDark:"typeDark",icon:"icon",withTransition:"withTransition",bounceIn:"bounceIn",content:"content",textContent:"textContent",enterActive:"enterActive",slideIn:"slideIn",exitActive:"exitActive",slideOut:"slideOut"};!function(n){const t="s_id-72c9912c1efa_3_70_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+t))return;const a=document.createElement("style");a.id=t,o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".toast {\n  box-shadow: var(--box-shadow-medium);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  margin: var(--spacing-medium);\n  position: fixed;\n  left: 50%;\n  top: 0;\n  margin-right: auto;\n  margin-left: auto;\n  padding: var(--spacing-small);\n  align-items: center;\n  display: flex;\n  min-width: 200px;\n  width: auto;\n  border-radius: var(--border-radius-small);\n  color: var(--fixed-light-color);\n  transform: translateX(-50%);\n  transition: background-color 80ms cubic-bezier(0.6, 0, 0.4, 1), width 200ms cubic-bezier(0, 0, 0.4, 1);\n}\n.toast.typeNormal {\n  background-color: var(--primary-color);\n}\n.toast.typePositive {\n  background-color: var(--positive-color);\n}\n.toast.typeNegative {\n  background-color: var(--negative-color);\n}\n.toast.typeWarning {\n  background-color: var(--warning-color);\n  color: var(--fixed-dark-color);\n}\n.toast.typeWarning .closeButton {\n  color: var(--fixed-dark-color);\n}\n.toast.typeWarning .actionButton,\n.toast.typeWarning .actionLink {\n  color: var(--fixed-dark-color);\n  border-color: var(--fixed-dark-color);\n}\n.toast.typeDark {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.toast.typeDark .closeButton {\n  color: var(--text-color-on-inverted);\n}\n.toast.typeDark .actionButton,\n.toast.typeDark .actionLink {\n  color: var(--text-color-on-inverted);\n  border-color: var(--text-color-on-inverted);\n}\n.icon {\n  display: flex;\n  margin-left: var(--spacing-small);\n}\n.actionButton.withTransition {\n  opacity: 0;\n  animation: bounceIn 150ms cubic-bezier(0, 0, 0.4, 1);\n  animation-delay: 300ms;\n  animation-fill-mode: forwards;\n}\n.content {\n  margin: 0 var(--spacing-small);\n  flex: 1;\n}\n.textContent {\n  display: inline-flex;\n  flex-grow: 1;\n}\n.enterActive {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-name: slideIn;\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n.exitActive {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-name: slideOut;\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n.closeButton {\n  margin-left: var(--spacing-small);\n}\n@keyframes slideIn {\n  0% {\n    transform: translate(-50%, -100px);\n  }\n  40% {\n    transform: translate(-50%, 16px);\n  }\n  100% {\n    transform: translate(-50%, 0px);\n  }\n}\n@keyframes slideOut {\n  0% {\n    transform: translate(-50%, 0);\n  }\n  100% {\n    transform: translate(-50%, -100px);\n    opacity: 0;\n  }\n}\n@keyframes bounceIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}");export{n as default};
+var n={toast:"toast",typeNormal:"typeNormal",typePositive:"typePositive",typeNegative:"typeNegative",typeWarning:"typeWarning",closeButton:"closeButton",actionButton:"actionButton",actionLink:"actionLink",typeDark:"typeDark",icon:"icon",withTransition:"withTransition",bounceIn:"bounceIn",content:"content",textContent:"textContent",enterActive:"enterActive",slideIn:"slideIn",exitActive:"exitActive",slideOut:"slideOut"};!function(n){const t="s_id-72c9912c1efa_3_70_2";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+t))return;const a=document.createElement("style");a.id=t,o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".toast {\n  box-shadow: var(--box-shadow-medium);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  margin: var(--spacing-medium);\n  position: fixed;\n  left: 50%;\n  top: 0;\n  margin-right: auto;\n  margin-left: auto;\n  padding: var(--spacing-small);\n  align-items: center;\n  display: flex;\n  min-width: 200px;\n  width: auto;\n  border-radius: var(--border-radius-small);\n  color: var(--fixed-light-color);\n  transform: translateX(-50%);\n  transition: background-color 80ms cubic-bezier(0.6, 0, 0.4, 1), width 200ms cubic-bezier(0, 0, 0.4, 1);\n}\n.toast.typeNormal {\n  background-color: var(--primary-color);\n}\n.toast.typePositive {\n  background-color: var(--positive-color);\n}\n.toast.typeNegative {\n  background-color: var(--negative-color);\n}\n.toast.typeWarning {\n  background-color: var(--warning-color);\n  color: var(--fixed-dark-color);\n}\n.toast.typeWarning .closeButton {\n  color: var(--fixed-dark-color);\n}\n.toast.typeWarning .actionButton,\n.toast.typeWarning .actionLink {\n  color: var(--fixed-dark-color);\n  border-color: var(--fixed-dark-color);\n}\n.toast.typeDark {\n  background-color: var(--inverted-color-background);\n  color: var(--text-color-on-inverted);\n}\n.toast.typeDark .closeButton {\n  color: var(--text-color-on-inverted);\n}\n.toast.typeDark .actionButton,\n.toast.typeDark .actionLink {\n  color: var(--text-color-on-inverted);\n  border-color: var(--text-color-on-inverted);\n}\n.icon {\n  display: flex;\n  margin-left: var(--spacing-small);\n}\n.actionButton.withTransition {\n  opacity: 0;\n  animation: bounceIn 150ms cubic-bezier(0, 0, 0.4, 1);\n  animation-delay: 300ms;\n  animation-fill-mode: forwards;\n}\n.content {\n  margin: 0 var(--spacing-small);\n  flex: 1;\n}\n.textContent {\n  display: inline-flex;\n  flex-grow: 1;\n}\n.enterActive {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-name: slideIn;\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n.exitActive {\n  animation-iteration-count: 1;\n  animation-fill-mode: forwards;\n  animation-name: slideOut;\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n.closeButton {\n  margin-left: var(--spacing-small);\n}\n@keyframes slideIn {\n  0% {\n    transform: translate(-50%, -100px);\n  }\n  40% {\n    transform: translate(-50%, 16px);\n  }\n  100% {\n    transform: translate(-50%, 0px);\n  }\n}\n@keyframes slideOut {\n  0% {\n    transform: translate(-50%, 0);\n  }\n  100% {\n    transform: translate(-50%, -100px);\n    opacity: 0;\n  }\n}\n@keyframes bounceIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}");export{n as default};
 //# sourceMappingURL=Toast.module.scss.js.map

package/dist/mocked_classnames/src/components/Toast/ToastButton/ToastButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as t}from"../../../../_virtual/_tslib.js";import s from"../../Button/Button.js";import a from"react";import{ComponentDefaultTestId as e}from"../../../tests/constants.js";import{getTestId as r}from"../../../tests/testIds.js";var i=function(i){var o=i.className,m=i.id,d=i["data-testid"],n=t(i,["className","id","data-testid"]);return a.createElement(s,Object.assign({},n,{id:m,kind:"secondary",marginLeft:!1,"data-testid":d||r(e.TOAST_BUTTON,m),className:o,size:"small",color:"fixed-light"}))};export{i as default};
+import{__rest as t}from"../../../../_virtual/_tslib.js";import s from"react";import{ComponentDefaultTestId as a}from"../../../tests/constants.js";import{getTestId as e}from"../../../tests/testIds.js";import i from"../../../../components/button/dist/Button/Button.js";var o=function(o){var r=o.className,m=o.id,d=o["data-testid"],n=t(o,["className","id","data-testid"]);return s.createElement(i,Object.assign({},n,{id:m,kind:"secondary",marginLeft:!1,"data-testid":d||e(a.TOAST_BUTTON,m),className:r,size:"small",color:"fixed-light"}))};export{o as default};
 //# sourceMappingURL=ToastButton.js.map