@chayns-components/core 5.0.0-beta.728 → 5.0.0-beta.734

package/lib/esm/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldShowSingleRightElementCentered","subtitle","shouldShowRoundImage","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: ListItemElements;\n    /**\n     * Images of users should always be displayed in a round shape. Therefore,\n     * this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether a single rightElement should be centered. Only works if one rightElement is given.\n     */\n    shouldShowSingleRightElementCentered?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    shouldShowSingleRightElementCentered = false,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                subtitle={subtitle}\n                shouldShowRoundImage={shouldShowRoundImage}\n                shouldShowSingleRightElementCentered={shouldShowSingleRightElementCentered}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldShowSingleRightElementCentered","subtitle","shouldShowRoundImage","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: ListItemElements;\n    /**\n     * Images of users should always be displayed in a round shape. Therefore,\n     * this property can be set to true.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Whether a single rightElement should be centered. Only works if one rightElement is given.\n     */\n    shouldShowSingleRightElementCentered?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    shouldShowSingleRightElementCentered = false,\n    subtitle,\n    shouldShowRoundImage,\n    shouldShowSeparatorBelow = false,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                subtitle={subtitle}\n                shouldShowRoundImage={shouldShowRoundImage}\n                shouldShowSingleRightElementCentered={shouldShowSingleRightElementCentered}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/list-item/ListItem.styles.js

@@ -28,11 +28,13 @@ export const StyledMotionListItem = styled(motion.div)`
     
     ${_ref3 => {
   let {
+    $shouldShowSeparatorBelow,
     theme
   } = _ref3;
-  return theme.accordionLines && css`
+  return ($shouldShowSeparatorBelow || theme.accordionLines) && css`
             &&:not(:last-child) {
-                border-bottom: 1px solid ${theme.headline}80;
+                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
+                    rgba(${theme['headline-rgb']}, 0.5);
             }
         `;
 }}}

package/lib/esm/components/list/list-item/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isClickable","_ref3","accordionLines","headline","_ref4","$isWrapped"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n    $isClickable: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isClickable, theme }) =>\n        $isClickable &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({ theme }: StyledListItemProps) =>\n        theme.accordionLines &&\n        css`\n            &&:not(:last-child) {\n                border-bottom: 1px solid ${theme.headline}80;\n            }\n        `}}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAG;AACX,qCAAqCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtBC,YAAY,IACZR,GAAG;AACX;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEJ;EAA2B,CAAC,GAAAI,KAAA;EAAA,OAC7BJ,KAAK,CAACK,cAAc,IACpBV,GAAG;AACX;AACA,2CAA2CK,KAAK,CAACM,QAAQ;AACzD;AACA,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACbC,UAAU,IACVb,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isClickable","_ref3","$shouldShowSeparatorBelow","accordionLines","_ref4","$isWrapped"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n    $isClickable: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isClickable, theme }) =>\n        $isClickable &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({ $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n        ($shouldShowSeparatorBelow || theme.accordionLines) &&\n        css`\n            &&:not(:last-child) {\n                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                    rgba(${theme['headline-rgb']}, 0.5);\n            }\n        `}}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAG;AACX,qCAAqCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtBC,YAAY,IACZR,GAAG;AACX;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEC,yBAAyB;IAAEL;EAA2B,CAAC,GAAAI,KAAA;EAAA,OACxD,CAACC,yBAAyB,IAAIL,KAAK,CAACM,cAAc,KAClDX,GAAG;AACX;AACA,iCAAiCU,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BL,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACbC,UAAU,IACVb,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/types/api/theme/get.d.ts

@@ -1,3 +1,3 @@
 import type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';
-export declare const getDesignSettings: () => Promise<DesignSettings | undefined>;
-export declare const getParagraphFormat: () => Promise<ParagraphFormat[] | undefined>;
+export declare const getDesignSettings: (siteId?: string) => Promise<DesignSettings | undefined>;
+export declare const getParagraphFormat: (siteId?: string) => Promise<ParagraphFormat[] | undefined>;

package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts

@@ -7,7 +7,6 @@ type StyledMotionAccordionBodyProps = WithTheme<{
 export declare const StyledMotionAccordionBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -22,6 +21,7 @@ export declare const StyledMotionAccordionBody: import("styled-components/dist/t
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts

@@ -3,7 +3,6 @@ import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider'
 export declare const StyledMotionAccordionHead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -18,6 +17,7 @@ export declare const StyledMotionAccordionHead: import("styled-components/dist/t
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -268,7 +268,6 @@ export declare const StyledMotionAccordionHead: import("styled-components/dist/t
 export declare const StyledMotionIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -283,6 +282,7 @@ export declare const StyledMotionIconWrapper: import("styled-components/dist/typ
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -537,7 +537,6 @@ export declare const StyledAccordionIcon: import("styled-components/dist/types")
 export declare const StyledMotionContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -552,6 +551,7 @@ export declare const StyledMotionContentWrapper: import("styled-components/dist/
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -802,7 +802,6 @@ export declare const StyledMotionContentWrapper: import("styled-components/dist/
 export declare const StyledMotionTitleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -817,6 +816,7 @@ export declare const StyledMotionTitleWrapper: import("styled-components/dist/ty
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -1072,7 +1072,6 @@ interface StyledMotionTitleProps {
 export declare const StyledMotionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -1087,6 +1086,7 @@ export declare const StyledMotionTitle: import("styled-components/dist/types").I
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -1335,7 +1335,6 @@ export declare const StyledMotionTitle: import("styled-components/dist/types").I
 export declare const StyledMotionTitleElementWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -1350,6 +1349,7 @@ export declare const StyledMotionTitleElementWrapper: import("styled-components/
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -1601,7 +1601,6 @@ export declare const StyledRightWrapper: import("styled-components/dist/types").
 export declare const StyledMotionSearchWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -1616,6 +1615,7 @@ export declare const StyledMotionSearchWrapper: import("styled-components/dist/t
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -1866,7 +1866,6 @@ export declare const StyledMotionSearchWrapper: import("styled-components/dist/t
 export declare const StyledMotionRightElementWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -1881,6 +1880,7 @@ export declare const StyledMotionRightElementWrapper: import("styled-components/
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -2138,7 +2138,6 @@ export declare const StyledMotionRightInput: import("styled-components/dist/type
     pattern?: string | undefined;
     value?: string | number | readonly string[] | undefined;
     size?: number | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     type?: import("react").HTMLInputTypeAttribute | undefined;
     rel?: string | undefined;
@@ -2154,6 +2153,7 @@ export declare const StyledMotionRightInput: import("styled-components/dist/type
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -2428,7 +2428,6 @@ export declare const StyledMotionRightInput: import("styled-components/dist/type
 export declare const StyledMotionRightInputIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -2443,6 +2442,7 @@ export declare const StyledMotionRightInputIconWrapper: import("styled-component
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/amount-control/AmountControl.styles.d.ts

@@ -24,7 +24,6 @@ export declare const StyledMotionAmountControlButton: import("styled-components/
     slot?: string | undefined;
     title?: string | undefined;
     value?: string | number | readonly string[] | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     rel?: string | undefined;
@@ -40,6 +39,7 @@ export declare const StyledMotionAmountControlButton: import("styled-components/
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/button/Button.styles.d.ts

@@ -12,7 +12,6 @@ export declare const StyledMotionButton: import("styled-components/dist/types").
     slot?: string | undefined;
     title?: string | undefined;
     value?: string | number | readonly string[] | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     type?: "button" | "reset" | "submit" | undefined;
     rel?: string | undefined;
@@ -28,6 +27,7 @@ export declare const StyledMotionButton: import("styled-components/dist/types").
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -284,7 +284,6 @@ export declare const StyledIconWrapper: import("styled-components/dist/types").I
 export declare const StyledMotionChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -299,6 +298,7 @@ export declare const StyledMotionChildrenWrapper: import("styled-components/dist
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -549,7 +549,6 @@ export declare const StyledMotionChildrenWrapper: import("styled-components/dist
 export declare const StyledMotionWaitCursorWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -564,6 +563,7 @@ export declare const StyledMotionWaitCursorWrapper: import("styled-components/di
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/color-scheme-provider/ColorSchemeProvider.d.ts

@@ -32,6 +32,10 @@ type ColorSchemeProviderProps = {
      * The secondary hex color to be used for the children
      */
     secondaryColor?: string;
+    /**
+     * The site id of the page for which the design settings should be fetched
+     */
+    siteId?: string;
     /**
      * Additional styles set on the root element
      */

package/lib/types/components/combobox/ComboBox.styles.d.ts

@@ -31,7 +31,6 @@ type StyledComboBoxBodyProps = WithTheme<{
 export declare const StyledMotionComboBoxBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -46,6 +45,7 @@ export declare const StyledMotionComboBoxBody: import("styled-components/dist/ty
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts

@@ -6,7 +6,6 @@ type StyledMotionContextMenuContentProps = WithTheme<{
 export declare const StyledMotionContextMenuContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -21,6 +20,7 @@ export declare const StyledMotionContextMenuContent: import("styled-components/d
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/expandable-content/ExpandableContent.styles.d.ts

@@ -1,7 +1,6 @@
 export declare const StyledMotionExpandableContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -16,6 +15,7 @@ export declare const StyledMotionExpandableContent: import("styled-components/di
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/file-input/FileInput.styles.d.ts

@@ -18,7 +18,6 @@ export declare const StyledFileInputText: import("styled-components/dist/types")
 export declare const StyledMotionFileInputList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -33,6 +32,7 @@ export declare const StyledMotionFileInputList: import("styled-components/dist/t
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts

@@ -27,7 +27,6 @@ type StyledFilterButtonItemBackgroundProps = WithTheme<{
 export declare const StyledMotionFilterButtonItemBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -42,6 +41,7 @@ export declare const StyledMotionFilterButtonItemBackground: import("styled-comp
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

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

@@ -26,7 +26,6 @@ export declare const StyledMotionInputLabelWrapper: import("styled-components/di
     form?: string | undefined;
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -41,6 +40,7 @@ export declare const StyledMotionInputLabelWrapper: import("styled-components/di
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -290,7 +290,6 @@ export declare const StyledMotionInputLabelWrapper: import("styled-components/di
 export declare const StyledMotionInputElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -305,6 +304,7 @@ export declare const StyledMotionInputElement: import("styled-components/dist/ty
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -561,7 +561,6 @@ type StyledMotionInputClearIconProps = WithTheme<{
 export declare const StyledMotionInputClearIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -576,6 +575,7 @@ export declare const StyledMotionInputClearIcon: import("styled-components/dist/
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/list/list-item/ListItem.d.ts

@@ -55,6 +55,10 @@ export type ListItemProps = {
      * this property can be set to true.
      */
     shouldShowRoundImage?: boolean;
+    /**
+     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.
+     */
+    shouldShowSeparatorBelow?: boolean;
     /**
      * Whether a single rightElement should be centered. Only works if one rightElement is given.
      */

package/lib/types/components/list/list-item/ListItem.styles.d.ts

@@ -3,11 +3,11 @@ type StyledListItemProps = WithTheme<{
     $isClickable: boolean;
     $isOpen: boolean;
     $isWrapped: boolean;
+    $shouldShowSeparatorBelow: boolean;
 }>;
 export declare const StyledMotionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -22,6 +22,7 @@ export declare const StyledMotionListItem: import("styled-components/dist/types"
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/list/list-item/list-item-body/ListItemBody.styles.d.ts

@@ -1,7 +1,6 @@
 export declare const StyledMotionListItemBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -16,6 +15,7 @@ export declare const StyledMotionListItemBody: import("styled-components/dist/ty
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts

@@ -6,7 +6,6 @@ type StyledListItemHeadProps = WithTheme<{
 export declare const StyledListItemHead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -21,6 +20,7 @@ export declare const StyledListItemHead: import("styled-components/dist/types").
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -270,7 +270,6 @@ export declare const StyledListItemHeadLeftWrapper: import("styled-components/di
 export declare const StyledMotionListItemHeadIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -285,6 +284,7 @@ export declare const StyledMotionListItemHeadIndicator: import("styled-component
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -547,7 +547,6 @@ type StyledListItemHeadTitleTextProps = WithTheme<{
 export declare const StyledListItemHeadTitleText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -562,6 +561,7 @@ export declare const StyledListItemHeadTitleText: import("styled-components/dist
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
@@ -826,7 +826,6 @@ export declare const StyledListItemHeadRightElement: import("styled-components/d
 export declare const StyledMotionListItemHeadHoverItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -841,6 +840,7 @@ export declare const StyledMotionListItemHeadHoverItem: import("styled-component
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/mention-finder/MentionFinder.styles.d.ts

@@ -7,7 +7,6 @@ type StyledMentionFinderPopupProps = WithTheme<{
 export declare const StyledMotionMentionFinderPopup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -22,6 +21,7 @@ export declare const StyledMotionMentionFinderPopup: import("styled-components/d
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.styles.d.ts

@@ -9,7 +9,6 @@ type StyledMotionPopupContentWrapperProps = WithTheme<{
 export declare const StyledMotionPopupContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -24,6 +23,7 @@ export declare const StyledMotionPopupContentWrapper: import("styled-components/
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;

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

@@ -6,7 +6,6 @@ export declare const StyledProgressBarProgressWrapper: import("styled-components
 export declare const StyledMotionProgressBarProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;
     title?: string | undefined;
-    id?: string | undefined;
     color?: string | undefined;
     rel?: string | undefined;
     defaultChecked?: boolean | undefined;
@@ -21,6 +20,7 @@ export declare const StyledMotionProgressBarProgress: import("styled-components/
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
     hidden?: boolean | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;