krl-alfred 1.66.0 → 1.67.1
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/Agreement/Agreement.styled.js +1 -1
- package/dist/components/Banner/layouts/layout1/index.js +3 -3
- package/dist/components/Banner/layouts/layout1/layout1.styled.js +1 -1
- package/dist/components/Carousel/Carousel.styled.js +1 -1
- package/dist/components/ContentBox/ContentBox.js +20 -0
- package/dist/components/ContentBox/ContentBox.styled.js +22 -0
- package/dist/components/ContentBox/index.js +8 -0
- package/dist/components/ContentBox/props.js +4 -0
- package/dist/components/ContentBox/stories/ContentBox.stories.js +22 -0
- package/dist/components/Icon/Cargo2.js +1 -1
- package/dist/components/Icon/PoweredByQnbLogo.js +5 -5
- package/dist/components/Icon/Securitywithtik.js +1 -1
- package/dist/components/Icon/TimeCircle.js +1 -1
- package/dist/components/ListGroup/ListGroup.js +12 -0
- package/dist/components/ListGroup/ListGroup.styled.js +15 -0
- package/dist/components/ListGroup/index.js +8 -0
- package/dist/components/ListGroup/props.js +2 -0
- package/dist/components/ListGroup/stories/ListGroup.stories.js +31 -0
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/dist/components/ProductCard/layouts/Standart.js +1 -1
- package/dist/components/ProductCard/stories/ProductCard.stories.js +2 -2
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/SuggestBox/SuggestBox.js +3 -2
- package/dist/components/SuggestBox/SuggestBox.styled.js +2 -1
- package/dist/components/SuggestBox/stories/SuggestBox.stories.js +2 -1
- package/dist/components/ValueProposition/layouts/horizontal/Horizontal.styled.js +2 -2
- package/dist/components/ValueProposition/layouts/horizontal/index.js +1 -1
- package/dist/components/ValueProposition/layouts/squareSm/SquareSm.styled.js +1 -1
- package/dist/constants/devices.js +1 -1
- package/dist/index.js +5 -1
- package/dist/jsons/Banners.js +7 -0
- package/dist/jsons/ListGroup.json +26 -0
- package/package.json +1 -1
- package/dist/components/Banner/Banner.styled.js +0 -14
|
@@ -9,5 +9,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.AgreementStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n\n .agreement {\n padding: ", ";\n border-radius: 8px;\n border: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .top {\n align-items: center;\n gap: 8px;\n display: flex;\n box-sizing: border-box;\n width: 100%;\n\n .icon {\n cursor: pointer;\n }\n\n .title {\n width: 100%;\n color: ", ";\n }\n }\n\n .content {\n margin-top: 16px;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n padding: 8px 16px;\n max-height: 88px;\n box-sizing: border-box;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n color: var(--dark);\n\n div:not(.text) {\n margin: 0 auto;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .error {\n margin-top: 8px;\n display: flex;\n align-items: center;\n\n p {\n margin: 0;\n color: var(--red);\n }\n\n svg {\n margin-right: 8px;\n }\n }\n
|
|
12
|
+
exports.AgreementStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n\n .agreement {\n padding: ", ";\n border-radius: 8px;\n border: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .top {\n align-items: center;\n gap: 8px;\n display: flex;\n box-sizing: border-box;\n width: 100%;\n\n .icon {\n cursor: pointer;\n }\n\n .title {\n width: 100%;\n color: ", ";\n }\n }\n\n .content {\n margin-top: 16px;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n padding: 8px 16px;\n max-height: 88px;\n box-sizing: border-box;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n color: var(--dark);\n\n div:not(.text) {\n margin: 0 auto;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .error {\n margin-top: 8px;\n display: flex;\n align-items: center;\n\n p {\n margin: 0 !important;\n color: var(--red);\n }\n\n svg {\n margin-right: 8px;\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-bottom: 24px;\n\n .agreement {\n padding: ", ";\n border-radius: 8px;\n border: ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .top {\n align-items: center;\n gap: 8px;\n display: flex;\n box-sizing: border-box;\n width: 100%;\n\n .icon {\n cursor: pointer;\n }\n\n .title {\n width: 100%;\n color: ", ";\n }\n }\n\n .content {\n margin-top: 16px;\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-5);\n padding: 8px 16px;\n max-height: 88px;\n box-sizing: border-box;\n overflow-y: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n color: var(--dark);\n\n div:not(.text) {\n margin: 0 auto;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .error {\n margin-top: 8px;\n display: flex;\n align-items: center;\n\n p {\n margin: 0 !important;\n color: var(--red);\n }\n\n svg {\n margin-right: 8px;\n }\n }\n"])), function (props) { return props.hasError ? "15px" : "16px"; }, function (props) { return props.hasError ? "2px solid var(--red)" : "1px solid var(--dark-opacity-5)"; }, function (props) { return props.hasError ? ' var(--red)' : ' var(--dark)'; });
|
|
13
13
|
var templateObject_1;
|
|
@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
18
|
var react_1 = require("react");
|
|
19
|
-
var
|
|
19
|
+
var layout1_styled_1 = require("./layout1.styled");
|
|
20
20
|
var Button_1 = __importDefault(require("../../../Button"));
|
|
21
21
|
var Icon_1 = __importDefault(require("../../../Icon/Icon"));
|
|
22
22
|
var classnames_1 = __importDefault(require("classnames"));
|
|
@@ -35,10 +35,10 @@ var Index = function (props) {
|
|
|
35
35
|
};
|
|
36
36
|
var next = function () { return sliderRef.slickNext(); };
|
|
37
37
|
var previous = function () { return sliderRef.slickPrev(); };
|
|
38
|
-
return ((0, jsx_runtime_1.jsxs)(
|
|
38
|
+
return ((0, jsx_runtime_1.jsxs)(layout1_styled_1.BannerStyled, { children: [(0, jsx_runtime_1.jsx)("div", { className: "inner", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_slick_1.default, __assign({}, settings, { ref: function (slider) {
|
|
39
39
|
sliderRef = slider;
|
|
40
40
|
}, children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
|
|
41
|
-
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(item === null || item === void 0 ? void 0 : item.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title headline-extra-bold-32-39", children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.description) && (0, jsx_runtime_1.jsx)("p", { className: "description title-regular-16-19", children: item === null || item === void 0 ? void 0 : item.description }), (item === null || item === void 0 ? void 0 : item.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: item === null || item === void 0 ? void 0 : item.buttonText })] }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: item === null || item === void 0 ? void 0 : item.img }), (0, jsx_runtime_1.jsxs)("div", { className: "textMobile title-medium-16-19", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: item === null || item === void 0 ? void 0 : item.shortDesc } }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] })] }) }, key));
|
|
41
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "item", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text", children: [(item === null || item === void 0 ? void 0 : item.title) && (0, jsx_runtime_1.jsx)("strong", { className: "title headline-extra-bold-32-39", children: item === null || item === void 0 ? void 0 : item.title }), (item === null || item === void 0 ? void 0 : item.description) && (0, jsx_runtime_1.jsx)("p", { className: "description title-regular-16-19", children: item === null || item === void 0 ? void 0 : item.description }), (item === null || item === void 0 ? void 0 : item.buttonText) && (0, jsx_runtime_1.jsx)(Button_1.default, { size: "big", variant: "primary", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: item === null || item === void 0 ? void 0 : item.buttonText })] }), (0, jsx_runtime_1.jsx)("div", { className: "img", children: item === null || item === void 0 ? void 0 : item.img }), (0, jsx_runtime_1.jsxs)("div", { className: "textMobile title-medium-16-19", onClick: item === null || item === void 0 ? void 0 : item.onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "titleSm", dangerouslySetInnerHTML: { __html: item === null || item === void 0 ? void 0 : item.shortDesc } }), item.hasRightArrow && (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" })] })] }) }, key));
|
|
42
42
|
}) })) }) }), props.showThumbnails && ((0, jsx_runtime_1.jsxs)("div", { className: "thumbnailSlider", children: [(0, jsx_runtime_1.jsx)("button", { className: "navigation prev", onClick: previous, children: (0, jsx_runtime_1.jsx)(Icon_1.default, { width: "24px", height: "24px", name: "ArrowLeft" }) }), (0, jsx_runtime_1.jsx)("div", { className: "thumbnailInner", children: data.map(function (item, key) {
|
|
43
43
|
var _a;
|
|
44
44
|
return ((0, jsx_runtime_1.jsx)("div", { onClick: function () { return sliderRef.slickGoTo(key); }, className: (0, classnames_1.default)("thumbnailItem", (_a = {}, _a["active"] = key === activeSlide, _a)), children: item === null || item === void 0 ? void 0 : item.thumbnail }, key));
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BannerStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../../../constants/devices");
|
|
13
|
-
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n
|
|
13
|
+
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"], ["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .inner {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden; \n }\n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n\n img {\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.CarouselStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"], ["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
13
|
+
exports.CarouselStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n > * {\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"], ["\n max-width: 100%;\n margin: 0 auto;\n box-sizing: border-box;\n position: relative;\n\n .inner {\n border-radius: 0.5rem;\n position: relative;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n box-sizing: border-box;\n }\n\n .item {\n padding: 0 0;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n aspect-ratio: 1/1;\n box-sizing: border-box;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n .img {\n text-align: end;\n padding: 1rem;\n > * {\n display: block !important;\n }\n img {\n max-height: 100%;\n max-width: 100%;\n margin: 0 auto;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 2.5rem 2.5rem 1rem;\n text-align: center;\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n \n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 0;\n gap: 0 1.5rem;\n @media only screen and ", " {\n gap: 0 1rem;\n }\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 0;\n max-width: 96px;\n aspect-ratio: 1/1;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n cursor: pointer;\n transition: all .2s;\n width: 32px;\n height: 32px;\n border: 1px solid var(--dark-opacity-10);\n background-color: #fff;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%) translateX(-50%);\n z-index: 5;\n &:before{\n display: none;\n }\n &:is(.next){\n right: 0;\n left: auto;\n transform: translateY(-50%) translateX(50%);\n }\n &:is(.prev){\n \n }\n svg {\n path {\n stroke: var(--grey-40);\n }\n }\n @media only screen and ", " {\n display: none;\n }\n }\n .slick-prev, .slick-next{\n display: none !important;\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
|
+
var ContentBox_styled_1 = require("./ContentBox.styled");
|
|
16
|
+
var ContentBox = function (props) {
|
|
17
|
+
return ((0, jsx_runtime_1.jsx)(ContentBox_styled_1.ContentBoxStyled, __assign({}, props, { children: props.children })));
|
|
18
|
+
};
|
|
19
|
+
ContentBox.defaultProps = {};
|
|
20
|
+
exports.default = ContentBox;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.ContentBoxStyled = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
exports.ContentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", ";\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n"], ["\n padding: ", ";\n border-radius: 8px;\n border: 1px solid var(--dark-opacity-10);\n background: #fff;\n"])), function (props) {
|
|
13
|
+
switch (props.size) {
|
|
14
|
+
case 'small':
|
|
15
|
+
return "1.5rem";
|
|
16
|
+
case 'medium':
|
|
17
|
+
return "2rem";
|
|
18
|
+
default:
|
|
19
|
+
return "1.5rem";
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
var templateObject_1;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var ContentBox_1 = require("./ContentBox");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ContentBox_1).default; } });
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Default = void 0;
|
|
7
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
var ContentBox_1 = __importDefault(require("../ContentBox"));
|
|
9
|
+
var props_1 = require("../props");
|
|
10
|
+
exports.default = {
|
|
11
|
+
title: 'Components/ContentBox',
|
|
12
|
+
component: ContentBox_1.default,
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
argTypes: {
|
|
15
|
+
size: { control: 'select', options: props_1.sizes },
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
exports.Default = {
|
|
19
|
+
args: {
|
|
20
|
+
children: (0, jsx_runtime_1.jsx)("div", { children: "Content Box Children" })
|
|
21
|
+
},
|
|
22
|
+
};
|
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgCargo2 = function (props) { return ((0, jsx_runtime_1.
|
|
39
|
+
var SvgCargo2 = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: (0, jsx_runtime_1.jsx)("g", { id: "Frame 188", children: (0, jsx_runtime_1.jsxs)("g", { id: "Group 1", children: [(0, jsx_runtime_1.jsx)("path", { id: "Vector 22", d: "M13.3276 4.97657H1.6662C1.3356 4.97657 1.02344 5.1969 1.02344 5.5275V16.2707C1.02344 16.6013 1.3356 16.8216 1.6662 16.8216H13.2358C13.5443 16.8216 13.8786 16.671 13.8786 16.3625V5.61932C13.8786 5.28872 13.6582 4.97657 13.3276 4.97657Z", fill: "white", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("path", { id: "Vector 26", d: "M20.6386 9.10938L16.0814 9.10938C15.9391 9.10938 15.8047 9.18605 15.8047 9.3011V12.5902C15.8047 12.7053 15.9391 12.782 16.0814 12.782L22.3945 12.782C22.4406 12.782 22.776 12.7983 22.6712 12.5902C22.2887 11.8303 21.2417 9.88799 20.9184 9.3011C20.8577 9.191 20.7809 9.10938 20.6386 9.10938Z", fill: "white", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("path", { id: "Vector 24", d: "M20.3502 8.09766H15.1117C14.9016 8.09766 14.7031 8.25992 14.7031 8.50339V16.415C14.7031 16.6585 14.9016 16.8208 15.1117 16.8208H22.4667C22.6628 16.8208 22.8753 16.7098 22.8753 16.4827V13.2989C22.8753 12.9884 22.8029 12.682 22.6646 12.404C21.9868 11.0408 21.2622 9.54933 20.7634 8.50339C20.6586 8.28363 20.5604 8.09766 20.3502 8.09766Z", fill: "white", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("path", { id: "Ellipse 6", d: "M6.2434 16.8209C6.2434 17.6238 5.59254 18.2747 4.78967 18.2747C3.9868 18.2747 3.33594 17.6238 3.33594 16.8209C3.33594 16.018 3.9868 15.3672 4.78967 15.3672C5.59254 15.3672 6.2434 16.018 6.2434 16.8209Z", fill: "white", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("circle", { id: "Ellipse 7", cx: 18.6569, cy: 16.8209, r: 1.45373, fill: "white", stroke: "#0A103D", strokeWidth: 1.5 }), (0, jsx_runtime_1.jsx)("ellipse", { id: "Ellipse 8", cx: 4.78927, cy: 16.8225, rx: 0.734578, ry: 0.734577, fill: "white" }), (0, jsx_runtime_1.jsx)("ellipse", { id: "Ellipse 9", cx: 18.6565, cy: 16.8225, rx: 0.734575, ry: 0.734577, fill: "white" })] }) }) }))); };
|
|
40
40
|
exports.default = SvgCargo2;
|