@rio-cloud/rio-uikit 2.0.1 → 2.1.0

package/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React, { forwardRef, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type TagProps = {\n    /**\n     * Defines if the tag is active.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Defines if the tag is clickable.\n     *\n     * @default false\n     */\n    clickable?: boolean;\n\n    /**\n     * Defines if the tag is deletable.\n     *\n     * @default false\n     */\n    deletable?: boolean;\n\n    /**\n     * Defines if the tag is revertable.\n     *\n     * @default false\n     */\n    revertable?: boolean;\n\n    /**\n     * Defines if the tag is disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Define any rioglyph icon like \"rioglyph-truck\".\n     */\n    icon?: string;\n\n    /**\n     * Sets a more subtle style for border and background.\n     *\n     * @default false\n     */\n    muted?: boolean;\n\n    /**\n     * Defines if the tag is round.\n     *\n     * @default true\n     */\n    round?: boolean;\n\n    /**\n     * Defines if the tag is selectable.\n     *\n     * @default false\n     */\n    selectable?: boolean;\n\n    /**\n     * Defines if you want to render the tag in a different size.\n     *\n     * Possible values are: 'small' and 'medium'\n     */\n    size?: 'small' | 'medium';\n\n    multiline?: boolean;\n    [remainingProp: string]: unknown;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Tag = forwardRef((props: PropsWithChildren<TagProps>, ref: React.Ref<HTMLDivElement>) => {\n    const {\n        children,\n        icon,\n        active = false,\n        disabled = false,\n        clickable = false,\n        selectable = false,\n        deletable = false,\n        revertable = false,\n        multiline = false,\n        muted = false,\n        round = true,\n        size,\n        className,\n        ...remainingProps\n    } = props;\n\n    const tagClasses = classNames(\n        'tag',\n        size === 'small' && 'tag-small',\n        icon && `rioglyph ${icon}`,\n        active && 'active clickable rioglyph rioglyph-ok',\n        disabled && 'disabled',\n        clickable && 'clickable',\n        selectable && 'selectable clickable rioglyph rioglyph-checkbox',\n        deletable && 'deletable clickable rioglyph rioglyph-remove',\n        revertable && 'revertable clickable rioglyph rioglyph-revert',\n        multiline && 'multiline',\n        muted && 'tag-muted',\n        !round && 'rounded',\n        className\n    );\n\n    return (\n        <div ref={ref} {...remainingProps} className={tagClasses}>\n            <div className='tag-inner'>{children}</div>\n        </div>\n    );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","props","ref","children","icon","active","disabled","clickable","selectable","deletable","revertable","multiline","muted","round","size","className","remainingProps","tagClasses","classNames","jsx"],"mappings":";;;AAiFA,MAAMA,IAAMC,EAAW,CAACC,GAAoCC,MAAmC;AAC3F,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEEgB,IAAaC;AAAA,IACf;AAAA,IACAJ,MAAS,WAAW;AAAA,IACpBV,KAAQ,YAAYA,CAAI;AAAA,IACxBC,KAAU;AAAA,IACVC,KAAY;AAAA,IACZC,KAAa;AAAA,IACbC,KAAc;AAAA,IACdC,KAAa;AAAA,IACbC,KAAc;AAAA,IACdC,KAAa;AAAA,IACbC,KAAS;AAAA,IACT,CAACC,KAAS;AAAA,IACVE;AAAA,EAAA;AAGJ,SACI,gBAAAI,EAAC,OAAA,EAAI,KAAAjB,GAAW,GAAGc,GAAgB,WAAWC,GAC1C,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,aAAa,UAAAhB,EAAA,CAAS,GACzC;AAER,CAAC;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React, { forwardRef, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type TagProps = {\n    /**\n     * Defines if the tag is active.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Defines if the tag is clickable.\n     *\n     * @default false\n     */\n    clickable?: boolean;\n\n    /**\n     * Defines if the tag is deletable.\n     *\n     * @default false\n     */\n    deletable?: boolean;\n\n    /**\n     * Defines if the tag is revertable.\n     *\n     * @default false\n     */\n    revertable?: boolean;\n\n    /**\n     * Defines if the tag is disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Define any rioglyph icon like \"rioglyph-truck\".\n     */\n    icon?: string;\n\n    /**\n     * Sets a more subtle style for border and background.\n     *\n     * @default false\n     */\n    muted?: boolean;\n\n    /**\n     * Defines if the tag is round.\n     *\n     * @default true\n     */\n    round?: boolean;\n\n    /**\n     * Defines if the tag is selectable.\n     *\n     * @default false\n     */\n    selectable?: boolean;\n\n    /**\n     * Defines if you want to render the tag in a different size.\n     *\n     * Possible values are: `'small'` and `'medium'`\n     */\n    size?: 'small' | 'medium';\n\n    /**\n     * Allows to render text on multiple lines.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    [remainingProp: string]: unknown;\n};\n\nconst Tag = forwardRef((props: PropsWithChildren<TagProps>, ref: React.Ref<HTMLDivElement>) => {\n    const {\n        children,\n        icon,\n        active = false,\n        disabled = false,\n        clickable = false,\n        selectable = false,\n        deletable = false,\n        revertable = false,\n        multiline = false,\n        muted = false,\n        round = true,\n        size,\n        className,\n        ...remainingProps\n    } = props;\n\n    const tagClasses = classNames(\n        'tag',\n        size === 'small' && 'tag-small',\n        icon && `rioglyph ${icon}`,\n        active && 'active clickable rioglyph rioglyph-ok',\n        disabled && 'disabled',\n        clickable && 'clickable',\n        selectable && 'selectable clickable rioglyph rioglyph-checkbox',\n        deletable && 'deletable clickable rioglyph rioglyph-remove',\n        revertable && 'revertable clickable rioglyph rioglyph-revert',\n        multiline && 'multiline',\n        muted && 'tag-muted',\n        !round && 'rounded',\n        className\n    );\n\n    return (\n        <div ref={ref} {...remainingProps} className={tagClasses}>\n            <div className='tag-inner'>{children}</div>\n        </div>\n    );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","props","ref","children","icon","active","disabled","clickable","selectable","deletable","revertable","multiline","muted","round","size","className","remainingProps","tagClasses","classNames","jsx"],"mappings":";;;AAuFA,MAAMA,IAAMC,EAAW,CAACC,GAAoCC,MAAmC;AAC3F,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEEgB,IAAaC;AAAA,IACf;AAAA,IACAJ,MAAS,WAAW;AAAA,IACpBV,KAAQ,YAAYA,CAAI;AAAA,IACxBC,KAAU;AAAA,IACVC,KAAY;AAAA,IACZC,KAAa;AAAA,IACbC,KAAc;AAAA,IACdC,KAAa;AAAA,IACbC,KAAc;AAAA,IACdC,KAAa;AAAA,IACbC,KAAS;AAAA,IACT,CAACC,KAAS;AAAA,IACVE;AAAA,EAAA;AAGJ,SACI,gBAAAI,EAAC,OAAA,EAAI,KAAAjB,GAAW,GAAGc,GAAgB,WAAWC,GAC1C,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,aAAa,UAAAhB,EAAA,CAAS,GACzC;AAER,CAAC;"}

package/components/tagManager/TagManager.d.ts

@@ -19,6 +19,21 @@ export type TagManagerProps = {
      * have to be removed or added to your data.
      *
      * @param newTags The updated list of tags.
+     *
+     * @example
+     * [
+        {
+            label: 'Foo',
+        },
+        {
+            label: 'Bar',
+            toAdd: true,
+        },
+        {
+            label: 'Lorem ipsum',
+            toRemove: true,
+        }
+    ]
      */
     onTagListChange?: (newTags: TagManagerTag[]) => void;
     /**

package/components/tagManager/TagManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagManager.js","sources":["../../../src/components/tagManager/TagManager.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { compact, isEmpty, noop } from 'es-toolkit/compat';\nimport { isEqual } from 'es-toolkit/predicate';\n\nimport AutoSuggest, { type AutoSuggestProps, type AutoSuggestSuggestion } from '../autosuggest/AutoSuggest';\nimport CustomSuggestionItem from './CustomSuggestionItem';\nimport TagManagerItemList from './TagManagerItemList';\nimport type { TagManagerTag } from './TagManagerTag';\n\nconst getCustomSuggestion = (value: string, placeholder: string | undefined): AutoSuggestSuggestion => ({\n    customSuggestion: <CustomSuggestionItem value={value} placeholder={placeholder} />,\n    label: value,\n    disabled: isEmpty(value),\n});\n\nconst getSuggestionSeparator = (dropdownSeparatorText: string): AutoSuggestSuggestion => ({\n    header: true,\n    label: dropdownSeparatorText,\n});\n\nconst cleanupTagState = (tag: TagManagerTag): TagManagerTag => {\n    delete tag.toAdd;\n    delete tag.toRemove;\n    return tag;\n};\n\nconst hasTagAlreadySelected = (tags: TagManagerTag[], newSuggestion: AutoSuggestSuggestion) =>\n    !!tags.find(tag => tag.label === newSuggestion.label);\n\nconst getNewSuggestion = (suggestion: AutoSuggestSuggestion) => {\n    const newSuggestion = suggestion.customSuggestion ? { label: suggestion.label } : suggestion;\n    newSuggestion.toAdd = true;\n    return newSuggestion;\n};\n\nconst buildSuggestions =\n    (useCustomTags: boolean, customTagPlaceholder: string | undefined, dropdownSeparatorText: string | undefined) =>\n    (value: string, suggestions: TagManagerTag[]): AutoSuggestSuggestion[] => {\n        const cleanedSuggestions = suggestions.map(cleanupTagState).filter(item => item.label);\n        const hasDropdownSeparatorText = typeof dropdownSeparatorText === 'string' && !isEmpty(dropdownSeparatorText);\n\n        return compact([\n            useCustomTags && getCustomSuggestion(value, customTagPlaceholder),\n            useCustomTags &&\n                !isEmpty(cleanedSuggestions) &&\n                hasDropdownSeparatorText &&\n                getSuggestionSeparator(dropdownSeparatorText),\n            ...(cleanedSuggestions as unknown as AutoSuggestSuggestion[]),\n        ]);\n    };\n\nconst filterSuggestions = (suggestions: AutoSuggestSuggestion[], selectedTagNames: string[], value = '') =>\n    suggestions.filter(suggestion => {\n        const label = suggestion.label;\n        if (!label) {\n            return false;\n        }\n        const lowerCaseLabel = label.toLowerCase();\n        const lowerCaseValue = value.toLowerCase();\n        return (\n            lowerCaseLabel.includes(lowerCaseValue) &&\n            !selectedTagNames.includes(label) &&\n            !suggestion.header &&\n            !suggestion.customSuggestion\n        );\n    });\n\nexport type { TagManagerTag } from './TagManagerTag';\n\nexport type TagManagerProps = {\n    /**\n     * The list of existing tags to be listed.\n     */\n    tagList: TagManagerTag[];\n\n    /**\n     * The list of tags used as suggestions for the built-in AutoSuggest.\n     */\n    tagSuggestions: TagManagerTag[];\n\n    /**\n     * Callback function triggered when the list of tags changes.\n     *\n     * For instance when a tag was added by the AutoSuggest or when a tag is marked to be deleted.\n     *\n     * This function returns the updated list of tags where tags may have additional properties indicating whether they\n     * have to be removed or added to your data.\n     *\n     * @param newTags The updated list of tags.\n     */\n    onTagListChange?: (newTags: TagManagerTag[]) => void;\n\n    /**\n     * The placeholder message for the AutoSuggest input.\n     */\n    placeholder?: string;\n\n    /**\n     * The placeholder message for custom tag in the AutoSuggest dropdown.\n     *\n     * This is only relevant when having custom tags enabled.\n     */\n    customTagPlaceholder?: string;\n\n    /**\n     * The header message for existing tags in the AutoSuggest dropdown.\n     *\n     * This is only relevant when having custom tags enabled.\n     */\n    dropdownSeparatorText?: string;\n\n    /**\n     * Enables or disabled to add custom tags from the AutoSuggest dropdown.\n     *\n     * @default true\n     */\n    useCustomTags?: boolean;\n\n    /**\n     * Define whether the input shall be shown and to allow to select tags.\n     *\n     * @default true\n     */\n    showInput?: boolean;\n\n    /**\n     * The message to be shown when no tag suggestion could be found for the entered value of the AutoSuggest.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst TagManager = (props: TagManagerProps) => {\n    const {\n        tagList,\n        tagSuggestions,\n        placeholder,\n        className,\n        customTagPlaceholder,\n        dropdownSeparatorText,\n        onTagListChange = noop,\n        useCustomTags = true,\n        noItemMessage,\n        showInput = true,\n        ...remainingProps\n    } = props;\n\n    const [tags, setTags] = useState(tagList);\n    const [inputValue, setInputValue] = useState('');\n    const [currentSuggestions, setCurrentSuggestions] = useState([] as AutoSuggestSuggestion[]);\n\n    const getSuggestions = buildSuggestions(useCustomTags, customTagPlaceholder, dropdownSeparatorText);\n\n    // Update internal list of tags when they change from the outside i.e. when they have been saved,\n    // additionally, cleanup previous state for adding or removing tags\n    useEffect(() => setTags(compact(tagList.map(cleanupTagState))), [tagList]);\n\n    // build suggestion when passed tag suggestions passed change i.e. when a tag got selected and removed from the list\n    useEffect(() => setCurrentSuggestions(getSuggestions(inputValue, tagSuggestions)), [tagSuggestions]);\n\n    // build suggestions when input value change as it should filter the list on suggestions\n    useEffect(() => {\n        const selectedTagNames = compact(tags.map(tag => tag.label));\n        const value = inputValue || '';\n\n        const filteredList = filterSuggestions(\n            tagSuggestions as unknown as AutoSuggestSuggestion[],\n            selectedTagNames,\n            value\n        );\n        setCurrentSuggestions(getSuggestions(value, filteredList));\n    }, [tags, inputValue, tagSuggestions]);\n\n    const updateTags = (updatedTags: TagManagerTag[]) => {\n        setTags(updatedTags);\n        // Notify outside component\n        console.log(updatedTags);\n\n        onTagListChange(updatedTags);\n    };\n\n    const handleSuggestionsChange: AutoSuggestProps['onSuggestionsFetchRequested'] = ({ value }) =>\n        setInputValue(value);\n\n    const handleSuggestionSelected: AutoSuggestProps['onSuggestionSelected'] = (_, { suggestion }) => {\n        setInputValue('');\n\n        const newSuggestion = getNewSuggestion(suggestion);\n\n        if (hasTagAlreadySelected(tags, newSuggestion)) {\n            updateTags([...tags]);\n            return;\n        }\n\n        updateTags([...tags, newSuggestion]);\n    };\n\n    const updateTagsWithSelectedTag = (tagItems: TagManagerTag[], selectedTag: TagManagerTag) => {\n        return tagItems.map(tag => {\n            if (isEqual(tag.label, selectedTag.label)) {\n                // update tag and mark as \"to remove\"\n                if (tag.toRemove) {\n                    delete tag.toRemove;\n                } else {\n                    tag.toRemove = true;\n                }\n            }\n            return tag;\n        });\n    };\n\n    const handleRemoveFromTagList = (selectedTag: TagManagerTag) => {\n        if (selectedTag.toAdd) {\n            updateTags(tags.filter(tag => !isEqual(tag, selectedTag)));\n        } else {\n            updateTags(updateTagsWithSelectedTag(tags, selectedTag));\n        }\n    };\n\n    const inputProps = {\n        className: '',\n        placeholder: placeholder || 'Start typing ...',\n        value: inputValue,\n        tabIndex: 1,\n    };\n\n    const autoSuggestClasses = classNames(!isEmpty(tags) && 'margin-bottom-10');\n\n    return (\n        <div {...remainingProps} className={classNames('TagManager', className)}>\n            {showInput && (\n                <AutoSuggest\n                    className={autoSuggestClasses}\n                    inputProps={inputProps}\n                    suggestions={currentSuggestions}\n                    onSuggestionSelected={handleSuggestionSelected}\n                    onSuggestionsFetchRequested={handleSuggestionsChange}\n                    openOnFocus\n                    noItemMessage={noItemMessage}\n                />\n            )}\n            <TagManagerItemList tags={tags} onRemoveFromTagList={handleRemoveFromTagList} />\n        </div>\n    );\n};\n\nexport default TagManager;\n"],"names":["getCustomSuggestion","value","placeholder","jsx","CustomSuggestionItem","isEmpty","getSuggestionSeparator","dropdownSeparatorText","cleanupTagState","tag","hasTagAlreadySelected","tags","newSuggestion","getNewSuggestion","suggestion","buildSuggestions","useCustomTags","customTagPlaceholder","suggestions","cleanedSuggestions","item","hasDropdownSeparatorText","compact","filterSuggestions","selectedTagNames","label","lowerCaseLabel","lowerCaseValue","TagManager","props","tagList","tagSuggestions","className","onTagListChange","noop","noItemMessage","showInput","remainingProps","setTags","useState","inputValue","setInputValue","currentSuggestions","setCurrentSuggestions","getSuggestions","useEffect","filteredList","updateTags","updatedTags","handleSuggestionsChange","handleSuggestionSelected","_","updateTagsWithSelectedTag","tagItems","selectedTag","isEqual","handleRemoveFromTagList","inputProps","autoSuggestClasses","classNames","jsxs","AutoSuggest","TagManagerItemList"],"mappings":"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"}
+{"version":3,"file":"TagManager.js","sources":["../../../src/components/tagManager/TagManager.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { compact, isEmpty, noop } from 'es-toolkit/compat';\nimport { isEqual } from 'es-toolkit/predicate';\n\nimport AutoSuggest, { type AutoSuggestProps, type AutoSuggestSuggestion } from '../autosuggest/AutoSuggest';\nimport CustomSuggestionItem from './CustomSuggestionItem';\nimport TagManagerItemList from './TagManagerItemList';\nimport type { TagManagerTag } from './TagManagerTag';\n\nconst getCustomSuggestion = (value: string, placeholder: string | undefined): AutoSuggestSuggestion => ({\n    customSuggestion: <CustomSuggestionItem value={value} placeholder={placeholder} />,\n    label: value,\n    disabled: isEmpty(value),\n});\n\nconst getSuggestionSeparator = (dropdownSeparatorText: string): AutoSuggestSuggestion => ({\n    header: true,\n    label: dropdownSeparatorText,\n});\n\nconst cleanupTagState = (tag: TagManagerTag): TagManagerTag => {\n    delete tag.toAdd;\n    delete tag.toRemove;\n    return tag;\n};\n\nconst hasTagAlreadySelected = (tags: TagManagerTag[], newSuggestion: AutoSuggestSuggestion) =>\n    !!tags.find(tag => tag.label === newSuggestion.label);\n\nconst getNewSuggestion = (suggestion: AutoSuggestSuggestion) => {\n    const newSuggestion = suggestion.customSuggestion ? { label: suggestion.label } : suggestion;\n    newSuggestion.toAdd = true;\n    return newSuggestion;\n};\n\nconst buildSuggestions =\n    (useCustomTags: boolean, customTagPlaceholder: string | undefined, dropdownSeparatorText: string | undefined) =>\n    (value: string, suggestions: TagManagerTag[]): AutoSuggestSuggestion[] => {\n        const cleanedSuggestions = suggestions.map(cleanupTagState).filter(item => item.label);\n        const hasDropdownSeparatorText = typeof dropdownSeparatorText === 'string' && !isEmpty(dropdownSeparatorText);\n\n        return compact([\n            useCustomTags && getCustomSuggestion(value, customTagPlaceholder),\n            useCustomTags &&\n                !isEmpty(cleanedSuggestions) &&\n                hasDropdownSeparatorText &&\n                getSuggestionSeparator(dropdownSeparatorText),\n            ...(cleanedSuggestions as unknown as AutoSuggestSuggestion[]),\n        ]);\n    };\n\nconst filterSuggestions = (suggestions: AutoSuggestSuggestion[], selectedTagNames: string[], value = '') =>\n    suggestions.filter(suggestion => {\n        const label = suggestion.label;\n        if (!label) {\n            return false;\n        }\n        const lowerCaseLabel = label.toLowerCase();\n        const lowerCaseValue = value.toLowerCase();\n        return (\n            lowerCaseLabel.includes(lowerCaseValue) &&\n            !selectedTagNames.includes(label) &&\n            !suggestion.header &&\n            !suggestion.customSuggestion\n        );\n    });\n\nexport type { TagManagerTag } from './TagManagerTag';\n\nexport type TagManagerProps = {\n    /**\n     * The list of existing tags to be listed.\n     */\n    tagList: TagManagerTag[];\n\n    /**\n     * The list of tags used as suggestions for the built-in AutoSuggest.\n     */\n    tagSuggestions: TagManagerTag[];\n\n    /**\n     * Callback function triggered when the list of tags changes.\n     *\n     * For instance when a tag was added by the AutoSuggest or when a tag is marked to be deleted.\n     *\n     * This function returns the updated list of tags where tags may have additional properties indicating whether they\n     * have to be removed or added to your data.\n     *\n     * @param newTags The updated list of tags.\n     * \n     * @example\n     * [\n        {\n            label: 'Foo',\n        },\n        {\n            label: 'Bar',\n            toAdd: true,\n        },\n        {\n            label: 'Lorem ipsum',\n            toRemove: true,\n        }\n    ]\n     */\n    onTagListChange?: (newTags: TagManagerTag[]) => void;\n\n    /**\n     * The placeholder message for the AutoSuggest input.\n     */\n    placeholder?: string;\n\n    /**\n     * The placeholder message for custom tag in the AutoSuggest dropdown.\n     *\n     * This is only relevant when having custom tags enabled.\n     */\n    customTagPlaceholder?: string;\n\n    /**\n     * The header message for existing tags in the AutoSuggest dropdown.\n     *\n     * This is only relevant when having custom tags enabled.\n     */\n    dropdownSeparatorText?: string;\n\n    /**\n     * Enables or disabled to add custom tags from the AutoSuggest dropdown.\n     *\n     * @default true\n     */\n    useCustomTags?: boolean;\n\n    /**\n     * Define whether the input shall be shown and to allow to select tags.\n     *\n     * @default true\n     */\n    showInput?: boolean;\n\n    /**\n     * The message to be shown when no tag suggestion could be found for the entered value of the AutoSuggest.\n     */\n    noItemMessage?: string | React.ReactNode;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst TagManager = (props: TagManagerProps) => {\n    const {\n        tagList,\n        tagSuggestions,\n        placeholder,\n        className,\n        customTagPlaceholder,\n        dropdownSeparatorText,\n        onTagListChange = noop,\n        useCustomTags = true,\n        noItemMessage,\n        showInput = true,\n        ...remainingProps\n    } = props;\n\n    const [tags, setTags] = useState(tagList);\n    const [inputValue, setInputValue] = useState('');\n    const [currentSuggestions, setCurrentSuggestions] = useState([] as AutoSuggestSuggestion[]);\n\n    const getSuggestions = buildSuggestions(useCustomTags, customTagPlaceholder, dropdownSeparatorText);\n\n    // Update internal list of tags when they change from the outside i.e. when they have been saved,\n    // additionally, cleanup previous state for adding or removing tags\n    useEffect(() => setTags(compact(tagList.map(cleanupTagState))), [tagList]);\n\n    // build suggestion when passed tag suggestions passed change i.e. when a tag got selected and removed from the list\n    useEffect(() => setCurrentSuggestions(getSuggestions(inputValue, tagSuggestions)), [tagSuggestions]);\n\n    // build suggestions when input value change as it should filter the list on suggestions\n    useEffect(() => {\n        const selectedTagNames = compact(tags.map(tag => tag.label));\n        const value = inputValue || '';\n\n        const filteredList = filterSuggestions(\n            tagSuggestions as unknown as AutoSuggestSuggestion[],\n            selectedTagNames,\n            value\n        );\n        setCurrentSuggestions(getSuggestions(value, filteredList));\n    }, [tags, inputValue, tagSuggestions]);\n\n    const updateTags = (updatedTags: TagManagerTag[]) => {\n        setTags(updatedTags);\n        // Notify outside component\n        console.log(updatedTags);\n\n        onTagListChange(updatedTags);\n    };\n\n    const handleSuggestionsChange: AutoSuggestProps['onSuggestionsFetchRequested'] = ({ value }) =>\n        setInputValue(value);\n\n    const handleSuggestionSelected: AutoSuggestProps['onSuggestionSelected'] = (_, { suggestion }) => {\n        setInputValue('');\n\n        const newSuggestion = getNewSuggestion(suggestion);\n\n        if (hasTagAlreadySelected(tags, newSuggestion)) {\n            updateTags([...tags]);\n            return;\n        }\n\n        updateTags([...tags, newSuggestion]);\n    };\n\n    const updateTagsWithSelectedTag = (tagItems: TagManagerTag[], selectedTag: TagManagerTag) => {\n        return tagItems.map(tag => {\n            if (isEqual(tag.label, selectedTag.label)) {\n                // update tag and mark as \"to remove\"\n                if (tag.toRemove) {\n                    delete tag.toRemove;\n                } else {\n                    tag.toRemove = true;\n                }\n            }\n            return tag;\n        });\n    };\n\n    const handleRemoveFromTagList = (selectedTag: TagManagerTag) => {\n        if (selectedTag.toAdd) {\n            updateTags(tags.filter(tag => !isEqual(tag, selectedTag)));\n        } else {\n            updateTags(updateTagsWithSelectedTag(tags, selectedTag));\n        }\n    };\n\n    const inputProps = {\n        className: '',\n        placeholder: placeholder || 'Start typing ...',\n        value: inputValue,\n        tabIndex: 1,\n    };\n\n    const autoSuggestClasses = classNames(!isEmpty(tags) && 'margin-bottom-10');\n\n    return (\n        <div {...remainingProps} className={classNames('TagManager', className)}>\n            {showInput && (\n                <AutoSuggest\n                    className={autoSuggestClasses}\n                    inputProps={inputProps}\n                    suggestions={currentSuggestions}\n                    onSuggestionSelected={handleSuggestionSelected}\n                    onSuggestionsFetchRequested={handleSuggestionsChange}\n                    openOnFocus\n                    noItemMessage={noItemMessage}\n                />\n            )}\n            <TagManagerItemList tags={tags} onRemoveFromTagList={handleRemoveFromTagList} />\n        </div>\n    );\n};\n\nexport default TagManager;\n"],"names":["getCustomSuggestion","value","placeholder","jsx","CustomSuggestionItem","isEmpty","getSuggestionSeparator","dropdownSeparatorText","cleanupTagState","tag","hasTagAlreadySelected","tags","newSuggestion","getNewSuggestion","suggestion","buildSuggestions","useCustomTags","customTagPlaceholder","suggestions","cleanedSuggestions","item","hasDropdownSeparatorText","compact","filterSuggestions","selectedTagNames","label","lowerCaseLabel","lowerCaseValue","TagManager","props","tagList","tagSuggestions","className","onTagListChange","noop","noItemMessage","showInput","remainingProps","setTags","useState","inputValue","setInputValue","currentSuggestions","setCurrentSuggestions","getSuggestions","useEffect","filteredList","updateTags","updatedTags","handleSuggestionsChange","handleSuggestionSelected","_","updateTagsWithSelectedTag","tagItems","selectedTag","isEqual","handleRemoveFromTagList","inputProps","autoSuggestClasses","classNames","jsxs","AutoSuggest","TagManagerItemList"],"mappings":"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"}

package/components/tagManager/TagManagerTag.d.ts

@@ -1,5 +1,14 @@
 export type TagManagerTag = {
+    /**
+     * The visible text of the tag.
+     */
     label?: string;
+    /**
+     * Marks a tag that should be added (used to differentiate newly added tags).
+     */
     toAdd?: boolean;
+    /**
+     * Marks a tag that should be removed (used to differentiate tags flagged for deletion).
+     */
     toRemove?: boolean;
 };

package/components/teaser/Teaser.d.ts

@@ -1,5 +1,57 @@
 import { default as React, SyntheticEvent } from 'react';
-import { ButtonProps } from '../button/Button';
+import { BUTTON_STYLE } from '../button/Button';
+type TeaserButton = {
+    /**
+     * The text content for the button.
+     */
+    text?: string | React.ReactNode;
+    /**
+     * The button style.
+     *
+     * See the button styles definition for possible values.
+     *
+     * @default 'primary'
+     */
+    bsStyle?: BUTTON_STYLE;
+    /**
+     * Callback function for the button.
+     */
+    onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Additional classes added to the button.
+     */
+    className?: string;
+};
+type TeaserImage = {
+    /**
+     * The src URL for the image.
+     */
+    src: string;
+    /**
+     * The alternate text for the image.
+     */
+    alt?: string;
+    /**
+     * Defines whether the image is on the left or right side of the component.
+     *
+     * Possible values are: `'left'` and `'right'`.
+     */
+    align?: 'left' | 'right';
+    /**
+     * Callback function for the image.
+     */
+    onClick?: VoidFunction;
+    /**
+     * Ratio of the transparent image placeholder.
+     *
+     * Possible values are `'1:1'`, `'3:1'`, `'3:2'` and `'16:9'`.
+     */
+    aspectRatio?: '1:1' | '3:1' | '3:2' | '16:9';
+    /**
+     * Additional classes added to the image wrapper.
+     */
+    className?: string;
+};
 export type TeaserProps = {
     /**
      * The headline for the teaser.
@@ -12,65 +64,15 @@ export type TeaserProps = {
     /**
      * Defines an image to render.
      */
-    image?: {
-        /**
-         * The src URL for the image.
-         */
-        src: string;
-        /**
-         * The alternate text for the image.
-         */
-        alt?: string;
-        /**
-         * Defines whether the image is on the left or right side of the component.
-         *
-         * Possible values are: 'left' and 'right'.
-         */
-        align?: 'left' | 'right';
-        /**
-         * Callback function for the image.
-         */
-        onClick?: VoidFunction;
-        /**
-         * Ratio of the transparent image placeholder.
-         *
-         * Possible values are "1:1", "3:1", "3:2" and "16:9".
-         */
-        aspectRatio?: '1:1' | '3:1' | '3:2' | '16:9';
-        /**
-         * Additional classes added to the image wrapper.
-         */
-        className?: string;
-    };
+    image?: TeaserImage;
     /**
      * Defines a button to render with.
      */
-    button?: {
-        /**
-         * The text content for the button.
-         */
-        text?: string | React.ReactNode;
-        /**
-         * The button style.
-         *
-         * See the {@link ButtonProps} definition for possible values.
-         *
-         * @default 'primary'
-         */
-        bsStyle?: ButtonProps['bsStyle'];
-        /**
-         * Callback function for the button.
-         */
-        onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;
-        /**
-         * Additional classes added to the button.
-         */
-        className?: string;
-    };
+    button?: TeaserButton;
     /**
      * Defines where the teaser content is aligned including headline and image.
      *
-     * Possible values are: 'top' and 'center'.
+     * Possible values are: `'top'` and `'center'`.
      *
      * @default 'top'
      */
@@ -78,7 +80,7 @@ export type TeaserProps = {
     /**
      * Defines how the teaser content is segmented.
      *
-     * Possible values are: '50', '25:75', '75:25' and '100'.
+     * Possible values are: `'50'`, `'25:75'`, `'75:25'` and `'100'`.
      */
     segmentation?: '50' | '25:75' | '75:25' | '100';
     /**

package/components/teaser/Teaser.js.map

@@ -1 +1 @@
-{"version":3,"file":"Teaser.js","sources":["../../../src/components/teaser/Teaser.tsx"],"sourcesContent":["import type React from 'react';\nimport type { SyntheticEvent } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport Button, { type ButtonProps } from '../button/Button';\n\nexport type TeaserProps = {\n    /**\n     * The headline for the teaser.\n     */\n\n    headline?: string | React.ReactNode;\n    /**\n     * The actual content to show e.g. some kind of text.\n     */\n\n    content?: string | React.ReactNode;\n    /**\n     * Defines an image to render.\n     */\n\n    image?: {\n        /**\n         * The src URL for the image.\n         */\n        src: string;\n\n        /**\n         * The alternate text for the image.\n         */\n        alt?: string;\n\n        /**\n         * Defines whether the image is on the left or right side of the component.\n         *\n         * Possible values are: 'left' and 'right'.\n         */\n        align?: 'left' | 'right';\n\n        /**\n         * Callback function for the image.\n         */\n        onClick?: VoidFunction;\n\n        /**\n         * Ratio of the transparent image placeholder.\n         *\n         * Possible values are \"1:1\", \"3:1\", \"3:2\" and \"16:9\".\n         */\n        aspectRatio?: '1:1' | '3:1' | '3:2' | '16:9';\n\n        /**\n         * Additional classes added to the image wrapper.\n         */\n        className?: string;\n    };\n\n    /**\n     * Defines a button to render with.\n     */\n    button?: {\n        /**\n         * The text content for the button.\n         */\n        text?: string | React.ReactNode;\n\n        /**\n         * The button style.\n         *\n         * See the {@link ButtonProps} definition for possible values.\n         *\n         * @default 'primary'\n         */\n        bsStyle?: ButtonProps['bsStyle'];\n\n        /**\n         * Callback function for the button.\n         */\n        onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;\n\n        /**\n         * Additional classes added to the button.\n         */\n        className?: string;\n    };\n\n    /**\n     * Defines where the teaser content is aligned including headline and image.\n     *\n     * Possible values are: 'top' and 'center'.\n     *\n     * @default 'top'\n     */\n    verticalAlignment?: 'top' | 'center';\n\n    /**\n     * Defines how the teaser content is segmented.\n     *\n     * Possible values are: '50', '25:75', '75:25' and '100'.\n     */\n    segmentation?: '50' | '25:75' | '75:25' | '100';\n\n    /**\n     * Optional content for footer in case the prop \"button\" is not sufficient.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the wrapper.\n     */\n    className?: string;\n};\n\nconst Teaser = (props: TeaserProps) => {\n    const { segmentation, verticalAlignment = 'top' } = props;\n\n    const alignmentClass = verticalAlignment === 'center' ? 'align-items-center-sm' : '';\n\n    if (segmentation === '100') {\n        return <SingleColumnTeaser alignmentClass={alignmentClass} {...props} />;\n    }\n\n    // Thumbnail based layout for multiple segments or multiple teaser in a row\n    return <MultipleSegmentsOrRowsTeaser alignmentClass={alignmentClass} {...props} />;\n};\n\nexport default Teaser;\n\nconst SingleColumnTeaser = (props: TeaserProps & { alignmentClass: string }) => {\n    const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;\n\n    const wrapperClassNames = classNames(\n        'teaser panel panel-default panel-body padding-20 margin-bottom-20 text-center',\n        alignmentClass,\n        className\n    );\n\n    return (\n        <div className={wrapperClassNames}>\n            <TeaserHeadline headline={headline} segmentation={segmentation} />\n            <TeaserImageComp image={image} segmentation={segmentation} />\n            <TeaserContent content={content} segmentation={segmentation} />\n            <TeaserButtonComp button={button} />\n            <TeaserFooter footer={footer} />\n        </div>\n    );\n};\n\nconst MultipleSegmentsOrRowsTeaser = (props: TeaserProps & { alignmentClass: string }) => {\n    const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;\n\n    const wrapperClasses = classNames(\n        'teaser thumbnail display-flex-sm',\n        !segmentation && 'flex-column height-100pct-sm', // only for multiple teasers in a row\n        alignmentClass,\n        className\n    );\n\n    const captionClasses = classNames(\n        'caption',\n        image?.align === 'left' && 'flex-order-2-sm',\n        image?.align === 'right' && 'flex-order-1-sm',\n        segmentation === '50' && 'width-50pct-sm',\n        segmentation === '25:75' && 'width-50pct-sm width-25pct-lg',\n        segmentation === '75:25' && 'width-50pct-sm width-75pct-lg',\n        !segmentation && 'display-flex-sm flex-column-sm flex-1-0-sm'\n    );\n\n    return (\n        <div className={wrapperClasses}>\n            <TeaserImageComp image={image} segmentation={segmentation} />\n            {(headline || content || button) && (\n                <div className={captionClasses}>\n                    <TeaserHeadline headline={headline} segmentation={segmentation} />\n                    <TeaserContent content={content} segmentation={segmentation} />\n                    <TeaserButtonComp button={button} />\n                    <TeaserFooter footer={footer} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nconst TeaserHeadline = ({ headline, segmentation }: Pick<TeaserProps, 'headline' | 'segmentation'>) => {\n    if (!headline) {\n        return null;\n    }\n\n    return <h2 className={segmentation === '100' ? 'margin-top-20 margin-bottom-25' : 'margin-top-5'}>{headline}</h2>;\n};\n\nconst TeaserContent = ({ content, segmentation }: Pick<TeaserProps, 'content' | 'segmentation'>) => {\n    if (!content) {\n        return null;\n    }\n\n    const classes = classNames(\n        'teaser-content-wrapper text-size-16',\n        segmentation === '100' ? 'padding-left-25-sm padding-right-25-sm' : 'flex-1-0-sm'\n    );\n    return <div className={classes}>{content}</div>;\n};\n\nconst TeaserFooter = ({ footer }: Pick<TeaserProps, 'footer'>) => {\n    if (!footer) {\n        return null;\n    }\n\n    return <div className='teaser-footer-wrapper'>{footer}</div>;\n};\n\nconst TeaserButtonComp = ({ button }: Pick<TeaserProps, 'button'>) => {\n    if (!button) {\n        return null;\n    }\n\n    return (\n        <span>\n            <Button bsStyle={button.bsStyle ?? 'primary'} className={button.className} onClick={button.onClick}>\n                {button.text}\n            </Button>\n        </span>\n    );\n};\n\n/* eslint-disable max-len */\nconst placeholderImage1by1 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoCAQAAADnqhxvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODSFLsnJ3AAAPvUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDgTLCM9BHrU/AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTExLTE1VDEzOjEzOjMzKzAxOjAwgedH5AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMS0xNVQxMzoxMzozMyswMTowMPC6/1gAAAAASUVORK5CYII=';\n\nconst placeholderImage3by1 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAFNCAQAAAA55I0bAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODDQ/dKfdAAAFUUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIO/GUDmajv5qgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6NTIrMDE6MDAOPS7pAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjUyKzAxOjAwf2CWVQAAAABJRU5ErkJggg==';\n\nconst placeholderImage3by2 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAKaCAQAAAAHN7sRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODALwzjJEAAAKhUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIOCbQGM8brNAQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6MDIrMDE6MDBG3SCNAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjAyKzAxOjAwN4CYMQAAAABJRU5ErkJggg==';\n\nconst placeholderImage16by9 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAIwCAQAAAC/sImZAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiDBwMBx70M0fPAAAI3UlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAg55rgVfT+Sm9AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMi0yOFQxMTowNzozMCswMTowMOGwCPwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTItMjhUMTE6MDc6MzArMDE6MDCQ7bBAAAAAAElFTkSuQmCC';\n/* eslint-enable max-len */\n\nconst teaserPlaceholderImages = {\n    '1:1': placeholderImage1by1,\n    '3:1': placeholderImage3by1,\n    '3:2': placeholderImage3by2,\n    '16:9': placeholderImage16by9,\n} as const;\n\nconst TeaserImageComp = ({ image, segmentation }: Pick<TeaserProps, 'image' | 'segmentation'>) => {\n    if (!image) {\n        return null;\n    }\n\n    let specificClassNames;\n    if (segmentation !== '100') {\n        specificClassNames = classNames(\n            image.align === 'left' && 'flex-order-1-sm padding-left-20-sm',\n            image.align === 'right' && 'flex-order-2-sm padding-right-20-sm',\n            segmentation === '50' && 'width-50pct-sm',\n            segmentation === '25:75' && 'width-50pct-sm width-75pct-lg',\n            segmentation === '75:25' && 'width-50pct-sm width-25pct-lg',\n            segmentation && 'padding-top-20-sm padding-bottom-20-sm'\n        );\n    }\n\n    const imageWrapperClassNames = classNames(\n        'teaser-image-wrapper',\n        specificClassNames,\n        image.className && image.className\n    );\n\n    const callback = image?.onClick ?? noop;\n\n    return (\n        <div className={imageWrapperClassNames} onClick={callback}>\n            <img\n                className='img-responsive cover center'\n                src={teaserPlaceholderImages[image.aspectRatio!] ?? placeholderImage16by9}\n                alt={image.alt ?? ''}\n                style={{ backgroundImage: `url(${image.src})` }}\n            />\n        </div>\n    );\n};\n"],"names":["Teaser","props","segmentation","verticalAlignment","alignmentClass","jsx","SingleColumnTeaser","MultipleSegmentsOrRowsTeaser","headline","content","footer","image","button","className","wrapperClassNames","classNames","jsxs","TeaserHeadline","TeaserImageComp","TeaserContent","TeaserButtonComp","TeaserFooter","wrapperClasses","captionClasses","classes","Button","placeholderImage1by1","placeholderImage3by1","placeholderImage3by2","placeholderImage16by9","teaserPlaceholderImages","specificClassNames","imageWrapperClassNames","callback","noop"],"mappings":"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"}
+{"version":3,"file":"Teaser.js","sources":["../../../src/components/teaser/Teaser.tsx"],"sourcesContent":["import type React from 'react';\nimport type { SyntheticEvent } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nimport Button, { type BUTTON_STYLE } from '../button/Button';\n\ntype TeaserButton = {\n    /**\n     * The text content for the button.\n     */\n    text?: string | React.ReactNode;\n\n    /**\n     * The button style.\n     *\n     * See the button styles definition for possible values.\n     *\n     * @default 'primary'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Callback function for the button.\n     */\n    onClick?: (event: SyntheticEvent<HTMLButtonElement, MouseEvent>) => void;\n\n    /**\n     * Additional classes added to the button.\n     */\n    className?: string;\n};\n\ntype TeaserImage = {\n    /**\n     * The src URL for the image.\n     */\n    src: string;\n\n    /**\n     * The alternate text for the image.\n     */\n    alt?: string;\n\n    /**\n     * Defines whether the image is on the left or right side of the component.\n     *\n     * Possible values are: `'left'` and `'right'`.\n     */\n    align?: 'left' | 'right';\n\n    /**\n     * Callback function for the image.\n     */\n    onClick?: VoidFunction;\n\n    /**\n     * Ratio of the transparent image placeholder.\n     *\n     * Possible values are `'1:1'`, `'3:1'`, `'3:2'` and `'16:9'`.\n     */\n    aspectRatio?: '1:1' | '3:1' | '3:2' | '16:9';\n\n    /**\n     * Additional classes added to the image wrapper.\n     */\n    className?: string;\n};\n\nexport type TeaserProps = {\n    /**\n     * The headline for the teaser.\n     */\n    headline?: string | React.ReactNode;\n\n    /**\n     * The actual content to show e.g. some kind of text.\n     */\n    content?: string | React.ReactNode;\n\n    /**\n     * Defines an image to render.\n     */\n    image?: TeaserImage;\n\n    /**\n     * Defines a button to render with.\n     */\n    button?: TeaserButton;\n\n    /**\n     * Defines where the teaser content is aligned including headline and image.\n     *\n     * Possible values are: `'top'` and `'center'`.\n     *\n     * @default 'top'\n     */\n    verticalAlignment?: 'top' | 'center';\n\n    /**\n     * Defines how the teaser content is segmented.\n     *\n     * Possible values are: `'50'`, `'25:75'`, `'75:25'` and `'100'`.\n     */\n    segmentation?: '50' | '25:75' | '75:25' | '100';\n\n    /**\n     * Optional content for footer in case the prop \"button\" is not sufficient.\n     */\n    footer?: string | React.ReactNode;\n\n    /**\n     * Additional classes added to the wrapper.\n     */\n    className?: string;\n};\n\nconst Teaser = (props: TeaserProps) => {\n    const { segmentation, verticalAlignment = 'top' } = props;\n\n    const alignmentClass = verticalAlignment === 'center' ? 'align-items-center-sm' : '';\n\n    if (segmentation === '100') {\n        return <SingleColumnTeaser alignmentClass={alignmentClass} {...props} />;\n    }\n\n    // Thumbnail based layout for multiple segments or multiple teaser in a row\n    return <MultipleSegmentsOrRowsTeaser alignmentClass={alignmentClass} {...props} />;\n};\n\nexport default Teaser;\n\nconst SingleColumnTeaser = (props: TeaserProps & { alignmentClass: string }) => {\n    const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;\n\n    const wrapperClassNames = classNames(\n        'teaser panel panel-default panel-body padding-20 margin-bottom-20 text-center',\n        alignmentClass,\n        className\n    );\n\n    return (\n        <div className={wrapperClassNames}>\n            <TeaserHeadline headline={headline} segmentation={segmentation} />\n            <TeaserImageComp image={image} segmentation={segmentation} />\n            <TeaserContent content={content} segmentation={segmentation} />\n            <TeaserButtonComp button={button} />\n            <TeaserFooter footer={footer} />\n        </div>\n    );\n};\n\nconst MultipleSegmentsOrRowsTeaser = (props: TeaserProps & { alignmentClass: string }) => {\n    const { headline, content, footer, image, button, segmentation, className, alignmentClass } = props;\n\n    const wrapperClasses = classNames(\n        'teaser thumbnail display-flex-sm',\n        !segmentation && 'flex-column height-100pct-sm', // only for multiple teasers in a row\n        alignmentClass,\n        className\n    );\n\n    const captionClasses = classNames(\n        'caption',\n        image?.align === 'left' && 'flex-order-2-sm',\n        image?.align === 'right' && 'flex-order-1-sm',\n        segmentation === '50' && 'width-50pct-sm',\n        segmentation === '25:75' && 'width-50pct-sm width-25pct-lg',\n        segmentation === '75:25' && 'width-50pct-sm width-75pct-lg',\n        !segmentation && 'display-flex-sm flex-column-sm flex-1-0-sm'\n    );\n\n    return (\n        <div className={wrapperClasses}>\n            <TeaserImageComp image={image} segmentation={segmentation} />\n            {(headline || content || button) && (\n                <div className={captionClasses}>\n                    <TeaserHeadline headline={headline} segmentation={segmentation} />\n                    <TeaserContent content={content} segmentation={segmentation} />\n                    <TeaserButtonComp button={button} />\n                    <TeaserFooter footer={footer} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nconst TeaserHeadline = ({ headline, segmentation }: Pick<TeaserProps, 'headline' | 'segmentation'>) => {\n    if (!headline) {\n        return null;\n    }\n\n    return <h2 className={segmentation === '100' ? 'margin-top-20 margin-bottom-25' : 'margin-top-5'}>{headline}</h2>;\n};\n\nconst TeaserContent = ({ content, segmentation }: Pick<TeaserProps, 'content' | 'segmentation'>) => {\n    if (!content) {\n        return null;\n    }\n\n    const classes = classNames(\n        'teaser-content-wrapper text-size-16',\n        segmentation === '100' ? 'padding-left-25-sm padding-right-25-sm' : 'flex-1-0-sm'\n    );\n    return <div className={classes}>{content}</div>;\n};\n\nconst TeaserFooter = ({ footer }: Pick<TeaserProps, 'footer'>) => {\n    if (!footer) {\n        return null;\n    }\n\n    return <div className='teaser-footer-wrapper'>{footer}</div>;\n};\n\nconst TeaserButtonComp = ({ button }: Pick<TeaserProps, 'button'>) => {\n    if (!button) {\n        return null;\n    }\n\n    return (\n        <span>\n            <Button bsStyle={button.bsStyle ?? 'primary'} className={button.className} onClick={button.onClick}>\n                {button.text}\n            </Button>\n        </span>\n    );\n};\n\n/* eslint-disable max-len */\nconst placeholderImage1by1 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoCAQAAADnqhxvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODSFLsnJ3AAAPvUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDgTLCM9BHrU/AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTExLTE1VDEzOjEzOjMzKzAxOjAwgedH5AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0xMS0xNVQxMzoxMzozMyswMTowMPC6/1gAAAAASUVORK5CYII=';\n\nconst placeholderImage3by1 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAFNCAQAAAA55I0bAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODDQ/dKfdAAAFUUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIO/GUDmajv5qgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6NTIrMDE6MDAOPS7pAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjUyKzAxOjAwf2CWVQAAAABJRU5ErkJggg==';\n\nconst placeholderImage3by2 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAKaCAQAAAAHN7sRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiCw8ODALwzjJEAAAKhUlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIOCbQGM8brNAQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMTVUMTM6MTI6MDIrMDE6MDBG3SCNAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTE1VDEzOjEyOjAyKzAxOjAwN4CYMQAAAABJRU5ErkJggg==';\n\nconst placeholderImage16by9 =\n    'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAIwCAQAAAC/sImZAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiDBwMBx70M0fPAAAI3UlEQVR42u3VMQ0AIADAMMC/ZxDBQVhaBfs29wAAfrdeBwAA9wwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAgwdAAIMHQACDB0AAg55rgVfT+Sm9AAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0xMi0yOFQxMTowNzozMCswMTowMOGwCPwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMTItMjhUMTE6MDc6MzArMDE6MDCQ7bBAAAAAAElFTkSuQmCC';\n/* eslint-enable max-len */\n\nconst teaserPlaceholderImages = {\n    '1:1': placeholderImage1by1,\n    '3:1': placeholderImage3by1,\n    '3:2': placeholderImage3by2,\n    '16:9': placeholderImage16by9,\n} as const;\n\nconst TeaserImageComp = ({ image, segmentation }: Pick<TeaserProps, 'image' | 'segmentation'>) => {\n    if (!image) {\n        return null;\n    }\n\n    let specificClassNames;\n    if (segmentation !== '100') {\n        specificClassNames = classNames(\n            image.align === 'left' && 'flex-order-1-sm padding-left-20-sm',\n            image.align === 'right' && 'flex-order-2-sm padding-right-20-sm',\n            segmentation === '50' && 'width-50pct-sm',\n            segmentation === '25:75' && 'width-50pct-sm width-75pct-lg',\n            segmentation === '75:25' && 'width-50pct-sm width-25pct-lg',\n            segmentation && 'padding-top-20-sm padding-bottom-20-sm'\n        );\n    }\n\n    const imageWrapperClassNames = classNames(\n        'teaser-image-wrapper',\n        specificClassNames,\n        image.className && image.className\n    );\n\n    const callback = image?.onClick ?? noop;\n\n    return (\n        <div className={imageWrapperClassNames} onClick={callback}>\n            <img\n                className='img-responsive cover center'\n                src={teaserPlaceholderImages[image.aspectRatio!] ?? placeholderImage16by9}\n                alt={image.alt ?? ''}\n                style={{ backgroundImage: `url(${image.src})` }}\n            />\n        </div>\n    );\n};\n"],"names":["Teaser","props","segmentation","verticalAlignment","alignmentClass","jsx","SingleColumnTeaser","MultipleSegmentsOrRowsTeaser","headline","content","footer","image","button","className","wrapperClassNames","classNames","jsxs","TeaserHeadline","TeaserImageComp","TeaserContent","TeaserButtonComp","TeaserFooter","wrapperClasses","captionClasses","classes","Button","placeholderImage1by1","placeholderImage3by1","placeholderImage3by2","placeholderImage16by9","teaserPlaceholderImages","specificClassNames","imageWrapperClassNames","callback","noop"],"mappings":"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"}

package/components/teaser/TeaserContainer.d.ts

@@ -10,7 +10,7 @@ export type TeaserContainerProps = {
      *
      * It is recommended to define "teasersPerRow" when having more than 4 teasers.
      *
-     * Possible values are: 1, 2, 3, 4, 6, 12
+     * Possible values are: `1` `2` `3` `4` `6` `12`
      */
     teaserPerRow?: TeasersPerRow;
     /**

package/components/teaser/TeaserContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeaserContainer.js","sources":["../../../src/components/teaser/TeaserContainer.tsx"],"sourcesContent":["import { Children, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nconst getGridClasses = (amount: number) => {\n    switch (amount) {\n        case 1:\n            return 'col-12';\n        case 2:\n            return 'col-12 col-sm-6';\n        case 3:\n            return 'col-12 col-md-4';\n        case 4:\n            return 'col-12 col-md-6 col-lg-3';\n        case 6:\n            return 'col-12 col-sm-4 col-lg-2';\n        case 12:\n            return 'col-12 col-sm-1';\n        default:\n            return 'col-12';\n    }\n};\n\nexport type TeasersPerRow = 1 | 2 | 3 | 4 | 6 | 12;\n\nexport type TeaserContainerProps = {\n    /**\n     * Defines how many children are rendered into a row.\n     *\n     * If \"teaserPerRow\" is not defined, the container tries to put all children in a row with regard to the\n     * Bootstrap grid. This is done by dividing the amount of children by 12 in order  to figure out the col grid\n     * classes.\n     *\n     * It is recommended to define \"teasersPerRow\" when having more than 4 teasers.\n     *\n     * Possible values are: 1, 2, 3, 4, 6, 12\n     */\n    teaserPerRow?: TeasersPerRow;\n\n    /**\n     * Optional string for additional classes added to each column of a child.\n     */\n    columnClassName?: string;\n\n    /**\n     * Optional string for additional classes added to the row.\n     */\n    className?: string;\n};\n\nconst TeaserContainer = (props: PropsWithChildren<TeaserContainerProps>) => {\n    const { className, teaserPerRow, children, columnClassName } = props;\n\n    const rowClassNames = classNames('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', className);\n\n    const columnClassNames = teaserPerRow\n        ? getGridClasses(teaserPerRow)\n        : getGridClasses(Children.count(children) || 1);\n\n    const aggregatedColumnClassNames = classNames(columnClassNames, columnClassName);\n\n    return (\n        <div className={rowClassNames}>\n            {Children.map(children, child => {\n                return <div className={aggregatedColumnClassNames}>{child}</div>;\n            })}\n        </div>\n    );\n};\n\nexport default TeaserContainer;\n"],"names":["getGridClasses","amount","TeaserContainer","props","className","teaserPerRow","children","columnClassName","rowClassNames","classNames","columnClassNames","Children","aggregatedColumnClassNames","child","jsx"],"mappings":";;;AAGA,MAAMA,IAAiB,CAACC,MAAmB;AACvC,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GA6BMC,IAAkB,CAACC,MAAmD;AACxE,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,UAAAC,GAAU,iBAAAC,MAAoBJ,GAEzDK,IAAgBC,EAAW,oBAAoB,OAAO,gCAAgCL,CAAS,GAE/FM,IACAV,EADmBK,KAEJM,EAAS,MAAML,CAAQ,KAAK,CADhB,GAG3BM,IAA6BH,EAAWC,GAAkBH,CAAe;AAE/E,2BACK,OAAA,EAAI,WAAWC,GACX,UAAAG,EAAS,IAAIL,GAAU,CAAAO,MACb,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAC,GAAM,CAC7D,EAAA,CACL;AAER;"}
+{"version":3,"file":"TeaserContainer.js","sources":["../../../src/components/teaser/TeaserContainer.tsx"],"sourcesContent":["import { Children, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nconst getGridClasses = (amount: number) => {\n    switch (amount) {\n        case 1:\n            return 'col-12';\n        case 2:\n            return 'col-12 col-sm-6';\n        case 3:\n            return 'col-12 col-md-4';\n        case 4:\n            return 'col-12 col-md-6 col-lg-3';\n        case 6:\n            return 'col-12 col-sm-4 col-lg-2';\n        case 12:\n            return 'col-12 col-sm-1';\n        default:\n            return 'col-12';\n    }\n};\n\nexport type TeasersPerRow = 1 | 2 | 3 | 4 | 6 | 12;\n\nexport type TeaserContainerProps = {\n    /**\n     * Defines how many children are rendered into a row.\n     *\n     * If \"teaserPerRow\" is not defined, the container tries to put all children in a row with regard to the\n     * Bootstrap grid. This is done by dividing the amount of children by 12 in order  to figure out the col grid\n     * classes.\n     *\n     * It is recommended to define \"teasersPerRow\" when having more than 4 teasers.\n     *\n     * Possible values are: `1` `2` `3` `4` `6` `12`\n     */\n    teaserPerRow?: TeasersPerRow;\n\n    /**\n     * Optional string for additional classes added to each column of a child.\n     */\n    columnClassName?: string;\n\n    /**\n     * Optional string for additional classes added to the row.\n     */\n    className?: string;\n};\n\nconst TeaserContainer = (props: PropsWithChildren<TeaserContainerProps>) => {\n    const { className, teaserPerRow, children, columnClassName } = props;\n\n    const rowClassNames = classNames('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', className);\n\n    const columnClassNames = teaserPerRow\n        ? getGridClasses(teaserPerRow)\n        : getGridClasses(Children.count(children) || 1);\n\n    const aggregatedColumnClassNames = classNames(columnClassNames, columnClassName);\n\n    return (\n        <div className={rowClassNames}>\n            {Children.map(children, child => {\n                return <div className={aggregatedColumnClassNames}>{child}</div>;\n            })}\n        </div>\n    );\n};\n\nexport default TeaserContainer;\n"],"names":["getGridClasses","amount","TeaserContainer","props","className","teaserPerRow","children","columnClassName","rowClassNames","classNames","columnClassNames","Children","aggregatedColumnClassNames","child","jsx"],"mappings":";;;AAGA,MAAMA,IAAiB,CAACC,MAAmB;AACvC,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GA6BMC,IAAkB,CAACC,MAAmD;AACxE,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,UAAAC,GAAU,iBAAAC,MAAoBJ,GAEzDK,IAAgBC,EAAW,oBAAoB,OAAO,gCAAgCL,CAAS,GAE/FM,IACAV,EADmBK,KAEJM,EAAS,MAAML,CAAQ,KAAK,CADhB,GAG3BM,IAA6BH,EAAWC,GAAkBH,CAAe;AAE/E,2BACK,OAAA,EAAI,WAAWC,GACX,UAAAG,EAAS,IAAIL,GAAU,CAAAO,MACb,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GAA6B,UAAAC,GAAM,CAC7D,EAAA,CACL;AAER;"}

package/components/tooltip/SimpleTooltip.d.ts

@@ -1,8 +1,14 @@
-import { default as React, MutableRefObject, PropsWithChildren } from 'react';
+import { MutableRefObject, PropsWithChildren } from 'react';
 import { TooltipProps } from './Tooltip';
 import { TriggerType } from '../../values/Trigger';
-export type delayProp = {
+export type DelayProp = {
+    /**
+     * A millisecond delay amount before showing the Overlay once triggered.
+     */
     show: number;
+    /**
+     * A millisecond delay amount before hiding the Overlay once triggered.
+     */
     hide: number;
 };
 export type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {
@@ -12,7 +18,13 @@ export type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {
     content: string | React.ReactNode;
     /**
      * Specify which action or actions trigger Overlay visibility.
-     * Possible values are: `hover`, `click`, `focus`
+     *
+     * Possible values are:
+     *
+     * - `'hover'`
+     * - `'click'`
+     * - `'focus'`
+     *
      * @default 'hover'
      */
     trigger?: TriggerType;
@@ -23,8 +35,14 @@ export type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {
     /**
      * A millisecond delay amount to show the Overlay once triggered.
      * If passed an Object, you can control the show and hide timeouts individually.
+     *
+     * @example
+     * {
+     *     show: 1_000,
+     *     delay: 500,
+     * }
      */
-    delay?: number | delayProp;
+    delay?: number | DelayProp;
     /**
      * A Popper.js config object passed to the the underlying popper instance.
      */

package/components/tooltip/SimpleTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleTooltip.js","sources":["../../../src/components/tooltip/SimpleTooltip.tsx"],"sourcesContent":["import React, { type MutableRefObject, type PropsWithChildren } from 'react';\n\nimport Tooltip, { type TooltipProps } from './Tooltip';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\n\nexport type delayProp = {\n    show: number;\n    hide: number;\n};\n\nexport type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {\n    /**\n     * The tooltip content.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility.\n     * Possible values are: `hover`, `click`, `focus`\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * The react ref object assigned to the target of the tooltip.\n     */\n    targetRef?: MutableRefObject<HTMLDivElement>;\n\n    /**\n     * A millisecond delay amount to show the Overlay once triggered.\n     * If passed an Object, you can control the show and hide timeouts individually.\n     */\n    delay?: number | delayProp;\n\n    /**\n     * A Popper.js config object passed to the the underlying popper instance.\n     */\n    popperConfig?: object;\n};\n\nconst SimpleTooltip = (props: PropsWithChildren<SimpleTooltipProps>) => {\n    const {\n        children,\n        placement = PLACEMENT.AUTO,\n        trigger,\n        content,\n        delay,\n        popperConfig,\n        targetRef,\n        ...remainingProps\n    } = props;\n\n    return (\n        <OverlayTrigger\n            placement={placement}\n            trigger={trigger}\n            overlay={\n                <Tooltip {...remainingProps} ref={targetRef}>\n                    {content}\n                </Tooltip>\n            }\n            delay={delay}\n            popperConfig={popperConfig}\n        >\n            {children}\n        </OverlayTrigger>\n    );\n};\n\nSimpleTooltip.TRIGGER_CLICK = TRIGGER.CLICK;\nSimpleTooltip.TRIGGER_HOVER = TRIGGER.HOVER;\nSimpleTooltip.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\nexport default SimpleTooltip;\n"],"names":["SimpleTooltip","props","children","placement","PLACEMENT","trigger","content","delay","popperConfig","targetRef","remainingProps","jsx","OverlayTrigger","Tooltip","TRIGGER"],"mappings":";;;;;AA0CA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC,IAAYC,EAAU;AAAA,IACtB,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT;AAEJ,SACI,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAAT;AAAA,MACA,SAAAE;AAAA,MACA,SACI,gBAAAM,EAACE,GAAA,EAAS,GAAGH,GAAgB,KAAKD,GAC7B,UAAAH,GACL;AAAA,MAEJ,OAAAC;AAAA,MACA,cAAAC;AAAA,MAEC,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAF,EAAc,gBAAgBc,EAAQ;AACtCd,EAAc,gBAAgBc,EAAQ;AACtCd,EAAc,gBAAgBc,EAAQ;"}
+{"version":3,"file":"SimpleTooltip.js","sources":["../../../src/components/tooltip/SimpleTooltip.tsx"],"sourcesContent":["import type { MutableRefObject, PropsWithChildren } from 'react';\n\nimport Tooltip, { type TooltipProps } from './Tooltip';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\n\nexport type DelayProp = {\n    /**\n     * A millisecond delay amount before showing the Overlay once triggered.\n     */\n    show: number;\n\n    /**\n     * A millisecond delay amount before hiding the Overlay once triggered.\n     */\n    hide: number;\n};\n\nexport type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {\n    /**\n     * The tooltip content.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility.\n     *\n     * Possible values are:\n     *\n     * - `'hover'`\n     * - `'click'`\n     * - `'focus'`\n     *\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * The react ref object assigned to the target of the tooltip.\n     */\n    targetRef?: MutableRefObject<HTMLDivElement>;\n\n    /**\n     * A millisecond delay amount to show the Overlay once triggered.\n     * If passed an Object, you can control the show and hide timeouts individually.\n     *\n     * @example\n     * {\n     *     show: 1_000,\n     *     delay: 500,\n     * }\n     */\n    delay?: number | DelayProp;\n\n    /**\n     * A Popper.js config object passed to the the underlying popper instance.\n     */\n    popperConfig?: object;\n};\n\nconst SimpleTooltip = (props: PropsWithChildren<SimpleTooltipProps>) => {\n    const {\n        children,\n        placement = PLACEMENT.AUTO,\n        trigger,\n        content,\n        delay,\n        popperConfig,\n        targetRef,\n        ...remainingProps\n    } = props;\n\n    return (\n        <OverlayTrigger\n            placement={placement}\n            trigger={trigger}\n            overlay={\n                <Tooltip {...remainingProps} ref={targetRef}>\n                    {content}\n                </Tooltip>\n            }\n            delay={delay}\n            popperConfig={popperConfig}\n        >\n            {children}\n        </OverlayTrigger>\n    );\n};\n\nSimpleTooltip.TRIGGER_CLICK = TRIGGER.CLICK;\nSimpleTooltip.TRIGGER_HOVER = TRIGGER.HOVER;\nSimpleTooltip.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\nexport default SimpleTooltip;\n"],"names":["SimpleTooltip","props","children","placement","PLACEMENT","trigger","content","delay","popperConfig","targetRef","remainingProps","jsx","OverlayTrigger","Tooltip","TRIGGER"],"mappings":";;;;;AA6DA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC,IAAYC,EAAU;AAAA,IACtB,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT;AAEJ,SACI,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAAT;AAAA,MACA,SAAAE;AAAA,MACA,SACI,gBAAAM,EAACE,GAAA,EAAS,GAAGH,GAAgB,KAAKD,GAC7B,UAAAH,GACL;AAAA,MAEJ,OAAAC;AAAA,MACA,cAAAC;AAAA,MAEC,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAF,EAAc,gBAAgBc,EAAQ;AACtCd,EAAc,gBAAgBc,EAAQ;AACtCd,EAAc,gBAAgBc,EAAQ;"}

package/components/tooltip/Tooltip.d.ts

@@ -21,28 +21,48 @@ export type TooltipProps = {
     /**
      * Sets the direction the Tooltip is positioned towards. This is generally provided by the
      * OverlayTrigger component positioning the tooltip.
+     *
      * @default 'bottom'
      */
     placement?: ObjectValues<typeof PLACEMENT>;
     /**
      * Defines the position of the text content.
-     * Possible values are: `"center"` | `"left"` | `"right"`
+     *
+     * Possible values are:
+     *
+     * - `'center'`
+     * - `'left'`
+     * - `'right'`
+     *
      * @default 'center'
      */
     textAlignment?: ObjectValues<typeof TEXT_ALIGNMENT>;
     /**
      * Defines the look of the tooltip.
      * Possible values are: `default` and `onboarding`
+     *
      * @default 'default'
      */
     tooltipStyle?: ObjectValues<typeof STYLE_MAP>;
     /**
      * Defines the width of 'the tooltip.
-     * Possible values are: 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500
+     * Possible values are:
+     *
+     * - `'auto'`
+     * - `100`
+     * - `150`
+     * - `200`
+     * - `250`
+     * - `300`
+     * - `350`
+     * - `400`
+     * - `450`
+     * - `500`
      */
     width?: TooltipWidth;
     /**
      * Render Tooltips on mobile devices.
+     *
      * @default false
      */
     allowOnTouch?: boolean;

package/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    useEffect,\n    useState,\n    forwardRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type PropsWithChildren,\n    type HTMLAttributes,\n} from 'react';\nimport classNames from 'classnames';\nimport { omit } from 'es-toolkit/compat';\n\nimport { isDesktop } from '../../utils/deviceUtils';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TEXT_ALIGNMENT } from '../../values/TextAlignment';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport type { RefComponent } from '../../utils/RefComponent';\n\nconst STYLE_MAP = {\n    STYLE_DEFAULT: 'default',\n    STYLE_ONBOARDING: 'onboarding',\n} as const;\n\nconst TEXT_ALIGNMENT_MAP = {\n    TEXT_ALIGNMENT_LEFT: TEXT_ALIGNMENT.LEFT,\n    TEXT_ALIGNMENT_CENTER: TEXT_ALIGNMENT.CENTER,\n    TEXT_ALIGNMENT_RIGHT: TEXT_ALIGNMENT.RIGHT,\n} as const;\n\nexport type TooltipWidth = 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;\n\nexport type TooltipProps = {\n    /**\n     * An HTML id attribute, necessary for accessibility.\n     */\n    id?: string;\n\n    /**\n     * Sets the direction the Tooltip is positioned towards. This is generally provided by the\n     * OverlayTrigger component positioning the tooltip.\n     * @default 'bottom'\n     */\n    placement?: ObjectValues<typeof PLACEMENT>;\n\n    /**\n     * Defines the position of the text content.\n     * Possible values are: `\"center\"` | `\"left\"` | `\"right\"`\n     * @default 'center'\n     */\n    textAlignment?: ObjectValues<typeof TEXT_ALIGNMENT>;\n\n    /**\n     * Defines the look of the tooltip.\n     * Possible values are: `default` and `onboarding`\n     * @default 'default'\n     */\n    tooltipStyle?: ObjectValues<typeof STYLE_MAP>;\n\n    /**\n     * Defines the width of 'the tooltip.\n     * Possible values are: 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Render Tooltips on mobile devices.\n     * @default false\n     */\n    allowOnTouch?: boolean;\n\n    /**\n     * Additional props assigned to the arrow element. Internally used.\n     */\n    arrowProps?: Record<string, unknown>;\n\n    /**\n     * Additional style properties assigned to the wrapper element.\n     */\n    style?: CSSProperties;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Additional classes to be set on the inner element.\n     */\n    innerClassName?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'className'>;\n\nexport type TooltipType = RefComponent<PropsWithChildren<TooltipProps>> &\n    typeof STYLE_MAP &\n    typeof PLACEMENT &\n    typeof TEXT_ALIGNMENT_MAP;\n\nconst Tooltip = forwardRef((props: PropsWithChildren<TooltipProps>, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        allowOnTouch = false,\n        arrowProps,\n        children,\n        className = '',\n        innerClassName = '',\n        placement = 'bottom',\n        style,\n        textAlignment = 'center',\n        tooltipStyle = 'default',\n        width = 'auto',\n        ...remainingProps\n    } = omit(props, ['popper', 'positionLeft', 'positionTop']);\n\n    // Mount the component but don't show it yet via CSS.\n    // After it is mounted, we set the visibility class to use CSS animation\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => setIsMounted(true), []);\n\n    if (!isDesktop() && !allowOnTouch) {\n        // Workaround: we have to return a DOM node as otherwise the\n        // react-transition library would throw an error on mobile\n        // when triggering a browser reflow and accessing the node directly.\n        return <span className='display-none' />;\n    }\n\n    const wrapperClasses = classNames(\n        'tooltip',\n        tooltipStyle && `tooltip-${tooltipStyle}`,\n        placement,\n        'fade',\n        isMounted && 'show',\n        className\n    );\n\n    const innerClasses = classNames(\n        'tooltip-inner',\n        textAlignment && `text-${textAlignment}`,\n        width && `width-${width}`,\n        innerClassName && innerClassName\n    );\n\n    /* eslint-disable react/no-unknown-property */\n    return (\n        <div\n            {...remainingProps}\n            role='tooltip'\n            // x-placement is used by the css to define how to position the arrow.\n            x-placement={placement}\n            ref={ref}\n            className={wrapperClasses}\n            style={{ ...style }}\n            data-offset={20}\n        >\n            <div className='tooltip-arrow' {...arrowProps} />\n            <div className={innerClasses}>{children}</div>\n        </div>\n    );\n}) as TooltipType;\n\n// statics\nObject.assign(Tooltip, STYLE_MAP);\nObject.assign(Tooltip, PLACEMENT); // is keyed as-is\nObject.assign(Tooltip, TEXT_ALIGNMENT_MAP);\n\nexport default Tooltip;\n"],"names":["STYLE_MAP","TEXT_ALIGNMENT_MAP","TEXT_ALIGNMENT","Tooltip","forwardRef","props","ref","allowOnTouch","arrowProps","children","className","innerClassName","placement","style","textAlignment","tooltipStyle","width","remainingProps","omit","isMounted","setIsMounted","useState","useEffect","isDesktop","jsx","wrapperClasses","classNames","innerClasses","jsxs","PLACEMENT"],"mappings":";;;;;;;AAkBA,MAAMA,IAAY;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AACtB,GAEMC,IAAqB;AAAA,EACvB,qBAAqBC,EAAe;AAAA,EACpC,uBAAuBA,EAAe;AAAA,EACtC,sBAAsBA,EAAe;AACzC,GAqEMC,IAAUC,EAAW,CAACC,GAAwCC,MAAsC;AACtG,QAAM;AAAA,IACF,cAAAC,IAAe;AAAA,IACf,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,GAAGC;AAAA,EAAA,IACHC,EAAKb,GAAO,CAAC,UAAU,gBAAgB,aAAa,CAAC,GAInD,CAACc,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAGhD,MAFAC,EAAU,MAAMF,EAAa,EAAI,GAAG,CAAA,CAAE,GAElC,CAACG,OAAe,CAAChB;AAIjB,WAAO,gBAAAiB,EAAC,QAAA,EAAK,WAAU,eAAA,CAAe;AAG1C,QAAMC,IAAiBC;AAAA,IACnB;AAAA,IACAX,KAAgB,WAAWA,CAAY;AAAA,IACvCH;AAAA,IACA;AAAA,IACAO,KAAa;AAAA,IACbT;AAAA,EAAA,GAGEiB,IAAeD;AAAA,IACjB;AAAA,IACAZ,KAAiB,QAAQA,CAAa;AAAA,IACtCE,KAAS,SAASA,CAAK;AAAA,IACvBL,KAAkBA;AAAA,EAAA;AAItB,SACI,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,MAAK;AAAA,MAEL,eAAaL;AAAA,MACb,KAAAN;AAAA,MACA,WAAWmB;AAAA,MACX,OAAO,EAAE,GAAGZ,EAAA;AAAA,MACZ,eAAa;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,iBAAiB,GAAGhB,EAAA,CAAY;AAAA,QAC/C,gBAAAgB,EAAC,OAAA,EAAI,WAAWG,GAAe,UAAAlB,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD,CAAC;AAGD,OAAO,OAAON,GAASH,CAAS;AAChC,OAAO,OAAOG,GAAS0B,CAAS;AAChC,OAAO,OAAO1B,GAASF,CAAkB;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    useEffect,\n    useState,\n    forwardRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type PropsWithChildren,\n    type HTMLAttributes,\n} from 'react';\nimport classNames from 'classnames';\nimport { omit } from 'es-toolkit/compat';\n\nimport { isDesktop } from '../../utils/deviceUtils';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TEXT_ALIGNMENT } from '../../values/TextAlignment';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport type { RefComponent } from '../../utils/RefComponent';\n\nconst STYLE_MAP = {\n    STYLE_DEFAULT: 'default',\n    STYLE_ONBOARDING: 'onboarding',\n} as const;\n\nconst TEXT_ALIGNMENT_MAP = {\n    TEXT_ALIGNMENT_LEFT: TEXT_ALIGNMENT.LEFT,\n    TEXT_ALIGNMENT_CENTER: TEXT_ALIGNMENT.CENTER,\n    TEXT_ALIGNMENT_RIGHT: TEXT_ALIGNMENT.RIGHT,\n} as const;\n\nexport type TooltipWidth = 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;\n\nexport type TooltipProps = {\n    /**\n     * An HTML id attribute, necessary for accessibility.\n     */\n    id?: string;\n\n    /**\n     * Sets the direction the Tooltip is positioned towards. This is generally provided by the\n     * OverlayTrigger component positioning the tooltip.\n     *\n     * @default 'bottom'\n     */\n    placement?: ObjectValues<typeof PLACEMENT>;\n\n    /**\n     * Defines the position of the text content.\n     *\n     * Possible values are:\n     *\n     * - `'center'`\n     * - `'left'`\n     * - `'right'`\n     *\n     * @default 'center'\n     */\n    textAlignment?: ObjectValues<typeof TEXT_ALIGNMENT>;\n\n    /**\n     * Defines the look of the tooltip.\n     * Possible values are: `default` and `onboarding`\n     *\n     * @default 'default'\n     */\n    tooltipStyle?: ObjectValues<typeof STYLE_MAP>;\n\n    /**\n     * Defines the width of 'the tooltip.\n     * Possible values are:\n     *\n     * - `'auto'`\n     * - `100`\n     * - `150`\n     * - `200`\n     * - `250`\n     * - `300`\n     * - `350`\n     * - `400`\n     * - `450`\n     * - `500`\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Render Tooltips on mobile devices.\n     *\n     * @default false\n     */\n    allowOnTouch?: boolean;\n\n    /**\n     * Additional props assigned to the arrow element. Internally used.\n     */\n    arrowProps?: Record<string, unknown>;\n\n    /**\n     * Additional style properties assigned to the wrapper element.\n     */\n    style?: CSSProperties;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Additional classes to be set on the inner element.\n     */\n    innerClassName?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'className'>;\n\nexport type TooltipType = RefComponent<PropsWithChildren<TooltipProps>> &\n    typeof STYLE_MAP &\n    typeof PLACEMENT &\n    typeof TEXT_ALIGNMENT_MAP;\n\nconst Tooltip = forwardRef((props: PropsWithChildren<TooltipProps>, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        allowOnTouch = false,\n        arrowProps,\n        children,\n        className = '',\n        innerClassName = '',\n        placement = 'bottom',\n        style,\n        textAlignment = 'center',\n        tooltipStyle = 'default',\n        width = 'auto',\n        ...remainingProps\n    } = omit(props, ['popper', 'positionLeft', 'positionTop']);\n\n    // Mount the component but don't show it yet via CSS.\n    // After it is mounted, we set the visibility class to use CSS animation\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => setIsMounted(true), []);\n\n    if (!isDesktop() && !allowOnTouch) {\n        // Workaround: we have to return a DOM node as otherwise the\n        // react-transition library would throw an error on mobile\n        // when triggering a browser reflow and accessing the node directly.\n        return <span className='display-none' />;\n    }\n\n    const wrapperClasses = classNames(\n        'tooltip',\n        tooltipStyle && `tooltip-${tooltipStyle}`,\n        placement,\n        'fade',\n        isMounted && 'show',\n        className\n    );\n\n    const innerClasses = classNames(\n        'tooltip-inner',\n        textAlignment && `text-${textAlignment}`,\n        width && `width-${width}`,\n        innerClassName && innerClassName\n    );\n\n    /* eslint-disable react/no-unknown-property */\n    return (\n        <div\n            {...remainingProps}\n            role='tooltip'\n            // x-placement is used by the css to define how to position the arrow.\n            x-placement={placement}\n            ref={ref}\n            className={wrapperClasses}\n            style={{ ...style }}\n            data-offset={20}\n        >\n            <div className='tooltip-arrow' {...arrowProps} />\n            <div className={innerClasses}>{children}</div>\n        </div>\n    );\n}) as TooltipType;\n\n// statics\nObject.assign(Tooltip, STYLE_MAP);\nObject.assign(Tooltip, PLACEMENT); // is keyed as-is\nObject.assign(Tooltip, TEXT_ALIGNMENT_MAP);\n\nexport default Tooltip;\n"],"names":["STYLE_MAP","TEXT_ALIGNMENT_MAP","TEXT_ALIGNMENT","Tooltip","forwardRef","props","ref","allowOnTouch","arrowProps","children","className","innerClassName","placement","style","textAlignment","tooltipStyle","width","remainingProps","omit","isMounted","setIsMounted","useState","useEffect","isDesktop","jsx","wrapperClasses","classNames","innerClasses","jsxs","PLACEMENT"],"mappings":";;;;;;;AAkBA,MAAMA,IAAY;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AACtB,GAEMC,IAAqB;AAAA,EACvB,qBAAqBC,EAAe;AAAA,EACpC,uBAAuBA,EAAe;AAAA,EACtC,sBAAsBA,EAAe;AACzC,GAyFMC,IAAUC,EAAW,CAACC,GAAwCC,MAAsC;AACtG,QAAM;AAAA,IACF,cAAAC,IAAe;AAAA,IACf,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,GAAGC;AAAA,EAAA,IACHC,EAAKb,GAAO,CAAC,UAAU,gBAAgB,aAAa,CAAC,GAInD,CAACc,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAGhD,MAFAC,EAAU,MAAMF,EAAa,EAAI,GAAG,CAAA,CAAE,GAElC,CAACG,OAAe,CAAChB;AAIjB,WAAO,gBAAAiB,EAAC,QAAA,EAAK,WAAU,eAAA,CAAe;AAG1C,QAAMC,IAAiBC;AAAA,IACnB;AAAA,IACAX,KAAgB,WAAWA,CAAY;AAAA,IACvCH;AAAA,IACA;AAAA,IACAO,KAAa;AAAA,IACbT;AAAA,EAAA,GAGEiB,IAAeD;AAAA,IACjB;AAAA,IACAZ,KAAiB,QAAQA,CAAa;AAAA,IACtCE,KAAS,SAASA,CAAK;AAAA,IACvBL,KAAkBA;AAAA,EAAA;AAItB,SACI,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,MAAK;AAAA,MAEL,eAAaL;AAAA,MACb,KAAAN;AAAA,MACA,WAAWmB;AAAA,MACX,OAAO,EAAE,GAAGZ,EAAA;AAAA,MACZ,eAAa;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,iBAAiB,GAAGhB,EAAA,CAAY;AAAA,QAC/C,gBAAAgB,EAAC,OAAA,EAAI,WAAWG,GAAe,UAAAlB,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD,CAAC;AAGD,OAAO,OAAON,GAASH,CAAS;AAChC,OAAO,OAAOG,GAAS0B,CAAS;AAChC,OAAO,OAAO1B,GAASF,CAAkB;"}

package/components/video/ResponsiveVideo.d.ts

@@ -8,15 +8,20 @@ export type ResponsiveVideoProps = {
     src: string;
     /**
      * Defined the aspect ratio of the video.
-     * @default `16by9`
      *
      * Possible values are:
-     * `ResponsiveVideo.ASPECT_RATIO_4_BY_3`, `ResponsiveVideo.ASPECT_RATIO_16_BY_9` or
-     * `4by3`, `16by9`.
+     *
+     * - `ResponsiveVideo.ASPECT_RATIO_4_BY_3`
+     * - `ResponsiveVideo.ASPECT_RATIO_16_BY_9`
+     * - `'4by3'`
+     * - `'16by9'`
+     *
+     * @default '16by9'
      */
     aspectRatio: '4by3' | '16by9';
     /**
      * Allows the fullscreen feature of the underlying embedded iframe.
+     *
      * @default true
      */
     allowFullScreen?: boolean;