npm - @chayns-components/core - Versions diffs - 5.5.30 → 5.5.34 - Mend

@chayns-components/core 5.5.30 → 5.5.34

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 (249) hide show

package/lib/cjs/components/accordion/Accordion.js CHANGED Viewed

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.AccordionContext = void 0;
 var _react = require("motion/react");
 var _react2 = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
 var _uuid = require("../../hooks/uuid");
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _AreaContextProvider = require("../area-provider/AreaContextProvider");
 var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
@@ -55,6 +57,7 @@ const Accordion = ({
   onBodyAnimationComplete,
   shouldEnableKeyboardHighlighting
 }) => {
+  const theme = (0, _styledComponents.useTheme)();
   const {
     isWrapped: groupIsWrapped,
     openAccordionUuid,
@@ -79,6 +82,7 @@ const Accordion = ({
   const [isGroupFocusWithin, setIsGroupFocusWithin] = (0, _react2.useState)(false);
   const uuid = (0, _uuid.useUuid)();
   const isInitialRenderRef = (0, _react2.useRef)(true);
+  const accordionRef = (0, _react2.useRef)(null);
   const initialRenderSkipRef = (0, _ref.useInitialRenderRef)(true);
   const shouldSkipAnimation = shouldSkipAnimationProp ?? (initialRenderSkipRef.current && isDefaultOpen);
   const isInGroup = shouldSkipAnimation ? false : typeof updateOpenAccordionUuid === 'function';
@@ -88,6 +92,10 @@ const Accordion = ({
   const onOpenRef = (0, _react2.useRef)(onOpen);
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlightingEffective);
   const isKeyboardFocusable = !isDisabled && (shouldIndex || shouldEnableKeyboardHighlightingEffective);
+  (0, _useFocusRingPortal.useFocusRingPortal)(accordionRef, {
+    isEnabled: shouldShowKeyboardHighlighting && isKeyboardFocusable,
+    borderRadius: `${theme.cardBorderRadius}px`
+  });
   const isInKeyboardNavigationGroup = isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function' && typeof accordionGroupUuid === 'string';
   (0, _react2.useEffect)(() => {
     if (typeof accordionGroupUuid === 'string' && typeof registerAccordionUuid === 'function' && typeof unregisterAccordionUuid === 'function') {
@@ -183,6 +191,7 @@ const Accordion = ({
   const handleKeyDown = (0, _react2.useCallback)(e => {
     const isCurrentAccordionTarget = e.currentTarget === e.target;
     if (isCurrentAccordionTarget && isInKeyboardNavigationGroup && accordionUuids !== null && accordionUuids !== void 0 && accordionUuids.length && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      e.preventDefault();
       const currentIndex = accordionUuids.indexOf(uuid);
       if (currentIndex !== -1) {
         const nextIndex = e.key === 'ArrowDown' ? (currentIndex + 1) % accordionUuids.length : (currentIndex - 1 + accordionUuids.length) % accordionUuids.length;
@@ -251,6 +260,7 @@ const Accordion = ({
     }
   }, [accordionUuids, activeAccordionUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid]);
   return /*#__PURE__*/_react2.default.createElement(_Accordion.StyledMotionAccordion, {
+    ref: accordionRef,
     animate: {
       height: 'auto',
       opacity: 1

package/lib/cjs/components/accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_useKeyboardFocusHighlighting","_AreaContextProvider","_ColorSchemeProvider","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_AccordionContextProvider","_Accordion","_ref","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionContext","exports","React","createContext","isWrapped","undefined","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldForceBottomLine","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","shouldSkipAnimation","shouldSkipAnimationProp","colors","shouldIndex","onBodyAnimationComplete","shouldEnableKeyboardHighlighting","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","activeAccordionUuid","updateActiveAccordionUuid","registerAccordionUuid","unregisterAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","contextIsWrapped","AccordionWrappedContext","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","useMemo","isAccordionOpen","setIsAccordionOpen","useState","isGroupFocusWithin","setIsGroupFocusWithin","uuid","useUuid","isInitialRenderRef","useRef","initialRenderSkipRef","useInitialRenderRef","current","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","isKeyboardFocusable","isInKeyboardNavigationGroup","useEffect","isLastAccordion","length","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","initialAnimation","height","opacity","tabIndex","handleKeyDown","isCurrentAccordionTarget","currentTarget","target","key","currentIndex","indexOf","nextIndex","nextAccordionUuid","nextAccordionElement","document","querySelector","focus","preventDefault","_e$currentTarget$pare","parentAccordion","parentElement","closest","_parentAccordion$getA","_parentAccordion$pare","parentGroupId","getAttribute","split","handleFocus","handleBlur","nextFocusedElement","relatedTarget","currentGroupElement","contains","createElement","StyledMotionAccordion","animate","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBackground","$shouldHideBottomLine","$bottomBorderColor","borderBottomColor","$shouldEnableKeyboardHighlighting","$shouldShowKeyboardHighlighting","onKeyDown","onFocus","onBlur","onMouseEnter","onMouseLeave","transition","duration","Provider","value","MotionConfig","type","onClick","titleColor","AnimatePresence","maxHeight","onScroll","onAnimationComplete","shouldHideBody","AreaContext","displayName","_default"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n type CSSProperties,\n FC,\n type MouseEventHandler,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n KeyboardEvent,\n FocusEvent,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\nimport { useInitialRenderRef } from '../../hooks/ref';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n isWrapped: undefined,\n});\n\ntype AccordionColors = {\n titleColor?: CSSProperties['color'];\n borderBottomColor?: CSSProperties['borderBottomColor'];\n};\n\nexport type AccordionProps = {\n /*\n Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n /\n bodyMaxHeight?: number;\n /\n The content of the accordion body\n /\n children: ReactNode;\n /\n The icon that is displayed in front of the title\n /\n icon?: string;\n /\n This can be used to automatically expand the Accordion during the first render.\n /\n isDefaultOpen?: boolean;\n /\n This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n /\n isDisabled?: boolean;\n /\n This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n /\n isFixed?: boolean;\n /\n This can be used to open the Accordion from the outside\n /\n isOpened?: boolean;\n /\n This will gray out the title of the Accordion to indicate hidden content, for example.\n /\n isTitleGreyed?: boolean;\n /\n Function that is executed when the accordion body will be scrolled\n /\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /\n Function that is executed when the accordion will be closed.\n /\n onClose?: VoidFunction;\n /\n Function to be executed when the accordion is no longer hovered.\n /\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /\n Function to be executed when the accordion is hovered.\n /\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /\n Function that is executed when the accordion will be opened.\n /\n onOpen?: VoidFunction;\n /\n Function that is executed when the accordion body is animated\n /\n onBodyAnimationComplete?: VoidFunction;\n /\n Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n /\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Content to be displayed on the right side in the head of the Accordion\n /\n rightElement?: ReactNode;\n /\n The placeholder to be used for the search\n /\n searchPlaceholder?: string;\n /\n The value that is displayed inside the search\n /\n searchValue?: string;\n /\n This will force the background color of the accordion to be used even if it is closed and not hovered.\n /\n shouldForceBackground?: boolean;\n /\n This will hide the background color of the accordion\n /\n shouldHideBackground?: boolean;\n /\n Whether the bottom line should always be shown, regardless of other line-related props.\n /\n shouldForceBottomLine?: boolean;\n /\n Whether the bottom line should be hidden.\n /\n shouldHideBottomLine?: boolean;\n /\n This will render the Accordion closed on the first render.\n /\n shouldRenderClosed?: boolean;\n /\n Whether the icon should be rotating.\n /\n shouldRotateIcon?: boolean;\n /\n Whether the animation should be skipped.\n * If 'isDefaultOpen' is true the initial animation will be skipped even this prop is false\n /\n shouldSkipAnimation?: boolean;\n /\n Title of the Accordion displayed in the head\n /\n title?: string;\n /\n Additional elements to be displayed in the header next to the title.\n /\n titleElement?: ReactNode;\n /\n The props of the title Input.\n /\n titleInputProps?: InputProps;\n /\n Provide custom colors to the Accordion Component\n /\n colors?: AccordionColors;\n /\n Whether the accordion should be indexed.\n /\n shouldIndex?: boolean;\n /\n Enables keyboard-only focus highlighting. The highlighting is only visible while the\n * user navigates with the keyboard and is reset on mouse movement or click.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldForceBottomLine = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n shouldHideBottomLine = false,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n shouldSkipAnimation: shouldSkipAnimationProp = false,\n colors,\n shouldIndex = false,\n onBodyAnimationComplete,\n shouldEnableKeyboardHighlighting,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n activeAccordionUuid,\n updateActiveAccordionUuid,\n registerAccordionUuid,\n unregisterAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n const [isGroupFocusWithin, setIsGroupFocusWithin] = useState(false);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const initialRenderSkipRef = useInitialRenderRef(true);\n\n const shouldSkipAnimation =\n shouldSkipAnimationProp ?? (initialRenderSkipRef.current && isDefaultOpen);\n\n const isInGroup = shouldSkipAnimation ? false : typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlightingEffective,\n );\n const isKeyboardFocusable =\n !isDisabled && (shouldIndex \|\| shouldEnableKeyboardHighlightingEffective);\n\n const isInKeyboardNavigationGroup =\n isKeyboardFocusable &&\n typeof updateActiveAccordionUuid === 'function' &&\n typeof accordionGroupUuid === 'string';\n\n useEffect(() => {\n if (\n typeof accordionGroupUuid === 'string' &&\n typeof registerAccordionUuid === 'function' &&\n typeof unregisterAccordionUuid === 'function'\n ) {\n registerAccordionUuid(uuid);\n\n return () => {\n unregisterAccordionUuid(uuid);\n };\n }\n\n return undefined;\n }, [accordionGroupUuid, registerAccordionUuid, unregisterAccordionUuid, uuid]);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function') {\n updateActiveAccordionUuid(uuid);\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, isKeyboardFocusable, updateActiveAccordionUuid, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(\n () => ({ shouldChangeColor: !shouldHideBackground }),\n [shouldHideBackground],\n );\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n\n const initialAnimation = useMemo(() => {\n if (shouldSkipAnimation) {\n return { height: 'auto', opacity: 1 };\n }\n\n return isOpen ? { height: 'auto', opacity: 1 } : { height: 0, opacity: 0 };\n }, [isOpen, shouldSkipAnimation]);\n\n const tabIndex = useMemo(() => (isKeyboardFocusable ? 0 : -1), [isKeyboardFocusable]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n const isCurrentAccordionTarget = e.currentTarget === e.target;\n\n if (\n isCurrentAccordionTarget &&\n isInKeyboardNavigationGroup &&\n accordionUuids?.length &&\n (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')\n ) {\n const currentIndex = accordionUuids.indexOf(uuid);\n\n if (currentIndex !== -1) {\n const nextIndex =\n e.key === 'ArrowDown'\n ? (currentIndex + 1) % accordionUuids.length\n : (currentIndex - 1 + accordionUuids.length) % accordionUuids.length;\n const nextAccordionUuid = accordionUuids[nextIndex];\n\n if (nextAccordionUuid && nextAccordionUuid !== uuid) {\n const nextAccordionElement = document.querySelector<HTMLDivElement>(\n `[data-uuid=\"${accordionGroupUuid}---${nextAccordionUuid}\"]`,\n );\n\n if (nextAccordionElement) {\n updateActiveAccordionUuid(nextAccordionUuid);\n nextAccordionElement.focus();\n return;\n }\n }\n }\n }\n\n if (\n isCurrentAccordionTarget &&\n (e.key === 'Enter' \|\| e.key === ' ') &&\n isKeyboardFocusable\n ) {\n handleHeadClick();\n }\n\n if (\n isCurrentAccordionTarget &&\n e.key === 'ArrowRight' &&\n isKeyboardFocusable &&\n !isOpen\n ) {\n e.preventDefault();\n handleHeadClick();\n }\n\n if (isCurrentAccordionTarget && (e.key === 'Escape' \|\| e.key === 'ArrowLeft')) {\n if (isOpen && isKeyboardFocusable) {\n e.preventDefault();\n handleHeadClick();\n return;\n }\n\n if (\n isInKeyboardNavigationGroup &&\n typeof updateActiveAccordionUuid === 'function'\n ) {\n e.preventDefault();\n updateActiveAccordionUuid(undefined);\n let parentAccordion =\n e.currentTarget.parentElement?.closest<HTMLElement>(\n '.beta-chayns-accordion',\n );\n while (parentAccordion) {\n const parentGroupId = parentAccordion\n .getAttribute('data-uuid')\n ?.split('---')[0];\n if (parentGroupId !== accordionGroupUuid) {\n parentAccordion.focus();\n break;\n }\n parentAccordion =\n parentAccordion.parentElement?.closest<HTMLElement>(\n '.beta-chayns-accordion',\n );\n }\n }\n }\n },\n [\n accordionGroupUuid,\n accordionUuids,\n handleHeadClick,\n isInKeyboardNavigationGroup,\n isKeyboardFocusable,\n isOpen,\n updateActiveAccordionUuid,\n uuid,\n ],\n );\n\n const handleFocus = useCallback(\n (e: FocusEvent<HTMLDivElement>) => {\n if (\n e.currentTarget === e.target &&\n isInKeyboardNavigationGroup &&\n typeof updateActiveAccordionUuid === 'function'\n ) {\n setIsGroupFocusWithin(true);\n updateActiveAccordionUuid(uuid);\n }\n },\n [isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid],\n );\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLDivElement>) => {\n if (\n isInKeyboardNavigationGroup &&\n typeof updateActiveAccordionUuid === 'function' &&\n typeof accordionGroupUuid === 'string'\n ) {\n const nextFocusedElement = e.relatedTarget as Node \| null;\n const currentGroupElement = e.currentTarget as HTMLElement;\n\n if (!nextFocusedElement \|\| !currentGroupElement.contains(nextFocusedElement)) {\n setIsGroupFocusWithin(false);\n updateActiveAccordionUuid(undefined);\n }\n }\n },\n [accordionGroupUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid],\n );\n\n useEffect(() => {\n if (!isInKeyboardNavigationGroup) {\n setIsGroupFocusWithin(false);\n } else if (\n activeAccordionUuid == null &&\n typeof updateActiveAccordionUuid === 'function' &&\n accordionUuids?.[0] === uuid\n ) {\n updateActiveAccordionUuid(uuid);\n }\n }, [\n accordionUuids,\n activeAccordionUuid,\n isInKeyboardNavigationGroup,\n updateActiveAccordionUuid,\n uuid,\n ]);\n\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={initialAnimation}\n $isOpen={isOpen}\n tabIndex={tabIndex}\n $shouldShowLines={!isLastAccordion \|\| !isWrapped}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldForceBottomLine={shouldForceBottomLine}\n $shouldHideBackground={shouldHideBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n $bottomBorderColor={colors?.borderBottomColor}\n $shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlightingEffective}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n shouldSkipAnimation={shouldSkipAnimation}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed \|\| isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={colors?.titleColor}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlightingEffective}\n />\n <AnimatePresence initial={false}>\n {(isOpen \|\| shouldRenderClosed) && (\n <AccordionBody\n shouldSkipAnimation={shouldSkipAnimation}\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Accordion.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_uuid","_useFocusRingPortal","_useKeyboardFocusHighlighting","_AreaContextProvider","_ColorSchemeProvider","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_AccordionContextProvider","_Accordion","_ref","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionContext","exports","React","createContext","isWrapped","undefined","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldForceBottomLine","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","shouldSkipAnimation","shouldSkipAnimationProp","colors","shouldIndex","onBodyAnimationComplete","shouldEnableKeyboardHighlighting","theme","useTheme","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","activeAccordionUuid","updateActiveAccordionUuid","registerAccordionUuid","unregisterAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","contextIsWrapped","AccordionWrappedContext","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","useMemo","isAccordionOpen","setIsAccordionOpen","useState","isGroupFocusWithin","setIsGroupFocusWithin","uuid","useUuid","isInitialRenderRef","useRef","accordionRef","initialRenderSkipRef","useInitialRenderRef","current","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","isKeyboardFocusable","useFocusRingPortal","isEnabled","borderRadius","cardBorderRadius","isInKeyboardNavigationGroup","useEffect","isLastAccordion","length","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","initialAnimation","height","opacity","tabIndex","handleKeyDown","isCurrentAccordionTarget","currentTarget","target","key","preventDefault","currentIndex","indexOf","nextIndex","nextAccordionUuid","nextAccordionElement","document","querySelector","focus","_e$currentTarget$pare","parentAccordion","parentElement","closest","_parentAccordion$getA","_parentAccordion$pare","parentGroupId","getAttribute","split","handleFocus","handleBlur","nextFocusedElement","relatedTarget","currentGroupElement","contains","createElement","StyledMotionAccordion","ref","animate","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBackground","$shouldHideBottomLine","$bottomBorderColor","borderBottomColor","$shouldEnableKeyboardHighlighting","$shouldShowKeyboardHighlighting","onKeyDown","onFocus","onBlur","onMouseEnter","onMouseLeave","transition","duration","Provider","value","MotionConfig","type","onClick","titleColor","AnimatePresence","maxHeight","onScroll","onAnimationComplete","shouldHideBody","AreaContext","displayName","_default"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n type CSSProperties,\n FC,\n type MouseEventHandler,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n KeyboardEvent,\n FocusEvent,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useUuid } from '../../hooks/uuid';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { type Theme, useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\nimport { useInitialRenderRef } from '../../hooks/ref';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n isWrapped: undefined,\n});\n\ntype AccordionColors = {\n titleColor?: CSSProperties['color'];\n borderBottomColor?: CSSProperties['borderBottomColor'];\n};\n\nexport type AccordionProps = {\n /*\n Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n /\n bodyMaxHeight?: number;\n /\n The content of the accordion body\n /\n children: ReactNode;\n /\n The icon that is displayed in front of the title\n /\n icon?: string;\n /\n This can be used to automatically expand the Accordion during the first render.\n /\n isDefaultOpen?: boolean;\n /\n This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n /\n isDisabled?: boolean;\n /\n This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n /\n isFixed?: boolean;\n /\n This can be used to open the Accordion from the outside\n /\n isOpened?: boolean;\n /\n This will gray out the title of the Accordion to indicate hidden content, for example.\n /\n isTitleGreyed?: boolean;\n /\n Function that is executed when the accordion body will be scrolled\n /\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /\n Function that is executed when the accordion will be closed.\n /\n onClose?: VoidFunction;\n /\n Function to be executed when the accordion is no longer hovered.\n /\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /\n Function to be executed when the accordion is hovered.\n /\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /\n Function that is executed when the accordion will be opened.\n /\n onOpen?: VoidFunction;\n /\n Function that is executed when the accordion body is animated\n /\n onBodyAnimationComplete?: VoidFunction;\n /\n Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n /\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Content to be displayed on the right side in the head of the Accordion\n /\n rightElement?: ReactNode;\n /\n The placeholder to be used for the search\n /\n searchPlaceholder?: string;\n /\n The value that is displayed inside the search\n /\n searchValue?: string;\n /\n This will force the background color of the accordion to be used even if it is closed and not hovered.\n /\n shouldForceBackground?: boolean;\n /\n This will hide the background color of the accordion\n /\n shouldHideBackground?: boolean;\n /\n Whether the bottom line should always be shown, regardless of other line-related props.\n /\n shouldForceBottomLine?: boolean;\n /\n Whether the bottom line should be hidden.\n /\n shouldHideBottomLine?: boolean;\n /\n This will render the Accordion closed on the first render.\n /\n shouldRenderClosed?: boolean;\n /\n Whether the icon should be rotating.\n /\n shouldRotateIcon?: boolean;\n /\n Whether the animation should be skipped.\n * If 'isDefaultOpen' is true the initial animation will be skipped even this prop is false\n /\n shouldSkipAnimation?: boolean;\n /\n Title of the Accordion displayed in the head\n /\n title?: string;\n /\n Additional elements to be displayed in the header next to the title.\n /\n titleElement?: ReactNode;\n /\n The props of the title Input.\n /\n titleInputProps?: InputProps;\n /\n Provide custom colors to the Accordion Component\n /\n colors?: AccordionColors;\n /\n Whether the accordion should be indexed.\n /\n shouldIndex?: boolean;\n /\n Enables keyboard-only focus highlighting. The highlighting is only visible while the\n * user navigates with the keyboard and is reset on mouse movement or click.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldForceBottomLine = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n shouldHideBottomLine = false,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n shouldSkipAnimation: shouldSkipAnimationProp = false,\n colors,\n shouldIndex = false,\n onBodyAnimationComplete,\n shouldEnableKeyboardHighlighting,\n}) => {\n const theme = useTheme() as Theme;\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n activeAccordionUuid,\n updateActiveAccordionUuid,\n registerAccordionUuid,\n unregisterAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n const [isGroupFocusWithin, setIsGroupFocusWithin] = useState(false);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n const accordionRef = useRef<HTMLDivElement>(null);\n\n const initialRenderSkipRef = useInitialRenderRef(true);\n\n const shouldSkipAnimation =\n shouldSkipAnimationProp ?? (initialRenderSkipRef.current && isDefaultOpen);\n\n const isInGroup = shouldSkipAnimation ? false : typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlightingEffective,\n );\n const isKeyboardFocusable =\n !isDisabled && (shouldIndex \|\| shouldEnableKeyboardHighlightingEffective);\n\n useFocusRingPortal(accordionRef, {\n isEnabled: shouldShowKeyboardHighlighting && isKeyboardFocusable,\n borderRadius: `${theme.cardBorderRadius}px`,\n });\n\n const isInKeyboardNavigationGroup =\n isKeyboardFocusable &&\n typeof updateActiveAccordionUuid === 'function' &&\n typeof accordionGroupUuid === 'string';\n\n useEffect(() => {\n if (\n typeof accordionGroupUuid === 'string' &&\n typeof registerAccordionUuid === 'function' &&\n typeof unregisterAccordionUuid === 'function'\n ) {\n registerAccordionUuid(uuid);\n\n return () => {\n unregisterAccordionUuid(uuid);\n };\n }\n\n return undefined;\n }, [accordionGroupUuid, registerAccordionUuid, unregisterAccordionUuid, uuid]);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (isKeyboardFocusable && typeof updateActiveAccordionUuid === 'function') {\n updateActiveAccordionUuid(uuid);\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, isKeyboardFocusable, updateActiveAccordionUuid, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(\n () => ({ shouldChangeColor: !shouldHideBackground }),\n [shouldHideBackground],\n );\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n\n const initialAnimation = useMemo(() => {\n if (shouldSkipAnimation) {\n return { height: 'auto', opacity: 1 };\n }\n\n return isOpen ? { height: 'auto', opacity: 1 } : { height: 0, opacity: 0 };\n }, [isOpen, shouldSkipAnimation]);\n\n const tabIndex = useMemo(() => (isKeyboardFocusable ? 0 : -1), [isKeyboardFocusable]);\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n const isCurrentAccordionTarget = e.currentTarget === e.target;\n\n if (\n isCurrentAccordionTarget &&\n isInKeyboardNavigationGroup &&\n accordionUuids?.length &&\n (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')\n ) {\n e.preventDefault();\n const currentIndex = accordionUuids.indexOf(uuid);\n\n if (currentIndex !== -1) {\n const nextIndex =\n e.key === 'ArrowDown'\n ? (currentIndex + 1) % accordionUuids.length\n : (currentIndex - 1 + accordionUuids.length) % accordionUuids.length;\n const nextAccordionUuid = accordionUuids[nextIndex];\n\n if (nextAccordionUuid && nextAccordionUuid !== uuid) {\n const nextAccordionElement = document.querySelector<HTMLDivElement>(\n `[data-uuid=\"${accordionGroupUuid}---${nextAccordionUuid}\"]`,\n );\n\n if (nextAccordionElement) {\n updateActiveAccordionUuid(nextAccordionUuid);\n nextAccordionElement.focus();\n return;\n }\n }\n }\n }\n\n if (\n isCurrentAccordionTarget &&\n (e.key === 'Enter' \|\| e.key === ' ') &&\n isKeyboardFocusable\n ) {\n handleHeadClick();\n }\n\n if (\n isCurrentAccordionTarget &&\n e.key === 'ArrowRight' &&\n isKeyboardFocusable &&\n !isOpen\n ) {\n e.preventDefault();\n handleHeadClick();\n }\n\n if (isCurrentAccordionTarget && (e.key === 'Escape' \|\| e.key === 'ArrowLeft')) {\n if (isOpen && isKeyboardFocusable) {\n e.preventDefault();\n handleHeadClick();\n return;\n }\n\n if (\n isInKeyboardNavigationGroup &&\n typeof updateActiveAccordionUuid === 'function'\n ) {\n e.preventDefault();\n updateActiveAccordionUuid(undefined);\n let parentAccordion =\n e.currentTarget.parentElement?.closest<HTMLElement>(\n '.beta-chayns-accordion',\n );\n while (parentAccordion) {\n const parentGroupId = parentAccordion\n .getAttribute('data-uuid')\n ?.split('---')[0];\n if (parentGroupId !== accordionGroupUuid) {\n parentAccordion.focus();\n break;\n }\n parentAccordion =\n parentAccordion.parentElement?.closest<HTMLElement>(\n '.beta-chayns-accordion',\n );\n }\n }\n }\n },\n [\n accordionGroupUuid,\n accordionUuids,\n handleHeadClick,\n isInKeyboardNavigationGroup,\n isKeyboardFocusable,\n isOpen,\n updateActiveAccordionUuid,\n uuid,\n ],\n );\n\n const handleFocus = useCallback(\n (e: FocusEvent<HTMLDivElement>) => {\n if (\n e.currentTarget === e.target &&\n isInKeyboardNavigationGroup &&\n typeof updateActiveAccordionUuid === 'function'\n ) {\n setIsGroupFocusWithin(true);\n updateActiveAccordionUuid(uuid);\n }\n },\n [isInKeyboardNavigationGroup, updateActiveAccordionUuid, uuid],\n );\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLDivElement>) => {\n if (\n isInKeyboardNavigationGroup &&\n typeof updateActiveAccordionUuid === 'function' &&\n typeof accordionGroupUuid === 'string'\n ) {\n const nextFocusedElement = e.relatedTarget as Node \| null;\n const currentGroupElement = e.currentTarget as HTMLElement;\n\n if (!nextFocusedElement \|\| !currentGroupElement.contains(nextFocusedElement)) {\n setIsGroupFocusWithin(false);\n updateActiveAccordionUuid(undefined);\n }\n }\n },\n [accordionGroupUuid, isInKeyboardNavigationGroup, updateActiveAccordionUuid],\n );\n\n useEffect(() => {\n if (!isInKeyboardNavigationGroup) {\n setIsGroupFocusWithin(false);\n } else if (\n activeAccordionUuid == null &&\n typeof updateActiveAccordionUuid === 'function' &&\n accordionUuids?.[0] === uuid\n ) {\n updateActiveAccordionUuid(uuid);\n }\n }, [\n accordionUuids,\n activeAccordionUuid,\n isInKeyboardNavigationGroup,\n updateActiveAccordionUuid,\n uuid,\n ]);\n\n return (\n <StyledMotionAccordion\n ref={accordionRef}\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={initialAnimation}\n $isOpen={isOpen}\n tabIndex={tabIndex}\n $shouldShowLines={!isLastAccordion \|\| !isWrapped}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldForceBottomLine={shouldForceBottomLine}\n $shouldHideBackground={shouldHideBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n $bottomBorderColor={colors?.borderBottomColor}\n $shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlightingEffective}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n shouldSkipAnimation={shouldSkipAnimation}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed \|\| isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={colors?.titleColor}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlightingEffective}\n />\n <AnimatePresence initial={false}>\n {(isOpen \|\| shouldRenderClosed) && (\n <AccordionBody\n shouldSkipAnimation={shouldSkipAnimation}\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AAgBA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AACA,IAAAM,6BAAA,GAAAN,OAAA;AACA,IAAAO,oBAAA,GAAAP,OAAA;AACA,IAAAQ,oBAAA,GAAAR,OAAA;AAEA,IAAAS,cAAA,GAAAC,sBAAA,CAAAV,OAAA;AACA,IAAAW,eAAA,GAAAX,OAAA;AACA,IAAAY,cAAA,GAAAF,sBAAA,CAAAV,OAAA;AACA,IAAAa,yBAAA,GAAAb,OAAA;AACA,IAAAc,UAAA,GAAAd,OAAA;AACA,IAAAe,IAAA,GAAAf,OAAA;AAAsD,SAAAU,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAd,wBAAAc,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAlB,uBAAA,YAAAA,CAAAc,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAE/C,MAAMgB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,gBAAGE,eAAK,CAACC,aAAa,CAA0B;EACzEC,SAAS,EAAEC;AACf,CAAC,CAAC;AAkJF,MAAMC,SAA6B,GAAGA,CAAC;EACnCC,aAAa;EACbC,QAAQ;EACRC,IAAI;EACJC,aAAa,GAAG,KAAK;EACrBC,UAAU,GAAG,KAAK;EAClBC,OAAO,GAAG,KAAK;EACfC,QAAQ;EACRC,aAAa,GAAG,KAAK;EACrBC,YAAY;EACZC,OAAO;EACPC,UAAU;EACVC,YAAY;EACZC,MAAM;EACNC,cAAc;EACdC,YAAY;EACZC,iBAAiB;EACjBC,WAAW;EACXC,qBAAqB,GAAG,KAAK;EAC7BC,qBAAqB,GAAG,KAAK;EAC7BC,oBAAoB,GAAG,KAAK;EAC5BC,kBAAkB,GAAG,KAAK;EAC1BC,gBAAgB,GAAG,IAAI;EACvBC,oBAAoB,GAAG,KAAK;EAC5BC,KAAK;EACLC,YAAY;EACZC,kBAAkB;EAClBC,eAAe;EACfC,mBAAmB,EAAEC,uBAAuB,GAAG,KAAK;EACpDC,MAAM;EACNC,WAAW,GAAG,KAAK;EACnBC,uBAAuB;EACvBC;AACJ,CAAC,KAAK;EACF,MAAMC,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAU;EACjC,MAAM;IACFrC,SAAS,EAAEsC,cAAc;IACzBC,iBAAiB;IACjBC,kBAAkB;IAClBC,cAAc;IACdC,uBAAuB;IACvBC,mBAAmB;IACnBC,yBAAyB;IACzBC,qBAAqB;IACrBC;EACJ,CAAC,GAAG,IAAAC,kBAAU,EAACC,qCAAqB,CAAC;EACrC,MAAM;IAAEhD,SAAS,EAAEiD;EAAgB,CAAC,GAAG,IAAAF,kBAAU,EAACnD,gBAAgB,CAAC;EAEnE,MAAM;IAAEI,SAAS,EAAEkD;EAAiB,CAAC,GAAG,IAAAH,kBAAU,EAACI,iDAAuB,CAAC;EAC3E,MAAMC,WAAW,GAAG,IAAAC,mCAAc,EAAC,CAAC;EACpC,MAAMC,yCAAyC,GAC3CnB,gCAAgC,KAAIiB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEjB,gCAAgC,KAAI,KAAK;EAE9F,MAAMnC,SAAS,GAAG,IAAAuD,eAAO,EACrB,MAAMjB,cAAc,IAAIY,gBAAgB,EACxC,CAACA,gBAAgB,EAAEZ,cAAc,CACrC,CAAC;EAED,MAAM,CAACkB,eAAe,EAAEC,kBAAkB,CAAC,GAAG,IAAAC,gBAAQ,EAAUpD,aAAa,IAAIG,QAAQ,CAAC;EAC1F,MAAM,CAACkD,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAF,gBAAQ,EAAC,KAAK,CAAC;EAEnE,MAAMG,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EAEtB,MAAMC,kBAAkB,GAAG,IAAAC,cAAM,EAAC,IAAI,CAAC;EACvC,MAAMC,YAAY,GAAG,IAAAD,cAAM,EAAiB,IAAI,CAAC;EAEjD,MAAME,oBAAoB,GAAG,IAAAC,wBAAmB,EAAC,IAAI,CAAC;EAEtD,MAAMrC,mBAAmB,GACrBC,uBAAuB,KAAKmC,oBAAoB,CAACE,OAAO,IAAI9D,aAAa,CAAC;EAE9E,MAAM+D,SAAS,GAAGvC,mBAAmB,GAAG,KAAK,GAAG,OAAOY,uBAAuB,KAAK,UAAU;EAE7F,MAAM4B,MAAM,GAAGD,SAAS,GAAG9B,iBAAiB,KAAKsB,IAAI,GAAGL,eAAe;EAEvE,MAAMe,SAAS,GAAG,IAAAP,cAAM,EAACM,MAAM,CAAC;EAChC,MAAME,UAAU,GAAG,IAAAR,cAAM,EAACpD,OAAO,CAAC;EAClC,MAAM6D,SAAS,GAAG,IAAAT,cAAM,EAACjD,MAAM,CAAC;EAChC,MAAM2D,8BAA8B,GAAG,IAAAC,0DAA4B,EAC/DrB,yCACJ,CAAC;EACD,MAAMsB,mBAAmB,GACrB,CAACrE,UAAU,KAAK0B,WAAW,IAAIqB,yCAAyC,CAAC;EAE7E,IAAAuB,sCAAkB,EAACZ,YAAY,EAAE;IAC7Ba,SAAS,EAAEJ,8BAA8B,IAAIE,mBAAmB;IAChEG,YAAY,EAAE,GAAG3C,KAAK,CAAC4C,gBAAgB;EAC3C,CAAC,CAAC;EAEF,MAAMC,2BAA2B,GAC7BL,mBAAmB,IACnB,OAAOhC,yBAAyB,KAAK,UAAU,IAC/C,OAAOJ,kBAAkB,KAAK,QAAQ;EAE1C,IAAA0C,iBAAS,EAAC,MAAM;IACZ,IACI,OAAO1C,kBAAkB,KAAK,QAAQ,IACtC,OAAOK,qBAAqB,KAAK,UAAU,IAC3C,OAAOC,uBAAuB,KAAK,UAAU,EAC/C;MACED,qBAAqB,CAACgB,IAAI,CAAC;MAE3B,OAAO,MAAM;QACTf,uBAAuB,CAACe,IAAI,CAAC;MACjC,CAAC;IACL;IAEA,OAAO5D,SAAS;EACpB,CAAC,EAAE,CAACuC,kBAAkB,EAAEK,qBAAqB,EAAEC,uBAAuB,EAAEe,IAAI,CAAC,CAAC;EAE9E,MAAMsB,eAAe,GAAG,IAAA5B,eAAO,EAC3B,MAAOd,cAAc,GAAGA,cAAc,CAACA,cAAc,CAAC2C,MAAM,GAAG,CAAC,CAAC,KAAKvB,IAAI,GAAG,KAAM,EACnF,CAACpB,cAAc,EAAEoB,IAAI,CACzB,CAAC;EAED,IAAAqB,iBAAS,EAAC,MAAM;IACZX,SAAS,CAACH,OAAO,GAAGE,MAAM;IAC1BE,UAAU,CAACJ,OAAO,GAAGxD,OAAO;IAC5B6D,SAAS,CAACL,OAAO,GAAGrD,MAAM;EAC9B,CAAC,EAAE,CAACuD,MAAM,EAAE1D,OAAO,EAAEG,MAAM,CAAC,CAAC;EAE7B,MAAMsE,eAAe,GAAG,IAAAC,mBAAW,EAAC,MAAM;IACtC,IAAI/E,UAAU,EAAE;MACZ;IACJ;IAEA,IAAIqE,mBAAmB,IAAI,OAAOhC,yBAAyB,KAAK,UAAU,EAAE;MACxEA,yBAAyB,CAACiB,IAAI,CAAC;IACnC;IAEA,IAAI,OAAOnB,uBAAuB,KAAK,UAAU,EAAE;MAC/CA,uBAAuB,CAACmB,IAAI,CAAC;IACjC;IAEAJ,kBAAkB,CAAE8B,sBAAsB,IAAK,CAACA,sBAAsB,CAAC;EAC3E,CAAC,EAAE,CAAChF,UAAU,EAAEqE,mBAAmB,EAAEhC,yBAAyB,EAAEF,uBAAuB,EAAEmB,IAAI,CAAC,CAAC;EAE/F,IAAAqB,iBAAS,EAAC,MAAM;IACZ,IAAI3E,UAAU,IAAI+D,MAAM,EAAE;MACtB,IAAI,OAAO5B,uBAAuB,KAAK,UAAU,EAAE;QAC/CA,uBAAuB,CAACmB,IAAI,CAAC;MACjC;MAEAJ,kBAAkB,CAAE8B,sBAAsB,IAAK,CAACA,sBAAsB,CAAC;IAC3E;EACJ,CAAC,EAAE,CAAChF,UAAU,EAAE+D,MAAM,EAAE5B,uBAAuB,EAAEmB,IAAI,CAAC,CAAC;EAEvD,IAAAqB,iBAAS,EAAC,MAAM;IACZ,IAAInB,kBAAkB,CAACK,OAAO,EAAE;MAC5BL,kBAAkB,CAACK,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAIE,MAAM,EAAE;MACf,IAAI,OAAOG,SAAS,CAACL,OAAO,KAAK,UAAU,EAAE;QACzCK,SAAS,CAACL,OAAO,CAAC,CAAC;MACvB;IACJ,CAAC,MAAM,IAAI,OAAOI,UAAU,CAACJ,OAAO,KAAK,UAAU,EAAE;MACjDI,UAAU,CAACJ,OAAO,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACE,MAAM,CAAC,CAAC;EAEZ,IAAAY,iBAAS,EAAC,MAAM;IACZ,IAAI5E,aAAa,EAAE;MACf,IAAI,OAAOoC,uBAAuB,KAAK,UAAU,EAAE;QAC/CA,uBAAuB,CAACmB,IAAI,EAAE;UAAE2B,cAAc,EAAE;QAAK,CAAC,CAAC;MAC3D,CAAC,MAAM;QACH/B,kBAAkB,CAAC,IAAI,CAAC;MAC5B;IACJ;EACJ,CAAC,EAAE,CAACnD,aAAa,EAAEoC,uBAAuB,EAAEmB,IAAI,CAAC,CAAC;EAElD,IAAAqB,iBAAS,EAAC,MAAM;IACZ,IAAI,OAAOzE,QAAQ,KAAK,SAAS,EAAE;MAC/B,IAAI,OAAOiC,uBAAuB,KAAK,UAAU,IAAIjC,QAAQ,KAAK8D,SAAS,CAACH,OAAO,EAAE;QACjF1B,uBAAuB,CAACmB,IAAI,CAAC;MACjC,CAAC,MAAM;QACHJ,kBAAkB,CAAChD,QAAQ,CAAC;MAChC;IACJ;EACJ,CAAC,EAAE,CAACA,QAAQ,EAAEiC,uBAAuB,EAAEmB,IAAI,CAAC,CAAC;EAE7C,MAAM4B,6BAA6B,GAAG,IAAAlC,eAAO,EACzC,OAAO;IAAEvD,SAAS,EAAEA,SAAS,KAAK;EAAK,CAAC,CAAC,EACzC,CAACA,SAAS,CACd,CAAC;EAED,MAAM0F,wBAAwB,GAAG,IAAAnC,eAAO,EACpC,OAAO;IAAEoC,iBAAiB,EAAE,CAACrE;EAAqB,CAAC,CAAC,EACpD,CAACA,oBAAoB,CACzB,CAAC;EAED,MAAMsE,oCAAoC,GAAG,IAAArC,eAAO,EAAC,OAAO;IAAEvD,SAAS,EAAE;EAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EAErF,MAAM6F,gBAAgB,GAAG,IAAAtC,eAAO,EAAC,MAAM;IACnC,IAAIzB,mBAAmB,EAAE;MACrB,OAAO;QAAEgE,MAAM,EAAE,MAAM;QAAEC,OAAO,EAAE;MAAE,CAAC;IACzC;IAEA,OAAOzB,MAAM,GAAG;MAAEwB,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAC,GAAG;MAAED,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC;EAC9E,CAAC,EAAE,CAACzB,MAAM,EAAExC,mBAAmB,CAAC,CAAC;EAEjC,MAAMkE,QAAQ,GAAG,IAAAzC,eAAO,EAAC,MAAOqB,mBAAmB,GAAG,CAAC,GAAG,CAAC,CAAE,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAErF,MAAMqB,aAAa,GAAG,IAAAX,mBAAW,EAC5B7G,CAAgC,IAAK;IAClC,MAAMyH,wBAAwB,GAAGzH,CAAC,CAAC0H,aAAa,KAAK1H,CAAC,CAAC2H,MAAM;IAE7D,IACIF,wBAAwB,IACxBjB,2BAA2B,IAC3BxC,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAE2C,MAAM,KACrB3G,CAAC,CAAC4H,GAAG,KAAK,WAAW,IAAI5H,CAAC,CAAC4H,GAAG,KAAK,SAAS,CAAC,EAChD;MACE5H,CAAC,CAAC6H,cAAc,CAAC,CAAC;MAClB,MAAMC,YAAY,GAAG9D,cAAc,CAAC+D,OAAO,CAAC3C,IAAI,CAAC;MAEjD,IAAI0C,YAAY,KAAK,CAAC,CAAC,EAAE;QACrB,MAAME,SAAS,GACXhI,CAAC,CAAC4H,GAAG,KAAK,WAAW,GACf,CAACE,YAAY,GAAG,CAAC,IAAI9D,cAAc,CAAC2C,MAAM,GAC1C,CAACmB,YAAY,GAAG,CAAC,GAAG9D,cAAc,CAAC2C,MAAM,IAAI3C,cAAc,CAAC2C,MAAM;QAC5E,MAAMsB,iBAAiB,GAAGjE,cAAc,CAACgE,SAAS,CAAC;QAEnD,IAAIC,iBAAiB,IAAIA,iBAAiB,KAAK7C,IAAI,EAAE;UACjD,MAAM8C,oBAAoB,GAAGC,QAAQ,CAACC,aAAa,CAC/C,eAAerE,kBAAkB,MAAMkE,iBAAiB,IAC5D,CAAC;UAED,IAAIC,oBAAoB,EAAE;YACtB/D,yBAAyB,CAAC8D,iBAAiB,CAAC;YAC5CC,oBAAoB,CAACG,KAAK,CAAC,CAAC;YAC5B;UACJ;QACJ;MACJ;IACJ;IAEA,IACIZ,wBAAwB,KACvBzH,CAAC,CAAC4H,GAAG,KAAK,OAAO,IAAI5H,CAAC,CAAC4H,GAAG,KAAK,GAAG,CAAC,IACpCzB,mBAAmB,EACrB;MACES,eAAe,CAAC,CAAC;IACrB;IAEA,IACIa,wBAAwB,IACxBzH,CAAC,CAAC4H,GAAG,KAAK,YAAY,IACtBzB,mBAAmB,IACnB,CAACN,MAAM,EACT;MACE7F,CAAC,CAAC6H,cAAc,CAAC,CAAC;MAClBjB,eAAe,CAAC,CAAC;IACrB;IAEA,IAAIa,wBAAwB,KAAKzH,CAAC,CAAC4H,GAAG,KAAK,QAAQ,IAAI5H,CAAC,CAAC4H,GAAG,KAAK,WAAW,CAAC,EAAE;MAC3E,IAAI/B,MAAM,IAAIM,mBAAmB,EAAE;QAC/BnG,CAAC,CAAC6H,cAAc,CAAC,CAAC;QAClBjB,eAAe,CAAC,CAAC;QACjB;MACJ;MAEA,IACIJ,2BAA2B,IAC3B,OAAOrC,yBAAyB,KAAK,UAAU,EACjD;QAAA,IAAAmE,qBAAA;QACEtI,CAAC,CAAC6H,cAAc,CAAC,CAAC;QAClB1D,yBAAyB,CAAC3C,SAAS,CAAC;QACpC,IAAI+G,eAAe,IAAAD,qBAAA,GACftI,CAAC,CAAC0H,aAAa,CAACc,aAAa,cAAAF,qBAAA,uBAA7BA,qBAAA,CAA+BG,OAAO,CAClC,wBACJ,CAAC;QACL,OAAOF,eAAe,EAAE;UAAA,IAAAG,qBAAA,EAAAC,qBAAA;UACpB,MAAMC,aAAa,IAAAF,qBAAA,GAAGH,eAAe,CAChCM,YAAY,CAAC,WAAW,CAAC,cAAAH,qBAAA,uBADRA,qBAAA,CAEhBI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;UACrB,IAAIF,aAAa,KAAK7E,kBAAkB,EAAE;YACtCwE,eAAe,CAACF,KAAK,CAAC,CAAC;YACvB;UACJ;UACAE,eAAe,IAAAI,qBAAA,GACXJ,eAAe,CAACC,aAAa,cAAAG,qBAAA,uBAA7BA,qBAAA,CAA+BF,OAAO,CAClC,wBACJ,CAAC;QACT;MACJ;IACJ;EACJ,CAAC,EACD,CACI1E,kBAAkB,EAClBC,cAAc,EACd4C,eAAe,EACfJ,2BAA2B,EAC3BL,mBAAmB,EACnBN,MAAM,EACN1B,yBAAyB,EACzBiB,IAAI,CAEZ,CAAC;EAED,MAAM2D,WAAW,GAAG,IAAAlC,mBAAW,EAC1B7G,CAA6B,IAAK;IAC/B,IACIA,CAAC,CAAC0H,aAAa,KAAK1H,CAAC,CAAC2H,MAAM,IAC5BnB,2BAA2B,IAC3B,OAAOrC,yBAAyB,KAAK,UAAU,EACjD;MACEgB,qBAAqB,CAAC,IAAI,CAAC;MAC3BhB,yBAAyB,CAACiB,IAAI,CAAC;IACnC;EACJ,CAAC,EACD,CAACoB,2BAA2B,EAAErC,yBAAyB,EAAEiB,IAAI,CACjE,CAAC;EAED,MAAM4D,UAAU,GAAG,IAAAnC,mBAAW,EACzB7G,CAA6B,IAAK;IAC/B,IACIwG,2BAA2B,IAC3B,OAAOrC,yBAAyB,KAAK,UAAU,IAC/C,OAAOJ,kBAAkB,KAAK,QAAQ,EACxC;MACE,MAAMkF,kBAAkB,GAAGjJ,CAAC,CAACkJ,aAA4B;MACzD,MAAMC,mBAAmB,GAAGnJ,CAAC,CAAC0H,aAA4B;MAE1D,IAAI,CAACuB,kBAAkB,IAAI,CAACE,mBAAmB,CAACC,QAAQ,CAACH,kBAAkB,CAAC,EAAE;QAC1E9D,qBAAqB,CAAC,KAAK,CAAC;QAC5BhB,yBAAyB,CAAC3C,SAAS,CAAC;MACxC;IACJ;EACJ,CAAC,EACD,CAACuC,kBAAkB,EAAEyC,2BAA2B,EAAErC,yBAAyB,CAC/E,CAAC;EAED,IAAAsC,iBAAS,EAAC,MAAM;IACZ,IAAI,CAACD,2BAA2B,EAAE;MAC9BrB,qBAAqB,CAAC,KAAK,CAAC;IAChC,CAAC,MAAM,IACHjB,mBAAmB,IAAI,IAAI,IAC3B,OAAOC,yBAAyB,KAAK,UAAU,IAC/C,CAAAH,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAG,CAAC,CAAC,MAAKoB,IAAI,EAC9B;MACEjB,yBAAyB,CAACiB,IAAI,CAAC;IACnC;EACJ,CAAC,EAAE,CACCpB,cAAc,EACdE,mBAAmB,EACnBsC,2BAA2B,EAC3BrC,yBAAyB,EACzBiB,IAAI,CACP,CAAC;EAEF,oBACInG,OAAA,CAAAiB,OAAA,CAAAmJ,aAAA,CAACvJ,UAAA,CAAAwJ,qBAAqB;IAClBC,GAAG,EAAE/D,YAAa;IAClBgE,OAAO,EAAE;MAAEnC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxC,aAAW,GAAGvD,kBAAkB,IAAI,EAAE,MAAMqB,IAAI,EAAG;IACnDqE,SAAS,EAAC,uBAAuB;IACjCC,IAAI,EAAE;MAAErC,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCqC,OAAO,EAAEvC,gBAAiB;IAC1BwC,OAAO,EAAE/D,MAAO;IAChB0B,QAAQ,EAAEA,QAAS;IACnBsC,gBAAgB,EAAE,CAACnD,eAAe,IAAI,CAACnF,SAAU;IACjDuI,gBAAgB,EAAEtF,eAAgB;IAClCuF,UAAU,EAAExI,SAAU;IACtByI,sBAAsB,EAAErH,qBAAsB;IAC9CsH,sBAAsB,EAAErH,qBAAsB;IAC9CsH,qBAAqB,EAAErH,oBAAqB;IAC5CsH,qBAAqB,EAAEnH,oBAAqB;IAC5CoH,kBAAkB,EAAE7G,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE8G,iBAAkB;IAC9CC,iCAAiC,EAAEzF,yCAA0C;IAC7E0F,+BAA+B,EAAEtE,8BAA+B;IAChEuE,SAAS,EAAEhD,aAAc;IACzBiD,OAAO,EAAE1B,WAAY;IACrB2B,MAAM,EAAE1B,UAAW;IACnB2B,YAAY,EAAEtI,YAAa;IAC3BuI,YAAY,EAAExI,UAAW;IACzByI,UAAU,EAAE;MAAEC,QAAQ,EAAEzH,mBAAmB,GAAG,CAAC,GAAG;IAAK;EAAE,gBAEzDpE,OAAA,CAAAiB,OAAA,CAAAmJ,aAAA,CAAClI,gBAAgB,CAAC4J,QAAQ;IAACC,KAAK,EAAEhE;EAA8B,gBAC5D/H,OAAA,CAAAiB,OAAA,CAAAmJ,aAAA,CAACtK,MAAA,CAAAkM,YAAY;IAACJ,UAAU,EAAE;MAAEK,IAAI,EAAE;IAAQ;EAAE,gBACxCjM,OAAA,CAAAiB,OAAA,CAAAmJ,aAAA,CAACzJ,cAAA,CAAAM,OAAa;IACVkF,IAAI,EAAEA,IAAK;IACXxD,IAAI,EAAEA,IAAK;IACXiE,MAAM,EAAEA,MAAO;IACfxC,mBAAmB,EAAEA,mBAAoB;IACzCtB,OAAO,EAAEA,OAAQ;IACjBE,aAAa,EAAEA,aAAa,IAAIH,UAAW;IAC3CP,SAAS,EAAEA,SAAS,KAAK,IAAK;IAC9B4J,OAAO,EAAEvE,eAAgB;IACzBrE,cAAc,EAAEA,cAAe;IAC/BC,YAAY,EAAEA,YAAa;IAC3BC,iBAAiB,EAAEA,iBAAkB;IACrCC,WAAW,EAAEA,WAAY;IACzBK,gBAAgB,EAAEA,gBAAiB;IACnCE,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA,YAAa;IAC3BC,kBAAkB,EAAEA,kBAAmB;IACvCC,eAAe,EAAEA,eAAgB;IACjCgI,UAAU,EAAE7H,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAE6H,UAAW;IAC/B1H,gCAAgC,EAAEmB;EAA0C,CAC/E,CAAC,eACF5F,OAAA,CAAAiB,OAAA,CAAAmJ,aAAA,CAACtK,MAAA,CAAAsM,eAAe;IAAC1B,OAAO,EAAE;EAAM,GAC3B,CAAC9D,MAAM,IAAI/C,kBAAkB,kBAC1B7D,OAAA,CAAAiB,OAAA,CAAAmJ,aAAA,CAAC5J,cAAA,CAAAS,OAAa;IACVmD,mBAAmB,EAAEA,mBAAoB;IACzCiI,SAAS,EAAE5J,aAAc;IACzB6J,QAAQ,EAAErJ,YAAa;IACvBsJ,mBAAmB,EAAE/H,uBAAwB;IAC7CgI,cAAc,EAAE3I,kBAAkB,IAAI,CAAC+C;EAAO,gBAE9C5G,OAAA,CAAAiB,OAAA,CAAAmJ,aAAA,CAACxJ,yBAAA,CAAA6E,uBAAuB,CAACqG,QAAQ;IAC7BC,KAAK,EAAE7D;EAAqC,gBAE5ClI,OAAA,CAAAiB,OAAA,CAAAmJ,aAAA,CAAC9J,oBAAA,CAAAmM,WAAW,CAACX,QAAQ;IAACC,KAAK,EAAE/D;EAAyB,GACjDtF,QACiB,CACQ,CACvB,CAEN,CACP,CACS,CACR,CAAC;AAEhC,CAAC;AAEDF,SAAS,CAACkK,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAxK,OAAA,CAAAlB,OAAA,GAErBuB,SAAS","ignoreList":[]}

package/lib/cjs/components/accordion/Accordion.styles.js CHANGED Viewed

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledMotionAccordion = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledMotionAccordion = exports.StyledMotionAccordion = (0, _styledComponents.default)(_react.motion.div)`
     ${({
@@ -106,7 +105,6 @@ const StyledMotionAccordion = exports.StyledMotionAccordion = (0, _styledCompone
 }) => $shouldEnableKeyboardHighlighting && $shouldShowKeyboardHighlighting && !$shouldHideBackground && (0, _styledComponents.css)`
             &:focus-visible {
                 transition: none;
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss};
             }
         `};
 `;

package/lib/cjs/components/accordion/Accordion.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","~~_keyboardFocusHighlighting","~~e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordion","exports","styled","motion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","css","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldForceBottomLine","$shouldShowLines","$shouldHideBottomLine","$bottomBorderColor","undefined","shouldShowBottomBorder","$isParentWrapped","$shouldEnableKeyboardHighlighting","$shouldShowKeyboardHighlighting"~~,"keyboardFocusHighlightingRingCss"~~],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\~~nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\~~n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped?: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldForceBottomLine?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n $shouldHideBottomLine: boolean;\n $bottomBorderColor?: string;\n $shouldEnableKeyboardHighlighting?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen \|\| $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n\n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n will-change: unset !important;\n\n margin-top: 10px;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldForceBottomLine,\n $shouldShowLines,\n $shouldHideBottomLine,\n theme,\n $bottomBorderColor,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBottomLine) {\n return css`\n border-bottom-color: ${$bottomBorderColor ??\n `rgba(${theme['headline-rgb'] ?? '0 0 0'}, 1)`};\n `;\n }\n\n if ($shouldForceBackground \|\| $shouldHideBottomLine) return undefined;\n const shouldShowBottomBorder =\n theme.accordionLines && $shouldShowLines && ($isWrapped \|\| !$isOpen);\n\n if ($bottomBorderColor && shouldShowBottomBorder)\n return css`\n border-bottom-color: ${$bottomBorderColor};\n `;\n\n if (shouldShowBottomBorder) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n `;\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped\n ? css`\n margin-top: 5px;\n `\n : css`\n margin: 0;\n `}\n ${({\n $isWrapped,\n $shouldHideBackground,\n theme,\n $shouldEnableKeyboardHighlighting,\n }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n ${!$shouldEnableKeyboardHighlighting\n ? css`\n &:focus-visible {\n background-color: rgba(\n ${theme['100-rgb']},\n ${theme.cardBackgroundOpacity}\n );\n }\n `\n : null}\n `};\n\n ${({\n $shouldEnableKeyboardHighlighting,\n $shouldShowKeyboardHighlighting,\n $shouldHideBackground,\n }: StyledMotionAccordionProps) =>\n $shouldEnableKeyboardHighlighting &&\n $shouldShowKeyboardHighlighting &&\n !$shouldHideBackground &&\n css`\n &:focus-visible {\n transition: none;\n ~~${keyboardFocusHighlightingRingCss};\n~~ }\n `};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;~~AAEA~~,~~IAAAG,0BAAA,GAAAH,OAAA;AAAgG,~~SAAAE,~~wBAAAE~~,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAJ~~,uBAAA,YAAAA,~~CAAAE~~,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;~~AAgBzF~~,MAAMkB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAA6B;AACnF,MAAM,CAAC;EACCC,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBC,qBAAqB;EACrBC;AACwB,CAAC,KACzB,CAACJ,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtB,IAAAE,qBAAG;AACX,qCAAqCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACrF,6BAA6BF,KAAK,CAACG,gBAAgB;AACnD,oDAAoDH,KAAK,CAACI,UAAU;AACpE,SAAS;AACT;AACA,MAAM,CAAC;EAAEJ;AAAkC,CAAC,KACpCA,KAAK,CAACK,cAAc,IACpB,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT;AACA,qBAAqB,CAAC;EAAEL,OAAO;EAAEC;AAAuC,CAAC,KACjED,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EACCD,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBQ,sBAAsB;EACtBC,gBAAgB;EAChBC,qBAAqB;EACrBR,KAAK;EACLS;AACwB,CAAC,KAAK;EAC9B,IAAIH,sBAAsB,EAAE;IACxB,OAAO,IAAAL,qBAAG;AACtB,uCAAuCQ,kBAAkB,IACzC,QAAQT,KAAK,CAAC,cAAc,CAAC,IAAI,OAAO,MAAM;AAC9D,aAAa;EACL;EAEA,IAAIF,sBAAsB,IAAIU,qBAAqB,EAAE,OAAOE,SAAS;EACrE,MAAMC,sBAAsB,GACxBX,KAAK,CAACK,cAAc,IAAIE,gBAAgB,KAAKV,UAAU,IAAI,CAACD,OAAO,CAAC;EAExE,IAAIa,kBAAkB,IAAIE,sBAAsB,EAC5C,OAAO,IAAAV,qBAAG;AACtB,uCAAuCQ,kBAAkB;AACzD,aAAa;EAEL,IAAIE,sBAAsB,EAAE;IACxB,OAAO,IAAAV,qBAAG;AACtB,4CAA4CD,KAAK,CAAC,cAAc,CAAC;AACjE,aAAa;EACL;EAEA,OAAOU,SAAS;AACpB,CAAC;AACL,MAAM,CAAC;EAAEE;AAA6C,CAAC,KAC/CA,gBAAgB,IAChB,IAAAX,qBAAG;AACX;AACA,SAAS;AACT,MAAM,CAAC;EAAEJ;AAAuC,CAAC,KACzC,CAACA,UAAU,GACL,IAAAI,qBAAG;AACjB;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB;AACA,eAAe;AACf,MAAM,CAAC;EACCJ,UAAU;EACVE,qBAAqB;EACrBC,KAAK;EACLa;AACwB,CAAC,KACzB,CAAChB,UAAU,IACX,CAACE,qBAAqB,IACtB,IAAAE,qBAAG;AACX;AACA,yCAAyCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACzF;AACA,cAAc,CAACW,iCAAiC,GAC9B,IAAAZ,qBAAG;AACrB;AACA;AACA,gCAAgCD,KAAK,CAAC,SAAS,CAAC;AAChD,gCAAgCA,KAAK,CAACE,qBAAqB;AAC3D;AACA;AACA,mBAAmB,GACD,IAAI;AACtB,SAAS;AACT;AACA,MAAM,CAAC;EACCW,iCAAiC;EACjCC,+BAA+B;EAC/Bf;AACwB,CAAC,KACzBc,iCAAiC,IACjCC,+BAA+B,IAC/B,CAACf,qBAAqB,IACtB,IAAAE,qBAAG;AACX;AACA;AACA~~,kBAAkBc,2DAAgC~~;~~AAClD;~~AACA,SAAS;AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Accordion.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordion","exports","styled","motion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","css","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldForceBottomLine","$shouldShowLines","$shouldHideBottomLine","$bottomBorderColor","undefined","shouldShowBottomBorder","$isParentWrapped","$shouldEnableKeyboardHighlighting","$shouldShowKeyboardHighlighting"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n $isOpen: boolean;\n $isParentWrapped?: boolean;\n $isWrapped?: boolean;\n $shouldForceBackground?: boolean;\n $shouldForceBottomLine?: boolean;\n $shouldHideBackground?: boolean;\n $shouldShowLines?: boolean;\n $shouldHideBottomLine: boolean;\n $bottomBorderColor?: string;\n $shouldEnableKeyboardHighlighting?: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldHideBackground,\n theme,\n }: StyledMotionAccordionProps) =>\n ($isOpen \|\| $shouldForceBackground) &&\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n border-radius: ${theme.cardBorderRadius}px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n `}\n\n ${({ theme }: StyledMotionAccordionProps) =>\n theme.accordionLines &&\n css`\n border-bottom: 1px solid transparent;\n `}\n\n margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n $isOpen && !$isWrapped ? '30px' : '0px'};\n transition:\n background-color 0.3s ease,\n border-bottom-color 0.3s ease,\n border-radius 0.3s ease,\n box-shadow 0.3s ease,\n margin-bottom 0.3s ease;\n will-change: unset !important;\n\n margin-top: 10px;\n\n ${({\n $isOpen,\n $isWrapped,\n $shouldForceBackground,\n $shouldForceBottomLine,\n $shouldShowLines,\n $shouldHideBottomLine,\n theme,\n $bottomBorderColor,\n }: StyledMotionAccordionProps) => {\n if ($shouldForceBottomLine) {\n return css`\n border-bottom-color: ${$bottomBorderColor ??\n `rgba(${theme['headline-rgb'] ?? '0 0 0'}, 1)`};\n `;\n }\n\n if ($shouldForceBackground \|\| $shouldHideBottomLine) return undefined;\n const shouldShowBottomBorder =\n theme.accordionLines && $shouldShowLines && ($isWrapped \|\| !$isOpen);\n\n if ($bottomBorderColor && shouldShowBottomBorder)\n return css`\n border-bottom-color: ${$bottomBorderColor};\n `;\n\n if (shouldShowBottomBorder) {\n return css`\n border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n `;\n }\n\n return undefined;\n }}\n ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n $isParentWrapped &&\n css`\n padding-left: 17px;\n `}\n ${({ $isWrapped }: StyledMotionAccordionProps) =>\n !$isWrapped\n ? css`\n margin-top: 5px;\n `\n : css`\n margin: 0;\n `}\n ${({\n $isWrapped,\n $shouldHideBackground,\n theme,\n $shouldEnableKeyboardHighlighting,\n }: StyledMotionAccordionProps) =>\n !$isWrapped &&\n !$shouldHideBackground &&\n css`\n &:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n ${!$shouldEnableKeyboardHighlighting\n ? css`\n &:focus-visible {\n background-color: rgba(\n ${theme['100-rgb']},\n ${theme.cardBackgroundOpacity}\n );\n }\n `\n : null}\n `};\n\n ${({\n $shouldEnableKeyboardHighlighting,\n $shouldShowKeyboardHighlighting,\n $shouldHideBackground,\n }: StyledMotionAccordionProps) =>\n $shouldEnableKeyboardHighlighting &&\n $shouldShowKeyboardHighlighting &&\n !$shouldHideBackground &&\n css`\n &:focus-visible {\n transition: none;\n }\n `};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAiBzC,MAAMkB,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAA6B;AACnF,MAAM,CAAC;EACCC,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBC,qBAAqB;EACrBC;AACwB,CAAC,KACzB,CAACJ,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtB,IAAAE,qBAAG;AACX,qCAAqCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACrF,6BAA6BF,KAAK,CAACG,gBAAgB;AACnD,oDAAoDH,KAAK,CAACI,UAAU;AACpE,SAAS;AACT;AACA,MAAM,CAAC;EAAEJ;AAAkC,CAAC,KACpCA,KAAK,CAACK,cAAc,IACpB,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT;AACA,qBAAqB,CAAC;EAAEL,OAAO;EAAEC;AAAuC,CAAC,KACjED,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EACCD,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBQ,sBAAsB;EACtBC,gBAAgB;EAChBC,qBAAqB;EACrBR,KAAK;EACLS;AACwB,CAAC,KAAK;EAC9B,IAAIH,sBAAsB,EAAE;IACxB,OAAO,IAAAL,qBAAG;AACtB,uCAAuCQ,kBAAkB,IACzC,QAAQT,KAAK,CAAC,cAAc,CAAC,IAAI,OAAO,MAAM;AAC9D,aAAa;EACL;EAEA,IAAIF,sBAAsB,IAAIU,qBAAqB,EAAE,OAAOE,SAAS;EACrE,MAAMC,sBAAsB,GACxBX,KAAK,CAACK,cAAc,IAAIE,gBAAgB,KAAKV,UAAU,IAAI,CAACD,OAAO,CAAC;EAExE,IAAIa,kBAAkB,IAAIE,sBAAsB,EAC5C,OAAO,IAAAV,qBAAG;AACtB,uCAAuCQ,kBAAkB;AACzD,aAAa;EAEL,IAAIE,sBAAsB,EAAE;IACxB,OAAO,IAAAV,qBAAG;AACtB,4CAA4CD,KAAK,CAAC,cAAc,CAAC;AACjE,aAAa;EACL;EAEA,OAAOU,SAAS;AACpB,CAAC;AACL,MAAM,CAAC;EAAEE;AAA6C,CAAC,KAC/CA,gBAAgB,IAChB,IAAAX,qBAAG;AACX;AACA,SAAS;AACT,MAAM,CAAC;EAAEJ;AAAuC,CAAC,KACzC,CAACA,UAAU,GACL,IAAAI,qBAAG;AACjB;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB;AACA,eAAe;AACf,MAAM,CAAC;EACCJ,UAAU;EACVE,qBAAqB;EACrBC,KAAK;EACLa;AACwB,CAAC,KACzB,CAAChB,UAAU,IACX,CAACE,qBAAqB,IACtB,IAAAE,qBAAG;AACX;AACA,yCAAyCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACzF;AACA,cAAc,CAACW,iCAAiC,GAC9B,IAAAZ,qBAAG;AACrB;AACA;AACA,gCAAgCD,KAAK,CAAC,SAAS,CAAC;AAChD,gCAAgCA,KAAK,CAACE,qBAAqB;AAC3D;AACA;AACA,mBAAmB,GACD,IAAI;AACtB,SAAS;AACT;AACA,MAAM,CAAC;EACCW,iCAAiC;EACjCC,+BAA+B;EAC/Bf;AACwB,CAAC,KACzBc,iCAAiC,IACjCC,+BAA+B,IAC/B,CAACf,qBAAqB,IACtB,IAAAE,qBAAG;AACX;AACA;AACA;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/cjs/components/amount-control/AmountControl.js CHANGED Viewed

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = require("motion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _amountControl = require("../../utils/amountControl");
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _AmountControl = require("./AmountControl.styles");
@@ -35,6 +36,8 @@ const AmountControl = ({
   const [isEditing, setIsEditing] = (0, _react2.useState)(false);
   const step = (0, _react2.useMemo)(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
   const inputRef = (0, _react2.useRef)(null);
+  const leftButtonRef = (0, _react2.useRef)(null);
+  const rightButtonRef = (0, _react2.useRef)(null);
   /**
    * This function controls the displayState
@@ -168,13 +171,22 @@ const AmountControl = ({
     inputLabel = label;
   }
   const shouldShowPseudoInput = !isEditing && (inputValue === '0' || shouldForceLabel && typeof label === 'string' || inputLabel === label);
+  (0, _useFocusRingPortal.useFocusRingPortal)(inputRef, {
+    isEnabled: shouldShowKeyboardHighlighting && !shouldShowPseudoInput
+  });
+  (0, _useFocusRingPortal.useFocusRingPortal)(leftButtonRef, {
+    isEnabled: shouldShowKeyboardHighlighting && displayState === 'normal'
+  });
+  (0, _useFocusRingPortal.useFocusRingPortal)(rightButtonRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledAmountControl, {
     onClick: handleFirstAmount,
     $isDisabled: isDisabled
   }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, ['normal'].includes(displayState) && /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    ref: leftButtonRef,
     key: "left_button",
     initial: {
       width: 0,
@@ -212,7 +224,6 @@ const AmountControl = ({
     $shouldShowIcon: shouldShowIcon,
     $shouldShowWideInput: shouldShowWideInput,
     $hasFocus: hasFocus,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     disabled: isDisabled,
     onFocus: () => setIsEditing(true),
     onBlur: handleInputBlur,
@@ -221,7 +232,7 @@ const AmountControl = ({
   })), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    ref: rightButtonRef,
     key: "right_button",
     initial: {
       width: 0,

package/lib/cjs/components/amount-control/AmountControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.js","names":["_react","require","_react2","_interopRequireWildcard","_amountControl","_useKeyboardFocusHighlighting","_Icon","_interopRequireDefault","_AmountControl","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldEnableKeyboardHighlighting","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","amountValue","setAmountValue","useState","inputValue","setInputValue","toString","displayState","setDisplayState","isEditing","setIsEditing","useMemo","Number","isSafeInteger","inputRef","useRef","useEffect","hasFocus","checkForValidAmount","handleAmountAdd","useCallback","prevState","newAmount","handleAmountRemove","handleFirstAmount","handlePseudoInputClick","window","requestAnimationFrame","_inputRef$current","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","shouldShowPseudoInput","createElement","StyledAmountControl","onClick","$isDisabled","AnimatePresence","initial","includes","StyledMotionAmountControlButton","$shouldShowKeyboardHighlighting","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","StyledInputWrapper","StyledAmountControlPseudoInput","$shouldShowWideInput","$shouldShowRightIcon","StyledAmountControlInput","ref","$displayState","$shouldShowIcon","$hasFocus","onFocus","onBlur","$color","undefined","displayName","_default","exports"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledInputWrapper,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'normal' \| 'maxAmount' \| 'minAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n The color of the icon.\n /\n iconColor?: string;\n /\n Whether the control should be disabled\n /\n isDisabled?: boolean;\n /\n A Text that should be displayed if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n /\n maxAmount?: number;\n /\n The minimum allowed amount.\n /\n minAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Enables keyboard-only focus highlighting. The highlighting is only visible while the\n * user navigates with the keyboard and is reset on mouse movement or click.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Whether the label should be displayed even if an amount is selected.\n /\n shouldForceLabel?: boolean;\n /\n Whether the \"add\"-icon should be displayed if the minAmount is reached.\n /\n shouldShowAddIconOnMinAmount?: boolean;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n /\n Whether the input should be wider\n /\n shouldShowWideInput?: boolean;\n /\n Defines the amount that will change when adjusted\n /\n step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n iconColor,\n isDisabled = false,\n label,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldEnableKeyboardHighlighting,\n shouldForceLabel = false,\n shouldShowAddIconOnMinAmount = false,\n shouldShowIcon = true,\n shouldShowWideInput = false,\n step: stepProp = 1,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n const [isEditing, setIsEditing] = useState(false);\n\n const step = useMemo(\n () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n [stepProp],\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n setDisplayState('minAmount');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n /\n useEffect(() => {\n if (typeof amount !== 'number') {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState + step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return typeof amount === 'number' ? prevState : newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) + step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [amount, maxAmount, minAmount, onChange, step]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState - step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) - step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [displayState, maxAmount, minAmount, onChange, step]);\n\n const handleFirstAmount = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + step);\n }\n\n setAmountValue(minAmount + step);\n setInputValue((minAmount + step).toString());\n }, [amountValue, isDisabled, minAmount, onChange, step]);\n\n const handlePseudoInputClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n setIsEditing(true);\n\n window.requestAnimationFrame(() => {\n inputRef.current?.focus();\n });\n }, [isDisabled]);\n\n const handleInputBlur = useCallback(() => {\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Math.round(Number(inputValue) / step) step,\n });\n\n setAmountValue(checkedValue);\n setInputValue(checkedValue.toString());\n setIsEditing(false);\n\n if (typeof onChange === 'function') {\n onChange(checkedValue);\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBefore = Number(value.replace(/\\D/g, ''));\n\n if (valueBefore < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n },\n [minAmount],\n );\n\n let inputLabel = inputValue;\n\n if (typeof label === 'string' && (displayState === 'default' \|\| shouldForceLabel)) {\n inputLabel = label;\n }\n\n const shouldShowPseudoInput =\n !isEditing &&\n (inputValue === '0' \|\|\n (shouldForceLabel && typeof label === 'string') \|\|\n inputLabel === label);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n <AnimatePresence initial={false}>\n {['normal'].includes(displayState) && (\n <StyledMotionAmountControlButton\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n key=\"left_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={isDisabled \|\| (amountValue !== 0 && amountValue <= minAmount)}\n $isDisabled={\n isDisabled \|\| (amountValue !== 0 && amountValue <= minAmount)\n }\n >\n <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledInputWrapper>\n {shouldShowPseudoInput ? (\n <StyledAmountControlPseudoInput\n onClick={handlePseudoInputClick}\n $shouldShowWideInput={shouldShowWideInput}\n $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n >\n {inputLabel}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n disabled={isDisabled}\n onFocus={() => setIsEditing(true)}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={inputLabel}\n />\n )}\n </StyledInputWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionAmountControlButton\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n onClick={\n displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n }\n disabled={isDisabled \|\| (maxAmount ? amountValue >= maxAmount : false)}\n $isDisabled={isDisabled \|\| (maxAmount ? amountValue >= maxAmount : false)}\n >\n <Icon\n icons={\n !['normal'].includes(displayState) && icon\n ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n }\n size={14}\n color={iconColor ?? 'white'}\n />\n </StyledMotionAmountControlButton>\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n handlePseudoInputClick,\n hasFocus,\n icon,\n iconColor,\n inputLabel,\n isDisabled,\n maxAmount,\n minAmount,\n shouldShowIcon,\n shouldShowKeyboardHighlighting,\n shouldShowPseudoInput,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,6BAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,cAAA,GAAAP,OAAA;AAMgC,SAAAM,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAgEhC,MAAMgB,aAAqC,GAAGA,CAAC;EAC3CC,MAAM;EACNC,IAAI;EACJC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC,SAAS;EACTC,SAAS,GAAG,CAAC;EACbC,QAAQ;EACRC,gCAAgC;EAChCC,gBAAgB,GAAG,KAAK;EACxBC,4BAA4B,GAAG,KAAK;EACpCC,cAAc,GAAG,IAAI;EACrBC,mBAAmB,GAAG,KAAK;EAC3BC,IAAI,EAAEC,QAAQ,GAAG;AACrB,CAAC,KAAK;EACF,MAAMC,8BAA8B,GAAG,IAAAC,0DAA4B,EAC/DR,gCAAgC,IAAI,CAACL,UACzC,CAAC;EAED,MAAM,CAACc,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,gBAAQ,EAACb,SAAS,CAAC;EACzD,MAAM,CAACc,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAF,gBAAQ,EAACb,SAAS,CAACgB,QAAQ,CAAC,CAAC,CAAC;EAClE,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAL,gBAAQ,EAAe,SAAS,CAAC;EACzE,MAAM,CAACM,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAP,gBAAQ,EAAC,KAAK,CAAC;EAEjD,MAAMN,IAAI,GAAG,IAAAc,eAAO,EAChB,MAAOC,MAAM,CAACC,aAAa,CAACf,QAAQ,CAAC,IAAIA,QAAQ,IAAI,CAAC,GAAGA,QAAQ,GAAG,CAAE,EACtE,CAACA,QAAQ,CACb,CAAC;EAED,MAAMgB,QAAQ,GAAG,IAAAC,cAAM,EAAmB,IAAI,CAAC;;EAE/C;AACJ;AACA;EACI,IAAAC,iBAAS,EAAC,MAAM;IACZ,QAAQ,IAAI;MACR,KAAK3B,SAAS,IAAIY,WAAW,IAAIZ,SAAS;QACtCmB,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ,KAAKP,WAAW,GAAGX,SAAS;QACxBkB,eAAe,CAAC,QAAQ,CAAC;QACzB;MACJ,KAAKP,WAAW,KAAKX,SAAS,IAAIW,WAAW,IAAI,CAAC,IAAIP,4BAA4B;QAC9Ec,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ;QACIA,eAAe,CAAC,SAAS,CAAC;IAClC;EACJ,CAAC,EAAE,CAACP,WAAW,EAAEZ,SAAS,EAAEC,SAAS,EAAEI,4BAA4B,CAAC,CAAC;EAErE,MAAMuB,QAAQ,GAAG,IAAAN,eAAO,EAAC,MAAMJ,YAAY,KAAK,SAAS,EAAE,CAACA,YAAY,CAAC,CAAC;;EAE1E;AACJ;AACA;EACI,IAAAS,iBAAS,EAAC,MAAM;IACZ,IAAI,OAAOhC,MAAM,KAAK,QAAQ,EAAE;MAC5B;IACJ;IAEAkB,cAAc,CAAC,IAAAgB,kCAAmB,EAAC;MAAElC,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAAC;IACrEe,aAAa,CAAC,IAAAa,kCAAmB,EAAC;MAAElC,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAACgB,QAAQ,CAAC,CAAC,CAAC;EACnF,CAAC,EAAE,CAACtB,MAAM,EAAEK,SAAS,EAAEC,SAAS,CAAC,CAAC;EAElC,MAAM6B,eAAe,GAAG,IAAAC,mBAAW,EAAC,MAAM;IACtClB,cAAc,CAAEmB,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAG,IAAAJ,kCAAmB,EAAC;QAClClC,MAAM,EAAEqC,SAAS,GAAGxB,IAAI;QACxBP,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC+B,SAAS,CAAC;MACvB;MAEA,OAAO,OAAOtC,MAAM,KAAK,QAAQ,GAAGqC,SAAS,GAAGC,SAAS;IAC7D,CAAC,CAAC;IACFjB,aAAa,CAAEgB,SAAS,IACpB,IAAAH,kCAAmB,EAAC;MAChBlC,MAAM,EAAE4B,MAAM,CAACS,SAAS,CAAC,GAAGxB,IAAI;MAChCP,SAAS;MACTD;IACJ,CAAC,CAAC,CAACiB,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAACtB,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEM,IAAI,CAAC,CAAC;EAElD,MAAM0B,kBAAkB,GAAG,IAAAH,mBAAW,EAAC,MAAM;IACzC,IAAIb,YAAY,KAAK,SAAS,EAAE;MAC5B;IACJ;IAEAL,cAAc,CAAEmB,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAG,IAAAJ,kCAAmB,EAAC;QAClClC,MAAM,EAAEqC,SAAS,GAAGxB,IAAI;QACxBP,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC+B,SAAS,CAAC;MACvB;MAEA,OAAOA,SAAS;IACpB,CAAC,CAAC;IACFjB,aAAa,CAAEgB,SAAS,IACpB,IAAAH,kCAAmB,EAAC;MAChBlC,MAAM,EAAE4B,MAAM,CAACS,SAAS,CAAC,GAAGxB,IAAI;MAChCP,SAAS;MACTD;IACJ,CAAC,CAAC,CAACiB,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAACC,YAAY,EAAElB,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEM,IAAI,CAAC,CAAC;EAExD,MAAM2B,iBAAiB,GAAG,IAAAJ,mBAAW,EAAC,MAAM;IACxC,IAAIjC,UAAU,EAAE;MACZ;IACJ;IAEA,IAAIc,WAAW,KAAKX,SAAS,EAAE;MAC3B;IACJ;IAEA,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACD,SAAS,GAAGO,IAAI,CAAC;IAC9B;IAEAK,cAAc,CAACZ,SAAS,GAAGO,IAAI,CAAC;IAChCQ,aAAa,CAAC,CAACf,SAAS,GAAGO,IAAI,EAAES,QAAQ,CAAC,CAAC,CAAC;EAChD,CAAC,EAAE,CAACL,WAAW,EAAEd,UAAU,EAAEG,SAAS,EAAEC,QAAQ,EAAEM,IAAI,CAAC,CAAC;EAExD,MAAM4B,sBAAsB,GAAG,IAAAL,mBAAW,EAAC,MAAM;IAC7C,IAAIjC,UAAU,EAAE;MACZ;IACJ;IAEAuB,YAAY,CAAC,IAAI,CAAC;IAElBgB,MAAM,CAACC,qBAAqB,CAAC,MAAM;MAAA,IAAAC,iBAAA;MAC/B,CAAAA,iBAAA,GAAAd,QAAQ,CAACe,OAAO,cAAAD,iBAAA,eAAhBA,iBAAA,CAAkBE,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;EACN,CAAC,EAAE,CAAC3C,UAAU,CAAC,CAAC;EAEhB,MAAM4C,eAAe,GAAG,IAAAX,mBAAW,EAAC,MAAM;IACtC,MAAMY,YAAY,GAAG,IAAAd,kCAAmB,EAAC;MACrC5B,SAAS;MACTD,SAAS;MACTL,MAAM,EAAEiD,IAAI,CAACC,KAAK,CAACtB,MAAM,CAACR,UAAU,CAAC,GAAGP,IAAI,CAAC,GAAGA;IACpD,CAAC,CAAC;IAEFK,cAAc,CAAC8B,YAAY,CAAC;IAC5B3B,aAAa,CAAC2B,YAAY,CAAC1B,QAAQ,CAAC,CAAC,CAAC;IACtCI,YAAY,CAAC,KAAK,CAAC;IAEnB,IAAI,OAAOnB,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACyC,YAAY,CAAC;IAC1B;IAEA,IAAI5B,UAAU,KAAK,EAAE,EAAE;MACnBC,aAAa,CAACf,SAAS,CAACgB,QAAQ,CAAC,CAAC,CAAC;IACvC;EACJ,CAAC,EAAE,CAACF,UAAU,EAAEf,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEM,IAAI,CAAC,CAAC;EAEtD,MAAMsC,iBAAiB,GAAG,IAAAf,mBAAW,EAChCgB,KAAoC,IAAK;IACtC,MAAM;MAAEC;IAAM,CAAC,GAAGD,KAAK,CAACE,MAAM;IAE9B,MAAMC,WAAW,GAAG3B,MAAM,CAACyB,KAAK,CAACG,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAEpD,IAAID,WAAW,GAAGjD,SAAS,IAAIA,SAAS,KAAK,CAAC,EAAE;MAC5Ce,aAAa,CAAC,GAAG,CAAC;MAElB;IACJ;IAEAA,aAAa,CAACkC,WAAW,KAAK,CAAC,GAAG,EAAE,GAAGA,WAAW,CAACjC,QAAQ,CAAC,CAAC,CAAC;EAClE,CAAC,EACD,CAAChB,SAAS,CACd,CAAC;EAED,IAAImD,UAAU,GAAGrC,UAAU;EAE3B,IAAI,OAAOhB,KAAK,KAAK,QAAQ,KAAKmB,YAAY,KAAK,SAAS,IAAId,gBAAgB,CAAC,EAAE;IAC/EgD,UAAU,GAAGrD,KAAK;EACtB;EAEA,MAAMsD,qBAAqB,GACvB,CAACjC,SAAS,KACTL,UAAU,KAAK,GAAG,IACdX,gBAAgB,IAAI,OAAOL,KAAK,KAAK,QAAS,IAC/CqD,UAAU,KAAKrD,KAAK,CAAC;EAE7B,OAAO,IAAAuB,eAAO,EACV,mBACItD,OAAA,CAAAS,OAAA,CAAA6E,aAAA,CAAChF,cAAA,CAAAiF,mBAAmB;IAACC,OAAO,EAAErB,iBAAkB;IAACsB,WAAW,EAAE3D;EAAW,gBACrE9B,OAAA,CAAAS,OAAA,CAAA6E,aAAA,CAACxF,MAAA,CAAA4F,eAAe;IAACC,OAAO,EAAE;EAAM,GAC3B,CAAC,QAAQ,CAAC,CAACC,QAAQ,CAAC1C,YAAY,CAAC,iBAC9BlD,OAAA,CAAAS,OAAA,CAAA6E,aAAA,CAAChF,cAAA,CAAAuF,+BAA+B;IAC5BC,+BAA+B,EAAEpD,8BAA+B;IAChEqD,GAAG,EAAC,aAAa;IACjBJ,OAAO,EAAE;MAAEK,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7Cf,OAAO,EAAEtB,kBAAmB;IAC5BsC,QAAQ,EAAE1E,UAAU,IAAKc,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIX,SAAW;IACxEwD,WAAW,EACP3D,UAAU,IAAKc,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIX;EACtD,gBAEDjC,OAAA,CAAAS,OAAA,CAAA6E,aAAA,CAAClF,KAAA,CAAAK,OAAI;IAACgG,KAAK,EAAE,CAAC,aAAa,CAAE;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAC;EAAO,CAAE,CAC1B,CAExB,CAAC,eAClB3G,OAAA,CAAAS,OAAA,CAAA6E,aAAA,CAAChF,cAAA,CAAAsG,kBAAkB,QACdvB,qBAAqB,gBAClBrF,OAAA,CAAAS,OAAA,CAAA6E,aAAA,CAAChF,cAAA,CAAAuG,8BAA8B;IAC3BrB,OAAO,EAAEpB,sBAAuB;IAChC0C,oBAAoB,EAAEvE,mBAAoB;IAC1CwE,oBAAoB,EAAE,CAAC,CAAC,WAAW,CAAC,CAACnB,QAAQ,CAAC1C,YAAY;EAAE,GAE3DkC,UAC2B,CAAC,gBAEjCpF,OAAA,CAAAS,OAAA,CAAA6E,aAAA,CAAChF,cAAA,CAAA0G,wBAAwB;IACrBC,GAAG,EAAExD,QAAS;IACdyD,aAAa,EAAEhE,YAAa;IAC5BiE,eAAe,EAAE7E,cAAe;IAChCwE,oBAAoB,EAAEvE,mBAAoB;IAC1C6E,SAAS,EAAExD,QAAS;IACpBkC,+BAA+B,EAAEpD,8BAA+B;IAChE8D,QAAQ,EAAE1E,UAAW;IACrBuF,OAAO,EAAEA,CAAA,KAAMhE,YAAY,CAAC,IAAI,CAAE;IAClCiE,MAAM,EAAE5C,eAAgB;IACxBxC,QAAQ,EAAE4C,iBAAkB;IAC5BE,KAAK,EAAEI;EAAW,CACrB,CAEW,CAAC,eACrBpF,OAAA,CAAAS,OAAA,CAAA6E,aAAA,CAACxF,MAAA,CAAA4F,eAAe;IAACC,OAAO,EAAE;EAAM,gBAC5B3F,OAAA,CAAAS,OAAA,CAAA6E,aAAA,CAAChF,cAAA,CAAAuF,+BAA+B;IAC5BC,+BAA+B,EAAEpD,8BAA+B;IAChEqD,GAAG,EAAC,cAAc;IAClBJ,OAAO,EAAE;MAAEK,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7CgB,MAAM,EAAErE,YAAY,KAAK,WAAW,GAAG,kBAAkB,GAAGsE,SAAU;IACtEhC,OAAO,EACHtC,YAAY,KAAK,WAAW,GAAGgB,kBAAkB,GAAGJ,eACvD;IACD0C,QAAQ,EAAE1E,UAAU,KAAKE,SAAS,GAAGY,WAAW,IAAIZ,SAAS,GAAG,KAAK,CAAE;IACvEyD,WAAW,EAAE3D,UAAU,KAAKE,SAAS,GAAGY,WAAW,IAAIZ,SAAS,GAAG,KAAK;EAAE,gBAE1EhC,OAAA,CAAAS,OAAA,CAAA6E,aAAA,CAAClF,KAAA,CAAAK,OAAI;IACDgG,KAAK,EACD,CAAC,CAAC,QAAQ,CAAC,CAACb,QAAQ,CAAC1C,YAAY,CAAC,IAAItB,IAAI,GACpC,CAACsB,YAAY,KAAK,WAAW,GAAG,aAAa,GAAGtB,IAAI,CAAC,GACrD,CAACsB,YAAY,KAAK,WAAW,GAAG,aAAa,GAAG,YAAY,CACrE;IACDwD,IAAI,EAAE,EAAG;IACTC,KAAK,EAAE9E,SAAS,IAAI;EAAQ,CAC/B,CAC4B,CACpB,CACA,CACxB,EACD,CACIe,WAAW,EACXM,YAAY,EACZY,eAAe,EACfI,kBAAkB,EAClBC,iBAAiB,EACjBO,eAAe,EACfI,iBAAiB,EACjBV,sBAAsB,EACtBR,QAAQ,EACRhC,IAAI,EACJC,SAAS,EACTuD,UAAU,EACVtD,UAAU,EACVE,SAAS,EACTC,SAAS,EACTK,cAAc,EACdI,8BAA8B,EAC9B2C,qBAAqB,EACrB9C,mBAAmB,CAE3B,CAAC;AACL,CAAC;AAEDb,aAAa,CAAC+F,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlH,OAAA,GAE7BiB,aAAa","ignoreList":[]}
1	+ {"version":3,"file":"AmountControl.js","names":["_react","require","_react2","_interopRequireWildcard","_amountControl","_useFocusRingPortal","_useKeyboardFocusHighlighting","_Icon","_interopRequireDefault","_AmountControl","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldEnableKeyboardHighlighting","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","amountValue","setAmountValue","useState","inputValue","setInputValue","toString","displayState","setDisplayState","isEditing","setIsEditing","useMemo","Number","isSafeInteger","inputRef","useRef","leftButtonRef","rightButtonRef","useEffect","hasFocus","checkForValidAmount","handleAmountAdd","useCallback","prevState","newAmount","handleAmountRemove","handleFirstAmount","handlePseudoInputClick","window","requestAnimationFrame","_inputRef$current","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","shouldShowPseudoInput","useFocusRingPortal","isEnabled","createElement","StyledAmountControl","onClick","$isDisabled","AnimatePresence","initial","includes","StyledMotionAmountControlButton","ref","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","StyledInputWrapper","StyledAmountControlPseudoInput","$shouldShowWideInput","$shouldShowRightIcon","StyledAmountControlInput","$displayState","$shouldShowIcon","$hasFocus","onFocus","onBlur","$color","undefined","displayName","_default","exports"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledInputWrapper,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'normal' \| 'maxAmount' \| 'minAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n The color of the icon.\n /\n iconColor?: string;\n /\n Whether the control should be disabled\n /\n isDisabled?: boolean;\n /\n A Text that should be displayed if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n /\n maxAmount?: number;\n /\n The minimum allowed amount.\n /\n minAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Enables keyboard-only focus highlighting. The highlighting is only visible while the\n * user navigates with the keyboard and is reset on mouse movement or click.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Whether the label should be displayed even if an amount is selected.\n /\n shouldForceLabel?: boolean;\n /\n Whether the \"add\"-icon should be displayed if the minAmount is reached.\n /\n shouldShowAddIconOnMinAmount?: boolean;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n /\n Whether the input should be wider\n /\n shouldShowWideInput?: boolean;\n /\n Defines the amount that will change when adjusted\n /\n step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n iconColor,\n isDisabled = false,\n label,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldEnableKeyboardHighlighting,\n shouldForceLabel = false,\n shouldShowAddIconOnMinAmount = false,\n shouldShowIcon = true,\n shouldShowWideInput = false,\n step: stepProp = 1,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n const [isEditing, setIsEditing] = useState(false);\n\n const step = useMemo(\n () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n [stepProp],\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n const leftButtonRef = useRef<HTMLButtonElement>(null);\n const rightButtonRef = useRef<HTMLButtonElement>(null);\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n setDisplayState('minAmount');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n /\n useEffect(() => {\n if (typeof amount !== 'number') {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState + step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return typeof amount === 'number' ? prevState : newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) + step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [amount, maxAmount, minAmount, onChange, step]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState - step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) - step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [displayState, maxAmount, minAmount, onChange, step]);\n\n const handleFirstAmount = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + step);\n }\n\n setAmountValue(minAmount + step);\n setInputValue((minAmount + step).toString());\n }, [amountValue, isDisabled, minAmount, onChange, step]);\n\n const handlePseudoInputClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n setIsEditing(true);\n\n window.requestAnimationFrame(() => {\n inputRef.current?.focus();\n });\n }, [isDisabled]);\n\n const handleInputBlur = useCallback(() => {\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Math.round(Number(inputValue) / step) step,\n });\n\n setAmountValue(checkedValue);\n setInputValue(checkedValue.toString());\n setIsEditing(false);\n\n if (typeof onChange === 'function') {\n onChange(checkedValue);\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBefore = Number(value.replace(/\\D/g, ''));\n\n if (valueBefore < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n },\n [minAmount],\n );\n\n let inputLabel = inputValue;\n\n if (typeof label === 'string' && (displayState === 'default' \|\| shouldForceLabel)) {\n inputLabel = label;\n }\n\n const shouldShowPseudoInput =\n !isEditing &&\n (inputValue === '0' \|\|\n (shouldForceLabel && typeof label === 'string') \|\|\n inputLabel === label);\n\n useFocusRingPortal(inputRef, {\n isEnabled: shouldShowKeyboardHighlighting && !shouldShowPseudoInput,\n });\n useFocusRingPortal(leftButtonRef, {\n isEnabled: shouldShowKeyboardHighlighting && displayState === 'normal',\n });\n useFocusRingPortal(rightButtonRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n <AnimatePresence initial={false}>\n {['normal'].includes(displayState) && (\n <StyledMotionAmountControlButton\n ref={leftButtonRef}\n key=\"left_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={isDisabled \|\| (amountValue !== 0 && amountValue <= minAmount)}\n $isDisabled={\n isDisabled \|\| (amountValue !== 0 && amountValue <= minAmount)\n }\n >\n <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledInputWrapper>\n {shouldShowPseudoInput ? (\n <StyledAmountControlPseudoInput\n onClick={handlePseudoInputClick}\n $shouldShowWideInput={shouldShowWideInput}\n $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n >\n {inputLabel}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n disabled={isDisabled}\n onFocus={() => setIsEditing(true)}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={inputLabel}\n />\n )}\n </StyledInputWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionAmountControlButton\n ref={rightButtonRef}\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n onClick={\n displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n }\n disabled={isDisabled \|\| (maxAmount ? amountValue >= maxAmount : false)}\n $isDisabled={isDisabled \|\| (maxAmount ? amountValue >= maxAmount : false)}\n >\n <Icon\n icons={\n !['normal'].includes(displayState) && icon\n ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n }\n size={14}\n color={iconColor ?? 'white'}\n />\n </StyledMotionAmountControlButton>\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n handlePseudoInputClick,\n hasFocus,\n icon,\n iconColor,\n inputLabel,\n isDisabled,\n maxAmount,\n minAmount,\n shouldShowIcon,\n shouldShowKeyboardHighlighting,\n shouldShowPseudoInput,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/amount-control/AmountControl.styles.js CHANGED Viewed

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledMotionAmountControlButton = exports.StyledInputWrapper = exports.StyledAmountControlPseudoInput = exports.StyledAmountControlInput = exports.StyledAmountControl = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledAmountControl = exports.StyledAmountControl = _styledComponents.default.div`
     background-color: ${({
@@ -43,14 +42,6 @@ const StyledAmountControlInput = exports.StyledAmountControlInput = _styledCompo
   $hasFocus
 }) => $hasFocus ? 'text' : 'pointer'};
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
-            }
-        `}
     ${({
   $displayState
 }) => $displayState === 'maxAmount' && (0, _styledComponents.css)`
@@ -100,14 +91,6 @@ const StyledMotionAmountControlButton = exports.StyledMotionAmountControlButton
     //overflow: hidden;
     transition: background-color 0.2s ease-in-out;
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
-            }
-        `};
     ${({
   $isDisabled
 }) => $isDisabled && (0, _styledComponents.css)`

package/lib/cjs/components/amount-control/AmountControl.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","~~_keyboardFocusHighlighting","~~e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledAmountControl","exports","styled","div","theme","$isDisabled","css","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$~~shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","$~~displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","motion","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport ~~{ keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\nimport~~ type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n transition: opacity 0.2s ease;\n height: 28px;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n pointer-events: none;\n `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n $displayState: DisplayState;\n $shouldShowIcon: boolean;\n $hasFocus: boolean;\n $shouldShowWideInput: boolean;\n ~~$shouldShowKeyboardHighlighting?: boolean;\n~~}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n height: 28px;\n width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n text-align: center;\n cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n\n ${({ $displayState }) =>\n $displayState === 'maxAmount' &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n ${({ $displayState, $shouldShowIcon }) =>\n $displayState === 'default' &&\n !$shouldShowIcon &&\n css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n $shouldShowWideInput: boolean;\n $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n height: 28px;\n min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n padding: 1px 8px;\n text-align: center;\n cursor: pointer;\n user-select: none;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n $shouldShowRightIcon ? '3px' : 'unset'};\n border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n $isDisabled: boolean;\n $color?: string;\n ~~$shouldShowKeyboardHighlighting?: boolean;\n~~}>;\n\nexport const StyledMotionAmountControlButton = styled(\n motion.button,\n)<StyledAmountControlButtonProps>`\n align-items: center;\n background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n $color ?? theme['408']};\n display: flex;\n justify-content: center;\n //overflow: hidden;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowKeyboardHighlighting }: StyledAmountControlButtonProps) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `};\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;~~AAEA~~,~~IAAAG,0BAAA,GAAAH,OAAA;AAAgG,~~SAAAE,~~wBAAAE~~,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAJ~~,uBAAA,YAAAA,~~CAAAE~~,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;~~AAOzF~~,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACX,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;~~AAUM~~,MAAMC,kBAAkB,GAAAN,OAAA,CAAAM,kBAAA,GAAGL,yBAAM,CAACC,GAAuB;AAChE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAEM,MAAMI,wBAAwB,GAAAP,OAAA,CAAAO,wBAAA,GAAGN,yBAAM,CAACO,KAAoC;AACnF;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAU;AACjE;AACA,MAAM,CAAC;EAAEC;~~AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAN,qBAAG;AACX;AACA,kBAAkBO,2DAAgC;AAClD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC;~~AAAc,CAAC,KAChBA,aAAa,KAAK,WAAW,IAC7B,~~IAAAR~~,qBAAG;AACX;AACA;AACA,SAAS;AACT,MAAM,CAAC;~~EAAEQ~~,aAAa;EAAEC;AAAgB,CAAC,KACjCD,aAAa,KAAK,SAAS,IAC3B,CAACC,eAAe,IAChB,~~IAAAT~~,qBAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAOM,~~MAAMU~~,8BAA8B,~~GAAAf~~,OAAA,~~CAAAe~~,8BAAA,~~GAAGd~~,yBAAM,CAACC,GAAwC;AAC7F;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEO;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;~~EAAEO~~;AAAqB,CAAC,KAClDA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,8BAA8B,CAAC;EAAEA;AAAqB,CAAC,KAC/CA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,CAAC;~~AAQM~~,MAAMC,+BAA+B,~~GAAAjB~~,OAAA,~~CAAAiB~~,+BAAA,GAAG,~~IAAAhB~~,yBAAM,~~EACjDiB~~,aAAM,CAACC,MACX,CAAiC;AACjC;AACA,wBAAwB,CAAC;~~EAAEhB~~,KAAK;~~EAAEiB~~;AAAuC,CAAC,KAClEA,MAAM,~~IAAIjB~~,KAAK,CAAC,KAAK,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;~~EAAEQ~~;~~AAAgE,CAAC,KAClEA,+BAA+B,IAC/B,IAAAN,qBAAG;AACX;AACA,kBAAkBO,2DAAgC;AAClD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAER;~~AAAY,CAAC,KACdA,WAAW,IACX,IAAAC,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"AmountControl.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledAmountControl","exports","styled","div","theme","$isDisabled","css","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","motion","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n transition: opacity 0.2s ease;\n height: 28px;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n pointer-events: none;\n `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n $displayState: DisplayState;\n $shouldShowIcon: boolean;\n $hasFocus: boolean;\n $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n height: 28px;\n width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n text-align: center;\n cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n ${({ $displayState }) =>\n $displayState === 'maxAmount' &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n ${({ $displayState, $shouldShowIcon }) =>\n $displayState === 'default' &&\n !$shouldShowIcon &&\n css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n $shouldShowWideInput: boolean;\n $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n height: 28px;\n min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n padding: 1px 8px;\n text-align: center;\n cursor: pointer;\n user-select: none;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n $shouldShowRightIcon ? '3px' : 'unset'};\n border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n $isDisabled: boolean;\n $color?: string;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n motion.button,\n)<StyledAmountControlButtonProps>`\n align-items: center;\n background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n $color ?? theme['408']};\n display: flex;\n justify-content: center;\n //overflow: hidden;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n `}\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/button/Button.js CHANGED Viewed

@@ -8,6 +8,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _react = require("motion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _styledComponents = require("styled-components");
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _Button = require("./Button.styles");
@@ -29,6 +30,7 @@ const Button = ({
   tapDuration = 0.5,
   shouldEnableKeyboardHighlighting
 }) => {
+  const buttonRef = (0, _react2.useRef)(null);
   const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
@@ -39,6 +41,9 @@ const Button = ({
   const theme = (0, _styledComponents.useTheme)();
   const effectiveButtonDesign = buttonDesign ?? theme.buttonDesign;
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
+  (0, _useFocusRingPortal.useFocusRingPortal)(buttonRef, {
+    isEnabled: shouldShowKeyboardHighlighting
+  });
   const iconColor = (0, _react2.useMemo)(() => {
     if (isSecondary) {
       return theme.text;
@@ -78,10 +83,10 @@ const Button = ({
     };
   }, [theme, effectiveButtonDesign]);
   return /*#__PURE__*/_react2.default.createElement(_Button.StyledMotionButton, {
+    ref: buttonRef,
     $shouldShowTextAsRobotoMedium: shouldShowTextAsRobotoMedium,
     $shouldShowAsSelectButton: shouldShowAsSelectButton,
     $shouldShowWaitCursor: shouldShowWaitCursor,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     className: buttonClasses,
     disabled: isDisabled,
     $isDisabled: isDisabled,