with `text-align: center`\r\n display: 'inline-block',\r\n // Fit inside accordion\r\n maxWidth: '100%',\r\n maxHeight: '100%',\r\n // Remove alignment of image inside this wrapper, align the wrapper instead ^\r\n textAlign: 'initial',\r\n});\r\n","/**\r\n * @ComponentFor EditorBlock\r\n */\r\nimport React from 'react';\r\nimport { epiPropertyValue, EpiProperty, supportsComponentProp } from '@avensia/scope-episerver';\r\nimport { applyClassName, styled } from '@glitz/react';\r\nimport { media } from '@glitz/core';\r\nimport { alpha, delta, epsilon, figma, large, mediaMinMedium, sourceSansPro } from 'Shared/Style';\r\nimport { HtmlSettingsProvider } from 'Shared/Partials/PropertyTypes/Html';\r\nimport { ThemeTextColor } from 'Shared/Sigvaris/ThemeTextColor';\r\nimport { CampaignBrandTheme } from 'Shared/Sigvaris/CampaignBrandTheme';\r\nimport BlockBase from 'Shared/BlockBase';\r\nimport { Spacing } from '../BlockSpacing';\r\nimport { H2 } from 'Shared/Generic';\r\nimport { EditorBlockContext } from './EditorBlockContext';\r\nimport { useIsMobile } from 'Shared/use-viewport';\r\nfunction EditorBlock(props) {\r\n const isMobile = useIsMobile();\r\n const isTwoColumns = epiPropertyValue(props.isTwoColumns);\r\n const title = epiPropertyValue(props.title);\r\n const textColor = epiPropertyValue(props.textColor);\r\n const titleAlignment = epiPropertyValue(props.titleAlignment);\r\n const bgColor = epiPropertyValue(props.backgroundColor);\r\n const desktopLeftRight = epiPropertyValue(props.desktopLeftRight);\r\n const mobileLeftRight = epiPropertyValue(props.mobileLeftRight);\r\n const desktopTopBottom = epiPropertyValue(props.desktopTopBottom);\r\n const mobileTopBottom = epiPropertyValue(props.mobileTopBottom);\r\n const textStyle = {\r\n color: `${ThemeTextColor(textColor)}`,\r\n textAlign: titleAlignment,\r\n };\r\n const blockSpacing = Spacing(desktopLeftRight, desktopTopBottom, mobileLeftRight, mobileTopBottom);\r\n const backgroundColorStyle = Object.assign({ backgroundColor: `${CampaignBrandTheme(bgColor)}`, height: '100%' }, blockSpacing);\r\n const twoColumnStyle = Object.assign(Object.assign({}, (isTwoColumns && Object.assign({ columnCount: 1, columnGap: large }, media(mediaMinMedium, {\r\n columnCount: 2,\r\n })))), { color: `${ThemeTextColor(textColor)}` });\r\n const bodyStyle = Object.assign({ height: '100%', display: 'flex', flexDirection: 'column' }, ((desktopTopBottom !== 'none' || mobileTopBottom !== 'none') && {\r\n marginBottom: 0,\r\n }));\r\n return (React.createElement(EditorBlockContext.Provider, { value: {\r\n desktopLeftRight: desktopLeftRight,\r\n mobileLeftRight: mobileLeftRight,\r\n isInEditorBlock: true,\r\n } },\r\n React.createElement(BlockBase, { id: \"editor-block\", css: bodyStyle },\r\n React.createElement(Body, { css: backgroundColorStyle },\r\n !props.noShowTitle && title && React.createElement(Heading, { css: textStyle }, title),\r\n React.createElement(HtmlSettingsProvider, { twoColumn: isTwoColumns, themeType: bgColor },\r\n React.createElement(styled.Div, { css: twoColumnStyle },\r\n React.createElement(EpiProperty, { component: BodyBase, propertyComponentProps: {\r\n keepImageSizes: !isMobile\r\n ? epiPropertyValue(props.displayImage)\r\n : epiPropertyValue(props.displayImageMobile),\r\n }, for: props.body })))))));\r\n}\r\nconst StyledEditorBlock = styled(applyClassName(EditorBlock), {\r\n height: '100%',\r\n overflow: 'hidden',\r\n});\r\nexport default supportsComponentProp(StyledEditorBlock);\r\nconst Heading = styled(H2, {\r\n margin: {\r\n bottom: alpha,\r\n },\r\n});\r\nconst Body = styled.div(sourceSansPro(epsilon), {\r\n lineHeight: 1.45,\r\n});\r\nconst BodyBase = styled.div({\r\n font: {\r\n size: theme => (theme.isCompact ? figma : delta),\r\n },\r\n});\r\n","import * as style from 'Shared/Style';\r\nimport { media } from '@glitz/core';\r\nconst _HUGE_PADDING = 166;\r\nconst _LARGE_PADDING = 80;\r\nconst _MEDIUM_PADDING = 40;\r\nconst _SMALL_PADDING = 16;\r\nfunction getPaddingStyle(spacing) {\r\n if (spacing === 'huge') {\r\n return _HUGE_PADDING;\r\n }\r\n else if (spacing === 'large') {\r\n return _LARGE_PADDING;\r\n }\r\n else if (spacing === 'medium') {\r\n return _MEDIUM_PADDING;\r\n }\r\n else if (spacing === 'small') {\r\n return _SMALL_PADDING;\r\n }\r\n else {\r\n return 0;\r\n }\r\n}\r\nexport const Spacing = (desktopLeftRight, desktopTopBottom, mobileLeftRight, mobileTopBottom) => {\r\n return Object.assign({ paddingLeft: getPaddingStyle(mobileLeftRight), paddingRight: getPaddingStyle(mobileLeftRight), paddingTop: getPaddingStyle(mobileTopBottom), paddingBottom: getPaddingStyle(mobileTopBottom) }, media(style.mediaMinMedium, {\r\n paddingLeft: getPaddingStyle(desktopLeftRight),\r\n paddingRight: getPaddingStyle(desktopLeftRight),\r\n paddingTop: getPaddingStyle(desktopTopBottom),\r\n paddingBottom: getPaddingStyle(desktopTopBottom),\r\n }));\r\n};\r\nexport const BlockSpacing = (desktopTop, mobileTop, desktopBottom, mobileBottom, desktopLeft, mobileLeft, desktopRight, mobileRight) => {\r\n return Object.assign({ paddingTop: getPaddingStyle(mobileTop), paddingBottom: getPaddingStyle(mobileBottom), paddingLeft: getPaddingStyle(mobileLeft), paddingRight: getPaddingStyle(mobileRight) }, media(style.mediaMinMedium, {\r\n paddingTop: getPaddingStyle(desktopTop),\r\n paddingBottom: getPaddingStyle(desktopBottom),\r\n paddingLeft: getPaddingStyle(desktopLeft),\r\n paddingRight: getPaddingStyle(desktopRight),\r\n }));\r\n};\r\nexport const BlockHorizontalSpacing = (desktopLeft, mobileLeft, desktopRight, mobileRight) => {\r\n return Object.assign({ paddingLeft: getPaddingStyle(mobileLeft), paddingRight: getPaddingStyle(mobileRight) }, media(style.mediaMinMedium, {\r\n paddingLeft: getPaddingStyle(desktopLeft),\r\n paddingRight: getPaddingStyle(desktopRight),\r\n }));\r\n};\r\n","import { white, grey80, titleBlockBlack } from 'Shared/Style';\r\nimport { CampaignBrandContext } from 'Pages/Campaign/CampaignBrandPageContext';\r\nimport { useContext } from 'react';\r\nimport { useCurrentTheme } from 'SiteLayout/Theming';\r\nexport const ThemeTextColor = (textColor) => {\r\n const { themeColor, themeColorLight, themeColorDark } = useContext(CampaignBrandContext);\r\n const siteTheme = useCurrentTheme();\r\n // If campaign color is set\r\n if (themeColor) {\r\n switch (textColor) {\r\n case 'theme':\r\n return themeColor;\r\n case 'themeLight':\r\n return themeColorLight;\r\n case 'themeDark':\r\n return themeColorDark;\r\n case 'white':\r\n return white;\r\n case 'grey':\r\n return grey80;\r\n case 'black':\r\n return titleBlockBlack;\r\n }\r\n }\r\n // Fallback text color\r\n switch (textColor) {\r\n case white:\r\n return white;\r\n case 'grey':\r\n return grey80;\r\n case 'black':\r\n return titleBlockBlack;\r\n case 'theme':\r\n return siteTheme.colors.primary;\r\n case 'themeLight':\r\n return siteTheme.colors.secondary;\r\n case 'themeDark':\r\n return siteTheme.colors.darkTextTheme;\r\n case 'lightBlue':\r\n return siteTheme.colors.lightBlue;\r\n case 'darkBlue':\r\n return siteTheme.colors.darkBlue;\r\n }\r\n};\r\n","import { CampaignBrandContext } from 'Pages/Campaign/CampaignBrandPageContext';\r\nimport { useContext } from 'react';\r\nimport { black, lightGrey, white } from 'Shared/Style';\r\nimport { useCurrentTheme } from 'SiteLayout/Theming';\r\nexport const CampaignBrandTheme = (color) => {\r\n const { themeColor, themeColorLight, themeColorDark } = useContext(CampaignBrandContext);\r\n const siteTheme = useCurrentTheme();\r\n if (themeColor) {\r\n switch (color) {\r\n case 'theme':\r\n return themeColor;\r\n case 'themeLight':\r\n return themeColorLight;\r\n case 'themeDark':\r\n return themeColorDark;\r\n }\r\n }\r\n switch (color) {\r\n case 'theme':\r\n return siteTheme.colors.primary;\r\n case 'themeLight':\r\n return siteTheme.colors.secondary;\r\n case 'themeDark':\r\n return siteTheme.colors.darkTextTheme;\r\n case 'lightBlue':\r\n return siteTheme.colors.lightBlue;\r\n case 'darkBlue':\r\n return siteTheme.colors.darkBlue;\r\n case 'white':\r\n return white;\r\n case 'grey':\r\n return lightGrey;\r\n case 'black':\r\n return black;\r\n }\r\n};\r\n","import { createContext } from 'react';\r\nexport const EditorBlockContext = createContext({\r\n desktopLeftRight: null,\r\n mobileLeftRight: null,\r\n isInEditorBlock: false,\r\n});\r\n"],"sourceRoot":""}