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

@pega/cosmos-react-core 9.0.0-build.9.8 → 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/Dialog/FormDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useLayoutEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport { getActiveElement, getFocusables } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport type { RefElement } from '../../types';\nimport Flex from '../Flex';\n\nimport {\n StyledChildrenWrap,\n StyledDialogContent,\n StyledDialogFooter,\n StyledDialogHeader\n} from './Dialog.styles';\nimport type { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog = forwardRef<RefElement<FormDialogProps>, PropsWithoutRef<FormDialogProps>>(\n function FormDialog(\n {\n arrow = true,\n target,\n heading,\n 'aria-label': ariaLabel,\n children,\n progress,\n onDismiss,\n onCancel,\n onSubmit,\n ...restProps\n },\n ref\n ) {\n const t = useI18n();\n const headingId = useUID();\n const dialogRef = useConsolidatedRef(ref);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n const cancelButtonRef = useRef<HTMLButtonElement>(null);\n\n const setFocus = () => {\n if (progress) return;\n\n const focusables = getFocusables(dialogRef);\n\n const focusable =\n focusables.find(el => {\n return dialogContentRef.current?.contains(el);\n }) ??\n cancelButtonRef.current ??\n focusables[0];\n\n focusable?.focus();\n };\n\n const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n useEscape(\n e => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n e.stopPropagation();\n },\n dialogRef,\n [onDismiss, onCancelHandler]\n );\n\n useOuterEvent('mousedown', [target, dialogRef], () => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n });\n\n // Using layout effect to capture the focused element prior to dialog elements taking focus.\n useLayoutEffect(() => {\n const initiatorElement = getActiveElement();\n\n return () => {\n if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n initiatorElement.focus();\n }\n };\n }, []);\n\n useEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n useEffect(() => {\n const closeDialog = () => {\n setTimeout(() => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n }, 0);\n };\n\n target.addEventListener('click', closeDialog);\n\n return () => {\n target.removeEventListener('click', closeDialog);\n };\n }, []);\n\n return (\n <StyledFormDialog\n {...restProps}\n {...(heading === undefined\n ? { 'aria-label': ariaLabel }\n : { 'aria-labelledby': headingId })}\n arrow={arrow}\n target={target}\n progress={progress}\n ref={dialogRef}\n >\n {heading !== undefined && (\n <Flex\n container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n item={{ shrink: 0 }}\n as={StyledDialogHeader}\n >\n <Text id={headingId} variant='h2'>\n {heading}\n </Text>\n </Flex>\n )}\n\n <Flex item={{ grow: 1 }} as={StyledDialogContent} ref={dialogContentRef}>\n {children && (\n <StyledChildrenWrap inert={progress ? '' : undefined}>{children}</StyledChildrenWrap>\n )}\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Flex>\n\n <Flex\n container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n item={{ shrink: 0 }}\n as={StyledDialogFooter}\n >\n <Button\n onClick={() => {\n onCancelHandler();\n }}\n disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n ref={cancelButtonRef}\n >\n {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n </Button>\n\n <Button\n variant='primary'\n onClick={() => {\n (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n }}\n disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n >\n {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n </Button>\n </Flex>\n </StyledFormDialog>\n );\n }\n);\n\nexport default FormDialog;\n"]}
1	+ {"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,EACT,OAAO,EACP,aAAa,EACb,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAEjD,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,KAAK,GAAG,IAAI,EACZ,MAAM,EACN,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,QAAQ,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAO;QAC3C,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,0BAA0B,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,0BAA0B,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC;QACtE,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;IAErF,SAAS,CACP,CAAC,CAAC,EAAE;QACF,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;QACD,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,EACD,SAAS,EACT,CAAC,SAAS,EAAE,eAAe,CAAC,CAC7B,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACnD,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,4FAA4F;IAC5F,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;QAE5C,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,YAAY,WAAW,IAAI,gBAAgB,CAAC,WAAW,EAAE,CAAC;gBAC5E,gBAAgB,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,SAAS,EAAE,CAAC;oBACd,SAAS,EAAE,CAAC;gBACd,CAAC;qBAAM,CAAC;oBACN,eAAe,EAAE,CAAC;gBACpB,CAAC;gBACD,yGAAyG;YAC3G,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,gBAAgB,OACX,SAAS,KACT,CAAC,OAAO,KAAK,SAAS;YACxB,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE;YAC7B,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,EACrC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,SAAS,aAEb,OAAO,KAAK,SAAS,IAAI,CACxB,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;oBAC5C,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;iBACf,EACD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,kBAAkB,aAEtB,KAAC,IAAI,IAAC,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,YAC/C,OAAO,GACH,EACN,cAAc,EAAE,OAAO,IAAI,CAC1B,KAAC,cAAc,IAAC,OAAO,EAAE,cAAc,CAAC,OAAO,YAC5C,cAAc,CAAC,QAAQ,GACT,CAClB,IACI,CACR,EAED,MAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,mBAAmB,EACvB,GAAG,EAAE,gBAAgB,EACrB,QAAQ,EAAE,eAAe,aAExB,QAAQ,IAAI,CACX,KAAC,kBAAkB,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAAG,QAAQ,GAAsB,CACtF,EACD,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,cAAc,QACd,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAC5D,IACG,EAEP,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,EAC/D,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,kBAAkB,aAEtB,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;4BACZ,eAAe,EAAE,CAAC;wBACpB,CAAC,EACD,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAEvE,OAAO,QAAQ,KAAK,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GACvE,EAET,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE;4BACZ,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;wBACnE,CAAC,EACD,QAAQ,EAAE,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAEvE,OAAO,QAAQ,KAAK,UAAU,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GACvE,IACJ,IACU,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useContentTabIndex,\n useEscape,\n useI18n,\n useOuterEvent,\n useUID\n} from '../../hooks';\nimport { getActiveElement, focusNonInteractiveElement } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport AdditionalInfo from '../AdditionalInfo';\nimport type { RefElement } from '../../types';\nimport Flex from '../Flex';\n\nimport {\n StyledChildrenWrap,\n StyledDialogContent,\n StyledDialogFooter,\n StyledDialogHeader\n} from './Dialog.styles';\nimport type { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog = forwardRef<RefElement<FormDialogProps>, PropsWithoutRef<FormDialogProps>>(\n function FormDialog(\n {\n arrow = true,\n target,\n heading,\n 'aria-label': ariaLabel,\n children,\n progress,\n onDismiss,\n onCancel,\n onSubmit,\n additionalInfo,\n ...restProps\n },\n ref\n ) {\n const t = useI18n();\n const headingId = useUID();\n const headingRef = useRef<HTMLHeadingElement>(null);\n const dialogRef = useConsolidatedRef(ref);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n const contentTabIndex = useContentTabIndex(dialogRef, dialogContentRef, [], [progress]);\n\n const setFocus = () => {\n if (progress \|\| !dialogRef.current) return;\n if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current, heading ?? ariaLabel);\n } else {\n focusNonInteractiveElement(dialogRef.current, heading ?? ariaLabel);\n }\n };\n\n const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n useEscape(\n e => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n e.stopPropagation();\n },\n dialogRef,\n [onDismiss, onCancelHandler]\n );\n\n useOuterEvent('mousedown', [target, dialogRef], () => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n });\n\n // Using layout effect to capture the focused element prior to dialog elements taking focus.\n useLayoutEffect(() => {\n const initiatorElement = getActiveElement();\n\n return () => {\n if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n initiatorElement.focus();\n }\n };\n }, []);\n\n useEffect(() => {\n if (!progress) {\n setFocus();\n }\n }, [progress]);\n\n useEffect(() => {\n const closeDialog = () => {\n setTimeout(() => {\n if (onDismiss) {\n onDismiss();\n } else {\n onCancelHandler();\n }\n // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n }, 0);\n };\n\n target.addEventListener('click', closeDialog);\n\n return () => {\n target.removeEventListener('click', closeDialog);\n };\n }, []);\n\n return (\n <StyledFormDialog\n {...restProps}\n {...(heading === undefined\n ? { 'aria-label': ariaLabel }\n : { 'aria-labelledby': headingId })}\n arrow={arrow}\n target={target}\n progress={progress}\n ref={dialogRef}\n >\n {heading !== undefined && (\n <Flex\n container={{\n alignItems: 'center',\n gap: additionalInfo?.heading ? 1 : undefined,\n pad: [2, 2, 1]\n }}\n item={{ shrink: 0 }}\n as={StyledDialogHeader}\n >\n <Text ref={headingRef} id={headingId} variant='h2'>\n {heading}\n </Text>\n {additionalInfo?.heading && (\n <AdditionalInfo heading={additionalInfo.heading}>\n {additionalInfo.children}\n </AdditionalInfo>\n )}\n </Flex>\n )}\n\n <Flex\n item={{ grow: 1 }}\n as={StyledDialogContent}\n ref={dialogContentRef}\n tabIndex={contentTabIndex}\n >\n {children && (\n <StyledChildrenWrap inert={progress ? '' : undefined}>{children}</StyledChildrenWrap>\n )}\n <Progress\n visible={!!progress}\n focusOnVisible\n placement='local'\n message={typeof progress === 'string' ? progress : undefined}\n />\n </Flex>\n\n <Flex\n container={{ alignItems: 'center', justify: 'between', pad: 2 }}\n item={{ shrink: 0 }}\n as={StyledDialogFooter}\n >\n <Button\n onClick={() => {\n onCancelHandler();\n }}\n disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n >\n {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n </Button>\n\n <Button\n variant='primary'\n onClick={() => {\n (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n }}\n disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n >\n {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n </Button>\n </Flex>\n </StyledFormDialog>\n );\n }\n);\n\nexport default FormDialog;\n"]}

package/lib/components/Dialog/InfoDialog.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"~~AAaA~~,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,QAAA,MAAM,UAAU,~~yHAyJf~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,QAAA,MAAM,UAAU,yHAsJf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/InfoDialog.js CHANGED Viewed

@@ -1,30 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect, useLayoutEffect } from 'react';
-import { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';
+import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';
+import { useConsolidatedRef, useContentTabIndex, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';
 import Text from '../Text';
 import Icon from '../Icon';
 import Progress from '../Progress';
 import Flex from '../Flex';
 import SummaryItem from '../SummaryItem';
-import { getActiveElement, getFocusables } from '../../utils';
+import { focusNonInteractiveElement, getActiveElement } from '../../utils';
 import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';
 import { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';
 const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps }, ref) {
     const t = useI18n();
     const headingId = useUID();
+    const headingRef = useRef(null);
+    const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;
     const dialogRef = useConsolidatedRef(ref);
     const dialogContentRef = useRef(null);
-    const closeButtonRef = useRef(null);
+    const contentTabIndex = useContentTabIndex(dialogRef, dialogContentRef, [], [progressProp]);
     const setFocus = () => {
         if (progressProp)
             return;
-        const focusables = getFocusables(dialogRef);
-        const focusable = focusables.find(el => {
-            return dialogContentRef.current?.contains(el);
-        }) ??
-            closeButtonRef.current ??
-            focusables[0];
-        focusable?.focus();
+        if (headingRef.current) {
+            focusNonInteractiveElement(headingRef.current, headingText);
+        }
+        else if (dialogRef.current) {
+            focusNonInteractiveElement(dialogRef.current, headingText);
+        }
     };
     useEscape(e => {
         onDismiss?.();
@@ -59,14 +60,14 @@ const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp
             target.removeEventListener('click', closeDialog);
         };
     }, []);
-    const heading = headingProp ? (_jsx(Text, { id: headingId, variant: 'h2', children: typeof headingProp === 'string' ? headingProp : headingProp.primary })) : null;
+    const heading = headingProp ? (_jsx(Text, { ref: headingRef, id: headingId, variant: 'h2', children: headingText })) : null;
     const progress = (_jsx(Progress, { visible: !!progressProp, focusOnVisible: true, placement: 'local', message: typeof progressProp === 'string' ? progressProp : undefined }));
     const dismissButton = (_jsx(StyledDismissButton, { icon: true, variant: 'simple', onClick: () => {
             onDismiss();
-        }, label: t('close'), ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }));
+        }, label: t('close'), children: _jsx(Icon, { name: 'times' }) }));
     return (_jsxs(StyledInfoDialog, { ...restProps, ...(typeof headingProp === 'string'
             ? { 'aria-labelledby': headingId }
-            : { 'aria-label': headingProp?.primary }), arrow: true, target: target, progress: progressProp, ref: dialogRef, children: [headingProp && heading && (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: [1, 2], gap: 1 }, item: { shrink: 0 }, as: StyledDialogHeader, children: [typeof headingProp === 'string' ? (heading) : (_jsx(SummaryItem, { primary: heading, secondary: headingProp.secondary ? (_jsx(Text, { variant: 'secondary', children: headingProp.secondary })) : undefined, visual: headingProp.visual })), dismissButton] })), (!headingProp || children || progressProp) && (_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, children: [!headingProp && dismissButton, children && (_jsx(StyledChildrenWrap, { inert: progressProp ? '' : undefined, children: children })), progress] }))] }));
+            : { 'aria-label': headingProp?.primary }), arrow: true, target: target, progress: progressProp, ref: dialogRef, children: [headingProp && heading && (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: [1, 2], gap: 1 }, item: { shrink: 0 }, as: StyledDialogHeader, children: [typeof headingProp === 'string' ? (heading) : (_jsx(SummaryItem, { ref: headingRef, primary: heading, secondary: headingProp.secondary ? (_jsx(Text, { variant: 'secondary', children: headingProp.secondary })) : undefined, visual: headingProp.visual })), dismissButton] })), (!headingProp || children || progressProp) && (_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, tabIndex: contentTabIndex, children: [!headingProp && dismissButton, children && (_jsx(StyledChildrenWrap, { inert: progressProp ? '' : undefined, children: children })), progress] }))] }));
 });
 export default InfoDialog;
 //# sourceMappingURL=InfoDialog.js.map

package/lib/components/Dialog/InfoDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,~~MAAM~~,EAAE,~~SAAS~~,EAAE,~~eAAe~~,EAAE,MAAM,OAAO,CAAC;AAGvE,OAAO,~~EAAE~~,kBAAkB,~~EAAE~~,SAAS,~~EAAE~~,OAAO,~~EAAE~~,aAAa,~~EAAE~~,MAAM,~~EAAE~~,MAAM,aAAa,CAAC;~~AAC5F~~,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,~~gBAAgB~~,EAAE,~~aAAa~~,EAAE,MAAM,aAAa,CAAC;~~AAG9D~~,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE9F,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5E,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAC3F,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,~~cAAc~~,GAAG,~~MAAM~~,~~CAAoB~~,~~IAAI~~,CAAC,CAAC;~~IAEvD~~,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,YAAY;YAAE,OAAO;~~QAEzB~~,~~MAAM~~,UAAU,~~GAAG,aAAa,~~CAAC,~~SAAS~~,~~CAAC~~,CAAC;~~QAE5C~~,~~MAAM~~,~~SAAS~~,~~GACb,~~UAAU,CAAC,~~IAAI~~,~~CAAC,~~EAAE,CAAC,~~EAAE~~;~~YACnB~~,~~OAAO~~,~~gBAAgB~~,CAAC,OAAO,EAAE,~~QAAQ,~~CAAC~~,EAAE,CAAC,CAAC~~;~~QAChD~~,~~CAAC~~,CAAC~~;YACF~~,~~cAAc~~,CAAC,OAAO~~;YACtB~~,~~UAAU~~,~~CAAC~~,CAAC,CAAC~~,CAAC~~;~~QAEhB~~,~~SAAS,EAAE,KAAK,EAAE,~~CAAC;~~IACrB~~,CAAC,CAAC;IAEF,SAAS,CACP,CAAC,CAAC,EAAE;QACF,SAAS,EAAE,EAAE,CAAC;QACd,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,EACD,SAAS,EACT,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACnD,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,4FAA4F;IAC5F,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;QAE5C,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,YAAY,WAAW,IAAI,gBAAgB,CAAC,WAAW,EAAE,CAAC;gBAC5E,gBAAgB,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,UAAU,CAAC,GAAG,EAAE;gBACd,SAAS,EAAE,EAAE,CAAC;gBACd,yGAAyG;YAC3G,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,CAC5B,KAAC,IAAI,IAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,~~YAC9B~~,~~OAAO,~~WAAW,~~KAAK~~,~~QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,GAC/D,~~CACR,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,QAAQ,GAAG,CACf,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,YAAY,EACvB,cAAc,QACd,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,GACpE,CACH,CAAC;IAEF,MAAM,aAAa,GAAG,CACpB,KAAC,mBAAmB,IAClB,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;YACZ,SAAS,EAAE,CAAC;QACd,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,~~EACjB~~,~~GAAG,EAAE,cAAc,YAEnB,~~KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACD,CACvB,CAAC;IAEF,OAAO,CACL,MAAC,gBAAgB,OACX,SAAS,KACT,CAAC,OAAO,WAAW,KAAK,QAAQ;YAClC,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE;YAClC,CAAC,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,EAC3C,KAAK,QACL,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,SAAS,aAEb,WAAW,IAAI,OAAO,IAAI,CACzB,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAC5E,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,kBAAkB,aAErB,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,CACjC,OAAO,CACR,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EACP,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,WAAW,CAAC,SAAS,GAAQ,CACzD,CAAC,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE,WAAW,CAAC,MAAM,GAC1B,CACH,EACA,aAAa,IACT,CACR,EAEA,CAAC,CAAC,WAAW,IAAI,QAAQ,IAAI,YAAY,CAAC,IAAI,CAC7C,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,mBAAmB,EACvB,GAAG,EAAE,gBAAgB,~~aAEpB~~,CAAC,WAAW,IAAI,aAAa,EAC7B,QAAQ,IAAI,CACX,KAAC,kBAAkB,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YACrD,QAAQ,GACU,CACtB,EACA,QAAQ,IACJ,CACR,IACgB,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, ~~useRef,~~ useEffect, useLayoutEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { useConsolidatedRef, useEscape, useI18n, useOuterEvent, useUID } from '../../hooks';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport Flex from '../Flex';\nimport SummaryItem from '../SummaryItem';\nimport { ~~getActiveElement~~, ~~getFocusables~~ } from '../../utils';\nimport type { RefElement } from '../../types';\n\nimport { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';\nimport type { InfoDialogProps } from './Dialog.types';\nimport { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';\n\nconst InfoDialog = forwardRef<RefElement<InfoDialogProps>, PropsWithoutRef<InfoDialogProps>>(\n function InfoDialog(\n { target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps },\n ref\n ) {\n const t = useI18n();\n const headingId = useUID();\n const dialogRef = useConsolidatedRef(ref);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n const ~~closeButtonRef~~ = ~~useRef<HTMLButtonElement>~~(~~null~~);\n\n const setFocus = () => {\n if (progressProp) return;\n\n ~~const~~ ~~focusables = getFocusables~~(~~dialogRef~~)~~;\n~~\n ~~const focusable =\n~~ ~~focusables.find~~(~~el => {\n return dialogContentRef~~.current~~?.contains(el~~);\n }) ~~??\~~n ~~closeButtonRef~~.current ~~??\n focusables[0]~~;\n\n ~~focusable?.focus();\n~~ };\n\n useEscape(\n e => {\n onDismiss?.();\n e.stopPropagation();\n },\n dialogRef,\n [onDismiss]\n );\n\n useOuterEvent('mousedown', [target, dialogRef], () => {\n onDismiss?.();\n });\n\n // Using layout effect to capture the focused element prior to dialog elements taking focus.\n useLayoutEffect(() => {\n const initiatorElement = getActiveElement();\n\n return () => {\n if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n initiatorElement.focus();\n }\n };\n }, []);\n\n useEffect(() => {\n if (!progressProp) {\n setFocus();\n }\n }, [progressProp]);\n\n useEffect(() => {\n const closeDialog = () => {\n setTimeout(() => {\n onDismiss?.();\n // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n }, 0);\n };\n\n target.addEventListener('click', closeDialog);\n\n return () => {\n target.removeEventListener('click', closeDialog);\n };\n }, []);\n\n const heading = headingProp ? (\n <Text id={headingId} variant='h2'>\n {~~typeof headingProp === 'string' ? headingProp : headingProp.primary~~}\n </Text>\n ) : null;\n\n const progress = (\n <Progress\n visible={!!progressProp}\n focusOnVisible\n placement='local'\n message={typeof progressProp === 'string' ? progressProp : undefined}\n />\n );\n\n const dismissButton = (\n <StyledDismissButton\n icon\n variant='simple'\n onClick={() => {\n onDismiss();\n }}\n label={t('close')}\n ~~ref={closeButtonRef}\n~~ >\n <Icon name='times' />\n </StyledDismissButton>\n );\n\n return (\n <StyledInfoDialog\n {...restProps}\n {...(typeof headingProp === 'string'\n ? { 'aria-labelledby': headingId }\n : { 'aria-label': headingProp?.primary })}\n arrow\n target={target}\n progress={progressProp}\n ref={dialogRef}\n >\n {headingProp && heading && (\n <Flex\n container={{ alignItems: 'center', justify: 'between', pad: [1, 2], gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledDialogHeader}\n >\n {typeof headingProp === 'string' ? (\n heading\n ) : (\n <SummaryItem\n primary={heading}\n secondary={\n headingProp.secondary ? (\n <Text variant='secondary'>{headingProp.secondary}</Text>\n ) : undefined\n }\n visual={headingProp.visual}\n />\n )}\n {dismissButton}\n </Flex>\n )}\n\n {(!headingProp \|\| children \|\| progressProp) && (\n <Flex\n container={{ direction: 'column' }}\n item={{ grow: 1 }}\n as={StyledDialogContent}\n ref={dialogContentRef}\n >\n {!headingProp && dismissButton}\n {children && (\n <StyledChildrenWrap inert={progressProp ? '' : undefined}>\n {children}\n </StyledChildrenWrap>\n )}\n {progress}\n </Flex>\n )}\n </StyledInfoDialog>\n );\n }\n);\n\nexport default InfoDialog;\n"]}
1	+ {"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGvE,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,EACT,OAAO,EACP,aAAa,EACb,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG3E,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE9F,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5E,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAC3F,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IACtE,MAAM,WAAW,GAAG,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,OAAO,CAAC;IACzF,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE5F,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,YAAY;YAAE,OAAO;QACzB,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,0BAA0B,CAAC,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC9D,CAAC;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YAC7B,0BAA0B,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CACP,CAAC,CAAC,EAAE;QACF,SAAS,EAAE,EAAE,CAAC;QACd,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,EACD,SAAS,EACT,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACnD,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,4FAA4F;IAC5F,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;QAE5C,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,YAAY,WAAW,IAAI,gBAAgB,CAAC,WAAW,EAAE,CAAC;gBAC5E,gBAAgB,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,UAAU,CAAC,GAAG,EAAE;gBACd,SAAS,EAAE,EAAE,CAAC;gBACd,yGAAyG;YAC3G,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,CAC5B,KAAC,IAAI,IAAC,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,YAC/C,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,QAAQ,GAAG,CACf,KAAC,QAAQ,IACP,OAAO,EAAE,CAAC,CAAC,YAAY,EACvB,cAAc,QACd,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,GACpE,CACH,CAAC;IAEF,MAAM,aAAa,GAAG,CACpB,KAAC,mBAAmB,IAClB,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE;YACZ,SAAS,EAAE,CAAC;QACd,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,YAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACD,CACvB,CAAC;IAEF,OAAO,CACL,MAAC,gBAAgB,OACX,SAAS,KACT,CAAC,OAAO,WAAW,KAAK,QAAQ;YAClC,CAAC,CAAC,EAAE,iBAAiB,EAAE,SAAS,EAAE;YAClC,CAAC,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,EAC3C,KAAK,QACL,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,SAAS,aAEb,WAAW,IAAI,OAAO,IAAI,CACzB,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAC5E,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,kBAAkB,aAErB,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,CACjC,OAAO,CACR,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IACV,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,SAAS,EACP,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CACtB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,WAAW,CAAC,SAAS,GAAQ,CACzD,CAAC,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE,WAAW,CAAC,MAAM,GAC1B,CACH,EACA,aAAa,IACT,CACR,EAEA,CAAC,CAAC,WAAW,IAAI,QAAQ,IAAI,YAAY,CAAC,IAAI,CAC7C,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,mBAAmB,EACvB,GAAG,EAAE,gBAAgB,EACrB,QAAQ,EAAE,eAAe,aAExB,CAAC,WAAW,IAAI,aAAa,EAC7B,QAAQ,IAAI,CACX,KAAC,kBAAkB,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YACrD,QAAQ,GACU,CACtB,EACA,QAAQ,IACJ,CACR,IACgB,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n useConsolidatedRef,\n useContentTabIndex,\n useEscape,\n useI18n,\n useOuterEvent,\n useUID\n} from '../../hooks';\nimport Text from '../Text';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport Flex from '../Flex';\nimport SummaryItem from '../SummaryItem';\nimport { focusNonInteractiveElement, getActiveElement } from '../../utils';\nimport type { RefElement } from '../../types';\n\nimport { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';\nimport type { InfoDialogProps } from './Dialog.types';\nimport { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';\n\nconst InfoDialog = forwardRef<RefElement<InfoDialogProps>, PropsWithoutRef<InfoDialogProps>>(\n function InfoDialog(\n { target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps },\n ref\n ) {\n const t = useI18n();\n const headingId = useUID();\n const headingRef = useRef<HTMLHeadingElement \| HTMLSpanElement>(null);\n const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;\n const dialogRef = useConsolidatedRef(ref);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n const contentTabIndex = useContentTabIndex(dialogRef, dialogContentRef, [], [progressProp]);\n\n const setFocus = () => {\n if (progressProp) return;\n if (headingRef.current) {\n focusNonInteractiveElement(headingRef.current, headingText);\n } else if (dialogRef.current) {\n focusNonInteractiveElement(dialogRef.current, headingText);\n }\n };\n\n useEscape(\n e => {\n onDismiss?.();\n e.stopPropagation();\n },\n dialogRef,\n [onDismiss]\n );\n\n useOuterEvent('mousedown', [target, dialogRef], () => {\n onDismiss?.();\n });\n\n // Using layout effect to capture the focused element prior to dialog elements taking focus.\n useLayoutEffect(() => {\n const initiatorElement = getActiveElement();\n\n return () => {\n if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {\n initiatorElement.focus();\n }\n };\n }, []);\n\n useEffect(() => {\n if (!progressProp) {\n setFocus();\n }\n }, [progressProp]);\n\n useEffect(() => {\n const closeDialog = () => {\n setTimeout(() => {\n onDismiss?.();\n // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.\n }, 0);\n };\n\n target.addEventListener('click', closeDialog);\n\n return () => {\n target.removeEventListener('click', closeDialog);\n };\n }, []);\n\n const heading = headingProp ? (\n <Text ref={headingRef} id={headingId} variant='h2'>\n {headingText}\n </Text>\n ) : null;\n\n const progress = (\n <Progress\n visible={!!progressProp}\n focusOnVisible\n placement='local'\n message={typeof progressProp === 'string' ? progressProp : undefined}\n />\n );\n\n const dismissButton = (\n <StyledDismissButton\n icon\n variant='simple'\n onClick={() => {\n onDismiss();\n }}\n label={t('close')}\n >\n <Icon name='times' />\n </StyledDismissButton>\n );\n\n return (\n <StyledInfoDialog\n {...restProps}\n {...(typeof headingProp === 'string'\n ? { 'aria-labelledby': headingId }\n : { 'aria-label': headingProp?.primary })}\n arrow\n target={target}\n progress={progressProp}\n ref={dialogRef}\n >\n {headingProp && heading && (\n <Flex\n container={{ alignItems: 'center', justify: 'between', pad: [1, 2], gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledDialogHeader}\n >\n {typeof headingProp === 'string' ? (\n heading\n ) : (\n <SummaryItem\n ref={headingRef}\n primary={heading}\n secondary={\n headingProp.secondary ? (\n <Text variant='secondary'>{headingProp.secondary}</Text>\n ) : undefined\n }\n visual={headingProp.visual}\n />\n )}\n {dismissButton}\n </Flex>\n )}\n\n {(!headingProp \|\| children \|\| progressProp) && (\n <Flex\n container={{ direction: 'column' }}\n item={{ grow: 1 }}\n as={StyledDialogContent}\n ref={dialogContentRef}\n tabIndex={contentTabIndex}\n >\n {!headingProp && dismissButton}\n {children && (\n <StyledChildrenWrap inert={progressProp ? '' : undefined}>\n {children}\n </StyledChildrenWrap>\n )}\n {progress}\n </Flex>\n )}\n </StyledInfoDialog>\n );\n }\n);\n\nexport default InfoDialog;\n"]}

package/lib/components/Dialog/InfoDialog.styles.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
-export declare const StyledDismissButton: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledInfoDialog: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("./Dialog.types").DialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDismissButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | 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]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<import("../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledInfoDialog: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("./Dialog.types").DialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | 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]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("./Dialog.types").DialogProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=InfoDialog.styles.d.ts.map

package/lib/components/Dialog/InfoDialog.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,~~oLAAmB,~~CAAC;AAEpD,eAAO,MAAM,gBAAgB,~~gPAS3B,~~CAAC"}
1	+ {"version":3,"file":"InfoDialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB;;2JAAmB,CAAC;AAEpD,eAAO,MAAM,gBAAgB;;uNAS3B,CAAC"}

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

@@ -57,9 +57,9 @@ export interface DrawerProps extends AsProp, BaseProps {
     nullWhenClosed?: boolean;
 }
 type State = 'open' | 'closed' | 'opening' | 'closing';
-export declare const StyledDrawer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<DrawerProps & {
+export declare const StyledDrawer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Partial<DrawerProps & {
     state: State;
-}>, never>;
+}>>> & string;
 export declare const Drawer: FunctionComponent<DrawerProps & ForwardProps>;
 export default Drawer;
 //# sourceMappingURL=Drawer.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EAIV,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAanE,MAAM,WAAW,WAAY,SAAQ,MAAM,EAAE,SAAS;IACpD;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,eAAO,MAAM,YAAY;WAA6C,KAAK;~~UAuCzE~~,CAAC;AAIH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,~~CA+J~~/D,CAAC;AAEH,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EAIV,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAanE,MAAM,WAAW,WAAY,SAAQ,MAAM,EAAE,SAAS;IACpD;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,eAAO,MAAM,YAAY;WAA6C,KAAK;aA+CzE,CAAC;AAIH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAgK/D,CAAC;AAEH,eAAe,MAAM,CAAC"}

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

@@ -43,6 +43,14 @@ export const StyledDrawer = styled.div(props => {
         css `
       width: ${dimension === 'horizontal' ? 'var(--resize-drawer-width)' : '100%'};
     `}
+    ${position === 'fixed' &&
+        (placement === 'left' || placement === 'right') &&
+        css `
+      /* stylelint-disable unit-allowed-list, length-zero-no-unit */
+      padding-${placement}: env(safe-area-inset-${placement}, 0px);
+      /* stylelint-enable unit-allowed-list, length-zero-no-unit */
+    `}
   `;
 });
 StyledDrawer.defaultProps = defaultThemeProp;
@@ -122,6 +130,7 @@ export const Drawer = forwardRef(function Drawer(props, ref) {
         if (e.code !== 'ArrowLeft' && e.code !== 'ArrowRight')
             return;
         e.preventDefault();
+        e.stopPropagation();
         const resizeDirection = (e.code === 'ArrowLeft' ? 1 : -1) * (placement === 'right' ? 1 : -1);
         const newWidth = Math.max(rect.width + resizeDirection * resizeStep, parseInt(drawerMinWidth, 10));
         targetNode.style.setProperty('--resize-drawer-width', `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback, forwardRef, useState, useRef } from 'react';\nimport type {\n Ref,\n FunctionComponent,\n ReactNode,\n TransitionEvent,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { remToPx } from 'polished';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious, useDirection } from '../../hooks';\nimport type { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { getChildOfRootNode, reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\nimport {\n resizeDrawerKeyboardStep,\n resizeDrawerMaxWidth,\n resizeDrawerMinWidth\n} from '../../styles/constants';\n\nimport ResizeHandle from './ResizeHandle';\n\nconst drawerMinWidth = remToPx(resizeDrawerMinWidth);\n\nexport interface DrawerProps extends AsProp, BaseProps {\n /*\n If true, the Drawer will be visible.\n * @default false\n /\n open: boolean;\n /* Content of the Drawer. /\n children?: ReactNode;\n /\n Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n * @default false\n /\n shadow?: boolean;\n /\n Used to determine which side of the viewport the Drawer should open from.\n * @default 'right'\n /\n placement?: 'top' \| 'right' \| 'bottom' \| 'left';\n /\n The position of the Drawer.\n * @default 'absolute'\n /\n position?: 'absolute' \| 'fixed';\n /\n Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n * @default '0.25s'\n /\n transitionSpeed?: string;\n /\n The width or height that the Drawer will open to, depending on its placement.\n * If `resizeable`, is true this value will be overridden by the width set by the user.\n * @default '100%'\n /\n size?: string;\n /\n If true, the Drawer will be resizable. Will not be applied if `placement` is set to `top` or `bottom`.\n * @default false\n * @internal Can only be used with one drawer at a time.\n /\n resizeable?: boolean;\n /* Callback fired after Drawer opens. /\n onAfterOpen?: () => void;\n /* Callback fired after Drawer closes. /\n onAfterClose?: () => void;\n /* Callback fired before Drawer opens. /\n onBeforeOpen?: () => void;\n /* Callback fired before Drawer closes. /\n onBeforeClose?: () => void;\n /* Callback fired when a click action occurs outside of the Drawer. /\n onOuterClick?: () => void;\n /\n If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n /\n nullWhenClosed?: boolean;\n}\n\ntype State = 'open' \| 'closed' \| 'opening' \| 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n const { state, shadow, position, placement, transitionSpeed, size, resizeable, theme } = props;\n let dimension = 'horizontal';\n let axis = 'X';\n let anchor = 'top';\n\n if (placement === 'top' \|\| placement === 'bottom') {\n dimension = 'vertical';\n axis = 'Y';\n anchor = 'left';\n }\n\n const translate = state === 'open' \|\| state === 'opening' ? 0 : '100%';\n const speed = transitionSpeed \|\| theme.base.animation.speed;\n\n return css`\n z-index: ${theme.base['z-index'].drawer};\n position: ${position};\n ${placement}: 0;\n ${anchor}: 0;\n height: ${dimension === 'vertical' ? size : '100%'};\n width: ${dimension === 'horizontal' ? size : '100%'};\n transition-property: transform, box-shadow, opacity;\n transition-duration: max(${speed}, 0.0001s);\n transition-timing-function: ${theme.base.animation.timing.ease};\n transform: ${state === 'open'\n ? 'none'\n : `translate${axis}(${placement === 'top' \|\| placement === 'left' ? '-' : ''}${translate})`};\n\n ${shadow &&\n css`\n box-shadow: ${theme.base.shadow.high};\n `}\n\n ${resizeable &&\n css`\n width: ${dimension === 'horizontal' ? 'var(--resize-drawer-width)' : '100%'};\n `}\n `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nexport const Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(function Drawer(\n props: DrawerProps,\n ref: Ref<HTMLElement>\n) {\n const {\n open = false,\n shadow = false,\n position = 'absolute',\n children,\n placement = 'right',\n transitionSpeed,\n size = '100%',\n resizeable = false,\n onAfterOpen,\n onAfterClose,\n onBeforeOpen,\n onBeforeClose,\n onOuterClick,\n nullWhenClosed = false,\n ...restProps\n } = props;\n\n const drawerRef = useConsolidatedRef(ref);\n const { ltr, rtl } = useDirection();\n\n const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n let prevState = usePrevious(state);\n if (!prevState) prevState = state;\n\n useOuterEvent(\n 'mousedown',\n [drawerRef],\n useCallback(() => {\n if (open) onOuterClick?.();\n }, [open, onOuterClick])\n );\n\n useEffect(() => {\n if (open && (state === 'closed' \|\| state === 'closing')) {\n onBeforeOpen?.();\n reflow(drawerRef.current);\n setState('opening');\n } else if (!open && (state === 'open' \|\| state === 'opening')) {\n onBeforeClose?.();\n setState('closing');\n } else if (open && state === 'open' && prevState !== 'open') {\n onAfterOpen?.();\n } else if (!open && state === 'closed' && prevState !== 'closed') {\n onAfterClose?.();\n }\n }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent): void => {\n if (e.target !== drawerRef.current \|\| e.propertyName !== 'transform') return;\n setState(open ? 'open' : 'closed');\n },\n [open]\n );\n\n const dragStartXRef = useRef<number>();\n\n useEffect(() => {\n if (!resizeable \|\| !drawerRef.current) return;\n const targetNode = getChildOfRootNode(drawerRef);\n if (!targetNode) return;\n if (!targetNode.style.getPropertyValue('--resize-drawer-width')) {\n targetNode.style.setProperty('--resize-drawer-width', size);\n }\n }, [drawerRef.current]);\n\n const handleResize = useCallback(\n (e: ReactMouseEvent) => {\n const targetNode = getChildOfRootNode(drawerRef);\n const rect = drawerRef.current?.getBoundingClientRect();\n if (!rect \|\| !targetNode) return;\n\n dragStartXRef.current = e.clientX;\n\n const ac = new AbortController();\n targetNode.addEventListener(\n 'mousemove',\n moveEvent => {\n if (!dragStartXRef.current \|\| !rect.width) return;\n\n const initialX = dragStartXRef.current;\n const widthDiff =\n placement === 'right' ? initialX - moveEvent.clientX : moveEvent.clientX - initialX;\n\n const newWidth = Math.max(widthDiff + rect.width, parseInt(drawerMinWidth, 10));\n\n // Set root-level CSS variable to communicate width to AppShell\n targetNode.style.setProperty(\n '--resize-drawer-width',\n `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`\n );\n },\n { passive: true, signal: ac.signal }\n );\n\n targetNode.addEventListener(\n 'mouseup',\n () => {\n ac.abort();\n },\n { once: true }\n );\n },\n [placement]\n );\n\n const keyboardResize = useCallback(\n (e: ReactKeyboardEvent, grabbed: boolean) => {\n if (!grabbed) return;\n const targetNode = getChildOfRootNode(drawerRef);\n const resizeStep = document.documentElement.clientWidth resizeDrawerKeyboardStep;\n const rect = drawerRef.current?.getBoundingClientRect();\n if (!rect \|\| !targetNode) return;\n if (e.code !== 'ArrowLeft' && e.code !== 'ArrowRight') return;\n e.preventDefault();\n\n const resizeDirection = (e.code === 'ArrowLeft' ? 1 : -1) * (placement === 'right' ? 1 : -1);\n\n const newWidth = Math.max(\n rect.width + resizeDirection * resizeStep,\n parseInt(drawerMinWidth, 10)\n );\n targetNode.style.setProperty(\n '--resize-drawer-width',\n `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`\n );\n },\n [placement]\n );\n\n const renderResizeHandle =\n resizeable &&\n state === 'open' &&\n ((placement === 'left' && rtl) \|\| (placement === 'right' && ltr));\n\n return state === 'closed' && !open && nullWhenClosed ? null : (\n <StyledDrawer\n ref={drawerRef}\n position={position}\n shadow={shadow && open}\n transitionSpeed={transitionSpeed}\n placement={placement}\n size={size}\n resizeable={resizeable}\n open={open}\n state={state}\n onTransitionEnd={onTransitionEnd}\n {...restProps}\n >\n {children}\n {renderResizeHandle && <ResizeHandle onMouseDown={handleResize} onKeyDown={keyboardResize} />}\n </StyledDrawer>\n );\n});\n\nexport default Drawer;\n"]}
1	+ {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback, forwardRef, useState, useRef } from 'react';\nimport type {\n Ref,\n FunctionComponent,\n ReactNode,\n TransitionEvent,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { remToPx } from 'polished';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious, useDirection } from '../../hooks';\nimport type { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { getChildOfRootNode, reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\nimport {\n resizeDrawerKeyboardStep,\n resizeDrawerMaxWidth,\n resizeDrawerMinWidth\n} from '../../styles/constants';\n\nimport ResizeHandle from './ResizeHandle';\n\nconst drawerMinWidth = remToPx(resizeDrawerMinWidth);\n\nexport interface DrawerProps extends AsProp, BaseProps {\n /*\n If true, the Drawer will be visible.\n * @default false\n /\n open: boolean;\n /* Content of the Drawer. /\n children?: ReactNode;\n /\n Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n * @default false\n /\n shadow?: boolean;\n /\n Used to determine which side of the viewport the Drawer should open from.\n * @default 'right'\n /\n placement?: 'top' \| 'right' \| 'bottom' \| 'left';\n /\n The position of the Drawer.\n * @default 'absolute'\n /\n position?: 'absolute' \| 'fixed';\n /\n Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n * @default '0.25s'\n /\n transitionSpeed?: string;\n /\n The width or height that the Drawer will open to, depending on its placement.\n * If `resizeable`, is true this value will be overridden by the width set by the user.\n * @default '100%'\n /\n size?: string;\n /\n If true, the Drawer will be resizable. Will not be applied if `placement` is set to `top` or `bottom`.\n * @default false\n * @internal Can only be used with one drawer at a time.\n /\n resizeable?: boolean;\n /* Callback fired after Drawer opens. /\n onAfterOpen?: () => void;\n /* Callback fired after Drawer closes. /\n onAfterClose?: () => void;\n /* Callback fired before Drawer opens. /\n onBeforeOpen?: () => void;\n /* Callback fired before Drawer closes. /\n onBeforeClose?: () => void;\n /* Callback fired when a click action occurs outside of the Drawer. /\n onOuterClick?: () => void;\n /\n If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n /\n nullWhenClosed?: boolean;\n}\n\ntype State = 'open' \| 'closed' \| 'opening' \| 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n const { state, shadow, position, placement, transitionSpeed, size, resizeable, theme } = props;\n let dimension = 'horizontal';\n let axis = 'X';\n let anchor = 'top';\n\n if (placement === 'top' \|\| placement === 'bottom') {\n dimension = 'vertical';\n axis = 'Y';\n anchor = 'left';\n }\n\n const translate = state === 'open' \|\| state === 'opening' ? 0 : '100%';\n const speed = transitionSpeed \|\| theme.base.animation.speed;\n\n return css`\n z-index: ${theme.base['z-index'].drawer};\n position: ${position};\n ${placement}: 0;\n ${anchor}: 0;\n height: ${dimension === 'vertical' ? size : '100%'};\n width: ${dimension === 'horizontal' ? size : '100%'};\n transition-property: transform, box-shadow, opacity;\n transition-duration: max(${speed}, 0.0001s);\n transition-timing-function: ${theme.base.animation.timing.ease};\n transform: ${state === 'open'\n ? 'none'\n : `translate${axis}(${placement === 'top' \|\| placement === 'left' ? '-' : ''}${translate})`};\n\n ${shadow &&\n css`\n box-shadow: ${theme.base.shadow.high};\n `}\n\n ${resizeable &&\n css`\n width: ${dimension === 'horizontal' ? 'var(--resize-drawer-width)' : '100%'};\n `}\n\n ${position === 'fixed' &&\n (placement === 'left' \|\| placement === 'right') &&\n css`\n / stylelint-disable unit-allowed-list, length-zero-no-unit /\n padding-${placement}: env(safe-area-inset-${placement}, 0px);\n / stylelint-enable unit-allowed-list, length-zero-no-unit /\n `}\n `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nexport const Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(function Drawer(\n props: DrawerProps,\n ref: Ref<HTMLElement>\n) {\n const {\n open = false,\n shadow = false,\n position = 'absolute',\n children,\n placement = 'right',\n transitionSpeed,\n size = '100%',\n resizeable = false,\n onAfterOpen,\n onAfterClose,\n onBeforeOpen,\n onBeforeClose,\n onOuterClick,\n nullWhenClosed = false,\n ...restProps\n } = props;\n\n const drawerRef = useConsolidatedRef(ref);\n const { ltr, rtl } = useDirection();\n\n const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n let prevState = usePrevious(state);\n if (!prevState) prevState = state;\n\n useOuterEvent(\n 'mousedown',\n [drawerRef],\n useCallback(() => {\n if (open) onOuterClick?.();\n }, [open, onOuterClick])\n );\n\n useEffect(() => {\n if (open && (state === 'closed' \|\| state === 'closing')) {\n onBeforeOpen?.();\n reflow(drawerRef.current);\n setState('opening');\n } else if (!open && (state === 'open' \|\| state === 'opening')) {\n onBeforeClose?.();\n setState('closing');\n } else if (open && state === 'open' && prevState !== 'open') {\n onAfterOpen?.();\n } else if (!open && state === 'closed' && prevState !== 'closed') {\n onAfterClose?.();\n }\n }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent): void => {\n if (e.target !== drawerRef.current \|\| e.propertyName !== 'transform') return;\n setState(open ? 'open' : 'closed');\n },\n [open]\n );\n\n const dragStartXRef = useRef<number>();\n\n useEffect(() => {\n if (!resizeable \|\| !drawerRef.current) return;\n const targetNode = getChildOfRootNode(drawerRef);\n if (!targetNode) return;\n if (!targetNode.style.getPropertyValue('--resize-drawer-width')) {\n targetNode.style.setProperty('--resize-drawer-width', size);\n }\n }, [drawerRef.current]);\n\n const handleResize = useCallback(\n (e: ReactMouseEvent) => {\n const targetNode = getChildOfRootNode(drawerRef);\n const rect = drawerRef.current?.getBoundingClientRect();\n if (!rect \|\| !targetNode) return;\n\n dragStartXRef.current = e.clientX;\n\n const ac = new AbortController();\n targetNode.addEventListener(\n 'mousemove',\n moveEvent => {\n if (!dragStartXRef.current \|\| !rect.width) return;\n\n const initialX = dragStartXRef.current;\n const widthDiff =\n placement === 'right' ? initialX - moveEvent.clientX : moveEvent.clientX - initialX;\n\n const newWidth = Math.max(widthDiff + rect.width, parseInt(drawerMinWidth, 10));\n\n // Set root-level CSS variable to communicate width to AppShell\n targetNode.style.setProperty(\n '--resize-drawer-width',\n `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`\n );\n },\n { passive: true, signal: ac.signal }\n );\n\n targetNode.addEventListener(\n 'mouseup',\n () => {\n ac.abort();\n },\n { once: true }\n );\n },\n [placement]\n );\n\n const keyboardResize = useCallback(\n (e: ReactKeyboardEvent, grabbed: boolean) => {\n if (!grabbed) return;\n const targetNode = getChildOfRootNode(drawerRef);\n const resizeStep = document.documentElement.clientWidth resizeDrawerKeyboardStep;\n const rect = drawerRef.current?.getBoundingClientRect();\n if (!rect \|\| !targetNode) return;\n if (e.code !== 'ArrowLeft' && e.code !== 'ArrowRight') return;\n e.preventDefault();\n e.stopPropagation();\n\n const resizeDirection = (e.code === 'ArrowLeft' ? 1 : -1) * (placement === 'right' ? 1 : -1);\n\n const newWidth = Math.max(\n rect.width + resizeDirection * resizeStep,\n parseInt(drawerMinWidth, 10)\n );\n targetNode.style.setProperty(\n '--resize-drawer-width',\n `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`\n );\n },\n [placement]\n );\n\n const renderResizeHandle =\n resizeable &&\n state === 'open' &&\n ((placement === 'left' && rtl) \|\| (placement === 'right' && ltr));\n\n return state === 'closed' && !open && nullWhenClosed ? null : (\n <StyledDrawer\n ref={drawerRef}\n position={position}\n shadow={shadow && open}\n transitionSpeed={transitionSpeed}\n placement={placement}\n size={size}\n resizeable={resizeable}\n open={open}\n state={state}\n onTransitionEnd={onTransitionEnd}\n {...restProps}\n >\n {children}\n {renderResizeHandle && <ResizeHandle onMouseDown={handleResize} onKeyDown={keyboardResize} />}\n </StyledDrawer>\n );\n});\n\nexport default Drawer;\n"]}

package/lib/components/Drawer/ResizeHandle.d.ts CHANGED Viewed

@@ -2,8 +2,9 @@ import type { MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent
 export interface ResizeHandleProps {
     onKeyDown: (e: ReactKeyboardEvent, grabbed: boolean) => void;
     onMouseDown: (e: ReactMouseEvent) => void;
+    contextualLabel?: string;
 }
-export declare const StyledResizeHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledResizeHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const ResizeHandle: import("react").ForwardRefExoticComponent<ResizeHandleProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ResizeHandle;
 //# sourceMappingURL=ResizeHandle.d.ts.map

package/lib/components/Drawer/ResizeHandle.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/ResizeHandle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AAef,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,CAAC,CAAC,EAAE,kBAAkB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;~~CAC3C~~;AAyBD,eAAO,MAAM,kBAAkB,~~yGA8B7B~~,CAAC;AAIH,QAAA,MAAM,YAAY,~~8GAqEhB~~,CAAC;AAEH,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/ResizeHandle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AAef,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,CAAC,CAAC,EAAE,kBAAkB,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,WAAW,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAyBD,eAAO,MAAM,kBAAkB,6NA8B7B,CAAC;AAIH,QAAA,MAAM,YAAY,8GAuEhB,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/lib/components/Drawer/ResizeHandle.js CHANGED Viewed

@@ -63,7 +63,7 @@ export const StyledResizeHandle = styled.div(({ theme }) => {
   `;
 });
 StyledResizeHandle.defaultProps = defaultThemeProp;
-const ResizeHandle = forwardRef(function ResizeHandle({ onMouseDown, onKeyDown }, ref) {
+const ResizeHandle = forwardRef(function ResizeHandle({ onMouseDown, onKeyDown, contextualLabel }, ref) {
     const resizeHandleRef = useConsolidatedRef(ref);
     const t = useI18n();
     const [mouseGrabbed, setMouseGrabbed] = useState(false);
@@ -99,7 +99,8 @@ const ResizeHandle = forwardRef(function ResizeHandle({ onMouseDown, onKeyDown }
         targetNode.style.removeProperty('user-select');
         setMouseGrabbed(false);
     };
-    return (_jsx(StyledResizeHandle, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ref: resizeHandleRef, children: _jsx(StyledResizeButton, { tabIndex: 0, icon: true, label: !mouseGrabbed && !keyboardGrabbed ? t('resize') : undefined, "aria-label": !mouseGrabbed && !keyboardGrabbed
+    const label = contextualLabel || t('resize');
+    return (_jsx(StyledResizeHandle, { onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ref: resizeHandleRef, children: _jsx(StyledResizeButton, { tabIndex: 0, icon: true, label: !mouseGrabbed && !keyboardGrabbed ? label : undefined, "aria-label": !mouseGrabbed && !keyboardGrabbed
                 ? t('drag_handle_activate_description')
                 : t('drag_handle_cancel_description'), onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onBlur: () => {
                 setKeyboardGrabbed(false);

package/lib/components/Drawer/ResizeHandle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ResizeHandle.js","sourceRoot":"","sources":["../../../src/components/Drawer/ResizeHandle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAO7C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,eAAe,MAAM,wCAAwC,CAAC;AAE1E,YAAY,CAAC,QAAQ,CAAC,CAAC;AACvB,YAAY,CAAC,eAAe,CAAC,CAAC;~~AAO9B~~,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAEtC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;IACpB,OAAO,GAAG,CAAA;;;;;;;;QAQJ,YAAY;;;MAGd,UAAU;QACZ,GAAG,CAAA;QACC,UAAU;;;KAGb;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;;;;;;mCAMuB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;eAElF,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG;;;;;;oBAMpB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;;;;0BAIxB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;MAGlD,YAAY;;;sCAGoB,KAAK,CAAC,IAAI,CAAC,OAAO;;oBAEpC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,YAAY,CACnD,EAAE,WAAW,EAAE,SAAS,EAAsC,~~EAC9D~~,GAAwB;IAExB,MAAM,eAAe,GAAG,kBAAkB,CAAiB,GAAG,CAAC,CAAC;IAChE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,CAAC,CAAqB,EAAE,EAAE;QAC9C,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACvB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,eAAe,EAAE,CAAC;gBACpB,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC;QAED,SAAS,EAAE,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,CAAkB,EAAE,EAAE;QAC7C,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;QACvD,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACpD,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;QACvD,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAC/C,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,kBAAkB,IACjB,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EACxB,GAAG,EAAE,eAAe,YAEpB,KAAC,kBAAkB,IACjB,QAAQ,EAAE,CAAC,EACX,IAAI,QACJ,KAAK,EAAE,CAAC,YAAY,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,~~CAAC~~,CAAC,~~QAAQ,~~CAAC,CAAC,~~CAAC,CAAC,~~SAAS,~~gBAEhE~~,CAAC,YAAY,IAAI,CAAC,eAAe;gBAC/B,CAAC,CAAC,CAAC,CAAC,kCAAkC,CAAC;gBACvC,CAAC,CAAC,CAAC,CAAC,gCAAgC,CAAC,EAEzC,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,GAAG,EAAE;gBACX,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,EACD,UAAU,EAAE,eAAe,YAE3B,KAAC,IAAI,IAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,GAAI,GAC7C,GACF,CACtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type {\n PropsWithoutRef,\n Ref,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport Button, { StyledButton } from '../Button';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport { useConsolidatedRef, useEscape, useI18n } from '../../hooks';\nimport { getChildOfRootNode } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\nimport * as DragIcon from '../Icon/icons/drag.icon';\nimport * as ArrowUpDownIcon from '../Icon/icons/arrow-micro-up-down.icon';\n\nregisterIcon(DragIcon);\nregisterIcon(ArrowUpDownIcon);\n\nexport interface ResizeHandleProps {\n onKeyDown: (e: ReactKeyboardEvent, grabbed: boolean) => void;\n onMouseDown: (e: ReactMouseEvent) => void;\n}\n\nconst StyledResizeButton = styled(Button)<{\n rotateIcon?: boolean;\n}>(({ rotateIcon }) => {\n return css`\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n\n &:not(:focus) {\n ${hideVisually};\n }\n\n ${rotateIcon &&\n css`\n ${StyledIcon} {\n transform: rotate(90deg);\n }\n `}\n `;\n});\n\nexport const StyledResizeHandle = styled.div(({ theme }) => {\n return css`\n position: absolute;\n inset-inline-start: 0;\n inset-block: 0;\n inline-size: 0.125rem;\n background-color: transparent;\n transition: background-color ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n cursor: ew-resize;\n z-index: ${theme.base['z-index'].max};\n\n ::before {\n content: '';\n position: absolute;\n inset: 0;\n width: calc(${theme.base['hit-area'].compact} * 0.75);\n }\n\n &:hover {\n background-color: ${theme.base.palette.interactive};\n }\n\n ${StyledButton} {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: calc(-2 * ${theme.base.spacing});\n translate: 0 -50%;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledResizeHandle.defaultProps = defaultThemeProp;\n\nconst ResizeHandle = forwardRef(function ResizeHandle(\n { onMouseDown, onKeyDown }: PropsWithoutRef<ResizeHandleProps>,\n ref: Ref<HTMLDivElement>\n) {\n const resizeHandleRef = useConsolidatedRef<HTMLDivElement>(ref);\n const t = useI18n();\n\n const [mouseGrabbed, setMouseGrabbed] = useState(false);\n const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);\n\n useEscape(() => {\n setMouseGrabbed(false);\n setKeyboardGrabbed(false);\n });\n\n const handleKeyDown = (e: ReactKeyboardEvent) => {\n if (e.code === 'Space') {\n e.preventDefault();\n if (keyboardGrabbed) {\n setKeyboardGrabbed(false);\n } else {\n setKeyboardGrabbed(true);\n }\n }\n\n onKeyDown?.(e, keyboardGrabbed);\n };\n\n const handleMouseDown = (e: ReactMouseEvent) => {\n const targetNode = getChildOfRootNode(resizeHandleRef);\n if (!targetNode) return;\n targetNode.style.setProperty('user-select', 'none');\n setMouseGrabbed(true);\n onMouseDown?.(e);\n };\n\n const handleMouseUp = () => {\n const targetNode = getChildOfRootNode(resizeHandleRef);\n if (!targetNode) return;\n targetNode.style.removeProperty('user-select');\n setMouseGrabbed(false);\n };\n\n return (\n <StyledResizeHandle\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n ref={resizeHandleRef}\n >\n <StyledResizeButton\n tabIndex={0}\n icon\n label={!mouseGrabbed && !keyboardGrabbed ? ~~t('resize')~~ : undefined}\n aria-label={\n !mouseGrabbed && !keyboardGrabbed\n ? t('drag_handle_activate_description')\n : t('drag_handle_cancel_description')\n }\n onMouseDown={handleMouseDown}\n onKeyDown={handleKeyDown}\n onBlur={() => {\n setKeyboardGrabbed(false);\n }}\n rotateIcon={keyboardGrabbed}\n >\n <Icon name={keyboardGrabbed ? 'arrow-micro-up-down' : 'drag'} />\n </StyledResizeButton>\n </StyledResizeHandle>\n );\n});\n\nexport default ResizeHandle;\n"]}
1	+ {"version":3,"file":"ResizeHandle.js","sourceRoot":"","sources":["../../../src/components/Drawer/ResizeHandle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type {\n PropsWithoutRef,\n Ref,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport Button, { StyledButton } from '../Button';\nimport Icon, { registerIcon, StyledIcon } from '../Icon';\nimport { useConsolidatedRef, useEscape, useI18n } from '../../hooks';\nimport { getChildOfRootNode } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\nimport * as DragIcon from '../Icon/icons/drag.icon';\nimport * as ArrowUpDownIcon from '../Icon/icons/arrow-micro-up-down.icon';\n\nregisterIcon(DragIcon);\nregisterIcon(ArrowUpDownIcon);\n\nexport interface ResizeHandleProps {\n onKeyDown: (e: ReactKeyboardEvent, grabbed: boolean) => void;\n onMouseDown: (e: ReactMouseEvent) => void;\n contextualLabel?: string;\n}\n\nconst StyledResizeButton = styled(Button)<{\n rotateIcon?: boolean;\n}>(({ rotateIcon }) => {\n return css`\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n\n &:not(:focus) {\n ${hideVisually};\n }\n\n ${rotateIcon &&\n css`\n ${StyledIcon} {\n transform: rotate(90deg);\n }\n `}\n `;\n});\n\nexport const StyledResizeHandle = styled.div(({ theme }) => {\n return css`\n position: absolute;\n inset-inline-start: 0;\n inset-block: 0;\n inline-size: 0.125rem;\n background-color: transparent;\n transition: background-color ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n cursor: ew-resize;\n z-index: ${theme.base['z-index'].max};\n\n ::before {\n content: '';\n position: absolute;\n inset: 0;\n width: calc(${theme.base['hit-area'].compact} * 0.75);\n }\n\n &:hover {\n background-color: ${theme.base.palette.interactive};\n }\n\n ${StyledButton} {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: calc(-2 * ${theme.base.spacing});\n translate: 0 -50%;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledResizeHandle.defaultProps = defaultThemeProp;\n\nconst ResizeHandle = forwardRef(function ResizeHandle(\n { onMouseDown, onKeyDown, contextualLabel }: PropsWithoutRef<ResizeHandleProps>,\n ref: Ref<HTMLDivElement>\n) {\n const resizeHandleRef = useConsolidatedRef<HTMLDivElement>(ref);\n const t = useI18n();\n\n const [mouseGrabbed, setMouseGrabbed] = useState(false);\n const [keyboardGrabbed, setKeyboardGrabbed] = useState(false);\n\n useEscape(() => {\n setMouseGrabbed(false);\n setKeyboardGrabbed(false);\n });\n\n const handleKeyDown = (e: ReactKeyboardEvent) => {\n if (e.code === 'Space') {\n e.preventDefault();\n if (keyboardGrabbed) {\n setKeyboardGrabbed(false);\n } else {\n setKeyboardGrabbed(true);\n }\n }\n\n onKeyDown?.(e, keyboardGrabbed);\n };\n\n const handleMouseDown = (e: ReactMouseEvent) => {\n const targetNode = getChildOfRootNode(resizeHandleRef);\n if (!targetNode) return;\n targetNode.style.setProperty('user-select', 'none');\n setMouseGrabbed(true);\n onMouseDown?.(e);\n };\n\n const handleMouseUp = () => {\n const targetNode = getChildOfRootNode(resizeHandleRef);\n if (!targetNode) return;\n targetNode.style.removeProperty('user-select');\n setMouseGrabbed(false);\n };\n\n const label = contextualLabel \|\| t('resize');\n\n return (\n <StyledResizeHandle\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n ref={resizeHandleRef}\n >\n <StyledResizeButton\n tabIndex={0}\n icon\n label={!mouseGrabbed && !keyboardGrabbed ? label : undefined}\n aria-label={\n !mouseGrabbed && !keyboardGrabbed\n ? t('drag_handle_activate_description')\n : t('drag_handle_cancel_description')\n }\n onMouseDown={handleMouseDown}\n onKeyDown={handleKeyDown}\n onBlur={() => {\n setKeyboardGrabbed(false);\n }}\n rotateIcon={keyboardGrabbed}\n >\n <Icon name={keyboardGrabbed ? 'arrow-micro-up-down' : 'drag'} />\n </StyledResizeButton>\n </StyledResizeHandle>\n );\n});\n\nexport default ResizeHandle;\n"]}

package/lib/components/EmojiPicker/EmojiPicker.styles.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-declare const StyledEmojiPicker: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+declare const StyledEmojiPicker: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     showFooter: boolean;
-}, never>;
+}>> & string;
 export default StyledEmojiPicker;
 //# sourceMappingURL=EmojiPicker.styles.d.ts.map

package/lib/components/EmojiPicker/EmojiPicker.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,iBAAiB;gBAA4B,OAAO;~~SAshBzD~~,CAAC;AAIF,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"EmojiPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,iBAAiB;gBAA4B,OAAO;YAshBzD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/lib/components/EmojiPicker/EmojiPicker.styles.js CHANGED Viewed

@@ -227,9 +227,9 @@ const StyledEmojiPicker = styled.div(({ showFooter, theme: { base: { animation:
         /* stylelint-disable font-family-no-missing-generic-family-keyword */
         font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',
           'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; /* cspell:disable-line */
-        /* stylelint-enable font-family-no-missing-generic-family-keyword */
       }
+      /* stylelint-enable font-family-no-missing-generic-family-keyword */
       .emoji-mart-category .emoji-mart-emoji:focus,
       .emoji-mart-category .emoji-mart-emoji-native:focus,
       .emoji-mart-skin:focus,

package/lib/components/EmojiPicker/EmojiPicker.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPicker.styles.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,UAAU,EACV,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,UAAU,EACzB,aAAa,EAAE,UAAU,EACzB,OAAO,EACP,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAC9B,OAAO,EACP,eAAe,EAAE,YAAY,EAC7B,YAAY,EACb,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,eAAe,EAAE,iBAAiB,EAAE,EACvD,EACF,EACF,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,UAAU,CAAC;IAC5E,MAAM,kBAAkB,GAAG,cAAc,CACvC,CAAC,GAAG,YAAY,CAAC,eAAe,CAAC,EACjC,OAAO,CAAC,kBAAkB,CAAC,CAC5B,CAAC;IAEF,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;;;;;;;;;;;;;uBAaS,UAAU;qBACZ,SAAS,CAAC,CAAC;;iBAEf,OAAO,CAAC,kBAAkB,CAAC;kCACV,OAAO,CAAC,aAAa,CAAC;;sBAElC,OAAO,CAAC,oBAAoB,CAAC;;;;+BAIpB,OAAO;;;;0BAIZ,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;UAWtC,CAAC,UAAU;QACb,GAAG,CAAA;;SAEF;;;;;;;iCAOwB,OAAO;;;;;;;;iBAQvB,kBAAkB;;8BAEL,OAAO,gBAAgB,OAAO;;uCAErB,KAAK,KAAK,MAAM,CAAC,UAAU,CAAC;;;;;;;;;;;;iBAYlD,OAAO,CAAC,WAAW;;;;;;;;;gCASJ,OAAO;;;+BAGR,OAAO;4BACV,OAAO,CAAC,WAAW;;;;;;iCAMd,OAAO;;;;;;8BAMV,OAAO;6BACR,OAAO;;;;;;;iCAOH,OAAO;;;;;mBAKrB,OAAO;;;;;qBAKL,SAAS,CAAC,CAAC;iBACf,OAAO,CAAC,kBAAkB,CAAC;;;gCAGZ,OAAO,kBAAkB,OAAO,iBAAiB,OAAO;wBAChE,OAAO;8BACD,YAAY,MAAM,iBAAiB;kCAC/B,OAAO,CAAC,aAAa,CAAC;4BAC5B,OAAO,CAAC,oBAAoB,CAAC;;;;;wBAKjC,OAAO,CAAC,kBAAkB,CAAC;;;;;;;;;;;;;;;;;4BAiBvB,OAAO;6BACN,OAAO;;;;;;;gBAOpB,kBAAkB;;;;;;;;;;;;;;;;;;4BAkBN,UAAU;;;;;;;;;;;;;;;;;;uBAkBf,UAAU,CAAC,WAAW,CAAC;mBAC3B,OAAO,gBAAgB,OAAO;4BACrB,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;;;;;gCAK/C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAkCjB,WAAW;;;;;;;;;qBASZ,SAAS,CAAC,CAAC;;;iBAGf,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4BR,OAAO;;;;2BAIP,OAAO;4BACN,OAAO;;;;;;;6BAON,OAAO;;;;;6BAKP,OAAO;;;;;qBAKf,SAAS,CAAC,CAAC;;;;qBAIX,SAAS,CAAC,GAAG;iBACjB,kBAAkB;;;;;;;;;qBASd,SAAS,CAAC,GAAG;iBACjB,kBAAkB;;;;;;;;;;;;;iBAalB,kBAAkB;qBACd,SAAS,CAAC,GAAG;uBACX,UAAU,CAAC,MAAM;;;;;+BAKT,OAAO;kCACJ,OAAO,CAAC,aAAa,CAAC;oCACpB,OAAO;4BACf,OAAO,CAAC,sBAAsB,CAAC;;;;;;4BAM/B,OAAO,CAAC,sBAAsB,CAAC;;;;0BAIjC,OAAO;iCACA,OAAO;;;;mBAIrB,YAAY,CAAC,eAAe,CAAC;;;;;;;;0CAQN,KAAK;sCACT,MAAM,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;0BAwB9B,OAAO;iCACA,OAAO;;;;;;;;4BAQZ,OAAO;6BACN,OAAO;+BACL,OAAO,sBAAsB,OAAO;4BACvC,OAAO,CAAC,oBAAoB,CAAC;;;;8BAI3B,KAAK,IAAI,MAAM,CAAC,UAAU,CAAC;;;;;;;;;;0CAUf,KAAK;sCACT,MAAM,CAAC,UAAU,CAAC;;;;;;;;iCAQvB,OAAO;;;;;;;;;;4BAUZ,OAAO,CAAC,oBAAoB,CAAC;;;;;;;iCAOxB,OAAO;;;;mBAIrB,YAAY,CAAC,eAAe,CAAC;;;;;;;iBAO/B,kBAAkB;qBACd,SAAS,CAAC,GAAG;gCACF,OAAO,iBAAiB,OAAO;;;;4BAInC,OAAO,CAAC,oBAAoB,CAAC;;;;;;;gCAOzB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;UAyB7B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;KAwBjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import { hideVisually, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { getHoverColors, calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledEmojiPicker = styled.div<{ showFooter: boolean }>(\n ({\n showFooter,\n theme: {\n base: {\n animation: { speed, timing },\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'font-family': fontFamily,\n 'font-weight': fontWeight,\n palette,\n shadow: { focus: focusShadow },\n spacing,\n 'border-radius': borderRadius,\n transparency\n },\n components: {\n 'search-input': { 'border-radius': searchInputRadius }\n }\n }\n }) => {\n const hoverColor = getHoverColors(palette['primary-background']).background;\n const secondaryTextColor = transparentize(\n 1 - transparency['transparent-2'],\n palette['foreground-color']\n );\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n /* stylelint-disable no-descending-specificity /\n / stylelint-disable no-duplicate-selectors /\n / stylelint-disable selector-max-class /\n border-radius: inherit;\n\n .emoji-mart,\n .emoji-mart {\n box-sizing: border-box;\n line-height: 1.15;\n }\n\n .emoji-mart {\n font-family: ${fontFamily};\n font-size: ${fontSizes.l};\n display: inline-block;\n color: ${palette['foreground-color']};\n border: 0.0625rem solid ${palette['border-line']};\n border-radius: inherit;\n background: ${palette['primary-background']};\n }\n\n .emoji-mart .emoji-mart-emoji {\n padding: calc(0.75 * ${spacing});\n }\n\n .emoji-mart-bar {\n border: 0 solid ${palette['border-line']};\n }\n .emoji-mart-bar:first-child {\n border-bottom-width: 0.0625rem;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n .emoji-mart-bar:last-child {\n border-top-width: 0.0625rem;\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n ${!showFooter &&\n css`\n display: none;\n `}\n }\n\n .emoji-mart-anchors {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: 0 calc(0.75 * ${spacing});\n line-height: 0;\n }\n\n .emoji-mart-anchor {\n position: relative;\n display: block;\n flex: 1 1 auto;\n color: ${secondaryTextColor};\n text-align: center;\n padding: calc(1.5 * ${spacing}) calc(0.5 * ${spacing});\n overflow: hidden;\n transition: color calc(0.4 * ${speed}) ${timing['ease-out']};\n margin: 0;\n box-shadow: none;\n background: none;\n border: none;\n }\n .emoji-mart-anchor:focus {\n outline: 0;\n }\n .emoji-mart-anchor:hover,\n .emoji-mart-anchor:focus,\n .emoji-mart-anchor-selected {\n color: ${palette.interactive};\n }\n\n .emoji-mart-anchor-selected .emoji-mart-anchor-bar {\n bottom: 0;\n }\n\n .emoji-mart-anchor-bar {\n position: absolute;\n bottom: calc(-0.375 * ${spacing});\n left: 0;\n width: 100%;\n height: calc(0.375 * ${spacing});\n background-color: ${palette.interactive};\n }\n\n .emoji-mart-anchors i {\n display: inline-block;\n width: 100%;\n max-width: calc(2.75 * ${spacing});\n }\n\n .emoji-mart-anchors svg,\n .emoji-mart-anchors img {\n fill: currentColor;\n height: calc(2.25 * ${spacing});\n width: calc(2.25 * ${spacing});\n }\n\n .emoji-mart-scroll {\n overflow-y: scroll;\n overflow-x: hidden;\n height: 16.875rem;\n padding: 0 calc(0.75 * ${spacing});\n will-change: transform; /* avoids \"repaints on scroll\" in mobile Chrome /\n }\n\n .emoji-mart-search {\n padding: ${spacing};\n position: relative;\n }\n\n .emoji-mart-search input {\n font-size: ${fontSizes.l};\n color: ${palette['foreground-color']};\n display: block;\n width: 100%;\n padding: calc(0.625 ${spacing}) calc(3.125 * ${spacing}) calc(0.75 * ${spacing})\n calc(1.25 * ${spacing});\n border-radius: calc(${borderRadius} * ${searchInputRadius});\n border: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n outline: 0;\n }\n\n .emoji-mart-search input:hover {\n border-color: ${palette['foreground-color']};\n }\n\n .emoji-mart-search input,\n .emoji-mart-search input::-webkit-search-decoration,\n .emoji-mart-search input::-webkit-search-cancel-button,\n .emoji-mart-search input::-webkit-search-results-button,\n .emoji-mart-search input::-webkit-search-results-decoration {\n /\n remove webkit/blink styles for <input type=\"search\">\n via https://stackoverflow.com/a/9422689\n /\n -webkit-appearance: none;\n }\n\n .emoji-mart-search-icon {\n position: absolute;\n top: calc(1.875 * ${spacing});\n right: calc(2.25 * ${spacing});\n z-index: 2;\n border: none;\n background: none;\n }\n\n .emoji-mart-search-icon svg {\n fill: ${secondaryTextColor};\n }\n\n .emoji-mart-category .emoji-mart-emoji span {\n z-index: 1;\n position: relative;\n text-align: center;\n cursor: default;\n }\n\n .emoji-mart-category .emoji-mart-emoji:hover::before {\n z-index: 0;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: ${hoverColor};\n border-radius: 100%;\n }\n\n .emoji-mart-category-label {\n z-index: 2;\n top: 0;\n\n /* stylelint-disable declaration-block-no-duplicate-properties /\n position: relative;\n position: -webkit-sticky;\n position: sticky;\n / stylelint-enable declaration-block-no-duplicate-properties /\n }\n\n .emoji-mart-category-label span {\n display: block;\n width: 100%;\n font-weight: ${fontWeight['semi-bold']};\n padding: ${spacing} calc(0.25 ${spacing});\n background-color: ${transparentize(0.05, palette['primary-background'])};\n }\n\n .emoji-mart-category-list {\n margin: 0;\n padding: calc(0.375 * ${spacing}) 0;\n }\n\n .emoji-mart-category-list li {\n list-style: none;\n margin: 0;\n padding: 0;\n display: inline-block;\n }\n\n .emoji-mart-emoji {\n position: relative;\n display: inline-block;\n font-size: 0;\n margin: 0;\n padding: 0;\n border: none;\n background: none;\n box-shadow: none;\n }\n\n .emoji-mart-emoji-native {\n /* stylelint-disable font-family-no-missing-generic-family-keyword /\n font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',\n 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; / cspell:disable-line /\n / stylelint-enable font-family-no-missing-generic-family-keyword /\n }\n\n .emoji-mart-category .emoji-mart-emoji:focus,\n .emoji-mart-category .emoji-mart-emoji-native:focus,\n .emoji-mart-skin:focus,\n .emoji-mart-search input:focus {\n outline: 0;\n border-color: transparent;\n box-shadow: ${focusShadow};\n }\n\n .emoji-mart-category .emoji-mart-emoji:focus,\n .emoji-mart-category .emoji-mart-emoji-native:focus {\n border-radius: 100%;\n }\n\n .emoji-mart-no-results {\n font-size: ${fontSizes.s};\n text-align: center;\n padding-top: 4.375rem;\n color: ${secondaryTextColor};\n }\n .emoji-mart-no-results-img {\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: 50%;\n }\n .emoji-mart-no-results .emoji-mart-category-label {\n display: none;\n }\n .emoji-mart-no-results .emoji-mart-no-results-label {\n margin-top: 0.2em;\n }\n .emoji-mart-no-results .emoji-mart-emoji:hover::before {\n content: none;\n }\n\n .emoji-mart-preview {\n position: relative;\n min-height: 2.5rem;\n height: fit-content;\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .emoji-mart-preview-emoji {\n left: calc(1.5 ${spacing});\n }\n\n .emoji-mart-preview-data {\n left: calc(8.5 * ${spacing});\n right: calc(1.5 * ${spacing});\n word-break: break-all;\n flex: 1;\n }\n\n .emoji-mart-preview-skins {\n position: absolute;\n right: calc(3.75 * ${spacing});\n text-align: right;\n }\n\n .emoji-mart-preview-skins.custom {\n right: calc(1.25 * ${spacing});\n text-align: right;\n }\n\n .emoji-mart-preview-name {\n font-size: ${fontSizes.s};\n }\n\n .emoji-mart-preview-shortname {\n font-size: ${fontSizes.xxs};\n color: ${secondaryTextColor};\n }\n .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,\n .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,\n .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {\n margin-left: 0.5em;\n }\n\n .emoji-mart-preview-emoticon {\n font-size: ${fontSizes.xxs};\n color: ${secondaryTextColor};\n }\n\n .emoji-mart-title span {\n display: inline-block;\n vertical-align: middle;\n }\n\n .emoji-mart-title .emoji-mart-emoji {\n padding: 0;\n }\n\n .emoji-mart-title-label {\n color: ${secondaryTextColor};\n font-size: ${fontSizes.xxl};\n font-weight: ${fontWeight.normal};\n }\n\n .emoji-mart-skin-swatches {\n font-size: 0;\n padding: calc(0.25 * ${spacing}) 0;\n border: 0.0625rem solid ${palette['border-line']};\n border-radius: calc(1.5 * ${spacing});\n background-color: ${palette['secondary-background']};\n }\n\n .emoji-mart-skin-swatches.custom {\n font-size: 0;\n border: none;\n background-color: ${palette['secondary-background']};\n }\n\n .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {\n width: calc(2 * ${spacing});\n padding: 0 calc(0.25 * ${spacing});\n }\n\n .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected::after {\n opacity: ${transparency['transparent-2']};\n }\n\n .emoji-mart-skin-swatch {\n display: inline-block;\n width: 0;\n vertical-align: middle;\n transition-property: width, padding;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${timing['ease-out']};\n }\n\n .emoji-mart-skin-swatch:nth-child(1) {\n transition-delay: 0s;\n }\n .emoji-mart-skin-swatch:nth-child(2) {\n transition-delay: 0.03s;\n }\n .emoji-mart-skin-swatch:nth-child(3) {\n transition-delay: 0.06s;\n }\n .emoji-mart-skin-swatch:nth-child(4) {\n transition-delay: 0.09s;\n }\n .emoji-mart-skin-swatch:nth-child(5) {\n transition-delay: 0.12s;\n }\n .emoji-mart-skin-swatch:nth-child(6) {\n transition-delay: 0.15s;\n }\n\n .emoji-mart-skin-swatch.selected {\n position: relative;\n width: calc(2 * ${spacing});\n padding: 0 calc(0.25 * ${spacing});\n }\n\n .emoji-mart-skin-swatch.selected::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(0.5 * ${spacing});\n height: calc(0.5 * ${spacing});\n margin: calc(-0.25 * ${spacing}) 0 0 calc(-0.25 * ${spacing});\n background-color: ${palette['primary-background']};\n border-radius: 100%;\n pointer-events: none;\n opacity: 0;\n transition: opacity ${speed} ${timing['ease-out']};\n }\n\n .emoji-mart-skin-swatch.custom {\n display: inline-block;\n width: 0;\n height: 2.375rem;\n overflow: hidden;\n vertical-align: middle;\n transition-property: width, height;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${timing['ease-out']};\n cursor: default;\n }\n\n .emoji-mart-skin-swatch.custom.selected {\n position: relative;\n width: 2.25rem;\n height: 2.375rem;\n padding: 0 calc(0.25 * ${spacing}) 0 0;\n }\n\n .emoji-mart-skin-swatch.custom.selected::after {\n content: '';\n width: 0;\n height: 0;\n }\n\n .emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {\n background-color: ${palette['primary-background']};\n border-radius: 10%;\n }\n\n .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {\n width: 2.25rem;\n height: 2.375rem;\n padding: 0 calc(0.25 * ${spacing}) 0 0;\n }\n\n .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected::after {\n opacity: ${transparency['transparent-2']};\n }\n\n .emoji-mart-skin-text.opened {\n display: inline-block;\n vertical-align: middle;\n text-align: left;\n color: ${secondaryTextColor};\n font-size: ${fontSizes.xxs};\n padding: calc(0.625 * ${spacing}) calc(0.25 * ${spacing});\n width: 6rem;\n height: 2.5rem;\n border-radius: 10%;\n background-color: ${palette['primary-background']};\n }\n\n .emoji-mart-skin {\n display: inline-block;\n width: 100%;\n padding-top: 100%;\n max-width: calc(1.5 * ${spacing});\n border-radius: 100%;\n }\n\n .emoji-mart-skin-tone-1 {\n background-color: #ffc93a;\n }\n .emoji-mart-skin-tone-2 {\n background-color: #fadcbc;\n }\n .emoji-mart-skin-tone-3 {\n background-color: #e0bb95;\n }\n .emoji-mart-skin-tone-4 {\n background-color: #bf8f68;\n }\n .emoji-mart-skin-tone-5 {\n background-color: #9b643d;\n }\n .emoji-mart-skin-tone-6 {\n background-color: #594539;\n }\n\n /* For screen readers only /\n .emoji-mart-sr-only {\n ${hideVisually}\n }\n\n /\n https://github.com/missive/emoji-mart/issues/319\n https://github.com/missive/emoji-mart/pull/442\n */\n .emoji-mart-emoji-native {\n height: var(--emoji-size);\n width: var(--emoji-size);\n position: relative;\n display: inline-block;\n box-sizing: content-box;\n vertical-align: bottom;\n }\n\n .emoji-mart-emoji-native > span {\n position: absolute !important;\n top: 50%;\n left: 50%;\n height: initial !important;\n width: initial !important;\n transform: translate(-50%, -50%);\n }\n `;\n }\n);\n\nStyledEmojiPicker.defaultProps = defaultThemeProp;\n\nexport default StyledEmojiPicker;\n"]}
1	+ {"version":3,"file":"EmojiPicker.styles.js","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { getHoverColors, calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledEmojiPicker = styled.div<{ showFooter: boolean }>(\n ({\n showFooter,\n theme: {\n base: {\n animation: { speed, timing },\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'font-family': fontFamily,\n 'font-weight': fontWeight,\n palette,\n shadow: { focus: focusShadow },\n spacing,\n 'border-radius': borderRadius,\n transparency\n },\n components: {\n 'search-input': { 'border-radius': searchInputRadius }\n }\n }\n }) => {\n const hoverColor = getHoverColors(palette['primary-background']).background;\n const secondaryTextColor = transparentize(\n 1 - transparency['transparent-2'],\n palette['foreground-color']\n );\n\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n /* stylelint-disable no-descending-specificity /\n / stylelint-disable no-duplicate-selectors /\n / stylelint-disable selector-max-class /\n border-radius: inherit;\n\n .emoji-mart,\n .emoji-mart {\n box-sizing: border-box;\n line-height: 1.15;\n }\n\n .emoji-mart {\n font-family: ${fontFamily};\n font-size: ${fontSizes.l};\n display: inline-block;\n color: ${palette['foreground-color']};\n border: 0.0625rem solid ${palette['border-line']};\n border-radius: inherit;\n background: ${palette['primary-background']};\n }\n\n .emoji-mart .emoji-mart-emoji {\n padding: calc(0.75 * ${spacing});\n }\n\n .emoji-mart-bar {\n border: 0 solid ${palette['border-line']};\n }\n .emoji-mart-bar:first-child {\n border-bottom-width: 0.0625rem;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n .emoji-mart-bar:last-child {\n border-top-width: 0.0625rem;\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n ${!showFooter &&\n css`\n display: none;\n `}\n }\n\n .emoji-mart-anchors {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: 0 calc(0.75 * ${spacing});\n line-height: 0;\n }\n\n .emoji-mart-anchor {\n position: relative;\n display: block;\n flex: 1 1 auto;\n color: ${secondaryTextColor};\n text-align: center;\n padding: calc(1.5 * ${spacing}) calc(0.5 * ${spacing});\n overflow: hidden;\n transition: color calc(0.4 * ${speed}) ${timing['ease-out']};\n margin: 0;\n box-shadow: none;\n background: none;\n border: none;\n }\n .emoji-mart-anchor:focus {\n outline: 0;\n }\n .emoji-mart-anchor:hover,\n .emoji-mart-anchor:focus,\n .emoji-mart-anchor-selected {\n color: ${palette.interactive};\n }\n\n .emoji-mart-anchor-selected .emoji-mart-anchor-bar {\n bottom: 0;\n }\n\n .emoji-mart-anchor-bar {\n position: absolute;\n bottom: calc(-0.375 * ${spacing});\n left: 0;\n width: 100%;\n height: calc(0.375 * ${spacing});\n background-color: ${palette.interactive};\n }\n\n .emoji-mart-anchors i {\n display: inline-block;\n width: 100%;\n max-width: calc(2.75 * ${spacing});\n }\n\n .emoji-mart-anchors svg,\n .emoji-mart-anchors img {\n fill: currentColor;\n height: calc(2.25 * ${spacing});\n width: calc(2.25 * ${spacing});\n }\n\n .emoji-mart-scroll {\n overflow-y: scroll;\n overflow-x: hidden;\n height: 16.875rem;\n padding: 0 calc(0.75 * ${spacing});\n will-change: transform; /* avoids \"repaints on scroll\" in mobile Chrome /\n }\n\n .emoji-mart-search {\n padding: ${spacing};\n position: relative;\n }\n\n .emoji-mart-search input {\n font-size: ${fontSizes.l};\n color: ${palette['foreground-color']};\n display: block;\n width: 100%;\n padding: calc(0.625 ${spacing}) calc(3.125 * ${spacing}) calc(0.75 * ${spacing})\n calc(1.25 * ${spacing});\n border-radius: calc(${borderRadius} * ${searchInputRadius});\n border: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n outline: 0;\n }\n\n .emoji-mart-search input:hover {\n border-color: ${palette['foreground-color']};\n }\n\n .emoji-mart-search input,\n .emoji-mart-search input::-webkit-search-decoration,\n .emoji-mart-search input::-webkit-search-cancel-button,\n .emoji-mart-search input::-webkit-search-results-button,\n .emoji-mart-search input::-webkit-search-results-decoration {\n /\n remove webkit/blink styles for <input type=\"search\">\n via https://stackoverflow.com/a/9422689\n /\n -webkit-appearance: none;\n }\n\n .emoji-mart-search-icon {\n position: absolute;\n top: calc(1.875 * ${spacing});\n right: calc(2.25 * ${spacing});\n z-index: 2;\n border: none;\n background: none;\n }\n\n .emoji-mart-search-icon svg {\n fill: ${secondaryTextColor};\n }\n\n .emoji-mart-category .emoji-mart-emoji span {\n z-index: 1;\n position: relative;\n text-align: center;\n cursor: default;\n }\n\n .emoji-mart-category .emoji-mart-emoji:hover::before {\n z-index: 0;\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: ${hoverColor};\n border-radius: 100%;\n }\n\n .emoji-mart-category-label {\n z-index: 2;\n top: 0;\n\n /* stylelint-disable declaration-block-no-duplicate-properties /\n position: relative;\n position: -webkit-sticky;\n position: sticky;\n / stylelint-enable declaration-block-no-duplicate-properties /\n }\n\n .emoji-mart-category-label span {\n display: block;\n width: 100%;\n font-weight: ${fontWeight['semi-bold']};\n padding: ${spacing} calc(0.25 ${spacing});\n background-color: ${transparentize(0.05, palette['primary-background'])};\n }\n\n .emoji-mart-category-list {\n margin: 0;\n padding: calc(0.375 * ${spacing}) 0;\n }\n\n .emoji-mart-category-list li {\n list-style: none;\n margin: 0;\n padding: 0;\n display: inline-block;\n }\n\n .emoji-mart-emoji {\n position: relative;\n display: inline-block;\n font-size: 0;\n margin: 0;\n padding: 0;\n border: none;\n background: none;\n box-shadow: none;\n }\n\n .emoji-mart-emoji-native {\n /* stylelint-disable font-family-no-missing-generic-family-keyword /\n font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',\n 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; / cspell:disable-line /\n }\n\n / stylelint-enable font-family-no-missing-generic-family-keyword /\n .emoji-mart-category .emoji-mart-emoji:focus,\n .emoji-mart-category .emoji-mart-emoji-native:focus,\n .emoji-mart-skin:focus,\n .emoji-mart-search input:focus {\n outline: 0;\n border-color: transparent;\n box-shadow: ${focusShadow};\n }\n\n .emoji-mart-category .emoji-mart-emoji:focus,\n .emoji-mart-category .emoji-mart-emoji-native:focus {\n border-radius: 100%;\n }\n\n .emoji-mart-no-results {\n font-size: ${fontSizes.s};\n text-align: center;\n padding-top: 4.375rem;\n color: ${secondaryTextColor};\n }\n .emoji-mart-no-results-img {\n display: block;\n margin-left: auto;\n margin-right: auto;\n width: 50%;\n }\n .emoji-mart-no-results .emoji-mart-category-label {\n display: none;\n }\n .emoji-mart-no-results .emoji-mart-no-results-label {\n margin-top: 0.2em;\n }\n .emoji-mart-no-results .emoji-mart-emoji:hover::before {\n content: none;\n }\n\n .emoji-mart-preview {\n position: relative;\n min-height: 2.5rem;\n height: fit-content;\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .emoji-mart-preview-emoji {\n left: calc(1.5 ${spacing});\n }\n\n .emoji-mart-preview-data {\n left: calc(8.5 * ${spacing});\n right: calc(1.5 * ${spacing});\n word-break: break-all;\n flex: 1;\n }\n\n .emoji-mart-preview-skins {\n position: absolute;\n right: calc(3.75 * ${spacing});\n text-align: right;\n }\n\n .emoji-mart-preview-skins.custom {\n right: calc(1.25 * ${spacing});\n text-align: right;\n }\n\n .emoji-mart-preview-name {\n font-size: ${fontSizes.s};\n }\n\n .emoji-mart-preview-shortname {\n font-size: ${fontSizes.xxs};\n color: ${secondaryTextColor};\n }\n .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,\n .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,\n .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {\n margin-left: 0.5em;\n }\n\n .emoji-mart-preview-emoticon {\n font-size: ${fontSizes.xxs};\n color: ${secondaryTextColor};\n }\n\n .emoji-mart-title span {\n display: inline-block;\n vertical-align: middle;\n }\n\n .emoji-mart-title .emoji-mart-emoji {\n padding: 0;\n }\n\n .emoji-mart-title-label {\n color: ${secondaryTextColor};\n font-size: ${fontSizes.xxl};\n font-weight: ${fontWeight.normal};\n }\n\n .emoji-mart-skin-swatches {\n font-size: 0;\n padding: calc(0.25 * ${spacing}) 0;\n border: 0.0625rem solid ${palette['border-line']};\n border-radius: calc(1.5 * ${spacing});\n background-color: ${palette['secondary-background']};\n }\n\n .emoji-mart-skin-swatches.custom {\n font-size: 0;\n border: none;\n background-color: ${palette['secondary-background']};\n }\n\n .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {\n width: calc(2 * ${spacing});\n padding: 0 calc(0.25 * ${spacing});\n }\n\n .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected::after {\n opacity: ${transparency['transparent-2']};\n }\n\n .emoji-mart-skin-swatch {\n display: inline-block;\n width: 0;\n vertical-align: middle;\n transition-property: width, padding;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${timing['ease-out']};\n }\n\n .emoji-mart-skin-swatch:nth-child(1) {\n transition-delay: 0s;\n }\n .emoji-mart-skin-swatch:nth-child(2) {\n transition-delay: 0.03s;\n }\n .emoji-mart-skin-swatch:nth-child(3) {\n transition-delay: 0.06s;\n }\n .emoji-mart-skin-swatch:nth-child(4) {\n transition-delay: 0.09s;\n }\n .emoji-mart-skin-swatch:nth-child(5) {\n transition-delay: 0.12s;\n }\n .emoji-mart-skin-swatch:nth-child(6) {\n transition-delay: 0.15s;\n }\n\n .emoji-mart-skin-swatch.selected {\n position: relative;\n width: calc(2 * ${spacing});\n padding: 0 calc(0.25 * ${spacing});\n }\n\n .emoji-mart-skin-swatch.selected::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(0.5 * ${spacing});\n height: calc(0.5 * ${spacing});\n margin: calc(-0.25 * ${spacing}) 0 0 calc(-0.25 * ${spacing});\n background-color: ${palette['primary-background']};\n border-radius: 100%;\n pointer-events: none;\n opacity: 0;\n transition: opacity ${speed} ${timing['ease-out']};\n }\n\n .emoji-mart-skin-swatch.custom {\n display: inline-block;\n width: 0;\n height: 2.375rem;\n overflow: hidden;\n vertical-align: middle;\n transition-property: width, height;\n transition-duration: calc(0.5 * ${speed});\n transition-timing-function: ${timing['ease-out']};\n cursor: default;\n }\n\n .emoji-mart-skin-swatch.custom.selected {\n position: relative;\n width: 2.25rem;\n height: 2.375rem;\n padding: 0 calc(0.25 * ${spacing}) 0 0;\n }\n\n .emoji-mart-skin-swatch.custom.selected::after {\n content: '';\n width: 0;\n height: 0;\n }\n\n .emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {\n background-color: ${palette['primary-background']};\n border-radius: 10%;\n }\n\n .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {\n width: 2.25rem;\n height: 2.375rem;\n padding: 0 calc(0.25 * ${spacing}) 0 0;\n }\n\n .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected::after {\n opacity: ${transparency['transparent-2']};\n }\n\n .emoji-mart-skin-text.opened {\n display: inline-block;\n vertical-align: middle;\n text-align: left;\n color: ${secondaryTextColor};\n font-size: ${fontSizes.xxs};\n padding: calc(0.625 * ${spacing}) calc(0.25 * ${spacing});\n width: 6rem;\n height: 2.5rem;\n border-radius: 10%;\n background-color: ${palette['primary-background']};\n }\n\n .emoji-mart-skin {\n display: inline-block;\n width: 100%;\n padding-top: 100%;\n max-width: calc(1.5 * ${spacing});\n border-radius: 100%;\n }\n\n .emoji-mart-skin-tone-1 {\n background-color: #ffc93a;\n }\n .emoji-mart-skin-tone-2 {\n background-color: #fadcbc;\n }\n .emoji-mart-skin-tone-3 {\n background-color: #e0bb95;\n }\n .emoji-mart-skin-tone-4 {\n background-color: #bf8f68;\n }\n .emoji-mart-skin-tone-5 {\n background-color: #9b643d;\n }\n .emoji-mart-skin-tone-6 {\n background-color: #594539;\n }\n\n /* For screen readers only /\n .emoji-mart-sr-only {\n ${hideVisually}\n }\n\n /\n https://github.com/missive/emoji-mart/issues/319\n https://github.com/missive/emoji-mart/pull/442\n */\n .emoji-mart-emoji-native {\n height: var(--emoji-size);\n width: var(--emoji-size);\n position: relative;\n display: inline-block;\n box-sizing: content-box;\n vertical-align: bottom;\n }\n\n .emoji-mart-emoji-native > span {\n position: absolute !important;\n top: 50%;\n left: 50%;\n height: initial !important;\n width: initial !important;\n transform: translate(-50%, -50%);\n }\n `;\n }\n);\n\nStyledEmojiPicker.defaultProps = defaultThemeProp;\n\nexport default StyledEmojiPicker;\n"]}

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

@@ -8,7 +8,7 @@ export interface EmptyStateProps extends BaseProps, NoChildrenProp, TestIdProp {
     message?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledEmptyState: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const _default: ForwardRefForwardPropsComponent<EmptyStateProps> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["message", "icon"]>;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAWlD,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,+BAA+B,EAC/B,UAAU,EACX,MAAM,aAAa,CAAC;AAQrB,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,~~yGAc3B~~,CAAC;;;;AAkCH,wBAA6D"}
1	+ {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAWlD,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,+BAA+B,EAC/B,UAAU,EACX,MAAM,aAAa,CAAC;AAQrB,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,6NAc3B,CAAC;;;;AAkCH,wBAA6D"}

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

@@ -10,7 +10,7 @@ export interface ErrorStateProps extends BaseProps, NoChildrenProp {
     onRetry?: () => void;
     ref?: Ref<HTMLDivElement>;
 }
-export declare const StyledErrorState: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledErrorState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const ErrorState: ForwardRefForwardPropsComponent<ErrorStateProps>;
 export default ErrorState;
 //# sourceMappingURL=ErrorState.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorState.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AASlD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAK9F,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,~~yGAW3B~~,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAuB/D,CAAC;AAEH,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"ErrorState.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorState/ErrorState.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AASlD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAK9F,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,6NAW3B,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,+BAA+B,CAAC,eAAe,CAuB/D,CAAC;AAEH,eAAe,UAAU,CAAC"}