npm - @chayns-components/core - Versions diffs - 5.4.8-alpha.0 → 5.4.12 - Mend

@chayns-components/core 5.4.8-alpha.0 → 5.4.12

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

package/lib/esm/components/button/Button.styles.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledMotionButton = styled(motion.button)`
     ${({
   $shouldShowTextAsRobotoMedium,
@@ -58,15 +57,6 @@ export const StyledMotionButton = styled(motion.button)`
     user-select: none;
     width: fit-content;
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                transition: none;
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
     ${({
   $hasIcon,
   $hasChildren,

package/lib/esm/components/button/Button.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styles.js","names":["motion","styled","css","~~keyboardFocusHighlightingRingCss","~~StyledMotionButton","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$isSecondary","$effectiveButtonDesign","theme","text","buttonColor","buttonBackgroundColor","$isDisabled","$~~shouldShowKeyboardHighlighting","$~~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":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;~~AAE~~/C,~~SAASC,gCAAgC,QAAQ,8CAA8C;AAc/F,~~OAAO,MAAMC,kBAAkB,~~GAAGH~~,MAAM,CAACD,MAAM,~~CAACK~~,MAAM,CAAoB;AAC1E,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA0B,CAAC,KAC3DD,6BAA6B,IAC7B,CAACC,yBAAyB,~~IAC1BL~~,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,MAAM,CAAC;~~EACCM~~,YAAY;EACZD,yBAAyB;EACzBE,sBAAsB;EACtBC;AACe,CAAC,KAAK;EACrB,IAAIF,YAAY,IAAID,yBAAyB,EAAE;IAC3C,~~OAAOL~~,GAAG;AACtB,~~yBAAyBQ~~,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,~~OAAOT~~,GAAG;AAClB,~~qBAAqBO~~,sBAAsB,KAAK,CAAC,GAC9BC,KAAK,CAACE,WAAW,IAAIF,KAAK,CAACG,qBAAqB,IAAI,OAAO,GAC3DH,KAAK,CAACE,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EACCF,KAAK;EACLF,YAAY;EACZD,yBAAyB;EACzBE;AACe,CAAC,KAAK;EACrB,IAAIA,sBAAsB,KAAK,CAAC,IAAI,CAACF,yBAAyB,EAAE;IAC5D,~~OAAOL~~,GAAG;AACtB,~~oCAAoCM~~,YAAY,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACG,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,~~OAAOX~~,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAc,CAAC;~~EAAEY~~;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC~~;AAAgC~~,~~CAAC,KAClCA,+BAA+B,IAC/Bb,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEa,~~QAAQ;EAAEC,YAAY;EAAEC;AAAsB,CAAC,KAAK;EACrD,IAAIA,qBAAqB,EAAE;IACvB,~~OAAOhB~~,GAAG;AACtB;AACA,aAAa;EACL;EAEA,~~IAAIc~~,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,~~OAAOf~~,GAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAOA,GAAG;AACtB;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAED,OAAO,~~MAAMiB~~,iBAAiB,~~GAAGlB~~,MAAM,~~CAACmB~~,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,~~GAAGpB~~,MAAM,CAACD,MAAM,~~CAACsB~~,GAAG,CAAC;AAC7D;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,~~GAAGtB~~,MAAM,CAACD,MAAM,~~CAACsB~~,GAAG,CAAC;AAC/D;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Button.styles.js","names":["motion","styled","css","StyledMotionButton","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$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":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAc/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACD,MAAM,CAACI,MAAM,CAAoB;AAC1E,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA0B,CAAC,KAC3DD,6BAA6B,IAC7B,CAACC,yBAAyB,IAC1BJ,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,MAAM,CAAC;EACCK,YAAY;EACZD,yBAAyB;EACzBE,sBAAsB;EACtBC;AACe,CAAC,KAAK;EACrB,IAAIF,YAAY,IAAID,yBAAyB,EAAE;IAC3C,OAAOJ,GAAG;AACtB,yBAAyBO,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,OAAOR,GAAG;AAClB,qBAAqBM,sBAAsB,KAAK,CAAC,GAC9BC,KAAK,CAACE,WAAW,IAAIF,KAAK,CAACG,qBAAqB,IAAI,OAAO,GAC3DH,KAAK,CAACE,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EACCF,KAAK;EACLF,YAAY;EACZD,yBAAyB;EACzBE;AACe,CAAC,KAAK;EACrB,IAAIA,sBAAsB,KAAK,CAAC,IAAI,CAACF,yBAAyB,EAAE;IAC5D,OAAOJ,GAAG;AACtB,oCAAoCK,YAAY,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACG,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,OAAOV,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAc,CAAC;EAAEW;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC,YAAY;EAAEC;AAAsB,CAAC,KAAK;EACrD,IAAIA,qBAAqB,EAAE;IACvB,OAAOd,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIY,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAOb,GAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAOA,GAAG;AACtB;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAED,OAAO,MAAMe,iBAAiB,GAAGhB,MAAM,CAACiB,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGlB,MAAM,CAACD,MAAM,CAACoB,GAAG,CAAC;AAC7D;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGpB,MAAM,CAACD,MAAM,CAACoB,GAAG,CAAC;AAC/D;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/button/Button.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.types.js","names":[],"sources":["../../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\n\nexport type ButtonProps = {\n /*\n The label of the button.\n * @description\n * The content to be displayed inside the button. This can be text, icons, or any React node.\n * It serves as the primary label for the button's action.\n * @optional\n /\n children?: ReactNode;\n /\n Additional class names for the button element.\n * @description\n * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.\n * Multiple classes can be provided as a space-separated string.\n * @optional\n /\n className?: string;\n /\n An icon that is displayed on the left-hand side of the button text.\n * @description\n * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.\n * This enhances the visual representation of the button's function.\n * @optional\n /\n icon?: string;\n /\n Whether the button is disabled and cannot be clicked anymore.\n * @description\n * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.\n * This is useful for scenarios where the action is temporarily unavailable.\n * @optional\n /\n isDisabled?: boolean;\n /\n Displays the button in the secondary style.\n * @description\n * Applies a secondary visual style to the button, typically with a different background color or border.\n * This is used to differentiate less prominent actions from primary ones.\n * @optional\n /\n isSecondary?: boolean;\n /\n Function to be executed when the button is clicked.\n * @description\n * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,\n * such as submitting forms, navigating to pages, or performing any custom action.\n /\n onClick: MouseEventHandler<HTMLButtonElement>;\n /\n Whether the button should be displayed as a selectButton.\n * @description\n * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.\n * This changes the styling to indicate a selection state.\n * @optional\n * @default false\n /\n shouldShowAsSelectButton?: boolean;\n /\n Whether the text should be 'Roboto Medium'.\n * @description\n * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.\n * This can improve readability or match design guidelines.\n * @optional\n * @default true\n /\n shouldShowTextAsRobotoMedium?: boolean;\n /\n Shows a wait cursor instead of button text.\n * @description\n * Replaces the button content with a wait cursor animation, indicating that an action is in progress.\n * This provides visual feedback during loading or processing states.\n * @optional\n /\n shouldShowWaitCursor?: boolean;\n /\n Stops event propagation on click.\n * @description\n * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.\n * Useful in complex UI structures where event handling needs to be contained.\n * @optional\n /\n shouldStopPropagation?: boolean;\n /\n Optional button design override.\n * @description\n * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.\n * This provides flexibility for custom theming.\n * @optional\n /\n buttonDesign?: number;\n /\n Duration in seconds for the tap animation.\n * @description\n * Overrides how long the pressed state animation should take when the button is tapped.\n * Set this to `0` for an immediate press effect.\n * @optional\n /\n tapDuration?: number;\n /\n Enables keyboard-only focus highlighting.\n * @description\n * Focus styles are only shown while navigating with the keyboard and are reset on mouse interaction.\n * @optional\n * @default false\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"file":"Button.types.js","names":[],"sources":["../../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\n\nexport type ButtonProps = {\n /*\n The label of the button.\n * @description\n * The content to be displayed inside the button. This can be text, icons, or any React node.\n * It serves as the primary label for the button's action.\n * @optional\n /\n children?: ReactNode;\n /\n Additional class names for the button element.\n * @description\n * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.\n * Multiple classes can be provided as a space-separated string.\n * @optional\n /\n className?: string;\n /\n An icon that is displayed on the left-hand side of the button text.\n * @description\n * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.\n * This enhances the visual representation of the button's function.\n * @optional\n /\n icon?: string;\n /\n Whether the button is disabled and cannot be clicked anymore.\n * @description\n * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.\n * This is useful for scenarios where the action is temporarily unavailable.\n * @optional\n /\n isDisabled?: boolean;\n /\n Displays the button in the secondary style.\n * @description\n * Applies a secondary visual style to the button, typically with a different background color or border.\n * This is used to differentiate less prominent actions from primary ones.\n * @optional\n /\n isSecondary?: boolean;\n /\n Function to be executed when the button is clicked.\n * @description\n * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,\n * such as submitting forms, navigating to pages, or performing any custom action.\n /\n onClick: MouseEventHandler<HTMLButtonElement>;\n /\n Whether the button should be displayed as a selectButton.\n * @description\n * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.\n * This changes the styling to indicate a selection state.\n * @optional\n * @default false\n /\n shouldShowAsSelectButton?: boolean;\n /\n Whether the text should be 'Roboto Medium'.\n * @description\n * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.\n * This can improve readability or match design guidelines.\n * @optional\n * @default true\n /\n shouldShowTextAsRobotoMedium?: boolean;\n /\n Shows a wait cursor instead of button text.\n * @description\n * Replaces the button content with a wait cursor animation, indicating that an action is in progress.\n * This provides visual feedback during loading or processing states.\n * @optional\n /\n shouldShowWaitCursor?: boolean;\n /\n Stops event propagation on click.\n * @description\n * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.\n * Useful in complex UI structures where event handling needs to be contained.\n * @optional\n /\n shouldStopPropagation?: boolean;\n /\n Optional button design override.\n * @description\n * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.\n * This provides flexibility for custom theming.\n * @optional\n /\n buttonDesign?: number;\n /\n Duration in seconds for the tap animation.\n * @description\n * Overrides how long the pressed state animation should take when the button is tapped.\n * Set this to `0` for an immediate press effect.\n * @optional\n */\n tapDuration?: number;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { useUuid } from '../../hooks/uuid';
 import { getHeightOfSingleTextLine } from '../../utils/calculate';
 import { StyledCheckbox, StyledCheckboxBox, StyledCheckboxBoxWrapper, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
@@ -13,8 +12,7 @@ const Checkbox = ({
   borderRadius,
   colors,
   shouldShowCentered = false,
-  shouldChangeOnLabelClick = true,
-  shouldEnableKeyboardHighlighting
+  shouldChangeOnLabelClick = true
 }) => {
   const [isActive, setIsActive] = useState(isChecked ?? false);
   const [checkboxTop, setCheckboxTop] = useState(undefined);
@@ -36,11 +34,9 @@ const Checkbox = ({
       setCheckboxTop((singleLineHeight - boxHeight) / 2);
     }
   }, [shouldShowCentered]);
-  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   return /*#__PURE__*/React.createElement(StyledCheckbox, {
     ref: checkboxRootRef
   }, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     checked: isChecked,
     disabled: isDisabled,
     id: uuid,

package/lib/esm/components/checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","~~useKeyboardFocusHighlighting","~~useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","~~shouldEnableKeyboardHighlighting","~~isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","~~shouldShowKeyboardHighlighting","~~createElement","ref","~~$shouldShowKeyboardHighlighting","~~disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","className","$shouldChangeOnLabelClick","displayName"],"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}>\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":"AAAA,OAAOA,KAAK,~~IAORC~~,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,~~4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,~~OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SACIC,cAAc,EACdC,iBAAiB,EACjBC,wBAAwB,EACxBC,mBAAmB,EACnBC,mBAAmB,QAChB,mBAAmB;~~AA8D1B~~,MAAMC,QAA2B,GAAGA,CAAC;EACjCC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,kBAAkB;EAClBC,YAAY;EACZC,MAAM;EACNC,kBAAkB,GAAG,KAAK;EAC1BC,wBAAwB,GAAG~~,IAAI~~;~~EAC~~/~~BC;AACJ~~,CAAC,KAAK;EACF,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,~~GAAGtB~~,QAAQ,~~CAACW~~,SAAS,IAAI,KAAK,CAAC;EAC5D,MAAM,~~CAACY~~,WAAW,EAAEC,cAAc,CAAC,~~GAAGxB~~,QAAQ,~~CAAqByB~~,SAAS,CAAC;EAE7E,MAAMC,cAAc,~~GAAG3B~~,MAAM,CAAmB,IAAI,CAAC;EACrD,~~MAAM4B~~,eAAe,~~GAAG5B~~,MAAM,CAAiB,IAAI,CAAC;EAEpD,~~MAAM6B~~,YAAY,~~GAAG/B~~,WAAW,~~CAC3BgC~~,KAAoC,IAAK;IACtCP,WAAW,CAACO,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,~~OAAOjB~~,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,~~CAACe~~,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,~~CAACf~~,QAAQ,CACb,CAAC;EAED,~~MAAMkB~~,IAAI,~~GAAG9B~~,OAAO,CAAC,CAAC;~~EAEtBJ~~,SAAS,CAAC,MAAM;IACZ,~~IAAI6B~~,eAAe,CAACM,OAAO,IAAI,~~CAACf~~,kBAAkB,EAAE;MAChD,~~MAAMgB~~,gBAAgB,~~GAAG/B~~,yBAAyB,CAAC;QAC/~~CgC~~,SAAS,EAAER,eAAe,CAACM;MAC/B,CAAC,CAAC;MAEF,MAAMG,SAAS,GAAGV,cAAc,CAACO,OAAO,EAAEI,qBAAqB,CAAC,CAAC,CAACC,MAAM,IAAI,CAAC;MAE7Ed,cAAc,CAAC,CAACU,gBAAgB,GAAGE,SAAS,IAAI,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,~~CAAClB~~,kBAAkB,CAAC,CAAC;EAExB,~~MAAMqB~~,~~8BAA8B,GAAGtC,4BAA4B,CAC/DmB,gCAAgC,IAAI,CAACR,UACzC,CAAC;EAED,oBACIhB,~~KAAA,~~CAAA4C~~,aAAA,~~CAACpC~~,cAAc;~~IAACqC~~,GAAG,~~EAAEd~~;EAAgB,~~gBACjC/B~~,KAAA,~~CAAA4C~~,aAAA,~~CAACjC~~,mBAAmB;~~IAChBmC,+BAA+B~~,~~EAAEH,8BAA+B;IAChER,~~OAAO,~~EAAEpB~~,SAAU;~~IACnBgC~~,QAAQ,~~EAAE/B~~,UAAW;~~IACrBgC~~,EAAE,~~EAAEZ~~,IAAK;~~IACTlB~~,QAAQ,~~EAAEc~~,YAAa;~~IACvBiB~~,IAAI,EAAC;EAAU,CAClB,CAAC,~~eAEFjD~~,KAAA,~~CAAA4C~~,aAAA,~~CAAClC~~,wBAAwB;~~IACrBwC~~,mBAAmB,~~EAAE/B~~,kBAAmB;~~IACxCgC~~,KAAK,EAAE;MACHC,GAAG,~~EAAE9B~~,kBAAkB,GAAG,KAAK,~~GAAGK~~,WAAW;~~MAC7C0B~~,SAAS,~~EAAE/B~~,kBAAkB,GAAG,kBAAkB,~~GAAGO~~;IACzD;EAAE,~~gBAEF7B~~,KAAA,~~CAAA4C~~,aAAA,~~CAACnC~~,iBAAiB;~~IACd6C~~,OAAO,~~EAAElB~~,IAAK;~~IACdS~~,GAAG,~~EAAEf~~,cAAe;~~IACpByB~~,UAAU,~~EAAExC~~,SAAS,~~IAAIU~~,QAAS;~~IAClC+B~~,WAAW,~~EAAExC~~,UAAW;~~IACxBkC~~,mBAAmB,~~EAAE/B~~,kBAAmB;~~IACxCsC~~,uBAAuB,~~EAAEpC~~,MAAM,~~EAAEqC~~,sBAAuB;IACxDC,yBAAyB,~~EAAEtC~~,MAAM,~~EAAEuC~~,wBAAyB;IAC5DC,aAAa,~~EAAEzC~~,YAAa;~~IAC5B0C~~,YAAY,~~EAAEzC~~,MAAM,~~EAAE0C~~;EAAY,CACrC,CACqB,CAAC,~~eAC3B/D~~,KAAA,~~CAAA4C~~,aAAA,~~CAAChC~~,mBAAmB;~~IAChBoD~~,SAAS,~~EAAE/C~~,cAAe;~~IAC1BuC~~,WAAW,~~EAAExC~~,UAAW;~~IACxBiD~~,yBAAyB,~~EAAE1C~~,wBAAyB;~~IACpD2B~~,mBAAmB,~~EAAE/B~~,kBAAmB;~~IACxCmC~~,OAAO,~~EAAE/B~~,wBAAwB,~~GAAGa~~,IAAI,GAAGP;EAAU,~~GAEpDf~~,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDD,QAAQ,~~CAACqD~~,WAAW,GAAG,UAAU;AAEjC,~~eAAerD~~,QAAQ","ignoreList":[]}
1	+ {"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","createElement","ref","disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\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\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}) => {\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 return (\n <StyledCheckbox ref={checkboxRootRef}>\n <StyledCheckboxInput\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/esm/components/checkbox/Checkbox.styles.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledCheckbox = styled.div`
     align-items: center;
     display: flex;
@@ -8,28 +7,7 @@ export const StyledCheckbox = styled.div`
     min-height: 20px;
 `;
 export const StyledCheckboxInput = styled.input`
-    border: 0;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    left: 0;
-    margin: 0;
-    opacity: 0;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    top: 0;
-    white-space: nowrap;
-    width: 1px;
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible + div > label {
-                transition: none;
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
+    display: none;
 `;
 export const StyledCheckboxBoxWrapper = styled.div`
     display: flex;
@@ -54,10 +32,6 @@ export const StyledCheckboxBox = styled.label`
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
     position: relative;
-    display: inline-block;
-    width: ${({
-  $shouldShowAsSwitch
-}) => $shouldShowAsSwitch ? '44px' : '16px'};
     transition: opacity 0.2s ease;
     user-select: none;
     height: 16px;
@@ -116,8 +90,7 @@ export const StyledCheckboxBox = styled.label`
   if ($shouldShowAsSwitch) {
     return 'none';
   }
-  const fallbackBorderColor = theme['409-rgb'] ? `rgba(${theme['409-rgb']}, 0.5)` : theme.text;
-  return `1px solid ${$borderColor ?? fallbackBorderColor}`;
+  return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;
 }};
         border-radius: ${({

package/lib/esm/components/checkbox/Checkbox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.styles.js","names":["styled","css","~~keyboardFocusHighlightingRingCss","~~StyledCheckbox","div","StyledCheckboxInput","input","~~$shouldShowKeyboardHighlighting","~~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":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;~~AAG~~/C,~~SAASC,gCAAgC,QAAQ,8CAA8C;AAG/F,~~OAAO,MAAMC,cAAc,~~GAAGH~~,MAAM,~~CAACI~~,GAAG;AACxC;AACA;AACA;AACA;AACA;AACA,CAAC;~~AAMD~~,OAAO,MAAMC,mBAAmB,~~GAAGL~~,MAAM,~~CAACM~~,~~KAA+B~~;~~AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC~~/~~BN,GAAG~~;~~AACX;~~AACA~~;AACA~~,~~kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,~~CAAC;AAMD,OAAO,~~MAAMM~~,wBAAwB,~~GAAGR~~,MAAM,~~CAACI~~,GAAkC;AACjF;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;~~EAAEK~~;AAAoB,CAAC,KACtBA,mBAAmB,~~IACnBR~~,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAYD,OAAO,~~MAAMS~~,iBAAiB,~~GAAGV~~,MAAM,~~CAACW~~,KAA6B;AACrE,aAAa,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAACC,IAAI;AAC9D,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA~~,aAAa,CAAC~~;~~EAAEL;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACjF;~~AACA;AACA;AACA;AACA~~;AACA~~,UAAU,CAAC;~~EAAEM~~,UAAU;EAAEN;AAA4C,CAAC,KAC1DA,mBAAmB,~~GACbR~~,GAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,~~8CAA8Cc~~,UAAU,GAAG,MAAM,GAAG,CAAC;AACrE;AACA;AACA,mBAAmB,~~GACDd~~,GAAG;AACrB;AACA;AACA;AACA;AACA,~~iCAAiCc~~,UAAU,GAAG,CAAC,GAAG,CAAC;AACnD;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EACjBA,UAAU;EACVN,mBAAmB;EACnBO,uBAAuB;EACvBC,yBAAyB;EACzBL;AACoB,CAAC,KAAK;EAC1B,MAAMM,qBAAqB,GACvBF,uBAAuB,KAAKP,mBAAmB,GAAGG,KAAK,CAACO,KAAK,GAAGP,KAAK,CAAC,KAAK,CAAC,CAAC;EACjF,MAAMQ,uBAAuB,GACzBH,yBAAyB,KAAKR,mBAAmB,GAAGG,KAAK,CAACS,GAAG,GAAGT,KAAK,CAAC,KAAK,CAAC,CAAC;EAEjF,IAAIH,mBAAmB,EAAE;IACrB,OAAOM,UAAU,GAAGG,qBAAqB,GAAGE,uBAAuB;EACvE;EAEA,OAAOL,UAAU,GAAGG,qBAAqB,GAAGE,uBAAuB;AACvE,CAAC;AACT;AACA,kBAAkB,CAAC;EAAEE,YAAY;EAAEb,mBAAmB;EAAEG;AAA8B,CAAC,KAAK;EAChF,IAAIH,mBAAmB,EAAE;IACrB,OAAO,MAAM;EACjB;EAEA,~~MAAMc~~,~~mBAAmB~~,~~GAAGX~~,~~KAAK~~,~~CAAC~~,~~SAAS,CAAC,GACtC,QAAQA,~~KAAK,CAAC,SAAS,CAAC,QAAQ,~~GAChCA,KAAK,CAACC,IAAI;EAEhB,OAAO,aAAaS,YAAY,IAAIC,mBAAmB,~~EAAE;~~AAC7D~~,CAAC;AACT;AACA,yBAAyB,CAAC;~~EAAEd~~,mBAAmB;~~EAAEe~~;AAAc,CAAC,KACpDA,aAAa,~~KAAKf~~,mBAAmB,GAAG,OAAO,GAAG,CAAC,CAAC;AAChE;AACA,kBAAkB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACtF,gBAAgB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,CAAE;AAC/E;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACrF;AACA;AACA,CAAC;AAQD,OAAO,~~MAAMgB~~,mBAAmB,~~GAAGzB~~,MAAM,~~CAACW~~,KAA+B;AACzE,aAAa,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAACC,IAAI;AAChE,cAAc,CAAC;~~EAAEa~~;AAA0B,CAAC,KACpC,CAACA,yBAAyB,GAAG,SAAS,GAAG,SAAS;AAC1D,eAAe,CAAC;~~EAAEZ~~;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,MAAM,CAAC;EAAEL;AAAoB,CAAC,KACtBA,mBAAmB,~~GACbR~~,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","$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 display: none;\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 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 return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;\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/esm/components/color-scheme-provider/ColorSchemeProvider.js CHANGED Viewed

@@ -73,8 +73,7 @@ const ColorSchemeProvider = ({
   siteId,
   style = {},
   iconColor,
-  customVariables,
-  shouldEnableKeyboardHighlighting
+  customVariables
 }) => {
   const context = useContext(ColorSchemeContext);
   const {
@@ -85,7 +84,6 @@ const ColorSchemeProvider = ({
   const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;
   const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
   const paragraphFormat = useMemo(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
-  const resolvedShouldEnableKeyboardHighlighting = shouldEnableKeyboardHighlighting ?? context?.shouldEnableKeyboardHighlighting ?? false;
   const contextValue = useChaynsTheme({
     color,
     iconColor,
@@ -99,10 +97,7 @@ const ColorSchemeProvider = ({
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: contextValue.theme
   }, /*#__PURE__*/React.createElement(ColorSchemeContext.Provider, {
-    value: {
-      ...contextValue,
-      shouldEnableKeyboardHighlighting: resolvedShouldEnableKeyboardHighlighting
-    }
+    value: contextValue
   }, /*#__PURE__*/React.createElement(StyledColorSchemeProvider, {
     className: "color-scheme-provider",
     style: style

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","css","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","theme","textRgb","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","~~shouldEnableKeyboardHighlighting","~~context","internalColor","internalColorMode","designSettings","overrideParagraphFormat","paragraphFormat","~~resolvedShouldEnableKeyboardHighlighting","~~contextValue","createElement","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, css, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n /*\n The content of the application or the components for which the styles should be set\n /\n children: ReactNode;\n /\n The hex color to be used for the children\n /\n color?: string;\n /\n The color mode to be used for the children\n /\n colorMode?: ColorMode;\n /\n The secondary hex color to be used for the children\n /\n secondaryColor?: string;\n /\n The site id of the page for which the design settings should be fetched\n /\n siteId?: string;\n /\n Additional styles set on the root element\n /\n style?: { [key: string]: string \| number };\n /\n Additional variables to extend the theme\n /\n customVariables?: Record<string, string>;\n /\n An optional color for all icons\n /\n iconColor?: string;\n ~~/\n Enables keyboard-only focus highlighting globally for child components.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n~~};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n footer {\n font-size: 0.85rem;\n color: #888;\n margin: 10px 0 0;\n\n & a {\n color: #888;\n letter-spacing: -0.3px;\n }\n }\n\n .chayns-scrollbar {\n ${({ theme }: WithTheme<unknown>) => {\n const textRgb = theme['text-rgb'] ?? '';\n\n return css`\n @supports selector(::-webkit-scrollbar-button) {\n &::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${textRgb}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n width: 5px;\n }\n }\n\n @supports not selector(::-webkit-scrollbar-button) {\n scrollbar-color: rgba(${textRgb}, 0.15) transparent;\n scrollbar-width: thin;\n }\n `;\n }}\n }\n`;\n\nexport interface ColorSchemeContextProps {\n designSettings?: ChaynsDesignSettings;\n paragraphFormat: ChaynsParagraphFormat[];\n theme: Theme;\n ~~shouldEnableKeyboardHighlighting: boolean;\n~~}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps \| undefined>(undefined);\n\nexport const useColorScheme = (): ~~ColorSchemeContextProps~~ ~~\| undefined =>\n~~ useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color: colorProp,\n colorMode: colorModeProp,\n secondaryColor,\n siteId,\n style = {},\n iconColor,\n customVariables,\n ~~shouldEnableKeyboardHighlighting,\n~~}) => {\n const context = useContext(ColorSchemeContext);\n\n const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n const overrideParagraphFormat =\n (color && color !== internalColor) \|\| colorMode !== internalColorMode;\n\n const paragraphFormat = useMemo(\n () => (overrideParagraphFormat ? [] : undefined),\n [overrideParagraphFormat],\n );\n\n const ~~resolvedShouldEnableKeyboardHighlighting =\n shouldEnableKeyboardHighlighting ?? context?.shouldEnableKeyboardHighlighting ?? false;\n\n const~~ contextValue = useChaynsTheme({\n color,\n iconColor,\n colorMode,\n secondaryColor,\n siteId,\n customVariables,\n // Overrides the paragraphFormat on changed color or colorMode\n paragraphFormat,\n });\n\n return (\n <ThemeProvider theme={contextValue.theme}>\n <ColorSchemeContext.Provider\n value={~~{\n ...~~contextValue~~,\n shouldEnableKeyboardHighlighting: resolvedShouldEnableKeyboardHighlighting,\n~~ }~~}\n~~ >\n <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n {children}\n </StyledColorSchemeProvider>\n <GlobalStyle />\n </ColorSchemeContext.Provider>\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,GAAG,EAAEC,aAAa,QAAQ,mBAAmB;AACzE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;~~AAiDvD~~,MAAMC,WAAW,GAAGL,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEM;AAA0B,CAAC,KAAK;EACjC,MAAMC,OAAO,GAAGD,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE;EAEvC,OAAOL,GAAG;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAiDM,OAAO;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4CA,OAAO;AACnD;AACA;AACA,aAAa;AACL,CAAC;AACT;AACA,CAAC;~~AASD~~,OAAO,MAAMC,kBAAkB,gBAAGX,aAAa,CAAsCY,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,~~KAC1BZ~~,UAAU,CAACU,kBAAkB,CAAC;~~AAElC~~,MAAMG,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC~~,eAAe~~;~~EACfC;~~AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,~~GAAGzB~~,UAAU,CAACU,kBAAkB,CAAC;EAE9C,MAAM;IAAEK,KAAK,~~EAAEW~~,aAAa;~~IAAET~~,SAAS,~~EAAEU~~;EAAkB,CAAC,~~GAAG9B~~,OAAO,CAAC,CAAC;EAExE,MAAMkB,KAAK,GAAGC,SAAS,~~IAAIS~~,OAAO,EAAEG,cAAc,~~EAAEb~~,KAAK,~~IAAIW~~,aAAa;EAC1E,~~MAAMT~~,SAAS,GAAGC,aAAa,~~IAAIO~~,OAAO,EAAEG,cAAc,~~EAAEX~~,SAAS,~~IAAIU~~,iBAAiB;EAE1F,MAAME,uBAAuB,~~GACxBd~~,KAAK,IAAIA,KAAK,~~KAAKW~~,aAAa,~~IAAKT~~,SAAS,~~KAAKU~~,iBAAiB;EAEzE,MAAMG,eAAe,~~GAAG7B~~,OAAO,CAC3B,~~MAAO4B~~,uBAAuB,GAAG,EAAE,~~GAAGlB~~,SAAU,EAChD,~~CAACkB~~,uBAAuB,CAC5B,CAAC;EAED,MAAME,~~wCAAwC,GAC1CP,gCAAgC,IAAIC,OAAO,EAAED,gCAAgC,IAAI,KAAK;EAE1F,MAAMQ,~~YAAY,~~GAAG1B~~,cAAc,CAAC;IAChCS,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;~~IACAO~~;EACJ,CAAC,CAAC;EAEF,~~oBACIhC~~,KAAA,~~CAAAmC~~,aAAA,~~CAAC7B~~,aAAa;IAACI,KAAK,~~EAAEwB~~,YAAY,~~CAACxB~~;EAAM,gBACrCV,KAAA,~~CAAAmC~~,aAAA,~~CAACvB~~,kBAAkB,~~CAACwB~~,QAAQ;~~IACxBC~~,KAAK,~~EAAE~~;~~MACH~~,~~GAAGH~~,~~YAAY;MACfR,gCAAgC,EAAEO;IACtC;EAAE,gBAEFjC,~~KAAA,~~CAAAmC~~,aAAA,~~CAAC5B~~,yBAAyB;~~IAAC+B~~,SAAS,EAAC,uBAAuB;~~IAACf~~,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5BhB,KAAA,~~CAAAmC~~,aAAA,~~CAAC1B~~,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDM,mBAAmB,~~CAACwB~~,WAAW,GAAG,qBAAqB;AAEvD,~~eAAexB~~,mBAAmB","ignoreList":[]}
1	+ {"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","css","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","theme","textRgb","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","context","internalColor","internalColorMode","designSettings","overrideParagraphFormat","paragraphFormat","contextValue","createElement","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, css, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n /*\n The content of the application or the components for which the styles should be set\n /\n children: ReactNode;\n /\n The hex color to be used for the children\n /\n color?: string;\n /\n The color mode to be used for the children\n /\n colorMode?: ColorMode;\n /\n The secondary hex color to be used for the children\n /\n secondaryColor?: string;\n /\n The site id of the page for which the design settings should be fetched\n /\n siteId?: string;\n /\n Additional styles set on the root element\n /\n style?: { [key: string]: string \| number };\n /\n Additional variables to extend the theme\n /\n customVariables?: Record<string, string>;\n /\n An optional color for all icons\n */\n iconColor?: string;\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n footer {\n font-size: 0.85rem;\n color: #888;\n margin: 10px 0 0;\n\n & a {\n color: #888;\n letter-spacing: -0.3px;\n }\n }\n\n .chayns-scrollbar {\n ${({ theme }: WithTheme<unknown>) => {\n const textRgb = theme['text-rgb'] ?? '';\n\n return css`\n @supports selector(::-webkit-scrollbar-button) {\n &::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${textRgb}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n width: 5px;\n }\n }\n\n @supports not selector(::-webkit-scrollbar-button) {\n scrollbar-color: rgba(${textRgb}, 0.15) transparent;\n scrollbar-width: thin;\n }\n `;\n }}\n }\n`;\n\nexport interface ColorSchemeContextProps {\n designSettings?: ChaynsDesignSettings;\n paragraphFormat: ChaynsParagraphFormat[];\n theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps \| undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color: colorProp,\n colorMode: colorModeProp,\n secondaryColor,\n siteId,\n style = {},\n iconColor,\n customVariables,\n}) => {\n const context = useContext(ColorSchemeContext);\n\n const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n const overrideParagraphFormat =\n (color && color !== internalColor) \|\| colorMode !== internalColorMode;\n\n const paragraphFormat = useMemo(\n () => (overrideParagraphFormat ? [] : undefined),\n [overrideParagraphFormat],\n );\n\n const contextValue = useChaynsTheme({\n color,\n iconColor,\n colorMode,\n secondaryColor,\n siteId,\n customVariables,\n // Overrides the paragraphFormat on changed color or colorMode\n paragraphFormat,\n });\n\n return (\n <ThemeProvider theme={contextValue.theme}>\n <ColorSchemeContext.Provider value={contextValue}>\n <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n {children}\n </StyledColorSchemeProvider>\n <GlobalStyle />\n </ColorSchemeContext.Provider>\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,GAAG,EAAEC,aAAa,QAAQ,mBAAmB;AACzE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA6CvD,MAAMC,WAAW,GAAGL,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEM;AAA0B,CAAC,KAAK;EACjC,MAAMC,OAAO,GAAGD,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE;EAEvC,OAAOL,GAAG;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAiDM,OAAO;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4CA,OAAO;AACnD;AACA;AACA,aAAa;AACL,CAAC;AACT;AACA,CAAC;AAQD,OAAO,MAAMC,kBAAkB,gBAAGX,aAAa,CAAsCY,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMZ,UAAU,CAACU,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGxB,UAAU,CAACU,kBAAkB,CAAC;EAE9C,MAAM;IAAEK,KAAK,EAAEU,aAAa;IAAER,SAAS,EAAES;EAAkB,CAAC,GAAG7B,OAAO,CAAC,CAAC;EAExE,MAAMkB,KAAK,GAAGC,SAAS,IAAIQ,OAAO,EAAEG,cAAc,EAAEZ,KAAK,IAAIU,aAAa;EAC1E,MAAMR,SAAS,GAAGC,aAAa,IAAIM,OAAO,EAAEG,cAAc,EAAEV,SAAS,IAAIS,iBAAiB;EAE1F,MAAME,uBAAuB,GACxBb,KAAK,IAAIA,KAAK,KAAKU,aAAa,IAAKR,SAAS,KAAKS,iBAAiB;EAEzE,MAAMG,eAAe,GAAG5B,OAAO,CAC3B,MAAO2B,uBAAuB,GAAG,EAAE,GAAGjB,SAAU,EAChD,CAACiB,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGxB,cAAc,CAAC;IAChCS,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAM;EACJ,CAAC,CAAC;EAEF,oBACI/B,KAAA,CAAAiC,aAAA,CAAC3B,aAAa;IAACI,KAAK,EAAEsB,YAAY,CAACtB;EAAM,gBACrCV,KAAA,CAAAiC,aAAA,CAACrB,kBAAkB,CAACsB,QAAQ;IAACC,KAAK,EAAEH;EAAa,gBAC7ChC,KAAA,CAAAiC,aAAA,CAAC1B,yBAAyB;IAAC6B,SAAS,EAAC,uBAAuB;IAACb,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5BhB,KAAA,CAAAiC,aAAA,CAACxB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDM,mBAAmB,CAACsB,WAAW,GAAG,qBAAqB;AAEvD,eAAetB,mBAAmB","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js CHANGED Viewed

@@ -4,23 +4,17 @@ import { styled } from 'styled-components';
 export const StyledColorSchemeProvider = styled.div`
     color: var(--chayns-color--text);
-    --focus-color: color-mix(in srgb, currentColor 70%, transparent);
-    --focus-outline: var(--focus-color) solid 2px;
-    --focus-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
-    --focus-border-radius-circle: 50%;
-    --focus-border-radius: 3px;
     ${({
   theme
 }) => getAvailableColorList().map(colorName => {
   const colorNameRgb = `${colorName}-rgb`;
-  return [`--chayns-color--${colorName}: ${theme[colorName] ?? ''};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb] ?? ''};`];
+  return [`--chayns-color--${colorName}: ${theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`];
 })}
     ${({
   theme
 }) => `
-        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary ?? ''};
+        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};
     `}
     // ToDo: Remove .h1...

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorSchemeProvider.styles.js","names":["getAvailableColorList","styled","StyledColorSchemeProvider","div","theme","map","colorName","colorNameRgb","primary"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport type { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\n// noinspection CssUnresolvedCustomProperty\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n color: var(--chayns-color--text);\n\n --focus-color: color-mix(in srgb, currentColor 70%, transparent);\n --focus-outline: var(--focus-color) solid 2px;\n --focus-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);\n --focus-border-radius-circle: 50%;\n --focus-border-radius: 3px;\n\n ${({ theme }: ColorSchemeProviderProps) =>\n getAvailableColorList().map((colorName: string) => {\n const colorNameRgb = `${colorName}-rgb`;\n return [\n `--chayns-color--${colorName}: ${theme[colorName] ~~?? ''~~};`,\n `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb] ~~?? ''~~};`,\n ];\n })}\n\n ${({ theme }: ColorSchemeProviderProps) =>\n `\n --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary ~~?? ''~~};\n `}\n\n // ToDo: Remove .h1...\n .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n margin-top: 0;\n }\n`;\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAK1C;AACA,OAAO,MAAMC,yBAAyB,GAAGD,MAAM,CAACE,GAA6B;AAC7E;AACA;AACA~~;AACA;AACA;AACA;AACA;AACA;AACA~~,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCJ,qBAAqB,CAAC,CAAC,CAACK,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKF,KAAK,CAACE,SAAS,CAAC,~~IAAI,EAAE,~~GAAG,~~EAC1D~~,uBAAuBA,SAAS,KAAKF,KAAK,CAACG,YAAY,CAAC,~~IAAI,EAAE,~~GAAG,~~CACpE~~;AACL,CAAC,CAAC;AACV;AACA,MAAM,CAAC;EAAEH;AAAgC,CAAC,KAClC;AACR,sCAAsCA,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAACI,OAAO~~,IAAI,EAAE~~;~~AAChF~~,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ColorSchemeProvider.styles.js","names":["getAvailableColorList","styled","StyledColorSchemeProvider","div","theme","map","colorName","colorNameRgb","primary"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport type { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\n// noinspection CssUnresolvedCustomProperty\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n color: var(--chayns-color--text);\n\n ${({ theme }: ColorSchemeProviderProps) =>\n getAvailableColorList().map((colorName: string) => {\n const colorNameRgb = `${colorName}-rgb`;\n return [\n `--chayns-color--${colorName}: ${theme[colorName]};`,\n `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`,\n ];\n })}\n\n ${({ theme }: ColorSchemeProviderProps) =>\n `\n --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};\n `}\n\n // ToDo: Remove .h1...\n .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n margin-top: 0;\n }\n`;\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAK1C;AACA,OAAO,MAAMC,yBAAyB,GAAGD,MAAM,CAACE,GAA6B;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCJ,qBAAqB,CAAC,CAAC,CAACK,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKF,KAAK,CAACE,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKF,KAAK,CAACG,YAAY,CAAC,GAAG,CAC9D;AACL,CAAC,CAAC;AACV;AACA,MAAM,CAAC;EAAEH;AAAgC,CAAC,KAClC;AACR,sCAAsCA,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAACI,OAAO;AAC1E,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/combobox/ComboBox.js CHANGED Viewed

@@ -10,7 +10,6 @@ import { DropdownDirection } from '../../types/dropdown';
 import { useElementSize } from '../../hooks/element';
 import { ComboBoxSize } from './ComboBox.types';
 import { getComboBoxWidthResult } from './ComboBox.utils';
-import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const ComboBox = /*#__PURE__*/forwardRef(({
   bodyWidth,
   direction = DropdownDirection.RIGHT,
@@ -37,8 +36,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   onInputBlur,
   shouldShowTransparentBackground = false,
   inputValue,
-  shouldDropDownUseMaxItemWidth = false,
-  shouldEnableKeyboardHighlighting
+  shouldDropDownUseMaxItemWidth = false
 }, ref) => {
   const [internalSelectedItem, setInternalSelectedItem] = useState();
   const [isAnimating, setIsAnimating] = useState(false);
@@ -48,8 +46,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   const [availableMaxHeight, setAvailableMaxHeight] = useState(undefined);
   const isInputFocused = useRef(false);
   const styledComboBoxElementRef = useRef(null);
-  const comboBoxHeaderRef = useRef(null);
-  const comboBoxInputRef = useRef(null);
   const contentRef = useRef(null);
   const parentSize = useElementSize(styledComboBoxElementRef, {
     shouldUseParentElement: true
@@ -85,7 +81,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     setBodyMinWidth(calculatedBodyMinWidth);
   }, [functions, internalSelectedItem, lists, parentSize, placeholder, prefix, prefixMinWidth, selectedItem, shouldDropDownUseMaxItemWidth, shouldShowBigImage, shouldShowClearIcon, shouldUseCurrentItemWidth, shouldUseFullWidth, values]);
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
-  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const shouldDisableActions = useMemo(() => {
     if (!selectedItem) {
       return false;
@@ -137,23 +132,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     }
     setIsAnimating(false);
   }, [onHide]);
-  const handleContainerBlur = useCallback(event => {
-    const nextFocusedElement = event.relatedTarget;
-    const currentContainer = event.currentTarget;
-    if (!nextFocusedElement || !currentContainer.contains(nextFocusedElement) && !contentRef.current?.contains(nextFocusedElement)) {
-      handleClose();
-    }
-  }, [handleClose]);
-  const restoreTriggerFocus = useCallback(() => {
-    // Delay is needed so focus happens after dropdown close/render cycle.
-    requestAnimationFrame(() => {
-      if (typeof inputValue === 'string') {
-        comboBoxInputRef.current?.focus();
-        return;
-      }
-      comboBoxHeaderRef.current?.focus();
-    });
-  }, [inputValue]);
   /**
    * This function sets the selected item
@@ -169,15 +147,13 @@ const ComboBox = /*#__PURE__*/forwardRef(({
           if (shouldPreventSelection) return;
           setInternalSelectedItem(itemToSelect);
           handleClose();
-          restoreTriggerFocus();
         });
         return;
       }
     }
     setInternalSelectedItem(itemToSelect);
     handleClose();
-    restoreTriggerFocus();
-  }, [handleClose, onSelect, restoreTriggerFocus]);
+  }, [handleClose, onSelect]);
   const handleClear = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -186,12 +162,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     const handleKeyDown = e => {
       if (!isAnimating) return;
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        handleClose();
-        restoreTriggerFocus();
-        return;
-      }
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault();
         const children = contentRef.current?.children;
@@ -217,8 +187,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
         const focusedElement = children[newIndex];
         focusedElement.tabIndex = 0;
         focusedElement.focus();
-      } else if ((e.key === 'Enter' || e.key === ' ') && focusedIndex !== null) {
-        e.preventDefault();
+      } else if (e.key === 'Enter' && focusedIndex !== null) {
         const element = contentRef.current?.children[focusedIndex];
         if (!element) return;
         const {
@@ -238,7 +207,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     };
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [focusedIndex, handleClose, handleSetSelectedItem, isAnimating, lists, restoreTriggerFocus]);
+  }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
   /**
    * This function sets the external selected item
@@ -297,21 +266,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
-  const handleHeaderKeyDown = useCallback(event => {
-    if (isDisabled || typeof inputValue === 'string') {
-      return;
-    }
-    if (event.key === 'Escape' && isAnimating) {
-      event.preventDefault();
-      handleClose();
-      restoreTriggerFocus();
-      return;
-    }
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      handleHeaderClick();
-    }
-  }, [handleClose, handleHeaderClick, inputValue, isAnimating, isDisabled, restoreTriggerFocus]);
   useImperativeHandle(ref, () => ({
     hide: handleClose,
     show: handleOpen
@@ -331,10 +285,8 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,
-    $shouldUseFullWidth: shouldUseFullWidth,
-    onBlur: handleContainerBlur
+    $shouldUseFullWidth: shouldUseFullWidth
   }, /*#__PURE__*/React.createElement(StyledComboBoxHeader, {
-    ref: comboBoxHeaderRef,
     $direction: direction,
     onClick: handleHeaderClick,
     $isOpen: isAnimating,
@@ -343,12 +295,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     $shouldShowTransparentBackground: shouldShowTransparentBackground,
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
-    $shouldShowBigImage: shouldShowBigImage,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
-    onKeyDown: handleHeaderKeyDown,
-    tabIndex: !isDisabled && typeof inputValue !== 'string' ? 0 : undefined,
-    role: !isDisabled && typeof inputValue !== 'string' ? 'button' : undefined,
-    "aria-expanded": !isDisabled && typeof inputValue !== 'string' ? isAnimating : undefined
+    $shouldShowBigImage: shouldShowBigImage
   }, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, {
     $prefixMinWidth: prefixMinWidth
   }, prefix), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
@@ -360,7 +307,6 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
     icons: placeholderIcon
   }), typeof inputValue === 'string' ? /*#__PURE__*/React.createElement(StyledComboBoxInput, {
-    ref: comboBoxInputRef,
     disabled: isDisabled,
     value: inputValue,
     onChange: onInputChange,
@@ -396,7 +342,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     className: "chayns-scrollbar",
     ref: contentRef,
     tabIndex: 0
-  }, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleHeaderKeyDown, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, effectiveMaxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowKeyboardHighlighting, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
+  }, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, effectiveMaxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
 });
 ComboBox.displayName = 'ComboBox';
 export default ComboBox;