@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/themes/pike/components/molecules/slideshow.js

@@ -1,68 +1,54 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.slideshow = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const custom_1 = require("../../custom");
 // static variables
-var slideshowSpacing = custom_1.custom.spacing.x2;
-var slideshowButtonSize = 32;
-var slideshowPaginationSize = 12;
-var slideshowPaginationSpacing = slideshowSpacing + slideshowPaginationSize;
+const slideshowSpacing = custom_1.custom.spacing.x2;
+const slideshowButtonSize = 32;
+const slideshowPaginationSize = 12;
+const slideshowPaginationSpacing = slideshowSpacing + slideshowPaginationSize;
 // CSS in JS style script for the Slideshow component
-var slideshowStyleScript = function (props) {
-    var _a;
-    var _b, _c, _d, _e;
+const slideshowStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_b = props === null || props === void 0 ? void 0 : props.theme) === null || _b === void 0 ? void 0 : _b.variables;
-    var activeColors = custom_1.custom.utils.activeColors(((_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.secondary) || custom_1.custom.colors.secondary);
-    var buttonColor = activeColors[0];
-    var fontColor = activeColors[1];
+    const variables = props?.theme?.variables;
+    const activeColors = custom_1.custom.utils.activeColors(variables?.colors?.secondary || custom_1.custom.colors.secondary);
+    const buttonColor = activeColors[0];
+    const fontColor = activeColors[1];
     // slideshow styles
-    var slideshowStyles = (0, react_1.css)({
+    const slideshowStyles = (0, react_1.css)({
         position: 'relative',
         width: '100%',
         minWidth: '1px',
         '&:has(.ss__slideshow__pagination)': {
-            paddingBottom: "".concat(slideshowPaginationSpacing, "px"),
+            paddingBottom: `${slideshowPaginationSpacing}px`,
             '.ss__slideshow__navigation--prev, .ss__slideshow__navigation--next': {
-                top: "-".concat(slideshowPaginationSpacing, "px"),
+                top: `-${slideshowPaginationSpacing}px`,
             },
         },
         '.ss__slideshow__container': {
             width: 'auto',
-            margin: "0 -".concat(slideshowSpacing / 2, "px"),
+            margin: `0 -${slideshowSpacing / 2}px`,
         },
         '.ss__slideshow__navigation--prev, .ss__slideshow__navigation--next': {
-            width: "".concat(slideshowButtonSize, "px"),
-            height: "".concat(slideshowButtonSize, "px"),
+            width: `${slideshowButtonSize}px`,
+            height: `${slideshowButtonSize}px`,
             top: 0,
             bottom: 0,
             margin: 'auto',
             transform: 'none',
-            '.ss__button': (_a = {
-                    flexFlow: 'column nowrap',
-                    padding: 0,
-                    width: '100%',
-                    height: '100%',
-                    lineHeight: 1,
-                    color: fontColor
-                },
-                _a["&, &:hover, &:not(.ss__button--disabled):hover, &.ss__button--disabled"] = {
-                    border: "1px solid ".concat(buttonColor),
+            '.ss__button': {
+                flexFlow: 'column nowrap',
+                padding: 0,
+                width: '100%',
+                height: '100%',
+                lineHeight: 1,
+                color: fontColor,
+                [`&, &:hover, &:not(.ss__button--disabled):hover, &.ss__button--disabled`]: {
+                    border: `1px solid ${buttonColor}`,
                     backgroundColor: buttonColor,
                 },
-                _a),
+            },
         },
         '.ss__slideshow__navigation--prev': {
             '.ss__button .ss__icon': {
@@ -81,11 +67,20 @@ var slideshowStyleScript = function (props) {
             right: 0,
             margin: 'auto',
             width: 'auto',
-            gap: "".concat(custom_1.custom.spacing.x1, "px"),
-            '.ss__slideshow__dot': __assign({ opacity: 1, flex: '0 1 auto', width: "".concat(slideshowPaginationSize, "px"), height: "".concat(slideshowPaginationSize, "px"), lineHeight: "".concat(slideshowPaginationSize, "px"), minWidth: '1px', margin: 0 }, custom_1.custom.styles.box('', 0, false)),
+            gap: `${custom_1.custom.spacing.x1}px`,
+            '.ss__slideshow__dot': {
+                opacity: 1,
+                flex: '0 1 auto',
+                width: `${slideshowPaginationSize}px`,
+                height: `${slideshowPaginationSize}px`,
+                lineHeight: `${slideshowPaginationSize}px`,
+                minWidth: '1px',
+                margin: 0,
+                ...custom_1.custom.styles.box('', 0, false),
+            },
             '.ss__slideshow__dot--active': {
-                backgroundColor: (_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.primary,
-                borderColor: (_e = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _e === void 0 ? void 0 : _e.primary,
+                backgroundColor: variables?.colors?.primary,
+                borderColor: variables?.colors?.primary,
             },
         },
     });
@@ -100,7 +95,7 @@ exports.slideshow = {
             centerInsufficientSlides: false,
         },
         'slideshow button icon': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
+            size: `${custom_1.custom.sizes.icon12}px`,
         },
         'slideshow button.prev icon': {
             icon: custom_1.custom.icons.arrowLeft,

package/dist/cjs/components/src/themes/pike/components/molecules/sortBy.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sortBy = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the SortBy component
-var sortByStyleScript = function (props) {
-    var _a;
+const sortByStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.variables;
+    const variables = props?.theme?.variables;
     // sortBy styles
-    var sortByStyles = (0, react_1.css)({});
+    const sortByStyles = (0, react_1.css)({});
     return sortByStyles;
 };
 // SortBy component props

package/dist/cjs/components/src/themes/pike/components/molecules/swatches.js

@@ -1,46 +1,33 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.swatches = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const custom_1 = require("../../custom");
 // static variables
-var swatchesSpacing = custom_1.custom.spacing.x1;
-var swatchesSize = 28;
-var swatchesSelector = 'ss__swatches__slideshow__swatch';
-var darkSelector = "&.".concat(swatchesSelector, "--dark, &:has(.").concat(swatchesSelector, "__inner--grey), &:has(.").concat(swatchesSelector, "__inner--gray)");
-var imageSelector = '&:has(.ss__image)';
-var urlSelector = '&[style*="url"]';
-var styleSelector = '&[style], &:has(.ss__image)';
+const swatchesSpacing = custom_1.custom.spacing.x1;
+const swatchesSize = 28;
+const swatchesSelector = 'ss__swatches__slideshow__swatch';
+const darkSelector = `&.${swatchesSelector}--dark, &:has(.${swatchesSelector}__inner--grey), &:has(.${swatchesSelector}__inner--gray)`;
+const imageSelector = '&:has(.ss__image)';
+const urlSelector = '&[style*="url"]';
+const styleSelector = '&[style], &:has(.ss__image)';
 // CSS in JS style script for the Swatches component
-var swatchesStyleScript = function (props) {
-    var _a, _b, _c, _d;
-    var _e, _f;
+const swatchesStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.variables;
-    var activeColors = custom_1.custom.utils.activeColors(((_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.secondary) || custom_1.custom.colors.secondary);
-    var activeColor = activeColors[0];
-    var fontColor = activeColors[1];
+    const variables = props?.theme?.variables;
+    const activeColors = custom_1.custom.utils.activeColors(variables?.colors?.secondary || custom_1.custom.colors.secondary);
+    const activeColor = activeColors[0];
+    const fontColor = activeColors[1];
     // shared styles
-    var sharedStyles = (0, react_1.css)({});
+    const sharedStyles = (0, react_1.css)({});
     // swatches carousel styles
-    var swatchesCarouselStyles = (0, react_1.css)([
+    const swatchesCarouselStyles = (0, react_1.css)([
         sharedStyles,
         {
             '.ss__slideshow': {
                 display: 'flex',
                 flexFlow: 'row wrap',
-                gap: "".concat(swatchesSpacing, "px"),
+                gap: `${swatchesSpacing}px`,
                 '& > *': {
                     minWidth: '1px',
                     flex: '1 1 100%',
@@ -50,46 +37,67 @@ var swatchesStyleScript = function (props) {
                 },
                 '.ss__slideshow__container': {
                     flex: '1 1 0%',
-                    margin: "0 -".concat(swatchesSpacing / 2, "px"),
+                    margin: `0 -${swatchesSpacing / 2}px`,
                     '.ss__slideshow__track': {
                         '.ss__slideshow__slide': {
-                            '.ss__swatches__slideshow__swatch': (_a = {
+                            '.ss__swatches__slideshow__swatch': {
+                                position: 'relative',
+                                height: `100%`,
+                                aspectRatio: 1,
+                                border: 0,
+                                '.ss__swatches__slideshow__swatch__inner': {
                                     position: 'relative',
-                                    height: "100%",
-                                    aspectRatio: 1,
-                                    border: 0,
-                                    '.ss__swatches__slideshow__swatch__inner': __assign(__assign({ position: 'relative', width: '100%', height: '100%' }, custom_1.custom.styles.box(undefined, "".concat(custom_1.custom.spacing.x1, "px"))), (_b = { '&, .ss__swatches__slideshow__swatch__value': {
-                                                overflow: 'hidden',
-                                            }, '.ss__swatches__slideshow__swatch__value': {
-                                                maxWidth: '100%',
-                                                maxHeight: '100%',
-                                                textAlign: 'center',
-                                                fontSize: '10px',
-                                                lineHeight: 1,
-                                            } }, _b[styleSelector] = {
+                                    width: '100%',
+                                    height: '100%',
+                                    ...custom_1.custom.styles.box(undefined, `${custom_1.custom.spacing.x1}px`),
+                                    '&, .ss__swatches__slideshow__swatch__value': {
+                                        overflow: 'hidden',
+                                    },
+                                    '.ss__swatches__slideshow__swatch__value': {
+                                        maxWidth: '100%',
+                                        maxHeight: '100%',
+                                        textAlign: 'center',
+                                        fontSize: '10px',
+                                        lineHeight: 1,
+                                    },
+                                    [styleSelector]: {
                                         border: 0,
                                         backgroundColor: 'transparent',
-                                        '&:before, &:after': __assign({ content: '""', display: 'block', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }, custom_1.custom.styles.borderRadius()),
+                                        '&:before, &:after': {
+                                            content: '""',
+                                            display: 'block',
+                                            position: 'absolute',
+                                            top: 0,
+                                            bottom: 0,
+                                            left: 0,
+                                            right: 0,
+                                            ...custom_1.custom.styles.borderRadius(),
+                                        },
                                         '&:before': {
-                                            border: "3px solid ".concat(custom_1.custom.colors.white),
+                                            border: `3px solid ${custom_1.custom.colors.white}`,
                                             margin: '1px',
                                             opacity: 0,
                                         },
                                         '&:after': {
-                                            border: "1px solid ".concat(custom_1.custom.colors.black),
+                                            border: `1px solid ${custom_1.custom.colors.black}`,
                                             opacity: 0.15,
                                         },
-                                        '.ss__swatches__slideshow__swatch__value': __assign({}, custom_1.custom.styles.srOnly()),
-                                    }, _b["".concat(urlSelector, ", ").concat(imageSelector)] = {
+                                        '.ss__swatches__slideshow__swatch__value': {
+                                            ...custom_1.custom.styles.srOnly(),
+                                        },
+                                    },
+                                    [`${urlSelector}, ${imageSelector}`]: {
                                         '&:before': {
                                             margin: 0,
                                             borderWidth: '4px',
                                         },
-                                    }, _b[urlSelector] = {
+                                    },
+                                    [urlSelector]: {
                                         backgroundRepeat: 'no-repeat !important',
                                         backgroundSize: 'cover !important',
                                         backgroundPosition: 'center !important',
-                                    }, _b[imageSelector] = {
+                                    },
+                                    [imageSelector]: {
                                         '&:before, &:after': {
                                             zIndex: 3,
                                         },
@@ -112,59 +120,66 @@ var swatchesStyleScript = function (props) {
                                         '.ss__swatches__slideshow__swatch__value': {
                                             zIndex: 2,
                                         },
-                                    }, _b))
+                                    },
                                 },
-                                _a[darkSelector] = {
+                                [darkSelector]: {
                                     '.ss__swatches__slideshow__swatch__inner': {
                                         color: fontColor,
                                     },
                                 },
-                                _a['&.ss__swatches__slideshow__swatch--disabled, &.ss__swatches__slideshow__swatch--unavailable'] = {
+                                '&.ss__swatches__slideshow__swatch--disabled, &.ss__swatches__slideshow__swatch--unavailable': {
                                     opacity: 1,
                                     '&, &:before, &:after, *': {
                                         pointerEvents: 'unset',
                                         cursor: 'not-allowed !important',
                                     },
-                                    '&:before': __assign({ maxWidth: "".concat(swatchesSize - 4, "px"), top: 0, bottom: 0, zIndex: 3, margin: 'auto 0', borderTop: "2px solid ".concat(custom_1.custom.colors.white), outlineColor: custom_1.custom.colors.gray02 }, custom_1.custom.styles.borderRadius(3)),
+                                    '&:before': {
+                                        maxWidth: `${swatchesSize - 4}px`,
+                                        top: 0,
+                                        bottom: 0,
+                                        zIndex: 3,
+                                        margin: 'auto 0',
+                                        borderTop: `2px solid ${custom_1.custom.colors.white}`,
+                                        outlineColor: custom_1.custom.colors.gray02,
+                                        ...custom_1.custom.styles.borderRadius(3),
+                                    },
                                     '.ss__swatches__slideshow__swatch__inner': {
                                         opacity: 0.65,
                                     },
                                 },
-                                _a['&.ss__swatches__slideshow__swatch--selected'] = (_c = {
-                                        '.ss__swatches__slideshow__swatch__inner': (_d = {
-                                                borderColor: activeColor,
-                                                backgroundColor: activeColor,
-                                                color: fontColor
-                                            },
-                                            _d[styleSelector] = {
-                                                border: 0,
-                                                backgroundColor: 'transparent',
-                                                '&:before': {
-                                                    opacity: 1,
-                                                },
-                                                '&:after': {
-                                                    opacity: 0.3,
-                                                },
+                                '&.ss__swatches__slideshow__swatch--selected': {
+                                    '.ss__swatches__slideshow__swatch__inner': {
+                                        borderColor: activeColor,
+                                        backgroundColor: activeColor,
+                                        color: fontColor,
+                                        [styleSelector]: {
+                                            border: 0,
+                                            backgroundColor: 'transparent',
+                                            '&:before': {
+                                                opacity: 1,
                                             },
-                                            _d['.ss__swatches__slideshow__swatch__value'] = {
-                                                fontWeight: custom_1.custom.fonts.weight01,
+                                            '&:after': {
+                                                opacity: 0.3,
                                             },
-                                            _d)
+                                        },
+                                        '.ss__swatches__slideshow__swatch__value': {
+                                            fontWeight: custom_1.custom.fonts.weight01,
+                                        },
                                     },
-                                    _c[darkSelector] = {
+                                    [darkSelector]: {
                                         '.ss__swatches__slideshow__swatch__inner': {
                                             color: fontColor,
                                         },
                                     },
-                                    _c),
-                                _a),
+                                },
+                            },
                         },
                     },
                 },
                 '.ss__slideshow__navigation--prev, .ss__slideshow__navigation--next': {
                     flex: '0 1 auto',
-                    width: "".concat(swatchesSize, "px"),
-                    height: "".concat(swatchesSize, "px"),
+                    width: `${swatchesSize}px`,
+                    height: `${swatchesSize}px`,
                     margin: 0,
                     position: 'static',
                 },
@@ -175,15 +190,15 @@ var swatchesStyleScript = function (props) {
         },
     ]);
     // swatches grid styles
-    var swatchesGridStyles = (0, react_1.css)([
+    const swatchesGridStyles = (0, react_1.css)([
         sharedStyles,
         {
             '.ss__grid .ss__grid__options .ss__grid__option:not(.ss__grid__show-more-wrapper)': {
-                maxWidth: "".concat(swatchesSize, "px"),
+                maxWidth: `${swatchesSize}px`,
             },
         },
     ]);
-    return (props === null || props === void 0 ? void 0 : props.type) == 'grid' ? swatchesGridStyles : swatchesCarouselStyles;
+    return props?.type == 'grid' ? swatchesGridStyles : swatchesCarouselStyles;
 };
 // Swatches component props
 exports.swatches = {

package/dist/cjs/components/src/themes/pike/components/molecules/terms.js

@@ -1,76 +1,67 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.terms = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const custom_1 = require("../../custom");
 // CSS in JS style script for the Terms component
-var termsStyleScript = function (props) {
-    var _a;
-    var _b, _c, _d, _e, _f;
+const termsStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_b = props === null || props === void 0 ? void 0 : props.theme) === null || _b === void 0 ? void 0 : _b.variables;
-    var desktopBp = (_c = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _c === void 0 ? void 0 : _c.desktop;
+    const variables = props?.theme?.variables;
+    const desktopBp = variables?.breakpoints?.desktop;
     // shared styles
-    var sharedStyles = (0, react_1.css)((_a = {
-            width: '100%',
-            '.ss__terms__title': {
-                '&, h5': {
-                    padding: 0,
-                },
-                h5: __assign(__assign({}, custom_1.custom.styles.headerText((_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.secondary, '14px')), { lineHeight: 1.2 }),
+    const sharedStyles = (0, react_1.css)({
+        width: '100%',
+        '.ss__terms__title': {
+            '&, h5': {
+                padding: 0,
             },
-            '.ss__terms__options': {
-                '&, .ss__terms__option': {
-                    listStyle: 'none',
-                    padding: 0,
-                    margin: 0,
+            h5: {
+                ...custom_1.custom.styles.headerText(variables?.colors?.secondary, '14px'),
+                lineHeight: 1.2,
+            },
+        },
+        '.ss__terms__options': {
+            '&, .ss__terms__option': {
+                listStyle: 'none',
+                padding: 0,
+                margin: 0,
+            },
+            '.ss__terms__option': {
+                '&, a': {
+                    color: variables?.colors?.primary,
                 },
-                '.ss__terms__option': {
-                    '&, a': {
-                        color: (_e = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _e === void 0 ? void 0 : _e.primary,
-                    },
-                    a: {
-                        fontSize: '14px',
-                        em: {
-                            fontStyle: 'normal',
-                            fontSize: 'inherit',
-                            fontWeight: 'inherit',
-                        },
+                a: {
+                    fontSize: '14px',
+                    em: {
+                        fontStyle: 'normal',
+                        fontSize: 'inherit',
+                        fontWeight: 'inherit',
                     },
                 },
-                '.ss__terms__option--active': {
-                    'a, a em': __assign({}, custom_1.custom.styles.activeText((_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.primary)),
+            },
+            '.ss__terms__option--active': {
+                'a, a em': {
+                    ...custom_1.custom.styles.activeText(variables?.colors?.primary),
                 },
-            }
+            },
         },
-        _a["".concat(custom_1.custom.utils.getBp(desktopBp))] = {
+        [`${custom_1.custom.utils.getBp(desktopBp)}`]: {
             '.ss__terms__title h5, .ss__terms__options .ss__terms__option a': {
                 fontSize: '16px',
             },
         },
-        _a));
+    });
     // terms horizontal styles
-    var termsHorizontalStyles = (0, react_1.css)([
+    const termsHorizontalStyles = (0, react_1.css)([
         sharedStyles,
         {
             '.ss__terms__title h5': {
-                margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
+                margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
             },
             '.ss__terms__options': {
                 flexFlow: 'row wrap',
                 justifyContent: 'flex-start',
-                gap: "".concat(custom_1.custom.spacing.x1, "px ").concat(custom_1.custom.spacing.x4, "px"),
+                gap: `${custom_1.custom.spacing.x1}px ${custom_1.custom.spacing.x4}px`,
                 '.ss__terms__option': {
                     flex: '0 1 auto',
                     minWidth: '1px',
@@ -82,31 +73,31 @@ var termsStyleScript = function (props) {
         },
     ]);
     // terms verticl styles
-    var termsVerticalStyles = (0, react_1.css)([
+    const termsVerticalStyles = (0, react_1.css)([
         sharedStyles,
         {
             '.ss__terms__title h5': {
-                margin: "0 0 ".concat(custom_1.custom.spacing.x2, "px 0"),
+                margin: `0 0 ${custom_1.custom.spacing.x2}px 0`,
             },
             '.ss__terms__options': {
                 display: 'block',
                 '.ss__terms__option': {
                     a: {
-                        padding: "".concat(custom_1.custom.spacing.x2, "px 0"),
-                        transition: "padding-left 0.5s ease",
+                        padding: `${custom_1.custom.spacing.x2}px 0`,
+                        transition: `padding-left 0.5s ease`,
                         fontSize: '16px',
                     },
                 },
                 '.ss__terms__option--active': {
                     a: {
-                        paddingLeft: "".concat(custom_1.custom.spacing.x4, "px"),
+                        paddingLeft: `${custom_1.custom.spacing.x4}px`,
                         backgroundColor: custom_1.custom.colors.gray01,
                     },
                 },
             },
         },
     ]);
-    return (props === null || props === void 0 ? void 0 : props.vertical) ? termsVerticalStyles : termsHorizontalStyles;
+    return props?.vertical ? termsVerticalStyles : termsHorizontalStyles;
 };
 // Terms component props
 exports.terms = {