@royaloperahouse/harmonic 0.15.0-a → 0.15.0-c
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.
- package/dist/components/molecules/Paywall/Paywall.styles.d.ts +4 -0
- package/dist/harmonic.cjs.development.js +16 -15
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +16 -15
- package/dist/harmonic.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,6 +5,10 @@ export declare const Button: import("styled-components").StyledComponent<import(
|
|
|
5
5
|
textColor: "primary-black";
|
|
6
6
|
}, "textColor" | "borderColor" | "hoveredColor" | "pressedColor">;
|
|
7
7
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
+
export declare const Description: import("styled-components").StyledComponent<({ className, html }: {
|
|
9
|
+
className?: string | undefined;
|
|
10
|
+
html: string;
|
|
11
|
+
}) => import("react").JSX.Element, any, {}, never>;
|
|
8
12
|
export declare const Heading: import("styled-components").StyledComponent<({ children, size, em, color, serif, hierarchy, tag, className, ...props }: import("../../../types/typography").HarmonicHeaderProps) => import("react").DOMElement<{
|
|
9
13
|
defaultChecked?: boolean | undefined;
|
|
10
14
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
@@ -11054,10 +11054,10 @@ var BodyContentTextContainer = function BodyContentTextContainer(_ref) {
|
|
|
11054
11054
|
var className = _ref.className,
|
|
11055
11055
|
html = _ref.html;
|
|
11056
11056
|
return /*#__PURE__*/React__default.createElement(TextContainer$1, {
|
|
11057
|
+
className: className,
|
|
11057
11058
|
tag: "div",
|
|
11058
11059
|
size: "large",
|
|
11059
11060
|
"data-testid": "text-container",
|
|
11060
|
-
className: className,
|
|
11061
11061
|
dangerouslySetInnerHTML: {
|
|
11062
11062
|
__html: addTypographyClasses(html)
|
|
11063
11063
|
}
|
|
@@ -11100,7 +11100,7 @@ var BodyContent = function BodyContent(_ref2) {
|
|
|
11100
11100
|
}, gridItemOrContent);
|
|
11101
11101
|
};
|
|
11102
11102
|
|
|
11103
|
-
var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$r;
|
|
11103
|
+
var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
|
|
11104
11104
|
var color = 'primary-black';
|
|
11105
11105
|
var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
11106
11106
|
borderColor: color,
|
|
@@ -11109,17 +11109,18 @@ var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
|
|
|
11109
11109
|
textColor: color
|
|
11110
11110
|
})(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
|
|
11111
11111
|
var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
|
|
11112
|
+
var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
|
|
11112
11113
|
var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
|
|
11113
11114
|
serif: true,
|
|
11114
11115
|
size: 'medium'
|
|
11115
|
-
})(
|
|
11116
|
+
})(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11116
11117
|
var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
|
|
11117
11118
|
size: 'large'
|
|
11118
|
-
})(
|
|
11119
|
-
var SignInLink = /*#__PURE__*/styled__default.a(
|
|
11119
|
+
})(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
11120
|
+
var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
|
|
11120
11121
|
var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
|
|
11121
11122
|
size: 'large'
|
|
11122
|
-
})(
|
|
11123
|
+
})(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11123
11124
|
|
|
11124
11125
|
var Paywall = function Paywall(_ref) {
|
|
11125
11126
|
var className = _ref.className,
|
|
@@ -11132,7 +11133,7 @@ var Paywall = function Paywall(_ref) {
|
|
|
11132
11133
|
signInLinkUrl = _ref.signInLinkUrl;
|
|
11133
11134
|
return /*#__PURE__*/React__default.createElement(Container$7, {
|
|
11134
11135
|
className: className
|
|
11135
|
-
}, /*#__PURE__*/React__default.createElement(Heading, null, title), !!intro && /*#__PURE__*/React__default.createElement(Intro, null, intro), /*#__PURE__*/React__default.createElement(
|
|
11136
|
+
}, /*#__PURE__*/React__default.createElement(Heading, null, title), !!intro && /*#__PURE__*/React__default.createElement(Intro, null, intro), /*#__PURE__*/React__default.createElement(Description, {
|
|
11136
11137
|
html: description
|
|
11137
11138
|
}), /*#__PURE__*/React__default.createElement(Button$2, {
|
|
11138
11139
|
href: buttonUrl,
|
|
@@ -11308,14 +11309,14 @@ var Navigation = function Navigation(_ref) {
|
|
|
11308
11309
|
})))))));
|
|
11309
11310
|
};
|
|
11310
11311
|
|
|
11311
|
-
var _templateObject$1j, _templateObject2$10, _templateObject3$P, _templateObject4$I, _templateObject5$C, _templateObject6$s, _templateObject7$
|
|
11312
|
+
var _templateObject$1j, _templateObject2$10, _templateObject3$P, _templateObject4$I, _templateObject5$C, _templateObject6$s, _templateObject7$m;
|
|
11312
11313
|
var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
|
|
11313
11314
|
var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
|
|
11314
11315
|
var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
|
|
11315
11316
|
var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11316
11317
|
var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
|
|
11317
11318
|
var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
|
|
11318
|
-
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$
|
|
11319
|
+
var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: 6px;\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
|
|
11319
11320
|
|
|
11320
11321
|
var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
|
|
11321
11322
|
var Footer = function Footer(_ref) {
|
|
@@ -11654,7 +11655,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
11654
11655
|
})))) : null))));
|
|
11655
11656
|
};
|
|
11656
11657
|
|
|
11657
|
-
var _templateObject$1l, _templateObject2$12, _templateObject3$R, _templateObject4$K, _templateObject6$t, _templateObject7$
|
|
11658
|
+
var _templateObject$1l, _templateObject2$12, _templateObject3$R, _templateObject4$K, _templateObject6$t, _templateObject7$n, _templateObject8$f, _templateObject9$9, _templateObject0$9;
|
|
11658
11659
|
var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
|
|
11659
11660
|
var sticky = _ref.sticky;
|
|
11660
11661
|
return sticky ? 'sticky' : 'initial';
|
|
@@ -11666,7 +11667,7 @@ var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$R || (_
|
|
|
11666
11667
|
}, devices.tablet, devices.mobile);
|
|
11667
11668
|
var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
|
|
11668
11669
|
var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
|
|
11669
|
-
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
11670
|
+
var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
|
|
11670
11671
|
var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
|
|
11671
11672
|
var theme = _ref3.theme;
|
|
11672
11673
|
return theme.colors.primaryButtonReverseBg;
|
|
@@ -11997,7 +11998,7 @@ var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
|
|
|
11997
11998
|
return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
|
|
11998
11999
|
};
|
|
11999
12000
|
|
|
12000
|
-
var _templateObject$1q, _templateObject2$16, _templateObject3$U, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$
|
|
12001
|
+
var _templateObject$1q, _templateObject2$16, _templateObject3$U, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$g, _templateObject9$a;
|
|
12001
12002
|
var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n \n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n }\n }\n"])), function (_ref) {
|
|
12002
12003
|
var imagesHeightDesktop = _ref.imagesHeightDesktop;
|
|
12003
12004
|
return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n " + getImageSlideStyles(imagesHeightDesktop) + "\n }\n }\n }";
|
|
@@ -12017,7 +12018,7 @@ var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$E || (_te
|
|
|
12017
12018
|
return isDescriptionPresent && 'margin: 20px 0';
|
|
12018
12019
|
});
|
|
12019
12020
|
var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n"])));
|
|
12020
|
-
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12021
|
+
var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
|
|
12021
12022
|
var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
|
|
12022
12023
|
var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
|
|
12023
12024
|
var active = _ref5.active;
|
|
@@ -12182,14 +12183,14 @@ var Carousel = function Carousel(_ref) {
|
|
|
12182
12183
|
}, children))));
|
|
12183
12184
|
};
|
|
12184
12185
|
|
|
12185
|
-
var _templateObject$1r, _templateObject2$17, _templateObject3$V, _templateObject4$O, _templateObject5$F, _templateObject6$v, _templateObject7$
|
|
12186
|
+
var _templateObject$1r, _templateObject2$17, _templateObject3$V, _templateObject4$O, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$h, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1;
|
|
12186
12187
|
var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
|
|
12187
12188
|
var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12188
12189
|
var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
12189
12190
|
var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$O || (_templateObject4$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12190
12191
|
var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$F || (_templateObject5$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12191
12192
|
var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
|
|
12192
|
-
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$
|
|
12193
|
+
var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$p || (_templateObject7$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
|
|
12193
12194
|
var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
|
|
12194
12195
|
var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
12195
12196
|
var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
|