@rio-cloud/rio-uikit 2.1.0 → 2.2.1

package/components/tagManager/TagManager.js

@@ -1,8 +1,8 @@
 import { jsxs as O, jsx as b } from "react/jsx-runtime";
 import { useState as p, useEffect as f } from "react";
-import v from "classnames";
 import { noop as W, compact as h, isEmpty as d } from "es-toolkit/compat";
-import { isEqual as N } from "es-toolkit/predicate";
+import { isEqual as v } from "es-toolkit/predicate";
+import N from "../../utils/classNames.js";
 import { AutoSuggest as _ } from "../autosuggest/AutoSuggest.js";
 import k from "./CustomSuggestionItem.js";
 import z from "./TagManagerItemList.js";
@@ -61,15 +61,15 @@ const B = (e, t) => ({
       return;
     }
     m([...a, n]);
-  }, P = (o, r) => o.map((n) => (N(n.label, r.label) && (n.toRemove ? delete n.toRemove : n.toRemove = !0), n)), V = (o) => {
-    o.toAdd ? m(a.filter((r) => !N(r, o))) : m(P(a, o));
+  }, P = (o, r) => o.map((n) => (v(n.label, r.label) && (n.toRemove ? delete n.toRemove : n.toRemove = !0), n)), V = (o) => {
+    o.toAdd ? m(a.filter((r) => !v(r, o))) : m(P(a, o));
   }, j = {
     className: "",
     placeholder: l || "Start typing ...",
     value: c,
     tabIndex: 1
-  }, q = v(!d(a) && "margin-bottom-10");
-  return /* @__PURE__ */ O("div", { ...y, className: v("TagManager", u), children: [
+  }, q = N(!d(a) && "margin-bottom-10");
+  return /* @__PURE__ */ O("div", { ...y, className: N("TagManager", u), children: [
     x && /* @__PURE__ */ b(
       _,
       {

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     * @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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"}
+{"version":3,"file":"TagManager.js","sources":["../../../src/components/tagManager/TagManager.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { compact, isEmpty, noop } from 'es-toolkit/compat';\nimport { isEqual } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport AutoSuggest, { type AutoSuggestProps, type AutoSuggestSuggestion } from '../autosuggest/AutoSuggest';\nimport CustomSuggestionItem from './CustomSuggestionItem';\nimport TagManagerItemList from './TagManagerItemList';\n\nexport type TagManagerTag = {\n    /**\n     * The visible text of the tag.\n     */\n    label?: string;\n\n    /**\n     * Marks a tag that should be added (used to differentiate newly added tags).\n     */\n    toAdd?: boolean;\n\n    /**\n     * Marks a tag that should be removed (used to differentiate tags flagged for deletion).\n     */\n    toRemove?: boolean;\n};\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 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/TagManagerItemList.d.ts

@@ -1,4 +1,4 @@
-import { TagManagerTag } from './TagManagerTag';
+import { TagManagerTag } from './TagManager';
 export type TagManagerItemListProps = {
     tags: TagManagerTag[];
     onRemoveFromTagList?: (tag: TagManagerTag) => void;

package/components/tagManager/TagManagerItemList.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import a from "classnames";
+import a from "../../utils/classNames.js";
 import c from "../tag/TagList.js";
 import m from "../tag/Tag.js";
 const u = (r) => {

package/components/tagManager/TagManagerItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagManagerItemList.js","sources":["../../../src/components/tagManager/TagManagerItemList.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport TagList from '../tag/TagList';\nimport Tag from '../tag/Tag';\nimport type { TagManagerTag } from './TagManagerTag';\n\nexport type TagManagerItemListProps = {\n    tags: TagManagerTag[];\n    onRemoveFromTagList?: (tag: TagManagerTag) => void;\n};\n\nconst TagManagerItemList = (props: TagManagerItemListProps) => {\n    const { tags, onRemoveFromTagList = () => {} } = props;\n\n    return (\n        <TagList inline={false}>\n            {tags.map(tag => {\n                const tagClasses = classNames(\n                    tag.toAdd && 'border-color-success text-color-success',\n                    tag.toRemove && 'border-color-danger text-color-danger'\n                );\n\n                return (\n                    <Tag\n                        key={tag.label}\n                        className={tagClasses}\n                        deletable\n                        round={false}\n                        onClick={() => onRemoveFromTagList(tag)}\n                    >\n                        {tag.label}\n                    </Tag>\n                );\n            })}\n        </TagList>\n    );\n};\n\nexport default TagManagerItemList;\n"],"names":["TagManagerItemList","props","tags","onRemoveFromTagList","TagList","tag","tagClasses","classNames","jsx","Tag"],"mappings":";;;;AAWA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM,EAAE,MAAAC,GAAM,qBAAAC,IAAsB,MAAM;AAAA,EAAC,MAAMF;AAEjD,2BACKG,GAAA,EAAQ,QAAQ,IACZ,UAAAF,EAAK,IAAI,CAAAG,MAAO;AACb,UAAMC,IAAaC;AAAA,MACfF,EAAI,SAAS;AAAA,MACbA,EAAI,YAAY;AAAA,IAAA;AAGpB,WACI,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QAEG,WAAWH;AAAA,QACX,WAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS,MAAMH,EAAoBE,CAAG;AAAA,QAErC,UAAAA,EAAI;AAAA,MAAA;AAAA,MANAA,EAAI;AAAA,IAAA;AAAA,EASrB,CAAC,EAAA,CACL;AAER;"}
+{"version":3,"file":"TagManagerItemList.js","sources":["../../../src/components/tagManager/TagManagerItemList.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport TagList from '../tag/TagList';\nimport Tag from '../tag/Tag';\nimport type { TagManagerTag } from './TagManager';\n\nexport type TagManagerItemListProps = {\n    tags: TagManagerTag[];\n    onRemoveFromTagList?: (tag: TagManagerTag) => void;\n};\n\nconst TagManagerItemList = (props: TagManagerItemListProps) => {\n    const { tags, onRemoveFromTagList = () => {} } = props;\n\n    return (\n        <TagList inline={false}>\n            {tags.map(tag => {\n                const tagClasses = classNames(\n                    tag.toAdd && 'border-color-success text-color-success',\n                    tag.toRemove && 'border-color-danger text-color-danger'\n                );\n\n                return (\n                    <Tag\n                        key={tag.label}\n                        className={tagClasses}\n                        deletable\n                        round={false}\n                        onClick={() => onRemoveFromTagList(tag)}\n                    >\n                        {tag.label}\n                    </Tag>\n                );\n            })}\n        </TagList>\n    );\n};\n\nexport default TagManagerItemList;\n"],"names":["TagManagerItemList","props","tags","onRemoveFromTagList","TagList","tag","tagClasses","classNames","jsx","Tag"],"mappings":";;;;AAUA,MAAMA,IAAqB,CAACC,MAAmC;AAC3D,QAAM,EAAE,MAAAC,GAAM,qBAAAC,IAAsB,MAAM;AAAA,EAAC,MAAMF;AAEjD,2BACKG,GAAA,EAAQ,QAAQ,IACZ,UAAAF,EAAK,IAAI,CAAAG,MAAO;AACb,UAAMC,IAAaC;AAAA,MACfF,EAAI,SAAS;AAAA,MACbA,EAAI,YAAY;AAAA,IAAA;AAGpB,WACI,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QAEG,WAAWH;AAAA,QACX,WAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS,MAAMH,EAAoBE,CAAG;AAAA,QAErC,UAAAA,EAAI;AAAA,MAAA;AAAA,MANAA,EAAI;AAAA,IAAA;AAAA,EASrB,CAAC,EAAA,CACL;AAER;"}

package/components/teaser/Teaser.js

@@ -1,6 +1,6 @@
 import { jsx as d, jsxs as s } from "react/jsx-runtime";
-import Q from "classnames";
 import { noop as i } from "es-toolkit/function";
+import Q from "../../utils/classNames.js";
 import o from "../button/Button.js";
 const O = (A) => {
   const { segmentation: g, verticalAlignment: M = "top" } = A, w = M === "center" ? "align-items-center-sm" : "";

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 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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"}
+{"version":3,"file":"Teaser.js","sources":["../../../src/components/teaser/Teaser.tsx"],"sourcesContent":["import type React from 'react';\nimport type { SyntheticEvent } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\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.js

@@ -1,6 +1,6 @@
 import { jsx as c } from "react/jsx-runtime";
 import { Children as l } from "react";
-import a from "classnames";
+import a from "../../utils/classNames.js";
 const o = (s) => {
   switch (s) {
     case 1:

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';\n\nimport classNames from '../../utils/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":";;;AAIA,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/timepicker/TimePicker.d.ts

@@ -6,6 +6,7 @@ export type TimePickerProps = {
     value?: string;
     /**
      * Callback function when the value changes and is a valid time format.
+     * It also emits an empty string when the input is cleared.
      *
      * If not it handles the state internally until the time is valid and filled.
      */
@@ -22,6 +23,25 @@ export type TimePickerProps = {
      * @default false
      */
     showIcon?: boolean;
+    /**
+     * Defines whether to show a dropdown with pre-defined time values.
+     *
+     * @default false
+     */
+    dropdown?: boolean;
+    /**
+     * Defines the minute interval for time controls and dropdown values.
+     * Invalid values fallback to 15.
+     *
+     * @default 15
+     */
+    minuteOffset?: number;
+    /**
+     * Defines whether the component is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Input error message.
      */

package/components/timepicker/TimePicker.js

@@ -1,111 +1,165 @@
-import { jsxs as l, jsx as t, Fragment as A } from "react/jsx-runtime";
-import { useState as W, useEffect as j } from "react";
-import { IMaskInput as D, IMask as g } from "react-imask";
-import f from "classnames";
-import { noop as L } from "es-toolkit/compat";
-import { isNil as U } from "es-toolkit/predicate";
-import k from "moment";
-import z from "tiny-invariant";
-const p = 15, B = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/, N = (e) => e >= 10 ? `${e}` : `0${e}`, u = (e, o) => `${N(e)}:${N(o)}`, y = (e, o = p) => Math.floor(e.minutes() / o) * o, O = () => {
-  const e = /* @__PURE__ */ new Date(), o = e.getHours(), a = e.getMinutes();
-  return u(o, a);
-}, M = (e) => B.test(e), T = (e) => {
-  if (!!U(e))
+import { jsxs as d, jsx as n, Fragment as ee } from "react/jsx-runtime";
+import { useState as V, useRef as y, useEffect as P } from "react";
+import { IMaskInput as se, IMask as I } from "react-imask";
+import { noop as te } from "es-toolkit/compat";
+import { isNil as ne } from "es-toolkit/predicate";
+import O from "moment";
+import oe from "tiny-invariant";
+import re from "../selects/BaseSelectDropdown.js";
+import ae from "../../hooks/useClickOutside.js";
+import ie from "../../hooks/useMergeRefs.js";
+import T from "../../utils/classNames.js";
+const b = 15, ce = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/, C = (e) => e >= 10 ? `${e}` : `0${e}`, p = (e, t) => `${C(e)}:${C(t)}`, D = (e, t = b) => Math.floor(e.minutes() / t) * t, le = (e) => Number.isInteger(e) && e > 0 && e <= 60, me = (e) => le(e) ? e : b, de = (e) => {
+  const t = [];
+  for (let a = 0; a < 1440; a += e) {
+    const f = Math.floor(a / 60), i = a % 60;
+    t.push(p(f, i));
+  }
+  return t;
+}, ue = () => {
+  const e = /* @__PURE__ */ new Date(), t = e.getHours(), r = e.getMinutes();
+  return p(t, r);
+}, S = (e) => ce.test(e), R = (e) => {
+  if (!!ne(e))
     return !1;
-  const a = e === "" || M(e);
-  return a || z(!1, 'Wrong time format. Please pass in value with the following format: "hh:mm".'), a;
-}, Z = (e) => {
+  const r = e === "" || S(e);
+  return r || oe(!1, 'Wrong time format. Please pass in value with the following format: "hh:mm".'), r;
+}, be = (e) => {
   const {
-    value: o,
-    onChange: a = L,
-    alwaysShowMask: v = !0,
-    showIcon: x = !1,
-    errorMessage: m,
-    warningMessage: d,
-    messageWhiteSpace: w = "normal",
-    className: I = "",
-    inputProps: h = {},
-    ...V
-  } = e, P = T(o) ? o : O(), [i, c] = W(P);
-  j(() => {
-    T(o) && (c(o), a(o));
-  }, [o]);
-  const $ = (s) => {
-    const n = s.target;
-    (!n.value || n.value.startsWith("-")) && setTimeout(() => {
-      n.setSelectionRange(0, 0);
-    }, 0), h.onFocus?.(s);
-  }, b = (s, n) => {
-    c(s), n.masked.isComplete && a(s);
-  }, C = M(i), F = () => {
-    const s = k(`2020-01-01 ${i}`), n = y(s);
-    s.minute(n).second(0), s.add(p, "minutes");
-    const r = u(s.hours(), s.minutes());
-    c(r), a(r);
-  }, S = () => {
-    const s = k(`2020-01-01 ${i}`), n = y(s);
-    s.minute(n).second(0), s.subtract(p, "minutes");
-    const r = u(s.hours(), s.minutes());
-    c(r), a(r);
-  }, { className: E, ...H } = h, R = m || d;
-  return /* @__PURE__ */ l("div", { ...V, className: f("TimePicker", "input-group", I), children: [
-    x && /* @__PURE__ */ t("span", { className: "input-group-addon", children: /* @__PURE__ */ t("span", { className: "rioglyph rioglyph-time-alt" }) }),
-    /* @__PURE__ */ l("div", { className: "form-control-feedback-wrapper", children: [
-      /* @__PURE__ */ t(
-        D,
-        {
-          ...H,
-          className: f("TimePickerInput", "form-control", E),
-          mask: "HH:MM",
-          blocks: {
-            HH: {
-              mask: g.MaskedRange,
-              from: 0,
-              to: 23,
-              maxLength: 2
+    value: t,
+    onChange: r = te,
+    alwaysShowMask: a = !0,
+    showIcon: f = !1,
+    dropdown: i = !1,
+    minuteOffset: $ = b,
+    disabled: F = !1,
+    errorMessage: h,
+    warningMessage: g,
+    messageWhiteSpace: E = "normal",
+    className: H = "",
+    inputProps: k = {},
+    ...A
+  } = e, W = R(t) ? t : ue(), [c, l] = V(W), [x, N] = V(!1), m = me($), u = F || !!k.disabled, j = y(null), w = y(!1), M = y(!1), B = ae(() => {
+    i && N(!1);
+  }), L = ie(j, B);
+  P(() => {
+    R(t) && l(t);
+  }, [t]), P(() => (w.current = !0, () => {
+    w.current = !1;
+  }), []);
+  const U = (s) => {
+    const o = s.target;
+    (!o.value || o.value.startsWith("-")) && setTimeout(() => {
+      o.setSelectionRange(0, 0);
+    }, 0), k.onFocus?.(s), i && !u && N(!0);
+  }, z = (s, o) => {
+    if (M.current) {
+      M.current = !1;
+      return;
+    }
+    if (l(s), !!w.current) {
+      if (o.masked.isComplete) {
+        r(s);
+        return;
+      }
+      o.unmaskedValue === "" && r("");
+    }
+  }, _ = S(c), q = () => {
+    const s = O(`2020-01-01 ${c}`), o = D(s, m);
+    s.minute(o).second(0), s.add(m, "minutes");
+    const v = p(s.hours(), s.minutes());
+    l(v);
+  }, G = () => {
+    const s = O(`2020-01-01 ${c}`), o = D(s, m);
+    s.minute(o).second(0), s.subtract(m, "minutes");
+    const v = p(s.hours(), s.minutes());
+    l(v);
+  }, { className: J, ...K } = k, Q = de(m).map((s) => ({
+    id: s,
+    label: s,
+    selected: s === c
+  })), X = (s) => {
+    !s || u || (M.current = !0, l(s.id), r(s.id), N(!1));
+  }, Y = h || g, Z = T("TimePicker", i && "dropdown", x && "open", H);
+  return /* @__PURE__ */ d("div", { ...A, className: Z, ref: L, children: [
+    /* @__PURE__ */ d("div", { className: "input-group", children: [
+      f && /* @__PURE__ */ n("span", { className: "input-group-addon", children: /* @__PURE__ */ n("span", { className: "rioglyph rioglyph-time-alt" }) }),
+      /* @__PURE__ */ d("div", { className: "form-control-feedback-wrapper", children: [
+        /* @__PURE__ */ n(
+          se,
+          {
+            ...K,
+            className: T("TimePickerInput", "form-control", J),
+            disabled: u,
+            mask: "HH:MM",
+            blocks: {
+              HH: {
+                mask: I.MaskedRange,
+                from: 0,
+                to: 23,
+                maxLength: 2
+              },
+              MM: {
+                mask: I.MaskedRange,
+                from: 0,
+                to: 59,
+                maxLength: 2
+              }
             },
-            MM: {
-              mask: g.MaskedRange,
-              from: 0,
-              to: 59,
-              maxLength: 2
-            }
-          },
-          value: i,
-          onAccept: b,
-          onFocus: $,
-          lazy: !v,
-          placeholderChar: "-",
-          overwrite: !0
-        }
-      ),
-      R && /* @__PURE__ */ l(A, { children: [
-        m && /* @__PURE__ */ t("span", { className: "form-control-feedback rioglyph rioglyph-error-sign" }),
-        d && /* @__PURE__ */ t("span", { className: "form-control-feedback rioglyph rioglyph-warning-sign" }),
-        /* @__PURE__ */ t("span", { className: `help-block white-space-${w}`, children: /* @__PURE__ */ t("span", { children: m || d }) })
-      ] })
-    ] }),
-    C && /* @__PURE__ */ l("div", { className: "TimePickerIncreaseButton input-group-addon", children: [
-      /* @__PURE__ */ t(
+            value: c,
+            onAccept: z,
+            onFocus: U,
+            lazy: !a,
+            placeholderChar: "-",
+            overwrite: !0
+          }
+        ),
+        Y && /* @__PURE__ */ d(ee, { children: [
+          h && /* @__PURE__ */ n("span", { className: "form-control-feedback rioglyph rioglyph-error-sign" }),
+          g && /* @__PURE__ */ n("span", { className: "form-control-feedback rioglyph rioglyph-warning-sign" }),
+          /* @__PURE__ */ n("span", { className: `help-block white-space-${E}`, children: /* @__PURE__ */ n("span", { children: h || g }) })
+        ] })
+      ] }),
+      _ && /* @__PURE__ */ d(
         "div",
         {
-          className: "text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer",
-          onClick: S,
-          children: /* @__PURE__ */ t("div", { className: "rioglyph rioglyph-chevron-left scale-90" })
-        }
-      ),
-      /* @__PURE__ */ t(
-        "div",
-        {
-          className: "text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer",
-          onClick: F,
-          children: /* @__PURE__ */ t("div", { className: "rioglyph rioglyph-chevron-right scale-90" })
+          className: T(
+            "TimePickerIncreaseButton input-group-addon",
+            u && "pointer-events-none bg-lightest"
+          ),
+          children: [
+            /* @__PURE__ */ n(
+              "div",
+              {
+                className: "text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer",
+                onClick: G,
+                children: /* @__PURE__ */ n("div", { className: "rioglyph rioglyph-chevron-left scale-90" })
+              }
+            ),
+            /* @__PURE__ */ n(
+              "div",
+              {
+                className: "text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer",
+                onClick: q,
+                children: /* @__PURE__ */ n("div", { className: "rioglyph rioglyph-chevron-right scale-90" })
+              }
+            )
+          ]
         }
       )
-    ] })
+    ] }),
+    i && /* @__PURE__ */ n(
+      re,
+      {
+        isOpen: x,
+        options: Q,
+        onSelect: X,
+        dropdownClassName: "max-height-200 overflow-auto width-100pct"
+      }
+    )
   ] });
 };
 export {
-  Z as default
+  be as default
 };
 //# sourceMappingURL=TimePicker.js.map