npm - @chayns-components/core - Versions diffs - 5.0.0-beta.979 → 5.0.0-beta.981 - Mend

@chayns-components/core 5.0.0-beta.979 → 5.0.0-beta.981

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

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

@@ -75,6 +75,7 @@ const Button = ({
   return /*#__PURE__*/_react.default.createElement(_Button.StyledMotionButton, {
     $shouldShowTextAsRobotoMedium: shouldShowTextAsRobotoMedium,
     $shouldShowAsSelectButton: shouldShowAsSelectButton,
+    $shouldShowWaitCursor: shouldShowWaitCursor,
     className: buttonClasses,
     disabled: isDisabled,
     $isDisabled: isDisabled,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","names":["_clsx","_interopRequireDefault","require","_framerMotion","_react","_interopRequireWildcard","_styledComponents","_Icon","_Button","_WaitCursor","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","handleClick","event","stopPropagation","buttonClasses","clsx","theme","useTheme","iconColor","useMemo","text","buttonDesign","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","StyledMotionButton","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","style","visibility","initial","animate","transition","duration","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 'framer-motion';\nimport React, { FC, MouseEventHandler, ReactNode, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\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 WaitCursor from './wait-cursor/WaitCursor';\n\nexport type ButtonProps = {\n /*\n The label of the button\n /\n children?: ReactNode;\n /\n Additional class names for the button element\n /\n className?: string;\n /\n An icon that is displayed on the left-hand side of the button text\n /\n icon?: string;\n /\n Disables the button so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Displays the button in the secondary style\n /\n isSecondary?: boolean;\n /\n Function to be executed when the button is clicked\n /\n onClick: MouseEventHandler<HTMLButtonElement>;\n /\n Whether the button should be displayed as a selectButton.\n /\n shouldShowAsSelectButton?: boolean;\n /\n Whether the text should be 'Roboto Medium'\n /\n shouldShowTextAsRobotoMedium?: boolean;\n /\n Shows a wait cursor instead of button text\n /\n shouldShowWaitCursor?: boolean;\n /\n Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n};\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}) => {\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: Theme = useTheme();\n\n const iconColor = useMemo(() => {\n if (isSecondary) {\n return theme.text;\n }\n\n return theme.buttonDesign === '2'\n ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n : (theme.buttonColor ?? 'white');\n }, [\n isSecondary,\n theme.buttonBackgroundColor,\n theme.buttonColor,\n theme.buttonDesign,\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 (theme.buttonDesign === '2') {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, shouldShowAsSelectButton, theme]);\n\n const tapStyles = useMemo(() => {\n if (theme.buttonDesign === '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]);\n\n const hoverStyles = useMemo(() => {\n if (theme.buttonDesign === '2') {\n return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n }\n\n return { opacity: 1 };\n }, [theme]);\n\n return (\n <StyledMotionButton\n $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n $shouldShowAsSelectButton={shouldShowAsSelectButton}\n className={buttonClasses}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $hasChildren={!!children}\n $hasIcon={typeof icon === 'string' && icon !== ''}\n $isSecondary={isSecondary}\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={{ visibility: { duration: 0 } }}\n whileTap={isDisabled ? {} : { ...tapStyles }}\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":[]}
1	+ {"version":3,"file":"Button.js","names":["_clsx","_interopRequireDefault","require","_framerMotion","_react","_interopRequireWildcard","_styledComponents","_Icon","_Button","_WaitCursor","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","handleClick","event","stopPropagation","buttonClasses","clsx","theme","useTheme","iconColor","useMemo","text","buttonDesign","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","StyledMotionButton","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","style","visibility","initial","animate","transition","duration","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 'framer-motion';\nimport React, { FC, MouseEventHandler, ReactNode, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\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 WaitCursor from './wait-cursor/WaitCursor';\n\nexport type ButtonProps = {\n /*\n The label of the button\n /\n children?: ReactNode;\n /\n Additional class names for the button element\n /\n className?: string;\n /\n An icon that is displayed on the left-hand side of the button text\n /\n icon?: string;\n /\n Disables the button so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Displays the button in the secondary style\n /\n isSecondary?: boolean;\n /\n Function to be executed when the button is clicked\n /\n onClick: MouseEventHandler<HTMLButtonElement>;\n /\n Whether the button should be displayed as a selectButton.\n /\n shouldShowAsSelectButton?: boolean;\n /\n Whether the text should be 'Roboto Medium'\n /\n shouldShowTextAsRobotoMedium?: boolean;\n /\n Shows a wait cursor instead of button text\n /\n shouldShowWaitCursor?: boolean;\n /\n Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n};\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}) => {\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: Theme = useTheme();\n\n const iconColor = useMemo(() => {\n if (isSecondary) {\n return theme.text;\n }\n\n return theme.buttonDesign === '2'\n ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n : (theme.buttonColor ?? 'white');\n }, [\n isSecondary,\n theme.buttonBackgroundColor,\n theme.buttonColor,\n theme.buttonDesign,\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 (theme.buttonDesign === '2') {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, shouldShowAsSelectButton, theme]);\n\n const tapStyles = useMemo(() => {\n if (theme.buttonDesign === '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]);\n\n const hoverStyles = useMemo(() => {\n if (theme.buttonDesign === '2') {\n return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n }\n\n return { opacity: 1 };\n }, [theme]);\n\n return (\n <StyledMotionButton\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 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={{ visibility: { duration: 0 } }}\n whileTap={isDisabled ? {} : { ...tapStyles }}\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 CHANGED Viewed

@@ -63,8 +63,14 @@ const StyledMotionButton = exports.StyledMotionButton = (0, _styledComponents.de
     ${({
   $hasIcon,
-  $hasChildren
+  $hasChildren,
+  $shouldShowWaitCursor
 }) => {
+  if ($shouldShowWaitCursor) {
+    return (0, _styledComponents.css)`
+                padding: 4px 12px;
+            `;
+  }
   if ($hasIcon) {
     if ($hasChildren) {
       return (0, _styledComponents.css)`

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionButton","exports","styled","motion","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","css","$isSecondary","theme","text","buttonDesign","buttonColor","buttonBackgroundColor","$isDisabled","$hasIcon","$hasChildren","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, 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}>;\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 ${({ $isSecondary, $shouldShowAsSelectButton, theme }: StyledButtonProps) => {\n if ($isSecondary \|\| $shouldShowAsSelectButton) {\n return css`\n color: ${theme.text};\n `;\n }\n\n return css`\n color: ${theme.buttonDesign === '2'\n ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n : (theme.buttonColor ?? 'white')};\n `;\n }}\n\n ${({ theme, $isSecondary, $shouldShowAsSelectButton }: StyledButtonProps) => {\n if (theme.buttonDesign === '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 line-height: 22px;\n min-height: 32px;\n position: relative;\n user-select: none;\n\n ${({ $hasIcon, $hasChildren }) => {\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)<FramerMotionBugFix>`\n will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n justify-content: center;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;~~AAYzC~~,MAAMW,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,MAAM,CAAoB;AAC1E,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA0B,CAAC,KAC3DD,6BAA6B,IAC7B,CAACC,yBAAyB,IAC1B,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEF,yBAAyB;EAAEG;AAAyB,CAAC,KAAK;EACzE,IAAID,YAAY,IAAIF,yBAAyB,EAAE;IAC3C,OAAO,IAAAC,qBAAG;AACtB,yBAAyBE,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,OAAO,IAAAH,qBAAG;AAClB,qBAAqBE,KAAK,CAACE,YAAY,KAAK,GAAG,GAC5BF,KAAK,CAACG,WAAW,IAAIH,KAAK,CAACI,qBAAqB,IAAI,OAAO,GAC3DJ,KAAK,CAACG,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEH,KAAK;EAAED,YAAY;EAAEF;AAA6C,CAAC,KAAK;EACzE,IAAIG,KAAK,CAACE,YAAY,KAAK,GAAG,IAAI,CAACL,yBAAyB,EAAE;IAC1D,OAAO,IAAAC,qBAAG;AACtB,oCAAoCC,YAAY,GAAGC,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACI,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,OAAO,IAAAN,qBAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAc,CAAC;EAAEO;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC;~~AAAa~~,CAAC,KAAK;~~EAC9B~~,~~IAAID~~,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAO,IAAAT,qBAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAO,IAAAA,qBAAG;AACtB;AACA,aAAa;EACL;EACA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AACD;AACO,~~MAAMU~~,iBAAiB,~~GAAAhB~~,OAAA,~~CAAAgB~~,iBAAA,~~GAAGf~~,yBAAM,~~CAACgB~~,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,~~GAAAlB~~,OAAA,~~CAAAkB~~,2BAAA,GAAG,~~IAAAjB~~,yBAAM,EAACC,oBAAM,~~CAACiB~~,GAAG,CAAqB;AACjF;AACA,CAAC;AAEM,MAAMC,6BAA6B,~~GAAApB~~,OAAA,~~CAAAoB~~,6BAAA,GAAG,~~IAAAnB~~,yBAAM,EAACC,oBAAM,~~CAACiB~~,GAAG,CAAqB;AACnF;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Button.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionButton","exports","styled","motion","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","css","$isSecondary","theme","text","buttonDesign","buttonColor","buttonBackgroundColor","$isDisabled","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, 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}>;\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 ${({ $isSecondary, $shouldShowAsSelectButton, theme }: StyledButtonProps) => {\n if ($isSecondary \|\| $shouldShowAsSelectButton) {\n return css`\n color: ${theme.text};\n `;\n }\n\n return css`\n color: ${theme.buttonDesign === '2'\n ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n : (theme.buttonColor ?? 'white')};\n `;\n }}\n\n ${({ theme, $isSecondary, $shouldShowAsSelectButton }: StyledButtonProps) => {\n if (theme.buttonDesign === '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 line-height: 22px;\n min-height: 32px;\n position: relative;\n user-select: none;\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)<FramerMotionBugFix>`\n will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n justify-content: center;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAazC,MAAMW,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,MAAM,CAAoB;AAC1E,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA0B,CAAC,KAC3DD,6BAA6B,IAC7B,CAACC,yBAAyB,IAC1B,IAAAC,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEF,yBAAyB;EAAEG;AAAyB,CAAC,KAAK;EACzE,IAAID,YAAY,IAAIF,yBAAyB,EAAE;IAC3C,OAAO,IAAAC,qBAAG;AACtB,yBAAyBE,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,OAAO,IAAAH,qBAAG;AAClB,qBAAqBE,KAAK,CAACE,YAAY,KAAK,GAAG,GAC5BF,KAAK,CAACG,WAAW,IAAIH,KAAK,CAACI,qBAAqB,IAAI,OAAO,GAC3DJ,KAAK,CAACG,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEH,KAAK;EAAED,YAAY;EAAEF;AAA6C,CAAC,KAAK;EACzE,IAAIG,KAAK,CAACE,YAAY,KAAK,GAAG,IAAI,CAACL,yBAAyB,EAAE;IAC1D,OAAO,IAAAC,qBAAG;AACtB,oCAAoCC,YAAY,GAAGC,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACI,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,OAAO,IAAAN,qBAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAc,CAAC;EAAEO;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC,YAAY;EAAEC;AAAsB,CAAC,KAAK;EACrD,IAAIA,qBAAqB,EAAE;IACvB,OAAO,IAAAV,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIQ,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAO,IAAAT,qBAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAO,IAAAA,qBAAG;AACtB;AACA,aAAa;EACL;EACA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AACD;AACO,MAAMW,iBAAiB,GAAAjB,OAAA,CAAAiB,iBAAA,GAAGhB,yBAAM,CAACiB,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAnB,OAAA,CAAAmB,2BAAA,GAAG,IAAAlB,yBAAM,EAACC,oBAAM,CAACkB,GAAG,CAAqB;AACjF;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAArB,OAAA,CAAAqB,6BAAA,GAAG,IAAApB,yBAAM,EAACC,oBAAM,CAACkB,GAAG,CAAqB;AACnF;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -11,6 +11,7 @@ var _reactHelmet = require("react-helmet");
 var _styledComponents = require("styled-components");
 var _get = require("../../api/theme/get");
 var _font = require("../../utils/font");
+var _ColorSchemeProvider = require("./ColorSchemeProvider.styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ColorMode = /*#__PURE__*/function (ColorMode) {
@@ -42,7 +43,6 @@ const ColorSchemeProvider = ({
   theme,
   colors
 }) => {
-  const [internalColors, setInternalColors] = (0, _react.useState)(colors ?? {});
   const [internalTheme, setInternalTheme] = (0, _react.useState)(theme ?? {});
   const [internalDesignSettings, setInternalDesignSettings] = (0, _react.useState)();
   const [internalParagraphFormat, setInternalParagraphFormat] = (0, _react.useState)();
@@ -71,7 +71,6 @@ const ColorSchemeProvider = ({
     }
   }, [internalParagraphFormat, paragraphFormat, siteId]);
   (0, _react.useEffect)(() => {
-    let newColors = {};
     let newTheme = {};
     const availableColors = (0, _colors.getAvailableColorList)();
     if (!colors || !theme) {
@@ -86,23 +85,14 @@ const ColorSchemeProvider = ({
           if (!theme) {
             newTheme[colorName] = hexColor;
           }
-          if (!colors) {
-            newColors[`--chayns-color--${colorName}`] = hexColor;
-          }
           if (rgbColor) {
             if (!theme) {
               newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
             }
-            if (!colors) {
-              newColors[`--chayns-color-rgb--${colorName}`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
-            }
           }
         }
       });
     }
-    if (colors) {
-      newColors = colors;
-    }
     if (!theme) {
       switch (colorMode ?? internalColorMode) {
         case ColorMode.Light:
@@ -131,19 +121,9 @@ const ColorSchemeProvider = ({
       }
       if (internalParagraphFormat) {
         const {
-          colorResult,
           themeResult
         } = (0, _font.getHeadlineColorSelector)(internalParagraphFormat);
-        // Update chayns-colors
-        Object.keys(colorResult).forEach(key => {
-          // ToDo: Find better solution
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          newColors[key] = colorResult[key];
-        });
         // Update Theme
         Object.keys(themeResult).forEach(key => {
           // ToDo: Find better solution
@@ -158,19 +138,17 @@ const ColorSchemeProvider = ({
       newTheme = theme;
     }
     setInternalTheme(newTheme);
-    setInternalColors(newColors);
   }, [color, colorMode, colors, internalColor, internalColorMode, internalDesignSettings, internalParagraphFormat, secondaryColor, theme]);
   const contextValue = (0, _react.useMemo)(() => {
     if (internalDesignSettings && internalParagraphFormat) {
       return {
         paragraphFormat: internalParagraphFormat,
         designSettings: internalDesignSettings,
-        colors: internalColors,
         theme: internalTheme
       };
     }
     return undefined;
-  }, [internalColors, internalDesignSettings, internalParagraphFormat, internalTheme]);
+  }, [internalDesignSettings, internalParagraphFormat, internalTheme]);
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: internalTheme
   }, /*#__PURE__*/_react.default.createElement(ColorSchemeContext.Provider, {
@@ -178,13 +156,11 @@ const ColorSchemeProvider = ({
   }, /*#__PURE__*/_react.default.createElement(_reactHelmet.Helmet, null, /*#__PURE__*/_react.default.createElement("link", {
     rel: "stylesheet",
     href: "https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css"
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.StyledColorSchemeProvider, {
     className: "color-scheme-provider",
     style: {
-      ...internalColors,
       ...cssVariables,
-      ...style,
-      color: 'var(--chayns-color--text)'
+      ...style
     }
   }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null)));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalColors","setInternalColors","useState","internalTheme","setInternalTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","useEffect","getDesignSettings","then","result","getParagraphFormat","newColors","newTheme","availableColors","getAvailableColorList","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","Light","Dark","keys","key","convertIconStyle","iconStyle","colorResult","themeResult","getHeadlineColorSelector","fontSize","getFontSize","contextValue","useMemo","createElement","ThemeProvider","Provider","value","Helmet","rel","href","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } from 'chayns-api';\nimport React, {\n createContext,\n FC,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\n\nenum ColorMode {\n Classic,\n Dark,\n Light,\n}\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 colors of the components\n /\n colors?: Theme;\n /\n The color mode to be used for the children\n /\n colorMode?: ColorMode;\n /\n Css variables to be added in addition to the chayns variables\n /\n cssVariables?: { [key: string]: string \| number };\n /\n The design settings of a page.\n /\n designSettings?: DesignSettings;\n /\n The general format settings.\n /\n paragraphFormat?: ParagraphFormat[];\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 The theme for the components\n */\n theme?: Theme;\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n\nexport interface ColorSchemeContextProps {\n designSettings: DesignSettings;\n paragraphFormat: ParagraphFormat[];\n colors: Theme;\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,\n colorMode,\n cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n paragraphFormat,\n designSettings,\n theme,\n colors,\n}) => {\n const [internalColors, setInternalColors] = useState<Theme>(colors ?? {});\n const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n } else if (!internalDesignSettings) {\n void getDesignSettings(siteId).then((result) => {\n setInternalDesignSettings(result);\n });\n }\n }, [designSettings, internalDesignSettings, siteId]);\n\n useEffect(() => {\n if (paragraphFormat) {\n setInternalParagraphFormat(paragraphFormat);\n } else if (!internalParagraphFormat) {\n void getParagraphFormat(siteId).then((result) => {\n setInternalParagraphFormat(result);\n });\n }\n }, [internalParagraphFormat, paragraphFormat, siteId]);\n\n useEffect(() => {\n let newColors: Theme = {};\n let newTheme: Theme = {};\n\n const availableColors = getAvailableColorList();\n\n if (!colors \|\| !theme) {\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color: color ?? internalColor,\n colorMode: colorMode ?? internalColorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n if (!theme) {\n newTheme[colorName] = hexColor;\n }\n\n if (!colors) {\n newColors[`--chayns-color--${colorName}`] = hexColor;\n }\n\n if (rgbColor) {\n if (!theme) {\n newTheme[`${colorName}-rgb`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n\n if (!colors) {\n newColors[`--chayns-color-rgb--${colorName}`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n }\n });\n }\n\n if (colors) {\n newColors = colors;\n }\n\n if (!theme) {\n switch (colorMode ?? internalColorMode) {\n case ColorMode.Light:\n newTheme.colorMode = 'light';\n break;\n case ColorMode.Dark:\n newTheme.colorMode = 'dark';\n break;\n default:\n newTheme.colorMode = 'classic';\n break;\n }\n\n if (internalDesignSettings) {\n Object.keys(internalDesignSettings).forEach((key) => {\n if (key === 'iconStyle') {\n newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n return;\n }\n\n // ToDo: Find better solution\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n newTheme[key] = internalDesignSettings[key];\n });\n }\n\n if (internalParagraphFormat) {\n const { colorResult, themeResult } =\n getHeadlineColorSelector(internalParagraphFormat);\n\n // Update chayns-colors\n Object.keys(colorResult).forEach((key) => {\n // ToDo: Find better solution\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n newColors[key] = colorResult[key];\n });\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\n // ToDo: Find better solution\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n newTheme[key] = themeResult[key];\n });\n }\n\n newTheme.fontSize = getFontSize();\n } else {\n newTheme = theme;\n }\n\n setInternalTheme(newTheme);\n setInternalColors(newColors);\n }, [\n color,\n colorMode,\n colors,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n theme,\n ]);\n\n const contextValue: ColorSchemeContextProps \| undefined = useMemo(() => {\n if (internalDesignSettings && internalParagraphFormat) {\n return {\n paragraphFormat: internalParagraphFormat,\n designSettings: internalDesignSettings,\n colors: internalColors,\n theme: internalTheme,\n };\n }\n\n return undefined;\n }, [internalColors, internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n return (\n <ThemeProvider theme={internalTheme}>\n <ColorSchemeContext.Provider value={contextValue}>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n />\n </Helmet>\n <div\n className=\"color-scheme-provider\"\n style={{\n ...internalColors,\n ...cssVariables,\n ...style,\n color: 'var(--chayns-color--text)',\n }}\n >\n {children}\n </div>\n <GlobalStyle />\n </ColorSchemeContext.Provider>\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_reactHelmet","_styledComponents","_get","_font","_ColorSchemeProvider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalTheme","setInternalTheme","useState","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","useSite","useEffect","getDesignSettings","then","result","getParagraphFormat","newTheme","availableColors","getAvailableColorList","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","Light","Dark","keys","key","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","fontSize","getFontSize","contextValue","useMemo","createElement","ThemeProvider","Provider","value","Helmet","rel","href","StyledColorSchemeProvider","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } from 'chayns-api';\nimport React, {\n createContext,\n FC,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\n\nenum ColorMode {\n Classic,\n Dark,\n Light,\n}\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 colors of the components\n /\n colors?: Theme;\n /\n The color mode to be used for the children\n /\n colorMode?: ColorMode;\n /\n Css variables to be added in addition to the chayns variables\n /\n cssVariables?: { [key: string]: string \| number };\n /\n The design settings of a page.\n /\n designSettings?: DesignSettings;\n /\n The general format settings.\n /\n paragraphFormat?: ParagraphFormat[];\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 The theme for the components\n */\n theme?: Theme;\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n\nexport interface ColorSchemeContextProps {\n designSettings: DesignSettings;\n paragraphFormat: ParagraphFormat[];\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,\n colorMode,\n cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n paragraphFormat,\n designSettings,\n theme,\n colors,\n}) => {\n const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n } else if (!internalDesignSettings) {\n void getDesignSettings(siteId).then((result) => {\n setInternalDesignSettings(result);\n });\n }\n }, [designSettings, internalDesignSettings, siteId]);\n\n useEffect(() => {\n if (paragraphFormat) {\n setInternalParagraphFormat(paragraphFormat);\n } else if (!internalParagraphFormat) {\n void getParagraphFormat(siteId).then((result) => {\n setInternalParagraphFormat(result);\n });\n }\n }, [internalParagraphFormat, paragraphFormat, siteId]);\n\n useEffect(() => {\n let newTheme: Theme = {};\n\n const availableColors = getAvailableColorList();\n\n if (!colors \|\| !theme) {\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color: color ?? internalColor,\n colorMode: colorMode ?? internalColorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n if (!theme) {\n newTheme[colorName] = hexColor;\n }\n\n if (rgbColor) {\n if (!theme) {\n newTheme[`${colorName}-rgb`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n }\n });\n }\n\n if (!theme) {\n switch (colorMode ?? internalColorMode) {\n case ColorMode.Light:\n newTheme.colorMode = 'light';\n break;\n case ColorMode.Dark:\n newTheme.colorMode = 'dark';\n break;\n default:\n newTheme.colorMode = 'classic';\n break;\n }\n\n if (internalDesignSettings) {\n Object.keys(internalDesignSettings).forEach((key) => {\n if (key === 'iconStyle') {\n newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n return;\n }\n\n // ToDo: Find better solution\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n newTheme[key] = internalDesignSettings[key];\n });\n }\n\n if (internalParagraphFormat) {\n const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\n // ToDo: Find better solution\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n newTheme[key] = themeResult[key];\n });\n }\n\n newTheme.fontSize = getFontSize();\n } else {\n newTheme = theme;\n }\n\n setInternalTheme(newTheme);\n }, [\n color,\n colorMode,\n colors,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n theme,\n ]);\n\n const contextValue: ColorSchemeContextProps \| undefined = useMemo(() => {\n if (internalDesignSettings && internalParagraphFormat) {\n return {\n paragraphFormat: internalParagraphFormat,\n designSettings: internalDesignSettings,\n theme: internalTheme,\n };\n }\n\n return undefined;\n }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n return (\n <ThemeProvider theme={internalTheme}>\n <ColorSchemeContext.Provider value={contextValue}>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n />\n </Helmet>\n <StyledColorSchemeProvider\n className=\"color-scheme-provider\"\n style={{\n ...cssVariables,\n ...style,\n }}\n >\n {children}\n </StyledColorSchemeProvider>\n <GlobalStyle />\n </ColorSchemeContext.Provider>\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js ADDED Viewed

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledColorSchemeProvider = void 0;
+var _colors = require("@chayns/colors");
+var _styledComponents = require("styled-components");
+const StyledColorSchemeProvider = exports.StyledColorSchemeProvider = _styledComponents.styled.div`
+    color: var(--chayns-color--text);
+    ${props => (0, _colors.getAvailableColorList)().map(colorName => {
+  const colorNameRgb = `${colorName}-rgb`;
+  return [`--chayns-color--${colorName}: ${props.theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${props.theme[colorNameRgb]};`];
+})}
+`;
+//# sourceMappingURL=ColorSchemeProvider.styles.js.map

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ColorSchemeProvider.styles.js","names":["_colors","require","_styledComponents","StyledColorSchemeProvider","exports","styled","div","props","getAvailableColorList","map","colorName","colorNameRgb","theme"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\n\nexport const StyledColorSchemeProvider = styled.div`\n color: var(--chayns-color--text);\n ${(props) =>\n getAvailableColorList().map((colorName: string) => {\n const colorNameRgb = `${colorName}-rgb`;\n return [\n `--chayns-color--${colorName}: ${props.theme[colorName]};`,\n `--chayns-color-rgb--${colorName}: ${props.theme[colorNameRgb]};`,\n ];\n })}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAEO,MAAME,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,wBAAM,CAACC,GAAG;AACnD;AACA,MAAOC,KAAK,IACJ,IAAAC,6BAAqB,EAAC,CAAC,CAACC,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKH,KAAK,CAACK,KAAK,CAACF,SAAS,CAAC,GAAG,EAC1D,uBAAuBA,SAAS,KAAKH,KAAK,CAACK,KAAK,CAACD,YAAY,CAAC,GAAG,CACpE;AACL,CAAC,CAAC;AACV,CAAC","ignoreList":[]}

package/lib/cjs/components/page-provider/PageProvider.js CHANGED Viewed

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = require("styled-components");
 var _pageProvider = require("../../utils/pageProvider");
@@ -29,26 +30,19 @@ const PageProvider = ({
   shouldRemovePadding,
   shouldUseUsableHeight
 }) => {
+  const {
+    runtimeEnvironment
+  } = (0, _chaynsApi.getEnvironment)();
+  const shouldUsePadding = !shouldRemovePadding && ![4, 5, 6].includes(runtimeEnvironment);
   const [usableHeight, setUsableHeight] = (0, _react.useState)(0);
-  const [padding, setPadding] = (0, _react.useState)(shouldRemovePadding ? 0 : (0, _pageProvider.getPagePadding)());
   (0, _react.useEffect)(() => {
     void (0, _pageProvider.getUsableHeight)(shouldRemovePadding).then(height => {
       setUsableHeight(height);
     });
   }, [shouldRemovePadding]);
-  (0, _react.useEffect)(() => {
-    const handleResize = () => {
-      setPadding(shouldRemovePadding ? 0 : (0, _pageProvider.getPagePadding)());
-    };
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [shouldRemovePadding]);
   return /*#__PURE__*/_react.default.createElement(_PageProvider.StyledPageProvider, {
     className: "page-provider",
-    $padding: padding,
+    $shouldUsePadding: shouldUsePadding,
     $usableHeight: shouldUseUsableHeight ? usableHeight : undefined
   }, /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.default, {
     color: color,

package/lib/cjs/components/page-provider/PageProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageProvider.js","names":["~~_react~~","~~_interopRequireWildcard~~","~~require~~","_styledComponents","_pageProvider","_ColorSchemeProvider","_interopRequireDefault","_PageProvider","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","~~usableHeight~~","~~setUsableHeight~~","~~useState~~","~~padding~~","~~setPadding~~","~~getPagePadding~~","useEffect","getUsableHeight","then","height","~~handleResize","window","addEventListener","removeEventListener","~~createElement","StyledPageProvider","className","$~~padding~~","$usableHeight","undefined","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import React, { FC, useEffect, useState, ~~type CSSProperties~~ } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { ~~getPagePadding,~~ getUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /*\n Whether the padding should be removed.\n /\n shouldRemovePadding?: boolean;\n /\n Whether the usable height should be used.\n /\n shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n , ::before, ::after {\n box-sizing: border-box;\n }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n designSettings,\n shouldRemovePadding,\n shouldUseUsableHeight,\n}) => {\n const ~~[usableHeight,~~ ~~setUsableHeight]~~ = ~~useState~~(0);\n const [~~padding~~, ~~setPadding~~] = ~~useState<CSSProperties['padding']>(\~~n ~~shouldRemovePadding~~ ? 0 : ~~getPagePadding~~()~~,\n )~~;\n\n useEffect(() => {\n void getUsableHeight(shouldRemovePadding).then((height) => {\n setUsableHeight(height);\n });\n }, [shouldRemovePadding]);\n\n useEffect(() => {\n const handleResize = () => {\n setPadding(shouldRemovePadding ? 0 : getPagePadding());\n };\n\n handleResize();\n\n window.addEventListener('resize', handleResize);\n\n return (~~) => {~~\n ~~window.removeEventListener('resize', handleResize);\n~~ ~~};\n }, [shouldRemovePadding]);\n\n return (\n~~ <StyledPageProvider\n className=\"page-provider\"\n $~~padding~~={~~padding~~}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n siteId={siteId}\n designSettings={designSettings}\n cssVariables={cssVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,~~CAAAC~~,OAAA;AACA,~~IAAAC~~,iBAAA,~~GAAAD~~,OAAA;AACA,~~IAAAE~~,aAAA,~~GAAAF~~,OAAA;AACA,~~IAAAG~~,oBAAA,GAAAC,sBAAA,~~CAAAJ~~,OAAA;AAGA,~~IAAAK~~,aAAA,~~GAAAL~~,OAAA;AAA2D,~~SAAAI~~,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,~~SAAAP~~,~~wBAAAO~~,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAa3D,MAAMW,WAAW,GAAG,IAAAC,mCAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,YAAY,GAAG,CAAC,CAAC;EACjBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,cAAc;EACdC,mBAAmB;EACnBC;AACJ,CAAC,KAAK;EACF,MAAM,~~CAACC,YAAY,EAAEC,eAAe,~~CAAC,GAAG,IAAAC,~~eAAQ~~,EAAC,CAAC~~,CAAC~~;~~EACnD~~,~~MAAM~~,~~CAACC~~,~~OAAO~~,~~EAAEC~~,~~UAAU~~,CAAC,~~GAAG~~,~~IAAAF~~,~~eAAQ~~,~~EAClCJ~~,~~mBAAmB~~,~~GAAG~~,CAAC,~~GAAG~~,~~IAAAO~~,~~4BAAc~~,~~EAAC~~,~~CAC7C,~~CAAC;~~EAED~~,~~IAAAC,gBAAS,EAAC,~~MAAM~~;IACZ~~,~~KAAK~~,~~IAAAC~~,~~6BAAe~~,~~EAACT,mBAAmB,CAAC,CAACU,IAAI,CAAEC,MAAM,IAAK;MACvDR,~~eAAe,~~CAACQ,MAAM,~~CAAC~~;IAC3B~~,~~CAAC~~,~~CAAC;EACN~~,~~CAAC~~,~~EAAE~~,~~CAACX,mBAAmB,~~CAAC,CAAC;~~EAEzB~~,~~IAAAQ~~,gBAAS,EAAC,MAAM;IACZ,~~MAAMI~~,~~YAAY~~,~~GAAGA~~,~~CAAA~~,~~KAAM;MACvBN,UAAU,CAACN,~~mBAAmB,~~GAAG,~~CAAC,~~GAAG~~,~~IAAAO~~,~~4BAAc~~,~~EAAC~~,~~CAAC,CAAC~~;~~IAC1D~~,~~CAAC;IAEDK~~,~~YAAY~~,~~CAAC,CAAC;IAEdC,~~MAAM,~~CAACC,gBAAgB,~~CAAC~~,QAAQ,EAAEF,YAAY,CAAC~~;~~IAE/C~~,~~OAAO,MAAM;MACTC,MAAM,CAACE,mBAAmB,~~CAAC,~~QAAQ,EAAEH,YAAY,~~CAAC;~~IACtD~~,CAAC~~;EACL~~,~~CAAC,~~EAAE,CAACZ,mBAAmB,CAAC,CAAC;EAEzB,~~oBACIvC~~,MAAA,~~CAAAU~~,OAAA,~~CAAA6C~~,aAAA,~~CAAChD~~,aAAA,~~CAAAiD~~,kBAAkB;IACfC,SAAS,EAAC,eAAe;IACzBC,~~QAAQ~~,~~EAAEd~~,~~OAAQ~~;~~IAClBe~~,aAAa,~~EAAEnB~~,qBAAqB,~~GAAGC~~,YAAY,~~GAAGmB~~;EAAU,~~gBAEhE5D~~,MAAA,~~CAAAU~~,OAAA,~~CAAA6C~~,aAAA,~~CAAClD~~,oBAAA,CAAAK,OAAmB;IAChBsB,KAAK,EAAEA,KAAM;IACbG,cAAc,EAAEA,cAAe;IAC/BF,SAAS,EAAEA,SAAU;IACrBI,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;~~MAAEa~~,MAAM,EAAE;IAAO,CAAC,~~GAAGb~~,KAAM;IACpED,MAAM,EAAEA,MAAO;IACfE,cAAc,EAAEA,cAAe;IAC/BJ,YAAY,EAAEA;EAAa,GAE1BH,QACgB,CAAC,~~eACtB/B~~,MAAA,~~CAAAU~~,OAAA,~~CAAA6C~~,aAAA,~~CAAC3B~~,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDE,YAAY,~~CAAC+B~~,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAArD~~,OAAA,GAE3BoB,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"PageProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_pageProvider","_ColorSchemeProvider","_interopRequireDefault","_PageProvider","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","runtimeEnvironment","getEnvironment","shouldUsePadding","includes","usableHeight","setUsableHeight","useState","useEffect","getUsableHeight","then","height","createElement","StyledPageProvider","className","$shouldUsePadding","$usableHeight","undefined","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { getEnvironment } from 'chayns-api';\nimport React, { FC, useEffect, useState } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { getUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /*\n Whether the padding should be removed.\n /\n shouldRemovePadding?: boolean;\n /\n Whether the usable height should be used.\n /\n shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n , ::before, ::after {\n box-sizing: border-box;\n }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n designSettings,\n shouldRemovePadding,\n shouldUseUsableHeight,\n}) => {\n const { runtimeEnvironment } = getEnvironment();\n const shouldUsePadding =\n !shouldRemovePadding && ![4, 5, 6].includes(runtimeEnvironment as number);\n const [usableHeight, setUsableHeight] = useState(0);\n\n useEffect(() => {\n void getUsableHeight(shouldRemovePadding).then((height) => {\n setUsableHeight(height);\n });\n }, [shouldRemovePadding]);\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $shouldUsePadding={shouldUsePadding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n siteId={siteId}\n designSettings={designSettings}\n cssVariables={cssVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/page-provider/PageProvider.styles.js CHANGED Viewed

@@ -7,13 +7,18 @@ exports.StyledPageProvider = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledPageProvider = exports.StyledPageProvider = _styledComponents.default.div`
-    padding: ${({
-  $padding
-}) => $padding};
     height: ${({
   $usableHeight
 }) => $usableHeight ? `${$usableHeight}px` : undefined};
     position: relative;
+    ${({
+  $shouldUsePadding
+}) => $shouldUsePadding ? `
+        padding: 15px 10px 20px;
+        @media screen and (min-width: 33.5em) {
+            padding: 35px 43px 30px;
+        }
+    ` : 'padding: 0px;'}
     .color-scheme-provider:first-child:not(td) {
         & > h1,

package/lib/cjs/components/page-provider/PageProvider.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageProvider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPageProvider","exports","styled","div","$~~padding~~","~~$usableHeight~~","~~undefined~~"],"sources":["../../../../src/components/page-provider/PageProvider.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\ntype StyledPageProviderProps = {\n $~~padding~~?: ~~CSSProperties['padding']~~;\n $usableHeight?: CSSProperties['height'];\n};\n\nexport const StyledPageProvider = styled.div<StyledPageProviderProps>`\n ~~padding: ${({ $padding }) => $padding};\n~~ height: ${({ $usableHeight }) => ($usableHeight ? `${$usableHeight}px` : undefined)};\n position: relative;\n\n .color-scheme-provider:first-child:not(td) {\n & > h1,\n & > .h1,\n & > h2,\n & > .h2,\n & > h3,\n & > .h3,\n & > h4,\n & > .h4,\n & > h5,\n & > .h5 {\n &:first-of-type:first-child {\n margin-top: 0;\n }\n }\n }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,~~eAAe,CAAC;EAAEC;AAAS,CAAC,KAAKA,QAAQ;AACzC,~~cAAc,CAAC;EAAEC;AAAc,CAAC,KAAMA,aAAa,GAAG,GAAGA,aAAa,IAAI,GAAGC,SAAU;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"PageProvider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPageProvider","exports","styled","div","$usableHeight","undefined","$shouldUsePadding"],"sources":["../../../../src/components/page-provider/PageProvider.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\ntype StyledPageProviderProps = {\n $shouldUsePadding?: boolean;\n $usableHeight?: CSSProperties['height'];\n};\n\nexport const StyledPageProvider = styled.div<StyledPageProviderProps>`\n height: ${({ $usableHeight }) => ($usableHeight ? `${$usableHeight}px` : undefined)};\n position: relative;\n ${({ $shouldUsePadding }) =>\n $shouldUsePadding\n ? `\n padding: 15px 10px 20px;\n @media screen and (min-width: 33.5em) {\n padding: 35px 43px 30px;\n }\n `\n : 'padding: 0px;'}\n\n .color-scheme-provider:first-child:not(td) {\n & > h1,\n & > .h1,\n & > h2,\n & > .h2,\n & > h3,\n & > .h3,\n & > h4,\n & > .h4,\n & > h5,\n & > .h5 {\n &:first-of-type:first-child {\n margin-top: 0;\n }\n }\n }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,cAAc,CAAC;EAAEC;AAAc,CAAC,KAAMA,aAAa,GAAG,GAAGA,aAAa,IAAI,GAAGC,SAAU;AACvF;AACA,MAAM,CAAC;EAAEC;AAAkB,CAAC,KACpBA,iBAAiB,GACX;AACd;AACA;AACA;AACA;AACA,KAAK,GACS,eAAe;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/search-box/SearchBox.js CHANGED Viewed

@@ -153,6 +153,14 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       groupName,
       list: list.filter(item => !(newMatchingItems.length === 1 && item.text === value))
     }));
+    console.debug('SearchBox activeList', {
+      lists,
+      groups,
+      value,
+      newLists,
+      newMatchingItems,
+      filteredMatchingListItems
+    });
     setMatchingListsItems(filteredMatchingListItems);
     return newLists;
   }, [groups, lists, shouldAddInputToList, value]);
@@ -560,6 +568,12 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     };
   }, [handleKeyPress]);
   (0, _react.useEffect)(() => {
+    console.debug('SearchBox useEffect', {
+      newContainer,
+      isAnimating,
+      matchingListsItemsLength: matchingListsItems.length,
+      content
+    });
     if (!newContainer) {
       return;
     }