@chayns-components/core 5.5.29 → 5.5.31-alpha.0

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

@@ -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,

package/lib/cjs/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["_clsx","_interopRequireDefault","require","_react","_react2","_interopRequireWildcard","_styledComponents","_useKeyboardFocusHighlighting","_Icon","_Button","_WaitCursor","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","tapDuration","shouldEnableKeyboardHighlighting","handleClick","event","stopPropagation","buttonClasses","clsx","theme","useTheme","effectiveButtonDesign","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","iconColor","useMemo","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","StyledMotionButton","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","$shouldShowKeyboardHighlighting","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","ease","type","whileTap","whileHover","AnimatePresence","StyledIconWrapper","icons","StyledMotionWaitCursorWrapper","width","exit","key","overflow","shouldHideBackground","StyledMotionChildrenWrapper","displayName","_default","exports"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n    shouldShowAsSelectButton = false,\n    shouldShowTextAsRobotoMedium = true,\n    buttonDesign,\n    tapDuration = 0.5,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme = useTheme() as Theme;\n\n    const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    const iconColor = useMemo(() => {\n        if (isSecondary) {\n            return theme.text;\n        }\n\n        return effectiveButtonDesign === 2\n            ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n            : (theme.buttonColor ?? 'white');\n    }, [\n        isSecondary,\n        theme.buttonBackgroundColor,\n        theme.buttonColor,\n        effectiveButtonDesign,\n        theme.text,\n    ]);\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary || shouldShowAsSelectButton) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (effectiveButtonDesign === 2) {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const tapStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return {\n                backgroundColor:\n                    isSecondary || shouldShowAsSelectButton\n                        ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n                        : `${theme.buttonBackgroundColor ?? ''}40`,\n            };\n        }\n\n        return { opacity: 0.6 };\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const hoverStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n        }\n\n        return { opacity: 1 };\n    }, [theme, effectiveButtonDesign]);\n\n    return (\n        <StyledMotionButton\n            $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n            $shouldShowAsSelectButton={shouldShowAsSelectButton}\n            $shouldShowWaitCursor={shouldShowWaitCursor}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            $effectiveButtonDesign={effectiveButtonDesign}\n            onClick={handleClick}\n            style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n            initial={{ opacity: 0.5 }}\n            animate={{\n                opacity: isDisabled ? 0.5 : 1,\n            }}\n            transition={{\n                visibility: { duration: 0 },\n                duration: tapDuration,\n                ease: 'easeIn',\n                type: 'tween',\n            }}\n            whileTap={isDisabled ? {} : { ...tapStyles, transition: { duration: 0 } }}\n            whileHover={isDisabled ? {} : { ...hoverStyles }}\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color={iconColor} icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AAEA,IAAAM,KAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AAOA,IAAAQ,WAAA,GAAAT,sBAAA,CAAAC,OAAA;AAAkD,SAAAG,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,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;AAAA,SAAAX,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAElD,MAAMmB,MAAuB,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,UAAU;EACVC,WAAW;EACXC,OAAO;EACPC,oBAAoB;EACpBC,qBAAqB;EACrBC,wBAAwB,GAAG,KAAK;EAChCC,4BAA4B,GAAG,IAAI;EACnCC,YAAY;EACZC,WAAW,GAAG,GAAG;EACjBC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAiD,GAAIC,KAAK,IAAK;IACjE,IAAIP,qBAAqB,EAAE;MACvBO,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEAV,OAAO,CAACS,KAAK,CAAC;EAClB,CAAC;EAED,MAAME,aAAa,GAAG,IAAAC,aAAI,EAAC,6BAA6B,EAAEhB,SAAS,CAAC;EAEpE,MAAMiB,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAU;EAEjC,MAAMC,qBAAqB,GAAIV,YAAY,IAAIQ,KAAK,CAACR,YAAuB;EAE5E,MAAMW,8BAA8B,GAAG,IAAAC,0DAA4B,EAC/DV,gCAAgC,IAAI,CAACT,UACzC,CAAC;EAED,MAAMoB,SAAS,GAAG,IAAAC,eAAO,EAAC,MAAM;IAC5B,IAAIpB,WAAW,EAAE;MACb,OAAOc,KAAK,CAACO,IAAI;IACrB;IAEA,OAAOL,qBAAqB,KAAK,CAAC,GAC3BF,KAAK,CAACQ,WAAW,IAAIR,KAAK,CAACS,qBAAqB,IAAI,OAAO,GAC3DT,KAAK,CAACQ,WAAW,IAAI,OAAQ;EACxC,CAAC,EAAE,CACCtB,WAAW,EACXc,KAAK,CAACS,qBAAqB,EAC3BT,KAAK,CAACQ,WAAW,EACjBN,qBAAqB,EACrBF,KAAK,CAACO,IAAI,CACb,CAAC;EAEF,MAAMG,eAAe,GAAG,IAAAJ,eAAO,EAAC,MAAM;IAClC,IAAIK,KAAK;IAET,IAAIzB,WAAW,IAAII,wBAAwB,EAAE;MACzCqB,KAAK,GAAGX,KAAK,CAAC,KAAK,CAAC;IACxB,CAAC,MAAM;MACHW,KAAK,GAAGX,KAAK,CAACS,qBAAqB,IAAIT,KAAK,CAAC,KAAK,CAAC;IACvD;IAEA,IAAIE,qBAAqB,KAAK,CAAC,EAAE;MAC7BS,KAAK,GAAG,QAAQX,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM;IAChD;IAEA,OAAOW,KAAK;EAChB,CAAC,EAAE,CAACzB,WAAW,EAAEI,wBAAwB,EAAEU,KAAK,EAAEE,qBAAqB,CAAC,CAAC;EAEzE,MAAMU,SAAS,GAAG,IAAAN,eAAO,EAAC,MAAM;IAC5B,IAAIJ,qBAAqB,KAAK,CAAC,EAAE;MAC7B,OAAO;QACHQ,eAAe,EACXxB,WAAW,IAAII,wBAAwB,GACjC,QAAQU,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,GACtC,GAAGA,KAAK,CAACS,qBAAqB,IAAI,EAAE;MAClD,CAAC;IACL;IAEA,OAAO;MAAEI,OAAO,EAAE;IAAI,CAAC;EAC3B,CAAC,EAAE,CAAC3B,WAAW,EAAEI,wBAAwB,EAAEU,KAAK,EAAEE,qBAAqB,CAAC,CAAC;EAEzE,MAAMY,WAAW,GAAG,IAAAR,eAAO,EAAC,MAAM;IAC9B,IAAIJ,qBAAqB,KAAK,CAAC,EAAE;MAC7B,OAAO;QAAEQ,eAAe,EAAE,QAAQV,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE;MAAS,CAAC;IACtE;IAEA,OAAO;MAAEa,OAAO,EAAE;IAAE,CAAC;EACzB,CAAC,EAAE,CAACb,KAAK,EAAEE,qBAAqB,CAAC,CAAC;EAElC,oBACI/C,OAAA,CAAAiB,OAAA,CAAA2C,aAAA,CAACvD,OAAA,CAAAwD,kBAAkB;IACfC,6BAA6B,EAAE1B,4BAA6B;IAC5D2B,yBAAyB,EAAE5B,wBAAyB;IACpD6B,qBAAqB,EAAE/B,oBAAqB;IAC5CgC,+BAA+B,EAAEjB,8BAA+B;IAChEpB,SAAS,EAAEe,aAAc;IACzBuB,QAAQ,EAAEpC,UAAW;IACrBqC,WAAW,EAAErC,UAAW;IACxBsC,YAAY,EAAE,CAAC,CAACzC,QAAS;IACzB0C,QAAQ,EAAE,OAAOxC,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,EAAG;IAClDyC,YAAY,EAAEvC,WAAY;IAC1BwC,sBAAsB,EAAExB,qBAAsB;IAC9Cf,OAAO,EAAEQ,WAAY;IACrBgC,KAAK,EAAE;MAAEC,UAAU,EAAE,CAAClB,eAAe,GAAG,QAAQ,GAAG,SAAS;MAAEA;IAAgB,CAAE;IAChFmB,OAAO,EAAE;MAAEhB,OAAO,EAAE;IAAI,CAAE;IAC1BiB,OAAO,EAAE;MACLjB,OAAO,EAAE5B,UAAU,GAAG,GAAG,GAAG;IAChC,CAAE;IACF8C,UAAU,EAAE;MACRH,UAAU,EAAE;QAAEI,QAAQ,EAAE;MAAE,CAAC;MAC3BA,QAAQ,EAAEvC,WAAW;MACrBwC,IAAI,EAAE,QAAQ;MACdC,IAAI,EAAE;IACV,CAAE;IACFC,QAAQ,EAAElD,UAAU,GAAG,CAAC,CAAC,GAAG;MAAE,GAAG2B,SAAS;MAAEmB,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAE;IAAE,CAAE;IAC1EI,UAAU,EAAEnD,UAAU,GAAG,CAAC,CAAC,GAAG;MAAE,GAAG6B;IAAY;EAAE,gBAEjD3D,OAAA,CAAAiB,OAAA,CAAA2C,aAAA,CAAC7D,MAAA,CAAAmF,eAAe;IAACR,OAAO,EAAE;EAAM,GAC3B7C,IAAI,iBACD7B,OAAA,CAAAiB,OAAA,CAAA2C,aAAA,CAACvD,OAAA,CAAA8E,iBAAiB,qBACdnF,OAAA,CAAAiB,OAAA,CAAA2C,aAAA,CAACxD,KAAA,CAAAa,OAAI;IAACuC,KAAK,EAAEN,SAAU;IAACkC,KAAK,EAAE,CAACvD,IAAI;EAAE,CAAE,CACzB,CACtB,EACAI,oBAAoB,iBACjBjC,OAAA,CAAAiB,OAAA,CAAA2C,aAAA,CAACvD,OAAA,CAAAgF,6BAA6B;IAC1BV,OAAO,EAAE;MAAEjB,OAAO,EAAE,CAAC;MAAE4B,KAAK,EAAE;IAAG,CAAE;IACnCC,IAAI,EAAE;MAAE7B,OAAO,EAAE,CAAC;MAAE4B,KAAK,EAAE;IAAE,CAAE;IAC/BZ,OAAO,EAAE;MAAEhB,OAAO,EAAE,CAAC;MAAE4B,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC,aAAa;IACjBhB,KAAK,EAAE;MAAEiB,QAAQ,EAAE;IAAS,CAAE;IAC9Bb,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAE9B7E,OAAA,CAAAiB,OAAA,CAAA2C,aAAA,CAACtD,WAAA,CAAAW,OAAU;IAACuC,KAAK,EAAEN,SAAS,IAAI,OAAQ;IAACwC,oBAAoB;EAAA,CAAE,CACpC,CAClC,EACA,CAACzD,oBAAoB,IAAIN,QAAQ,iBAC9B3B,OAAA,CAAAiB,OAAA,CAAA2C,aAAA,CAACvD,OAAA,CAAAsF,2BAA2B;IACxBhB,OAAO,EAAE;MAAEjB,OAAO,EAAE,CAAC;MAAE4B,KAAK,EAAE;IAAO,CAAE;IACvCC,IAAI,EAAE;MAAE7B,OAAO,EAAE,CAAC;MAAE4B,KAAK,EAAE;IAAE,CAAE;IAC/BZ,OAAO,EAAE;MAAEhB,OAAO,EAAE,CAAC;MAAE4B,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC;IACJ;IAAA;IACAZ,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BlD,QACwB,CAEpB,CACD,CAAC;AAE7B,CAAC;AAEDD,MAAM,CAACkE,WAAW,GAAG,QAAQ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7E,OAAA,GAEfS,MAAM","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["_clsx","_interopRequireDefault","require","_react","_react2","_interopRequireWildcard","_styledComponents","_useFocusRingPortal","_useKeyboardFocusHighlighting","_Icon","_Button","_WaitCursor","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","tapDuration","shouldEnableKeyboardHighlighting","buttonRef","useRef","handleClick","event","stopPropagation","buttonClasses","clsx","theme","useTheme","effectiveButtonDesign","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","iconColor","useMemo","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","StyledMotionButton","ref","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","ease","type","whileTap","whileHover","AnimatePresence","StyledIconWrapper","icons","StyledMotionWaitCursorWrapper","width","exit","key","overflow","shouldHideBackground","StyledMotionChildrenWrapper","displayName","_default","exports"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo, useRef } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n    shouldShowAsSelectButton = false,\n    shouldShowTextAsRobotoMedium = true,\n    buttonDesign,\n    tapDuration = 0.5,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme = useTheme() as Theme;\n\n    const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n    useFocusRingPortal(buttonRef, { isEnabled: shouldShowKeyboardHighlighting });\n\n    const iconColor = useMemo(() => {\n        if (isSecondary) {\n            return theme.text;\n        }\n\n        return effectiveButtonDesign === 2\n            ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n            : (theme.buttonColor ?? 'white');\n    }, [\n        isSecondary,\n        theme.buttonBackgroundColor,\n        theme.buttonColor,\n        effectiveButtonDesign,\n        theme.text,\n    ]);\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary || shouldShowAsSelectButton) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (effectiveButtonDesign === 2) {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const tapStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return {\n                backgroundColor:\n                    isSecondary || shouldShowAsSelectButton\n                        ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n                        : `${theme.buttonBackgroundColor ?? ''}40`,\n            };\n        }\n\n        return { opacity: 0.6 };\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const hoverStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n        }\n\n        return { opacity: 1 };\n    }, [theme, effectiveButtonDesign]);\n\n    return (\n        <StyledMotionButton\n            ref={buttonRef}\n            $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n            $shouldShowAsSelectButton={shouldShowAsSelectButton}\n            $shouldShowWaitCursor={shouldShowWaitCursor}\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            $effectiveButtonDesign={effectiveButtonDesign}\n            onClick={handleClick}\n            style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n            initial={{ opacity: 0.5 }}\n            animate={{\n                opacity: isDisabled ? 0.5 : 1,\n            }}\n            transition={{\n                visibility: { duration: 0 },\n                duration: tapDuration,\n                ease: 'easeIn',\n                type: 'tween',\n            }}\n            whileTap={isDisabled ? {} : { ...tapStyles, transition: { duration: 0 } }}\n            whileHover={isDisabled ? {} : { ...hoverStyles }}\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color={iconColor} icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/button/Button.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledMotionWaitCursorWrapper = exports.StyledMotionChildrenWrapper = exports.StyledMotionButton = exports.StyledIconWrapper = 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 StyledMotionButton = exports.StyledMotionButton = (0, _styledComponents.default)(_react.motion.button)`
     ${({
@@ -65,15 +64,6 @@ const StyledMotionButton = exports.StyledMotionButton = (0, _styledComponents.de
     user-select: none;
     width: fit-content;
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                transition: none;
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
-            }
-        `}
-
     ${({
   $hasIcon,
   $hasChildren,

package/lib/cjs/components/button/Button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.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","StyledMotionButton","exports","styled","motion","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","css","$isSecondary","$effectiveButtonDesign","theme","text","buttonColor","buttonBackgroundColor","$isDisabled","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.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 StyledButtonProps = WithTheme<{\n    $hasIcon: boolean;\n    $hasChildren: boolean;\n    $isDisabled?: boolean;\n    $isSecondary?: boolean;\n    $shouldShowTextAsRobotoMedium: boolean;\n    $shouldShowAsSelectButton: boolean;\n    $shouldShowWaitCursor?: boolean;\n    $effectiveButtonDesign: number;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledMotionButton = styled(motion.button)<StyledButtonProps>`\n    ${({ $shouldShowTextAsRobotoMedium, $shouldShowAsSelectButton }) =>\n        $shouldShowTextAsRobotoMedium &&\n        !$shouldShowAsSelectButton &&\n        css`\n            font-size: 110%;\n            font-family: 'Roboto Medium', serif;\n        `}\n\n    align-items: center;\n\n    ${({\n        $isSecondary,\n        $shouldShowAsSelectButton,\n        $effectiveButtonDesign,\n        theme,\n    }: StyledButtonProps) => {\n        if ($isSecondary || $shouldShowAsSelectButton) {\n            return css`\n                color: ${theme.text};\n            `;\n        }\n\n        return css`\n            color: ${$effectiveButtonDesign === 2\n                ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n                : (theme.buttonColor ?? 'white')};\n        `;\n    }}\n\n    ${({\n        theme,\n        $isSecondary,\n        $shouldShowAsSelectButton,\n        $effectiveButtonDesign,\n    }: StyledButtonProps) => {\n        if ($effectiveButtonDesign === 2 && !$shouldShowAsSelectButton) {\n            return css`\n                border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};\n                box-shadow: none;\n            `;\n        }\n\n        return css`\n            border: none;\n            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    border-radius: 3px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: inline-flex;\n    flex: 0 0 auto;\n    line-height: 22px;\n    min-height: 32px;\n    position: relative;\n    user-select: none;\n    width: fit-content;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n\n    ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n        if ($shouldShowWaitCursor) {\n            return css`\n                padding: 4px 12px;\n            `;\n        }\n\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 6px 12px 6px 42px;\n                `;\n            }\n            return css`\n                padding: 6px 12px 6px 18px;\n            `;\n        }\n        return css`\n            padding: 6px 12px 6px 12px;\n        `;\n    }}\n`;\n\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)`\n    will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button.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","StyledMotionButton","exports","styled","motion","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","css","$isSecondary","$effectiveButtonDesign","theme","text","buttonColor","buttonBackgroundColor","$isDisabled","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = WithTheme<{\n    $hasIcon: boolean;\n    $hasChildren: boolean;\n    $isDisabled?: boolean;\n    $isSecondary?: boolean;\n    $shouldShowTextAsRobotoMedium: boolean;\n    $shouldShowAsSelectButton: boolean;\n    $shouldShowWaitCursor?: boolean;\n    $effectiveButtonDesign: number;\n}>;\n\nexport const StyledMotionButton = styled(motion.button)<StyledButtonProps>`\n    ${({ $shouldShowTextAsRobotoMedium, $shouldShowAsSelectButton }) =>\n        $shouldShowTextAsRobotoMedium &&\n        !$shouldShowAsSelectButton &&\n        css`\n            font-size: 110%;\n            font-family: 'Roboto Medium', serif;\n        `}\n\n    align-items: center;\n\n    ${({\n        $isSecondary,\n        $shouldShowAsSelectButton,\n        $effectiveButtonDesign,\n        theme,\n    }: StyledButtonProps) => {\n        if ($isSecondary || $shouldShowAsSelectButton) {\n            return css`\n                color: ${theme.text};\n            `;\n        }\n\n        return css`\n            color: ${$effectiveButtonDesign === 2\n                ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n                : (theme.buttonColor ?? 'white')};\n        `;\n    }}\n\n    ${({\n        theme,\n        $isSecondary,\n        $shouldShowAsSelectButton,\n        $effectiveButtonDesign,\n    }: StyledButtonProps) => {\n        if ($effectiveButtonDesign === 2 && !$shouldShowAsSelectButton) {\n            return css`\n                border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};\n                box-shadow: none;\n            `;\n        }\n\n        return css`\n            border: none;\n            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    border-radius: 3px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: inline-flex;\n    flex: 0 0 auto;\n    line-height: 22px;\n    min-height: 32px;\n    position: relative;\n    user-select: none;\n    width: fit-content;\n\n    ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n        if ($shouldShowWaitCursor) {\n            return css`\n                padding: 4px 12px;\n            `;\n        }\n\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 6px 12px 6px 42px;\n                `;\n            }\n            return css`\n                padding: 6px 12px 6px 18px;\n            `;\n        }\n        return css`\n            padding: 6px 12px 6px 12px;\n        `;\n    }}\n`;\n\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)`\n    will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/checkbox/Checkbox.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _uuid = require("../../hooks/uuid");
 var _calculate = require("../../utils/calculate");
@@ -26,6 +27,7 @@ const Checkbox = ({
   const [isActive, setIsActive] = (0, _react.useState)(isChecked ?? false);
   const [checkboxTop, setCheckboxTop] = (0, _react.useState)(undefined);
   const checkboxBoxRef = (0, _react.useRef)(null);
+  const checkboxInputRef = (0, _react.useRef)(null);
   const checkboxRootRef = (0, _react.useRef)(null);
   const handleChange = (0, _react.useCallback)(event => {
     setIsActive(event.target.checked);
@@ -45,11 +47,16 @@ const Checkbox = ({
     }
   }, [shouldShowCentered]);
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
+  (0, _useFocusRingPortal.useFocusRingPortal)(checkboxInputRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    overlayRef: checkboxBoxRef,
+    borderRadius: shouldShowAsSwitch ? borderRadius ?? '100px' : borderRadius
+  });
   return /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckbox, {
     ref: checkboxRootRef,
     className: "beta-chayns-checkbox"
   }, /*#__PURE__*/_react.default.createElement(_Checkbox.StyledCheckboxInput, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    ref: checkboxInputRef,
     checked: isChecked,
     disabled: isDisabled,
     id: uuid,

package/lib/cjs/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_useKeyboardFocusHighlighting","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","useState","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","useRef","checkboxRootRef","handleChange","useCallback","event","target","checked","uuid","useUuid","useEffect","current","_checkboxBoxRef$curre","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","createElement","StyledCheckbox","ref","className","StyledCheckboxInput","$shouldShowKeyboardHighlighting","disabled","id","type","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","style","top","transform","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","StyledCheckboxLabel","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    KeyboardEvent,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n    /**\n     * Background color for the checked state.\n     */\n    checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * Background color for the unchecked state.\n     */\n    uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n    /**\n     * Border color for the checkbox or switch indicator.\n     */\n    borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Border radius for the checkbox or switch indicator.\n     */\n    borderRadius?: CSSProperties['borderRadius'];\n    colors?: CheckboxColors;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    borderRadius,\n    colors,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef} className=\"beta-chayns-checkbox\">\n            <StyledCheckboxInput\n                $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                    $checkedBackgroundColor={colors?.checkedBackgroundColor}\n                    $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n                    $borderRadius={borderRadius}\n                    $borderColor={colors?.borderColor}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_useFocusRingPortal","_useKeyboardFocusHighlighting","_uuid","_calculate","_Checkbox","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","useState","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","useRef","checkboxInputRef","checkboxRootRef","handleChange","useCallback","event","target","checked","uuid","useUuid","useEffect","current","_checkboxBoxRef$curre","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","overlayRef","createElement","StyledCheckbox","ref","className","StyledCheckboxInput","disabled","id","type","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","style","top","transform","StyledCheckboxBox","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","StyledCheckboxLabel","$shouldChangeOnLabelClick","displayName","_default","exports"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    KeyboardEvent,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n    /**\n     * Background color for the checked state.\n     */\n    checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * Background color for the unchecked state.\n     */\n    uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n    /**\n     * Border color for the checkbox or switch indicator.\n     */\n    borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Border radius for the checkbox or switch indicator.\n     */\n    borderRadius?: CSSProperties['borderRadius'];\n    colors?: CheckboxColors;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    borderRadius,\n    colors,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxInputRef = useRef<HTMLInputElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n    useFocusRingPortal(checkboxInputRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        overlayRef: checkboxBoxRef,\n        borderRadius: shouldShowAsSwitch ? (borderRadius ?? '100px') : borderRadius,\n    });\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef} className=\"beta-chayns-checkbox\">\n            <StyledCheckboxInput\n                ref={checkboxInputRef}\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                    $checkedBackgroundColor={colors?.checkedBackgroundColor}\n                    $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n                    $borderRadius={borderRadius}\n                    $borderColor={colors?.borderColor}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/checkbox/Checkbox.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxBoxWrapper = exports.StyledCheckboxBox = exports.StyledCheckbox = void 0;
 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 StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
     align-items: center;
@@ -28,15 +27,6 @@ const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.defa
     top: 0;
     white-space: nowrap;
     width: 1px;
-
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible + div > label {
-                transition: none;
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
-            }
-        `}
 `;
 const StyledCheckboxBoxWrapper = exports.StyledCheckboxBoxWrapper = _styledComponents.default.div`
     display: flex;

package/lib/cjs/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","$shouldShowKeyboardHighlighting","css","keyboardFocusHighlightingRingCss","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","fallbackBorderColor","$borderRadius","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\ntype StyledCheckboxInputProps = {\n    $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledCheckboxInput = styled.input<StyledCheckboxInputProps>`\n    border: 0;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    left: 0;\n    margin: 0;\n    opacity: 0;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    white-space: nowrap;\n    width: 1px;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible + div > label {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius?: CSSProperties['borderRadius'];\n    $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    display: inline-block;\n    width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '44px' : '16px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            $checkedBackgroundColor,\n            $uncheckedBackgroundColor,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            const activeBackgroundColor =\n                $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);\n            const inactiveBackgroundColor =\n                $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);\n\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n            }\n\n            return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n        }};\n\n        border: ${({ $borderColor, $shouldShowAsSwitch, theme }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return 'none';\n            }\n\n            const fallbackBorderColor = theme['409-rgb']\n                ? `rgba(${theme['409-rgb']}, 0.5)`\n                : theme.text;\n\n            return `1px solid ${$borderColor ?? fallbackBorderColor}`;\n        }};\n\n        border-radius: ${({ $shouldShowAsSwitch, $borderRadius }) =>\n            $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledCheckbox","exports","styled","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","css","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","fallbackBorderColor","$borderRadius","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    border: 0;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    left: 0;\n    margin: 0;\n    opacity: 0;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    white-space: nowrap;\n    width: 1px;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius?: CSSProperties['borderRadius'];\n    $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    display: inline-block;\n    width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '44px' : '16px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            $checkedBackgroundColor,\n            $uncheckedBackgroundColor,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            const activeBackgroundColor =\n                $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);\n            const inactiveBackgroundColor =\n                $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);\n\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n            }\n\n            return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n        }};\n\n        border: ${({ $borderColor, $shouldShowAsSwitch, theme }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return 'none';\n            }\n\n            const fallbackBorderColor = theme['409-rgb']\n                ? `rgba(${theme['409-rgb']}, 0.5)`\n                : theme.text;\n\n            return `1px solid ${$borderColor ?? fallbackBorderColor}`;\n        }};\n\n        border-radius: ${({ $shouldShowAsSwitch, $borderRadius }) =>\n            $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/combobox/ComboBox.js

@@ -16,6 +16,7 @@ var _dropdown = require("../../types/dropdown");
 var _element = require("../../hooks/element");
 var _ComboBox2 = require("./ComboBox.types");
 var _ComboBox3 = require("./ComboBox.utils");
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -94,6 +95,12 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
   }, [functions, internalSelectedItem, lists, parentSize, placeholder, prefix, prefixMinWidth, selectedItem, shouldDropDownUseMaxItemWidth, shouldShowBigImage, shouldShowClearIcon, shouldUseCurrentItemWidth, shouldUseFullWidth, values]);
   const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
+  (0, _useFocusRingPortal.useFocusRingPortal)(comboBoxHeaderRef, {
+    isEnabled: shouldShowKeyboardHighlighting && typeof inputValue !== 'string'
+  });
+  (0, _useFocusRingPortal.useFocusRingPortal)(comboBoxInputRef, {
+    isEnabled: shouldShowKeyboardHighlighting && typeof inputValue === 'string'
+  });
   const shouldDisableActions = (0, _react.useMemo)(() => {
     if (!selectedItem) {
       return false;
@@ -357,7 +364,6 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
     $shouldShowBigImage: shouldShowBigImage,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     onKeyDown: handleHeaderKeyDown,
     tabIndex: !isDisabled && typeof inputValue !== 'string' ? 0 : undefined,
     role: !isDisabled && typeof inputValue !== 'string' ? 'button' : undefined,