{"version":3,"file":"5370-d05497497db73b9d1273.js","mappings":"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","sources":["webpack://royal-college-radiologists/./src/img/branding-graphics/spoked-wheel.svg","webpack://royal-college-radiologists/./src/stories/Widgets/SideTabbedContent/SideTabbedContent.styles.ts","webpack://royal-college-radiologists/./src/stories/Widgets/SideTabbedContent/SideTabbedContent.tsx"],"sourcesContent":["var _style, _path, _path2, _path3, _path4, _path5;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgSpokedWheel(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    viewBox: \"0 0 136.7 142.9\"\n  }, props), _style || (_style = /*#__PURE__*/React.createElement(\"style\", null, \".spoked-wheel_svg__st0,.spoked-wheel_svg__st1{fill:none;stroke:#2e54ff;stroke-width:.25;stroke-miterlimit:10}.spoked-wheel_svg__st1{stroke:#ff3a53}\")), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    className: \"spoked-wheel_svg__st0\",\n    d: \"M86.3 40.3c2.3 1.3 5 1.4 7.3.5l20.5-8.2c4.9-2 10.7-.1 13.4 4.6 2.7 4.7 1.5 10.7-2.7 13.9l-17.4 13.7c-1.9 1.5-3.2 3.9-3.2 6.6 0 2.7 1.2 5 3.2 6.6l17.4 13.7c4.2 3.3 5.4 9.2 2.7 13.9s-8.5 6.6-13.4 4.6L93.6 102c-2.3-.9-5-.8-7.3.5s-3.7 3.6-4.1 6l-3.1 21.9c-.8 5.3-5.3 9.3-10.7 9.3s-10-4-10.7-9.3l-3.1-21.9c-.4-2.4-1.8-4.7-4.1-6s-5-1.4-7.3-.5l-20.5 8.2c-4.9 2-10.7.1-13.4-4.6S7.7 95 11.8 91.7L29.3 78c1.9-1.5 3.2-3.9 3.2-6.6 0-2.7-1.2-5-3.2-6.6L11.8 51.2C7.7 47.9 6.4 42 9.2 37.3s8.5-6.6 13.4-4.6l20.5 8.2c2.3.9 5 .8 7.3-.5s3.7-3.6 4.1-6l3.1-21.9c.8-5.3 5.3-9.3 10.7-9.3 5.5 0 10 4 10.7 9.3l3.1 21.9c.5 2.3 1.9 4.6 4.2 5.9z\"\n  })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n    className: \"spoked-wheel_svg__st1\",\n    d: \"M83.5 38.9c2.4 1.1 5.1 1 7.3-.1l19.8-10c4.7-2.4 10.6-1 13.8 3.5 3.1 4.5 2.4 10.5-1.5 14.1l-16.2 15.1c-1.8 1.7-2.8 4.2-2.6 6.8.2 2.7 1.7 4.9 3.8 6.3l18.5 12.1c4.4 2.9 6.2 8.7 3.9 13.7-2.3 5-7.9 7.3-13 5.8l-21.2-6.4c-2.4-.7-5-.4-7.2 1.1s-3.4 3.9-3.5 6.4l-1.2 22.1c-.3 5.3-4.4 9.7-9.9 10.2-5.4.5-10.3-3.2-11.5-8.3l-5-21.6c-.6-2.4-2.2-4.5-4.6-5.7-2.4-1.1-5.1-1-7.3.1l-19.8 10c-4.7 2.4-10.6 1-13.8-3.5s-2.4-10.5 1.5-14.1L30 81.4c1.8-1.7 2.8-4.2 2.6-6.8-.2-2.7-1.7-4.9-3.8-6.3L10.3 56.2c-4.4-2.9-6.2-8.7-3.9-13.7s7.9-7.3 13-5.8l21.2 6.4c2.4.7 5 .4 7.2-1.1s3.4-3.9 3.5-6.4l1.2-22.1c.3-5.3 4.4-9.7 9.9-10.2s10.3 3.2 11.5 8.3l5 21.6c.6 2.4 2.2 4.6 4.6 5.7z\"\n  })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n    className: \"spoked-wheel_svg__st0\",\n    d: \"M80.6 37.7c2.5.9 5.2.5 7.3-.8l18.8-11.7c4.5-2.8 10.5-1.9 14 2.2 3.5 4.2 3.3 10.2-.2 14.2l-14.8 16.5c-1.7 1.8-2.5 4.4-2 7 .5 2.6 2.1 4.7 4.3 5.9l19.5 10.4c4.7 2.5 6.9 8.1 5.1 13.3s-7.2 8-12.4 6.9l-21.7-4.5c-2.4-.5-5 .1-7.1 1.8-2 1.7-3.1 4.2-3 6.7l.7 22.1c.2 5.3-3.6 10.1-9 11-5.4.9-10.5-2.2-12.2-7.3l-6.9-21c-.8-2.4-2.6-4.3-5.1-5.2s-5.2-.5-7.3.8L30 117.6c-4.5 2.8-10.5 1.9-14-2.2s-3.3-10.2.2-14.2L31 84.7c1.7-1.8 2.5-4.4 2-7-.5-2.6-2.1-4.7-4.3-5.9L9.2 61.3C4.5 58.8 2.3 53.2 4.1 48s7.2-8 12.4-6.9l21.7 4.5c2.4.5 5-.1 7.1-1.8s3.1-4.2 3-6.7L47.6 15c-.2-5.3 3.6-10.1 9-11S67 6.4 68.7 11.4l6.9 21c.7 2.4 2.5 4.4 5 5.3z\"\n  })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n    className: \"spoked-wheel_svg__st0\",\n    d: \"M77.7 36.7c2.6.7 5.2.1 7.2-1.4L102.6 22c4.2-3.2 10.3-2.8 14.2 1s4.2 9.9 1 14.2L104.4 55c-1.5 2-2.1 4.6-1.4 7.2.7 2.6 2.5 4.5 4.8 5.5l20.4 8.7c4.9 2.1 7.6 7.5 6.2 12.8-1.4 5.3-6.5 8.6-11.8 8l-22-2.6c-2.5-.3-5 .5-6.9 2.4-1.9 1.9-2.7 4.4-2.4 6.9l2.6 22c.6 5.3-2.7 10.3-8 11.8-5.3 1.4-10.7-1.3-12.8-6.2l-8.7-20.4c-1-2.3-2.9-4.1-5.5-4.8s-5.2-.1-7.2 1.4L34 121c-4.2 3.2-10.3 2.8-14.2-1-3.9-3.9-4.2-9.9-1-14.2l13.3-17.7c1.5-2 2.1-4.6 1.4-7.2-.7-2.6-2.5-4.5-4.8-5.5L8.5 66.5C3.6 64.4.9 59 2.3 53.7s6.5-8.6 11.8-8l22 2.6c2.5.3 5-.5 6.9-2.4 1.9-1.9 2.7-4.4 2.4-6.9l-2.6-22c-.6-5.3 2.7-10.3 8-11.8s10.7 1.3 12.8 6.2L72.1 32c1 2.2 3 4.1 5.6 4.7z\"\n  })), _path5 || (_path5 = /*#__PURE__*/React.createElement(\"path\", {\n    className: \"spoked-wheel_svg__st0\",\n    d: \"M74.6 36.1c2.6.5 5.2-.4 7-2l16.5-14.8c4-3.5 10-3.7 14.2-.2s5 9.5 2.2 14l-11.7 18.8c-1.3 2.1-1.7 4.8-.8 7.3s2.9 4.3 5.2 5.1l21 6.9c5 1.7 8.2 6.8 7.3 12.2-.9 5.4-5.7 9.1-11 9l-22.1-.7c-2.5-.1-5 .9-6.7 3-1.7 2-2.3 4.7-1.8 7.1l4.5 21.7c1.1 5.2-1.8 10.5-6.9 12.4-5.1 1.9-10.8-.4-13.3-5.1L68 111.1c-1.2-2.2-3.3-3.8-5.9-4.3s-5.2.4-7 2l-16.5 14.8c-4 3.5-10 3.7-14.2.2-4.2-3.5-5-9.5-2.2-14L33.9 91c1.3-2.1 1.7-4.8.8-7.3s-2.9-4.3-5.2-5.1l-21-6.9c-5-1.7-8.2-6.8-7.3-12.2s5.7-9.1 11-9l22.1.7c2.5.1 5-.9 6.7-3s2.3-4.7 1.8-7.1l-4.5-21.7C37 14.4 39.8 9.1 45 7.2s10.8.4 13.3 5.1l10.4 19.5c1.2 2.2 3.3 3.8 5.9 4.3z\"\n  })));\n}\nexport default SvgSpokedWheel;","import { transition } from '@helpers/animate';\r\nimport brand from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport { ButtonReset } from '@helpers/global';\r\nimport { baseGrid } from '@helpers/grid';\r\nimport { Device, from, until } from '@helpers/media';\r\nimport { contentStyles, h2, h3 } from '@helpers/typography';\r\nimport SectionWrapper from '@stories/Components/Global/SectionWrapper/SectionWrapper';\r\nimport SectionWrapperStyles from '@stories/Components/Global/SectionWrapper/SectionWrapper.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled(SectionWrapper) `\r\n  overflow: hidden;\r\n\r\n  ${SectionWrapperStyles.Inner} {\r\n    position: relative;\r\n  }\r\n\r\n  ${SectionWrapperStyles.SiteWide} {\r\n    ${baseGrid};\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      margin-top: ${fluid(64, 82)};\r\n    }\r\n  }\r\n`;\r\nconst Tabs = styled.div `\r\n  display: none;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 1 / span 6;\r\n    grid-row: 1 / span 1;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: ${fluid(26, 30)};\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    grid-column: 2 / span 4;\r\n  }\r\n`;\r\nconst Tab = styled.button `\r\n  ${transition('transform', 0.5)};\r\n  ${ButtonReset};\r\n  ${h3};\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  color: var(--fgColour);\r\n  text-align: left;\r\n  white-space: nowrap;\r\n  transition-delay: 100ms;\r\n  justify-self: auto;\r\n  margin-right: auto;\r\n  white-space: break-spaces;\r\n\r\n  > svg {\r\n    ${transition('transform, opacity')};\r\n\r\n    opacity: 0;\r\n    transform: translateX(-50%);\r\n    display: block;\r\n    height: ${fluid(12, 15)};\r\n    width: 25px;\r\n    margin: 0 0 0 ${fluid(16, 20)};\r\n  }\r\n\r\n  &.focus-ring,\r\n  &:hover,\r\n  &[data-active='true'] {\r\n    > svg {\r\n      opacity: 1;\r\n      transform: none;\r\n    }\r\n  }\r\n\r\n  /** \r\n    Add 1 column of left space to the button using translate.\r\n    Uses min to get the smallest value from 12% of the viewport width (minus site padding)\r\n    and 12% of the maximum site width, and adds gutter width\r\n  */\r\n  &[data-active='true'] {\r\n    margin-right: 0;\r\n    transform: translateX(\r\n      min(\r\n        calc((((100vw - (var(--sitePadding)) * 2) * 0.12)) + var(--gutterWidth)),\r\n        calc(((var(--siteWidth) + (var(--sitePadding)) * 2) * 0.12) + var(--gutterWidth))\r\n      )\r\n    );\r\n  }\r\n`;\r\nconst Divider = styled.div `\r\n  grid-column: 1 / span 1;\r\n  grid-row: 1 / span 1;\r\n  border-left: 1px solid ${brand.secondary.red};\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 7 / span 1;\r\n\r\n    border-left: 0;\r\n    border-right: 1px solid var(--fgColour);\r\n  }\r\n`;\r\nconst ContentWrapper = styled.div `\r\n  ${transition('opacity, transform', 0.66)};\r\n\r\n  grid-column: 2 / span 11;\r\n  grid-row: 1 / span 1;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: ${fluid(14, 18)};\r\n  background-color: var(--bgColour);\r\n\r\n  &[data-active='false'] {\r\n    opacity: 0;\r\n    transform: translateX(-15%);\r\n    pointer-events: none;\r\n    transition-duration: 300ms;\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    grid-column: 8 / span 5;\r\n  }\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    grid-column: 8 / span 4;\r\n  }\r\n`;\r\nconst Title = styled.h2 `\r\n  ${transition('opacity, transform')};\r\n  ${h2};\r\n\r\n  color: ${brand.secondary.red};\r\n  margin: 0;\r\n  transition-delay: 500ms;\r\n\r\n  ${ContentWrapper}[data-active='false'] & {\r\n    opacity: 0;\r\n    transform: translateX(-15%);\r\n  }\r\n`;\r\nconst Content = styled.div `\r\n  ${transition('opacity, transform')};\r\n  ${contentStyles};\r\n\r\n  color: var(--fgColour);\r\n  transition-delay: 650ms;\r\n\r\n  ${ContentWrapper}[data-active='false'] & {\r\n    opacity: 0;\r\n    transform: translateX(-15%);\r\n  }\r\n`;\r\nconst ButtonWrapper = styled.div `\r\n  ${transition('opacity, transform')};\r\n\r\n  margin: ${fluid(12, 24)} 0 0;\r\n  transition-delay: 800ms;\r\n\r\n  ${ContentWrapper}[data-active='false'] & {\r\n    opacity: 0;\r\n    transform: translateX(-15%);\r\n  }\r\n`;\r\nconst ControlsContainer = styled.div `\r\n  grid-column: 1 / span 12;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  gap: ${fluid(20, 40)};\r\n  margin: ${fluid(40, 90)} 0 0;\r\n\r\n  @media ${from(Device.DesktopLarge)} {\r\n    grid-column: 2 / span 10;\r\n  }\r\n`;\r\nconst ButtonsWrapper = styled.div `\r\n  display: flex;\r\n  gap: ${fluid(10, 12)};\r\n`;\r\nconst WheelWrapper = styled.div `\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  height: 190px;\r\n  aspect-ratio: 1;\r\n  transform: translate(-33%, 45%);\r\n\r\n  > svg {\r\n    ${transition('transform', 0.66)};\r\n\r\n    display: block;\r\n    height: 100%;\r\n    transform: rotate(var(--rotation, 0deg));\r\n\r\n    @media ${until(Device.TabletLarge)} {\r\n      /* Majority of paths */\r\n      .spoked-wheel_svg__st0,\r\n      /* Single highlight path */\r\n      .spoked-wheel_svg__st1 {\r\n        stroke-width: 0.75;\r\n      }\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    top: 0;\r\n    bottom: auto;\r\n    height: 100%;\r\n    transform: translate(-66%, 0%);\r\n  }\r\n\r\n  @media ${from(Device.Desktop)} {\r\n    transform: translate(-50%, 0%);\r\n  }\r\n`;\r\nconst SideTabbedContentStyles = {\r\n    ButtonsWrapper,\r\n    Container,\r\n    Content,\r\n    ContentWrapper,\r\n    ControlsContainer,\r\n    Title,\r\n    Divider,\r\n    ButtonWrapper,\r\n    Tabs,\r\n    Tab,\r\n    WheelWrapper,\r\n};\r\nexport default SideTabbedContentStyles;\r\n","import { getSvgFromSystem, SystemIcon } from '@helpers/systemIcons';\r\nimport SvgWheel from '@img/branding-graphics/spoked-wheel.svg';\r\nimport { ArrowButton, LinkButton } from '@stories/Components/Buttons/GeneralButton/Button';\r\nimport CarouselCount from '@stories/Components/General/CarouselCount/CarouselCount';\r\nimport * as React from 'react';\r\nimport S from './SideTabbedContent.styles';\r\nconst SideTabbedContent = (props) => {\r\n    const [active, setActive] = React.useState(0);\r\n    const [rotation, setRotation] = React.useState(0);\r\n    React.useEffect(() => {\r\n        updateRotation();\r\n    }, [active]);\r\n    if (!props.items) {\r\n        return null;\r\n    }\r\n    return (React.createElement(S.Container, { variant: props.variant },\r\n        React.createElement(S.WheelWrapper, { style: { '--rotation': `${rotation}deg` } },\r\n            React.createElement(SvgWheel, null)),\r\n        React.createElement(S.Tabs, null, props.items.map((item, i) => (React.createElement(S.Tab, { key: `${item.id}-tab`, \"data-active\": i === active, onClick: () => setActive(i) },\r\n            item.title,\r\n            getSvgFromSystem(SystemIcon.ArrowRight))))),\r\n        React.createElement(S.Divider, null),\r\n        props.items.map((item, i) => (React.createElement(S.ContentWrapper, { key: `${item.id}-content`, \"data-active\": i === active },\r\n            React.createElement(S.Title, null, item.title),\r\n            React.createElement(S.Content, { dangerouslySetInnerHTML: { __html: item.content } }),\r\n            item.cta && (React.createElement(S.ButtonWrapper, null,\r\n                React.createElement(LinkButton, { branding: 'textOnly', href: item.cta.url, target: item.cta.target, title: item.cta.text ?? `View ${item.title}` })))))),\r\n        React.createElement(S.ControlsContainer, null,\r\n            React.createElement(S.ButtonsWrapper, null,\r\n                React.createElement(ArrowButton, { onClick: () => setActive(active - 1), disabled: active === 0, \"aria-label\": \"Previous Slide\" }),\r\n                React.createElement(ArrowButton, { onClick: () => setActive(active + 1), disabled: active === props.items.length - 1, \"aria-label\": \"Next Slide\" })),\r\n            React.createElement(CarouselCount, { current: active + 1, total: props.items.length }))));\r\n    function updateRotation() {\r\n        const base = initialRotation();\r\n        setRotation(base + 17 * active);\r\n    }\r\n    function initialRotation() {\r\n        switch (props.items.length) {\r\n            case 2:\r\n                return 25;\r\n            case 3:\r\n                return 16;\r\n            case 4:\r\n            default:\r\n                return 7;\r\n        }\r\n    }\r\n};\r\nexport default SideTabbedContent;\r\n"],"names":["_style","_path","_path2","_path3","_path4","_path5","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","this","props","viewBox","className","d","Container","styled","SectionWrapper","withConfig","displayName","componentId","SectionWrapperStyles","Inner","SiteWide","baseGrid","from","Device","TabletLarge","fluid","Tabs","div","Desktop","Tab","button","transition","ButtonReset","h3","Divider","brand","secondary","red","ContentWrapper","DesktopLarge","Title","h2","Content","contentStyles","ButtonWrapper","ControlsContainer","ButtonsWrapper","WheelWrapper","until","active","setActive","React","rotation","setRotation","base","items","initialRotation","updateRotation","S","variant","style","SvgWheel","map","item","id","onClick","title","getSvgFromSystem","SystemIcon","ArrowRight","_item$cta$text","dangerouslySetInnerHTML","__html","content","cta","LinkButton","branding","href","url","text","ArrowButton","disabled","CarouselCount","current","total"],"sourceRoot":""}