npm - @pega/cosmos-react-core - Versions diffs - 9.0.0-build.9.9 → 9.0.0 - Mend

@pega/cosmos-react-core 9.0.0-build.9.9 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1414) hide show

package/lib/components/Avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { Ref, PropsWithoutRef, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Image from '../Image';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n PropsWithDefaults,\n NoChildrenProp,\n OmitStrict,\n TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { readableColor } from '../../styles';\n\nimport { getAvatarTestIds } from './Avatar.test-ids';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The name of the identity the Avatar represents. /\n name: string;\n /* Content of the Avatar as an image source url. /\n imageSrc?: string;\n /* An icon to render as the content of the avatar. imageSrc will take precedence if passed. /\n icon?: string;\n /* Optional color for the icon to be rendered /\n color?: string;\n /* Optional background color for the avatar. Will be auto computed if not passed /\n backgroundColor?: string;\n /\n Shape of the Avatar.\n * @default 'circle'\n /\n shape?: 'circle' \| 'squircle';\n /\n Avatar size.\n * @default 'm'\n /\n size?: 's' \| 'm' \| 'l' \| 'xl';\n /* If defined, will render status icon on the avatar. /\n status?: 'active';\n /* Optional error handler in the event an image fails to load. /\n onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement \| HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' \| 'size'>;\n\nconst sizeToRem = {\n s: 1,\n m: 2,\n l: 2.5,\n xl: 4\n};\n\nconst fontSizeToRem = {\n s: 0.5625,\n m: 0.8125,\n l: 1,\n xl: 1.5\n};\n\nexport const StyledAvatarImage = styled(Image)`\n min-height: 100%;\n min-width: 100%;\n aspect-ratio: 1 / 1;\n object-fit: cover;\n border-radius: inherit;\n height: fit-content;\n width: fit-content;\n`;\n\nexport const StyledAvatar = styled.div<\n OmitStrict<AvatarPropsWithDefaults, 'name' \| 'children'> & {\n hasSrc?: boolean;\n hasBrokenImage?: boolean;\n }\n>(\n ({\n hasBrokenImage,\n hasSrc,\n size,\n shape,\n color,\n backgroundColor,\n theme: {\n base: {\n palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground },\n 'border-radius': baseBorderRadius\n },\n components: {\n avatar: { 'background-color': avatarBackground },\n icon: { 'border-radius-multiplier': borderRadiusMultiplier }\n }\n }\n }) => {\n const sizeRem = sizeToRem[size];\n const fontSize = fontSizeToRem[size];\n let bgColor =\n hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor \|\| avatarBackground;\n if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n bgColor = tryCatch(\n () => readableColor(color),\n () => avatarBackground\n );\n const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n const iconColor = color \|\| tryCatch(() => readableColor(bgColor));\n\n return css`\n position: relative;\n flex-shrink: 0;\n background-color: ${bgColor};\n color: ${iconColor};\n width: ${sizeRem}rem;\n height: ${sizeRem}rem;\n min-width: ${sizeRem}rem;\n min-height: ${sizeRem}rem;\n font-size: ${fontSize}rem;\n text-transform: uppercase;\n line-height: ${sizeRem}rem;\n text-align: center;\n vertical-align: top;\n display: inline-block;\n border-radius: 100%;\n user-select: none;\n -webkit-user-select: none;\n\n ${shape === 'squircle' &&\n css`\n border-radius: calc(${borderRadiusMultiplier} ${baseBorderRadius});\n `}\n\n ${StyledIcon} {\n width: 50%;\n height: 100%;\n vertical-align: initial;\n }\n\n ::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n }\n `;\n }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled(Alert)<Pick<AvatarPropsWithDefaults, 'size'>>(({\n size,\n theme\n}) => {\n /** Scales alert badge dimensions based on size of avatar /\n const sizeDimensions = (0.625 sizeToRem[size]) / sizeToRem.m;\n\n return css`\n position: absolute;\n height: ${sizeDimensions}rem;\n width: ${sizeDimensions}rem;\n inset-block-end: 0;\n inset-inline-end: 0;\n z-index: 1;\n animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n @keyframes pop {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n }\n }\n `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/*\n Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n /\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n if (!name) {\n return '';\n }\n\n if (size === 's') {\n return name[0];\n }\n\n const words = name.split(/\\s+/);\n\n return `${words[0][0] ?? ''}${words[1]?.[0] ?? ''}`;\n};\n\n/\n Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: ForwardRefForwardPropsComponent<AvatarProps> = forwardRef(function Avatar(\n props: PropsWithoutRef<AvatarProps>,\n ref: AvatarProps['ref']\n) {\n const {\n testId,\n shape = 'circle',\n size = 'm',\n imageSrc,\n icon,\n name: nameProp,\n status,\n onImageError,\n ...restProps\n } = props;\n\n const name = nameProp.trim();\n\n const [hasBrokenImage, setHasBrokenImage] = useState<undefined \| boolean>();\n const t = useI18n();\n const testIds = useTestIds(testId, getAvatarTestIds);\n\n useEffect(() => {\n setHasBrokenImage(undefined);\n }, [imageSrc]);\n\n const content = useMemo(() => {\n if (icon) {\n return <Icon name={icon} />;\n }\n if (imageSrc && !hasBrokenImage) {\n return (\n <StyledAvatarImage\n src={imageSrc}\n alt={name}\n onError={(e: SyntheticEvent<HTMLImageElement>) => {\n setHasBrokenImage(true);\n onImageError?.(e);\n }}\n onLoad={() => {\n setHasBrokenImage(false);\n }}\n />\n );\n }\n return getInitials(name, size);\n }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n return (\n <StyledAvatar\n data-testid={testIds.root}\n role='img'\n hasSrc={!!imageSrc}\n hasBrokenImage={hasBrokenImage}\n shape={shape}\n size={size}\n ref={ref}\n aria-label={`${name}${status ? ` ${t('status')} ${status}` : ''}`}\n {...restProps}\n >\n {content}\n {status === 'active' && <StyledStatus size={size} variant='success' />}\n </StyledAvatar>\n );\n});\n\nexport default withTestIds(Avatar, getAvatarTestIds);\n"]}
1	+ {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { Ref, PropsWithoutRef, SyntheticEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport Image from '../Image';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n PropsWithDefaults,\n NoChildrenProp,\n OmitStrict,\n TestIdProp\n} from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { StyledIcon } from '../Icon';\nimport { Alert } from '../Badges';\nimport { StyledBareButton } from '../Button/BareButton';\nimport { useI18n, useTestIds } from '../../hooks';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { readableColor, calculateForegroundColor } from '../../styles';\n\nimport { getAvatarTestIds } from './Avatar.test-ids';\n\nexport interface AvatarProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** The name of the identity the Avatar represents. /\n name: string;\n /* Content of the Avatar as an image source url. /\n imageSrc?: string;\n /* An icon to render as the content of the avatar. imageSrc will take precedence if passed. /\n icon?: string;\n /* Optional color for the icon to be rendered /\n color?: string;\n /* Optional background color for the avatar. Will be auto computed if not passed /\n backgroundColor?: string;\n /\n Shape of the Avatar.\n * @default 'circle'\n /\n shape?: 'circle' \| 'squircle';\n /\n Avatar size.\n * @default 'm'\n /\n size?: 's' \| 'm' \| 'l' \| 'xl';\n /* If defined, will render status icon on the avatar. /\n status?: 'active';\n /* Optional error handler in the event an image fails to load. /\n onImageError?: (err: SyntheticEvent<HTMLImageElement>) => void;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement \| HTMLImageElement>;\n}\n\ntype AvatarPropsWithDefaults = PropsWithDefaults<AvatarProps, 'shape' \| 'size'>;\n\nconst sizeToRem = {\n s: 1,\n m: 2,\n l: 2.5,\n xl: 4\n};\n\nconst fontSizeToRem = {\n s: 0.5625,\n m: 0.8125,\n l: 1,\n xl: 1.5\n};\n\nexport const StyledAvatarImage = styled(Image)`\n min-height: 100%;\n min-width: 100%;\n aspect-ratio: 1 / 1;\n object-fit: cover;\n border-radius: inherit;\n height: fit-content;\n width: fit-content;\n`;\n\nexport const StyledAvatar = styled.div<\n OmitStrict<AvatarPropsWithDefaults, 'name' \| 'children'> & {\n hasSrc?: boolean;\n hasBrokenImage?: boolean;\n }\n>(\n ({\n hasBrokenImage,\n hasSrc,\n size,\n shape,\n color,\n backgroundColor,\n theme: {\n base: {\n palette: { 'foreground-color': foregroundColor, 'primary-background': primaryBackground },\n 'border-radius': baseBorderRadius\n },\n components: {\n avatar: {\n background: avatarBackground,\n 'background-color': avatarBackgroundColor,\n 'foreground-color': avatarForegroundColor\n },\n icon: { 'border-radius-multiplier': borderRadiusMultiplier },\n button: { 'focus-shadow': focusShadow }\n }\n }\n }) => {\n const sizeRem = sizeToRem[size];\n const fontSize = fontSizeToRem[size];\n let bgColor =\n hasSrc && !hasBrokenImage ? primaryBackground : backgroundColor \|\| avatarBackgroundColor;\n if (color && !backgroundColor && !(hasSrc && !hasBrokenImage))\n bgColor = tryCatch(\n () => readableColor(color),\n () => avatarBackgroundColor\n );\n\n const shadowColor = tryCatch(() => rgba(foregroundColor, 0.1));\n const iconColor = color \|\| calculateForegroundColor(bgColor, avatarForegroundColor);\n\n return css`\n position: relative;\n flex-shrink: 0;\n background: ${avatarBackground};\n color: ${iconColor};\n width: ${sizeRem}rem;\n height: ${sizeRem}rem;\n min-width: ${sizeRem}rem;\n min-height: ${sizeRem}rem;\n font-size: ${fontSize}rem;\n text-transform: uppercase;\n line-height: ${sizeRem}rem;\n text-align: center;\n vertical-align: top;\n display: inline-block;\n border-radius: 100%;\n user-select: none;\n -webkit-user-select: none;\n\n ${shape === 'squircle' &&\n css`\n border-radius: calc(${borderRadiusMultiplier} ${baseBorderRadius});\n `}\n\n ${StyledIcon} {\n width: 50%;\n height: 100%;\n vertical-align: initial;\n }\n\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n box-shadow: inset 0 0 0 0.0625rem ${shadowColor};\n }\n\n ${StyledBareButton}:focus > & {\n box-shadow: ${focusShadow};\n }\n `;\n }\n);\n\nStyledAvatar.defaultProps = defaultThemeProp;\n\nexport const StyledStatus = styled(Alert)<Pick<AvatarPropsWithDefaults, 'size'>>(({\n size,\n theme\n}) => {\n /** Scales alert badge dimensions based on size of avatar /\n const sizeDimensions = (0.625 sizeToRem[size]) / sizeToRem.m;\n\n return css`\n position: absolute;\n height: ${sizeDimensions}rem;\n width: ${sizeDimensions}rem;\n inset-block-end: 0;\n inset-inline-end: 0;\n z-index: 1;\n animation: pop calc(${theme.base.animation.speed} * 2) cubic-bezier(1, 1.65, 0.3, 1.24);\n\n @keyframes pop {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n }\n }\n `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\n/*\n Helper function to construct a two or one letter initial from the title prop.\n * This text will be displayed if no valid image source is provided.\n * @param name\n * @param size\n /\nconst getInitials = (name: AvatarProps['name'], size: AvatarProps['size']) => {\n if (!name) {\n return '';\n }\n\n if (size === 's') {\n return name[0];\n }\n\n const words = name.split(/\\s+/);\n\n return `${words[0][0] ?? ''}${words[1]?.[0] ?? ''}`;\n};\n\n/\n Generally, avatars are used to distinguish between different operators and\n * objects when they are shown in a list or in a small space. Users of applications\n * can upload a custom avatar of their choice.\n */\nconst Avatar: ForwardRefForwardPropsComponent<AvatarProps> = forwardRef(function Avatar(\n props: PropsWithoutRef<AvatarProps>,\n ref: AvatarProps['ref']\n) {\n const {\n testId,\n shape = 'circle',\n size = 'm',\n imageSrc,\n icon,\n name: nameProp,\n status,\n onImageError,\n ...restProps\n } = props;\n\n const name = nameProp.trim();\n\n const [hasBrokenImage, setHasBrokenImage] = useState<undefined \| boolean>();\n const t = useI18n();\n const testIds = useTestIds(testId, getAvatarTestIds);\n\n useEffect(() => {\n setHasBrokenImage(undefined);\n }, [imageSrc]);\n\n const content = useMemo(() => {\n if (icon) {\n return <Icon name={icon} />;\n }\n if (imageSrc && !hasBrokenImage) {\n return (\n <StyledAvatarImage\n src={imageSrc}\n alt={name}\n onError={(e: SyntheticEvent<HTMLImageElement>) => {\n setHasBrokenImage(true);\n onImageError?.(e);\n }}\n onLoad={() => {\n setHasBrokenImage(false);\n }}\n />\n );\n }\n return getInitials(name, size);\n }, [imageSrc, name, size, icon, hasBrokenImage, onImageError]);\n\n return (\n <StyledAvatar\n data-testid={testIds.root}\n role='img'\n hasSrc={!!imageSrc}\n hasBrokenImage={hasBrokenImage}\n shape={shape}\n size={size}\n ref={ref}\n aria-label={`${name}${status ? ` ${t('status')} ${t(status)}` : ''}`}\n {...restProps}\n >\n {content}\n {status === 'active' && <StyledStatus size={size} variant='success' />}\n </StyledAvatar>\n );\n});\n\nexport default withTestIds(Avatar, getAvatarTestIds);\n"]}

package/lib/components/Backdrop/Backdrop.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { ExcludeStrict, WithAttributes, TestIdProp } from '../../types';
+import type { PropsWithDefaults, ExcludeStrict, WithAttributes, TestIdProp } from '../../types';
 import type { FlexProps } from '../Flex';
 export type BackdropProps = WithAttributes<'div', TestIdProp & {
     /**
@@ -37,9 +37,192 @@ export type BackdropProps = WithAttributes<'div', TestIdProp & {
     /** Accepts a callback that gets invoked after closing Backdrop */
     onAfterTransitionOut?: () => void;
 }>;
-export declare const StyledBackdrop: import("styled-components").StyledComponent<import("../../types").ForwardRefForwardPropsComponent<FlexProps>, import("styled-components").DefaultTheme, Pick<BackdropProps, "hidden" | "color" | "content" | "style" | "translate" | "prefix" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "testId" | "variant" | "container" | "onBeforeTransitionIn" | "onAfterTransitionIn" | "onBeforeTransitionOut" | "onAfterTransitionOut"> & Required<Pick<BackdropProps, "alpha" | "open" | "position" | "transitionSpeed">> & {
+type BackdropPropsWithDefaults = PropsWithDefaults<BackdropProps, 'open' | 'transitionSpeed' | 'alpha' | 'position'>;
+export declare const StyledBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "item" | "xs" | "xl" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: import("react").RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "xs" | "xl" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: import("react").RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "xs">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "item" | "xl" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: import("react").RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "xl">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "item" | "xs" | "sm" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: import("react").RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "sm">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "item" | "xs" | "xl" | "md" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: import("react").RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "md">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "item" | "xs" | "xl" | "sm" | "lg">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: import("react").RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}) | (Omit<Omit<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "ref" | "className" | "children" | keyof import("../../types").AsProp> & Required<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "lg">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps & import("../../types").BaseProps & import("../../types").AsProp & {
+    children?: import("react").ReactNode;
+    ref?: import("react").Ref<Element>;
+    xs?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    sm?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    md?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    lg?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+    xl?: Pick<import("../Flex/Flex").BaseFlexProps, never> & ((Required<Pick<import("../Flex/Flex").BaseFlexProps, "container">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "item">>) | (Required<Pick<import("../Flex/Flex").BaseFlexProps, "item">> & Partial<Pick<import("../Flex/Flex").BaseFlexProps, "container">>));
+}, "container" | "item" | "xs" | "xl" | "sm" | "md">>, "ref"> & import("react").RefAttributes<Element> & import("../../types").ForwardProps, "ref"> & {
+    ref?: import("react").RefObject<Element> | ((instance: Element | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}), Pick<BackdropPropsWithDefaults, "hidden" | "color" | "content" | "style" | "position" | "alpha" | "translate" | "container" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "testId" | "variant" | "transitionSpeed" | "onBeforeTransitionIn" | "onAfterTransitionIn" | "onBeforeTransitionOut" | "onAfterTransitionOut"> & {
     opacity: 0 | 1;
-}, never>;
+}>> & string & Omit<import("../../types").ForwardRefForwardPropsComponent<FlexProps>, keyof import("react").Component<any, {}, any>>;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<BackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };

package/lib/components/Backdrop/Backdrop.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,~~EAEV~~,aAAa,EACb,cAAc,EAEd,UAAU,~~EACX~~,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,KAAK,EACL,UAAU,GAAG;IACX;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC,CACF,CAAC;~~AAcF~~,eAAO,MAAM,cAAc~~;aAAuD~~,CAAC,GAAG,CAAC;~~SAqCtF~~,CAAC;;;;~~AAMF~~,wBA6FE"}
1	+ {"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EACb,cAAc,EAEd,UAAU,EAEX,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,KAAK,EACL,UAAU,GAAG;IACX;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,oEAAoE;IACpE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC,CACF,CAAC;AAEF,KAAK,yBAAyB,GAAG,iBAAiB,CAChD,aAAa,EACb,MAAM,GAAG,iBAAiB,GAAG,OAAO,GAAG,UAAU,CAClD,CAAC;AASF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aACkC,CAAC,GAAG,CAAC;oIAmChE,CAAC;;;;AAMH,wBA6FE"}

package/lib/components/Backdrop/Backdrop.js CHANGED Viewed

@@ -18,31 +18,30 @@ export const StyledBackdrop = styled(Flex)(props => {
     const { opacity, alpha, variant, position } = props;
     const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} * ${base.animation.speed}), 1ms)`;
     return css `
-      position: ${position};
-      z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 100%;
-      border-radius: inherit;
-      opacity: ${opacity};
-      transition-property: opacity;
-      transition-timing-function: ${props.theme.base.animation.timing.ease};
-      /* stylelint-disable declaration-block-no-duplicate-properties */
-      transition-duration: 1ms;
-      transition-duration: ${transitionDuration};
-      /* stylelint-enable declaration-block-no-duplicate-properties */
+    position: ${position};
+    z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};
+    inset-inline: 0;
+    inset-block-start: ${position === 'fixed' ? 'var(--appshell-top-offset, 0rem)' : '0'};
+    inset-block-end: ${position === 'fixed' ? 'var(--appshell-hard-bottom-offset, 0rem)' : '0'};
+    border-radius: inherit;
+    opacity: ${opacity};
+    transition-property: opacity;
+    transition-timing-function: ${props.theme.base.animation.timing.ease};
+    /* stylelint-disable declaration-block-no-duplicate-properties */
+    transition-duration: 1ms;
+    transition-duration: ${transitionDuration};
+    /* stylelint-enable declaration-block-no-duplicate-properties */
-      ${variant === 'dark' &&
+    ${variant === 'dark' &&
         css `
-        background: rgba(0, 0, 0, ${alpha});
-      `}
+      background: rgba(0, 0, 0, ${alpha});
+    `}
-      ${variant === 'light' &&
+    ${variant === 'light' &&
         css `
-        background: rgba(255, 255, 255, ${alpha});
-      `}
-    `;
+      background: rgba(255, 255, 255, ${alpha});
+    `}
+  `;
 });
 StyledBackdrop.defaultProps = defaultThemeProp;
 export default withTestIds(forwardRef(function Backdrop({ testId, children, container, open = false, variant = 'dark', transitionSpeed = 'medium', alpha = 0.6, position = 'fixed', onBeforeTransitionIn, onAfterTransitionIn, onBeforeTransitionOut, onAfterTransitionOut, ...restProps }, ref) {

package/lib/components/Backdrop/Backdrop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useCallback, forwardRef } from 'react';\nimport type { PropsWithoutRef, TransitionEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow, withTestIds } from '../../utils';\nimport type {\n PropsWithDefaults,\n ExcludeStrict,\n WithAttributes,\n RefElement,\n TestIdProp\n} from '../../types';\nimport Configuration from '../Configuration';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport { useConsolidatedRef, useElement, useTestIds } from '../../hooks';\n\nimport { getBackdropTestIds } from './Backdrop.test-ids';\n\nexport type BackdropProps = WithAttributes<\n 'div',\n TestIdProp & {\n /*\n Opacity of the Backdrop.\n * @default 0.4\n /\n alpha?: number;\n /* Props passed to Flex container. /\n container?: ExcludeStrict<FlexProps['container'], true>;\n /\n Toggles visibility of Backdrop.\n * @default false\n /\n open?: boolean;\n /\n Determines the color of the Backdrop.\n * @default 'dark'\n /\n variant?: 'dark' \| 'light';\n /\n Transition speed of Backdrop animation.\n * @default 'medium'\n /\n transitionSpeed?: 'slow' \| 'medium' \| 'fast' \| 'none';\n /\n The position of the Backdrop.\n * @default 'fixed'\n /\n position?: 'absolute' \| 'fixed';\n /* Accepts a callback that gets invoked before opening Backdrop. /\n onBeforeTransitionIn?: () => void;\n /* Accepts a callback that gets invoked after opening Backdrop. /\n onAfterTransitionIn?: () => void;\n /* Accepts a callback that gets invoked before closing Backdrop. /\n onBeforeTransitionOut?: () => void;\n /* Accepts a callback that gets invoked after closing Backdrop /\n onAfterTransitionOut?: () => void;\n }\n>;\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n BackdropProps,\n 'open' \| 'transitionSpeed' \| 'alpha' \| 'position'\n>;\n\nconst transitionSpeedToTheme = {\n slow: 2,\n medium: 1,\n fast: 0.5,\n none: 0\n} as const;\n\nexport const StyledBackdrop = styled(Flex)<BackdropPropsWithDefaults & { opacity: 0 \| 1 }>(\n props => {\n const {\n theme: { base }\n } = props;\n const { opacity, alpha, variant, position } = props;\n const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} ${\n base.animation.speed\n }), 1ms)`;\n\n return css`\n position: ${position};\n z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border-radius: inherit;\n opacity: ${opacity};\n transition-property: opacity;\n transition-timing-function: ${props.theme.base.animation.timing.ease};\n /* stylelint-disable declaration-block-no-duplicate-properties /\n transition-duration: 1ms;\n transition-duration: ${transitionDuration};\n / stylelint-enable declaration-block-no-duplicate-properties */\n\n ${variant === 'dark' &&\n css`\n background: rgba(0, 0, 0, ${alpha});\n `}\n\n ${variant === 'light' &&\n css`\n background: rgba(255, 255, 255, ${alpha});\n `}\n `;\n }\n);\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' \| 'opening' \| 'open' \| 'closing';\n\nexport default withTestIds(\n forwardRef<RefElement<BackdropProps>, PropsWithoutRef<BackdropProps>>(function Backdrop(\n {\n testId,\n children,\n container,\n open = false,\n variant = 'dark',\n transitionSpeed = 'medium',\n alpha = 0.6,\n position = 'fixed',\n onBeforeTransitionIn,\n onAfterTransitionIn,\n onBeforeTransitionOut,\n onAfterTransitionOut,\n ...restProps\n },\n ref\n ) {\n const testIds = useTestIds(testId, getBackdropTestIds);\n const [state, setState] = useState<State>('closed');\n const [backdropEl, setBackdropEl] = useElement<HTMLDivElement>();\n const backdropRef = useConsolidatedRef(ref, setBackdropEl);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.propertyName !== 'opacity' \|\| e.target !== e.currentTarget) return;\n let nextState: State;\n\n if (state === 'closing') {\n nextState = 'closed';\n onAfterTransitionOut?.();\n } else {\n nextState = 'open';\n onAfterTransitionIn?.();\n }\n\n setState(nextState);\n },\n [state, onAfterTransitionOut, onAfterTransitionIn]\n );\n\n useEffect(() => {\n if (open) {\n if (state === 'closed' \|\| state === 'closing') {\n onBeforeTransitionIn?.();\n reflow();\n setState('opening');\n }\n } else if (state === 'open' \|\| state === 'opening') {\n onBeforeTransitionOut?.();\n setState('closing');\n }\n }, [open]);\n\n // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.\n useEffect(() => {\n if (!backdropRef.current) return;\n const opacity = window.getComputedStyle(backdropRef.current).opacity;\n // If the opacity is already at the destination value, sync the state value.\n if (state === 'closing' && opacity === '0') {\n // Since the transition never ran, we have to pretend it did and call the callback.\n // TODO: This maybe can be fixed with the animation api\n onAfterTransitionOut?.();\n setState('closed');\n }\n if (state === 'opening' && opacity === '1') {\n // ditto, see above...\n onAfterTransitionIn?.();\n setState('open');\n }\n }, [state]);\n\n return !open && state === 'closed' ? null : (\n <Configuration portalTarget={backdropEl ?? undefined}>\n <StyledBackdrop\n data-testid={testIds.root}\n container={{ justify: 'center', alignItems: 'center', ...container }}\n transitionSpeed={transitionSpeed}\n opacity={state === 'opening' \|\| state === 'open' ? 1 : 0}\n alpha={alpha}\n variant={variant}\n position={position}\n onTransitionEnd={onTransitionEnd}\n ref={backdropRef}\n {...restProps}\n >\n {children}\n </StyledBackdrop>\n </Configuration>\n );\n }),\n getBackdropTestIds\n);\n"]}
1	+ {"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop/Backdrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, useCallback, forwardRef } from 'react';\nimport type { PropsWithoutRef, TransitionEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { reflow, withTestIds } from '../../utils';\nimport type {\n PropsWithDefaults,\n ExcludeStrict,\n WithAttributes,\n RefElement,\n TestIdProp,\n OmitStrict\n} from '../../types';\nimport Configuration from '../Configuration';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport { useConsolidatedRef, useElement, useTestIds } from '../../hooks';\n\nimport { getBackdropTestIds } from './Backdrop.test-ids';\n\nexport type BackdropProps = WithAttributes<\n 'div',\n TestIdProp & {\n /*\n Opacity of the Backdrop.\n * @default 0.4\n /\n alpha?: number;\n /* Props passed to Flex container. /\n container?: ExcludeStrict<FlexProps['container'], true>;\n /\n Toggles visibility of Backdrop.\n * @default false\n /\n open?: boolean;\n /\n Determines the color of the Backdrop.\n * @default 'dark'\n /\n variant?: 'dark' \| 'light';\n /\n Transition speed of Backdrop animation.\n * @default 'medium'\n /\n transitionSpeed?: 'slow' \| 'medium' \| 'fast' \| 'none';\n /\n The position of the Backdrop.\n * @default 'fixed'\n /\n position?: 'absolute' \| 'fixed';\n /* Accepts a callback that gets invoked before opening Backdrop. /\n onBeforeTransitionIn?: () => void;\n /* Accepts a callback that gets invoked after opening Backdrop. /\n onAfterTransitionIn?: () => void;\n /* Accepts a callback that gets invoked before closing Backdrop. /\n onBeforeTransitionOut?: () => void;\n /* Accepts a callback that gets invoked after closing Backdrop /\n onAfterTransitionOut?: () => void;\n }\n>;\n\ntype BackdropPropsWithDefaults = PropsWithDefaults<\n BackdropProps,\n 'open' \| 'transitionSpeed' \| 'alpha' \| 'position'\n>;\n\nconst transitionSpeedToTheme = {\n slow: 2,\n medium: 1,\n fast: 0.5,\n none: 0\n} as const;\n\nexport const StyledBackdrop = styled(Flex)<\n OmitStrict<BackdropPropsWithDefaults, 'open'> & { opacity: 0 \| 1 }\n>(props => {\n const {\n theme: { base }\n } = props;\n const { opacity, alpha, variant, position } = props;\n const transitionDuration = `max(calc(${transitionSpeedToTheme[props.transitionSpeed]} ${\n base.animation.speed\n }), 1ms)`;\n\n return css`\n position: ${position};\n z-index: ${position === 'fixed' ? base['z-index'].backdrop : base['z-index'].popover + 1};\n inset-inline: 0;\n inset-block-start: ${position === 'fixed' ? 'var(--appshell-top-offset, 0rem)' : '0'};\n inset-block-end: ${position === 'fixed' ? 'var(--appshell-hard-bottom-offset, 0rem)' : '0'};\n border-radius: inherit;\n opacity: ${opacity};\n transition-property: opacity;\n transition-timing-function: ${props.theme.base.animation.timing.ease};\n /* stylelint-disable declaration-block-no-duplicate-properties /\n transition-duration: 1ms;\n transition-duration: ${transitionDuration};\n / stylelint-enable declaration-block-no-duplicate-properties */\n\n ${variant === 'dark' &&\n css`\n background: rgba(0, 0, 0, ${alpha});\n `}\n\n ${variant === 'light' &&\n css`\n background: rgba(255, 255, 255, ${alpha});\n `}\n `;\n});\n\nStyledBackdrop.defaultProps = defaultThemeProp;\n\ntype State = 'closed' \| 'opening' \| 'open' \| 'closing';\n\nexport default withTestIds(\n forwardRef<RefElement<BackdropProps>, PropsWithoutRef<BackdropProps>>(function Backdrop(\n {\n testId,\n children,\n container,\n open = false,\n variant = 'dark',\n transitionSpeed = 'medium',\n alpha = 0.6,\n position = 'fixed',\n onBeforeTransitionIn,\n onAfterTransitionIn,\n onBeforeTransitionOut,\n onAfterTransitionOut,\n ...restProps\n },\n ref\n ) {\n const testIds = useTestIds(testId, getBackdropTestIds);\n const [state, setState] = useState<State>('closed');\n const [backdropEl, setBackdropEl] = useElement<HTMLDivElement>();\n const backdropRef = useConsolidatedRef(ref, setBackdropEl);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent) => {\n if (e.propertyName !== 'opacity' \|\| e.target !== e.currentTarget) return;\n let nextState: State;\n\n if (state === 'closing') {\n nextState = 'closed';\n onAfterTransitionOut?.();\n } else {\n nextState = 'open';\n onAfterTransitionIn?.();\n }\n\n setState(nextState);\n },\n [state, onAfterTransitionOut, onAfterTransitionIn]\n );\n\n useEffect(() => {\n if (open) {\n if (state === 'closed' \|\| state === 'closing') {\n onBeforeTransitionIn?.();\n reflow();\n setState('opening');\n }\n } else if (state === 'open' \|\| state === 'opening') {\n onBeforeTransitionOut?.();\n setState('closing');\n }\n }, [open]);\n\n // Using a separate effect instead of combined logic above as it seems more intuitive to mentally manage.\n useEffect(() => {\n if (!backdropRef.current) return;\n const opacity = window.getComputedStyle(backdropRef.current).opacity;\n // If the opacity is already at the destination value, sync the state value.\n if (state === 'closing' && opacity === '0') {\n // Since the transition never ran, we have to pretend it did and call the callback.\n // TODO: This maybe can be fixed with the animation api\n onAfterTransitionOut?.();\n setState('closed');\n }\n if (state === 'opening' && opacity === '1') {\n // ditto, see above...\n onAfterTransitionIn?.();\n setState('open');\n }\n }, [state]);\n\n return !open && state === 'closed' ? null : (\n <Configuration portalTarget={backdropEl ?? undefined}>\n <StyledBackdrop\n data-testid={testIds.root}\n container={{ justify: 'center', alignItems: 'center', ...container }}\n transitionSpeed={transitionSpeed}\n opacity={state === 'opening' \|\| state === 'open' ? 1 : 0}\n alpha={alpha}\n variant={variant}\n position={position}\n onTransitionEnd={onTransitionEnd}\n ref={backdropRef}\n {...restProps}\n >\n {children}\n </StyledBackdrop>\n </Configuration>\n );\n }),\n getBackdropTestIds\n);\n"]}

package/lib/components/Badges/Alert.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ export type AlertProps = WithAttributes<'div', NoChildrenProp & TestIdProp & {
     /** Determines the color to render the Badge as. This color is derived from the Theme. */
     variant: 'urgent' | 'success';
 }>;
-export declare const StyledAlert: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, AlertProps, never>;
+export declare const StyledAlert: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AlertProps>> & string;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };

package/lib/components/Badges/Alert.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO1F,MAAM,MAAM,UAAU,GAAG,cAAc,CACrC,KAAK,EACL,cAAc,GACZ,UAAU,GAAG;IACX,yFAAyF;IACzF,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B,CACJ,CAAC;AAEF,eAAO,MAAM,WAAW,~~iHAYtB,~~CAAC;;;;AAIH,wBAUE"}
1	+ {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO1F,MAAM,MAAM,UAAU,GAAG,cAAc,CACrC,KAAK,EACL,cAAc,GACZ,UAAU,GAAG;IACX,yFAAyF;IACzF,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B,CACJ,CAAC;AAEF,eAAO,MAAM,WAAW,+OAYtB,CAAC;;;;AAIH,wBAUE"}

package/lib/components/Badges/Count.d.ts CHANGED Viewed

@@ -6,11 +6,13 @@ export type CountProps = WithAttributes<'span', TestIdProp & {
     variant?: 'default' | 'urgent';
     /** The count to be displayed within the Badge. */
     children: number | null;
+    /** Indicates whether there are more items than the count being displayed. If true, a "+" is appended to the count. */
+    hasMore?: boolean;
 }>;
 type CountPropsWithDefaults = PropsWithDefaults<CountProps, 'variant'>;
-export declare const StyledCount: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, Pick<CountPropsWithDefaults, "variant"> & {
+export declare const StyledCount: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<CountPropsWithDefaults, "variant"> & {
     children: string;
-}, never>;
+}>> & string;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<CountProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly []>;
 };

package/lib/components/Badges/Count.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Count.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM7F,MAAM,MAAM,UAAU,GAAG,cAAc,CACrC,MAAM,EACN,UAAU,GAAG;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;~~CACzB~~,CACF,CAAC;AAEF,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW;cACgC,MAAM;~~SA6B5D~~,CAAC;;;;AAwCH,wBAcE"}
1	+ {"version":3,"file":"Count.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Count.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM7F,MAAM,MAAM,UAAU,GAAG,cAAc,CACrC,MAAM,EACN,UAAU,GAAG;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,sHAAsH;IACtH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAEvE,eAAO,MAAM,WAAW;cACgC,MAAM;YAmC5D,CAAC;;;;AAwCH,wBAcE"}