@constructor-io/constructorio-ui-asa 1.0.0

package/lib/cjs/components/Chat/WelcomeScreen.css

@@ -0,0 +1,205 @@
+.cio-asa-welcome-screen {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 20px;
+  position: relative;
+}
+
+.cio-asa-welcome-screen__close {
+  position: absolute;
+  top: 16px;
+  right: 20px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1a1a1a;
+  font-size: 20px;
+  line-height: 1;
+  z-index: 1;
+}
+
+.cio-asa-welcome-screen__close:hover {
+  opacity: 0.7;
+}
+
+.cio-asa-welcome-screen__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+  max-width: 504px;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .cio-asa-welcome-screen__content {
+    max-width: 366px;
+  }
+}
+
+.cio-asa-welcome-screen__title {
+  font-weight: 400;
+  font-size: 26px;
+  line-height: 32px;
+  text-align: center;
+  letter-spacing: -0.005em;
+  font-feature-settings: 'tnum' on, 'lnum' on;
+  color: #000000;
+  margin: 0;
+  align-self: stretch;
+}
+
+.cio-asa-welcome-screen__input-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 8px 8px 12px;
+  gap: 12px;
+  width: 100%;
+  height: 40px;
+  margin-top: 32px;
+  background: #ffffff;
+  border: 1px solid #DEE0E3;
+  box-shadow: inset 1px 1px 2px rgba(18, 18, 105, 0.1), inset 0px 1px 4px rgba(18, 18, 105, 0.05), inset 1px 1px 1px rgba(18, 18, 105, 0.05);
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.cio-asa-welcome-screen__input {
+  flex: 1;
+  padding: 0;
+  border: none;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: -0.005em;
+  color: #0F1324;
+  outline: none;
+  background: transparent;
+}
+
+.cio-asa-welcome-screen__input::placeholder {
+  color: rgba(15, 19, 36, 0.7);
+}
+
+/* Input states */
+.cio-asa-welcome-screen__input-row:hover {
+  border-color: #C8CAD0;
+}
+
+.cio-asa-welcome-screen__input-row:focus-within {
+  border-color: #A980FF;
+  box-shadow: 0px 0px 0px 2px rgba(201, 176, 254, 0.7);
+}
+
+.cio-asa-welcome-screen__input-row:active {
+  border-color: #000000;
+  box-shadow: inset 0px 1px 4px rgba(18, 18, 105, 0.14), inset 2.1px 2px 2px rgba(18, 18, 105, 0.1), inset 0px 1.5px 3px rgba(18, 18, 105, 0.05);
+}
+
+.cio-asa-welcome-screen__input-row--disabled {
+  border-color: #E9EAEC;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.cio-asa-welcome-screen__input-row--disabled .cio-asa-welcome-screen__send-btn {
+  background: #E9EAEC;
+  box-shadow: none;
+  color: rgba(10, 15, 41, 0.25);
+  cursor: default;
+}
+
+.cio-asa-welcome-screen__input-row--disabled .cio-asa-welcome-screen__send-btn svg path {
+  fill: rgba(10, 15, 41, 0.25);
+}
+
+.cio-asa-welcome-screen__send-btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0 8px;
+  gap: 6px;
+  height: 24px;
+  background: #14151A;
+  box-shadow: 0px 0.4px 1px rgba(18, 18, 105, 0.13), 0px 0.9px 6px rgba(18, 18, 105, 0.05), 0px 1px 3px rgba(18, 18, 105, 0.05);
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: -0.005em;
+  font-feature-settings: 'tnum' on, 'lnum' on;
+  color: #ffffff;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.cio-asa-welcome-screen__send-btn:hover {
+  background: #333;
+}
+
+.cio-asa-welcome-screen__suggestions {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  column-gap: 16px;
+  row-gap: 11px;
+  width: 100%;
+  margin-top: 20px;
+  animation: cio-asa-fade-in 0.5s ease 0.5s both;
+}
+
+.cio-asa-welcome-screen__suggestion-chip {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 18px 16px;
+  background: #ffffff;
+  box-shadow: 0px 0.4px 1px rgba(18, 18, 105, 0.13), 0px 0.9px 6px rgba(18, 18, 105, 0.05), 0px 1px 3px rgba(18, 18, 105, 0.05);
+  border-radius: 12px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+  color: #343434;
+  box-sizing: border-box;
+  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
+}
+
+.cio-asa-welcome-screen__suggestion-chip:hover {
+  background: #ffffff;
+  border-color: #ffffff;
+  box-shadow: 0px 6px 14px rgba(18, 18, 105, 0.11), 0px 2px 4px rgba(18, 18, 105, 0.0716748), 0px 1px 2px rgba(18, 18, 105, 0.055);
+}
+
+.cio-asa-welcome-screen__suggestion-chip:active {
+  background: #E0E3EB;
+  border-color: #DEE0E3;
+  box-shadow: inset 1px 1px 2px rgba(18, 18, 105, 0.1), inset 0px 1px 4px rgba(18, 18, 105, 0.05), inset 1px 1px 1px rgba(18, 18, 105, 0.05);
+}
+
+.cio-asa-welcome-screen__terms {
+  font-size: 11px;
+  color: #999;
+  text-align: center;
+  padding-top: 16px;
+  max-width: 504px;
+  margin: 0 auto;
+}
+
+.cio-asa-welcome-screen__terms a {
+  color: #666;
+  text-decoration: underline;
+}

package/lib/cjs/components/Chat/WelcomeScreen.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const icons_1 = require("../icons");
+const translate_1 = tslib_1.__importDefault(require("../../utils/translate"));
+const useMessageInput_1 = tslib_1.__importDefault(require("../../hooks/useMessageInput"));
+const DEFAULT_SUGGESTIONS = [];
+function WelcomeScreen({ suggestions = DEFAULT_SUGGESTIONS, onSend, onClose, termsText, disabled = false, translations, componentOverrides, }) {
+    var _a, _b, _c;
+    const { value: inputValue, setValue: setInputValue, handleSubmit, handleKeyDown, } = (0, useMessageInput_1.default)({ onSend, isDisabled: disabled });
+    const titleRenderProps = {
+        text: (0, translate_1.default)('CioAsa.welcome.title', translations),
+    };
+    const inputRenderProps = {
+        value: inputValue,
+        onChange: setInputValue,
+        onSubmit: handleSubmit,
+        placeholder: (0, translate_1.default)('CioAsa.welcome.placeholder', translations),
+        isDisabled: disabled,
+    };
+    const suggestionsRenderProps = {
+        suggestions,
+        onSuggestionClick: onSend,
+    };
+    return (react_1.default.createElement("div", { className: 'cio-asa-welcome-screen' },
+        onClose && (react_1.default.createElement("button", { type: 'button', className: 'cio-asa-welcome-screen__close', onClick: onClose, "aria-label": (0, translate_1.default)('CioAsa.header.close', translations) }, "\u2715")),
+        react_1.default.createElement("div", { className: 'cio-asa-welcome-screen__content' },
+            react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_a = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.title) === null || _a === void 0 ? void 0 : _a.reactNode, props: titleRenderProps },
+                react_1.default.createElement("h2", { id: 'cio-asa-chat-title', className: 'cio-asa-welcome-screen__title' }, titleRenderProps.text)),
+            react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_b = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.input) === null || _b === void 0 ? void 0 : _b.reactNode, props: inputRenderProps },
+                react_1.default.createElement("div", { className: `cio-asa-welcome-screen__input-row${disabled ? ' cio-asa-welcome-screen__input-row--disabled' : ''}` },
+                    react_1.default.createElement("input", { type: 'text', className: 'cio-asa-welcome-screen__input', value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: inputRenderProps.placeholder, disabled: disabled, "aria-label": (0, translate_1.default)('CioAsa.welcome.inputAriaLabel', translations) }),
+                    react_1.default.createElement("button", { type: 'button', className: 'cio-asa-welcome-screen__send-btn', onClick: handleSubmit, disabled: disabled || !inputValue.trim(), "aria-label": (0, translate_1.default)('CioAsa.welcome.sendAriaLabel', translations) },
+                        (0, translate_1.default)('CioAsa.welcome.sendButton', translations),
+                        react_1.default.createElement(icons_1.SendPlaneIcon, null)))),
+            suggestions.length > 0 && (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_c = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.suggestedQuestions) === null || _c === void 0 ? void 0 : _c.reactNode, props: suggestionsRenderProps },
+                react_1.default.createElement("nav", { className: 'cio-asa-welcome-screen__suggestions', "aria-label": (0, translate_1.default)('CioAsa.welcome.suggestionsAriaLabel', translations) }, suggestions.map((suggestion) => (react_1.default.createElement("button", { key: suggestion, type: 'button', className: 'cio-asa-welcome-screen__suggestion-chip', disabled: disabled, onClick: () => onSend(suggestion) }, suggestion))))))),
+        termsText && react_1.default.createElement("div", { className: 'cio-asa-welcome-screen__terms' }, termsText)));
+}
+exports.default = WelcomeScreen;
+WelcomeScreen.displayName = 'WelcomeScreen';

package/lib/cjs/components/CioAsaProvider/CioAsaProvider.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const useCioClient_1 = tslib_1.__importDefault(require("../../hooks/useCioClient"));
+const useCioAsaContext_1 = require("../../hooks/useCioAsaContext");
+const defaultFormatters = tslib_1.__importStar(require("../../utils/formatters"));
+const defaultUrlHelpers = tslib_1.__importStar(require("../../utils/urlHelpers"));
+function CioAsaProvider(props) {
+    const { apiKey, formatters, urlHelpers, staticRequestConfigs = { domain: 'chatbot' }, cioClient: customCioClient, children, } = props;
+    const [cioClientOptions, setCioClientOptions] = (0, react_1.useState)({});
+    const cioClient = (0, useCioClient_1.default)({ apiKey, cioClient: customCioClient, cioClientOptions });
+    const contextValue = (0, react_1.useMemo)(() => ({
+        cioClient,
+        cioClientOptions,
+        setCioClientOptions,
+        staticRequestConfigs,
+        formatters: Object.assign(Object.assign({}, defaultFormatters), formatters),
+        urlHelpers: Object.assign(Object.assign({}, defaultUrlHelpers), urlHelpers),
+    }), [cioClient, cioClientOptions, formatters, urlHelpers, staticRequestConfigs]);
+    return (react_1.default.createElement(useCioAsaContext_1.AsaContext.Provider, { value: contextValue }, typeof children === 'function' ? children(contextValue) : children));
+}
+exports.default = CioAsaProvider;

package/lib/cjs/components/ResultsBlock/ResultsBlock.css

@@ -0,0 +1,217 @@
+.cio-asa-results-block {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.cio-asa-results-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cio-asa-results-group__label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0;
+}
+
+/* Product Card - override ui-components defaults */
+.cio-asa-product-card.cio-product-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  min-width: unset;
+  max-width: unset;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  background: transparent;
+}
+
+.cio-asa-product-card .cio-asa-product-card__image-wrapper.cio-product-card-image-section {
+  position: relative;
+  width: 100%;
+  aspect-ratio: var(--cio-asa-image-ratio, 3 / 4);
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: #f3f4f6;
+  flex-shrink: 0;
+}
+
+.cio-asa-product-card .cio-asa-product-card__image-wrapper .cio-product-card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  min-height: unset;
+  border-radius: 0;
+}
+
+.cio-asa-product-card .cio-asa-product-card__badge {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 4px;
+  min-width: 35px;
+  max-width: 120px;
+  height: 20px;
+  background: #dc2626;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+  text-align: center;
+  letter-spacing: -0.005em;
+  border-radius: 4px;
+  border: none;
+  z-index: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cio-asa-product-card .cio-asa-product-card__info.cio-product-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  padding: 0;
+}
+
+.cio-asa-product-card .cio-asa-product-card__name.cio-product-card-title-section {
+  font-size: 12px;
+  line-height: 1.3;
+  color: #1a1a1a;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin: 0;
+  min-height: calc(2 * 12px * 1.3);
+}
+
+.cio-asa-product-card__description {
+  font-size: 11px;
+  line-height: 1.3;
+  color: #6b7280;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span {
+  word-spacing: -1ch;
+}
+
+/* Sale price (rendered first by library, displayed second) */
+.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:first-child {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:first-child:not(:only-child) {
+  color: #dc2626;
+  order: 2;
+}
+
+/* Original price (rendered second by library, displayed first) */
+.cio-asa-product-card .cio-asa-product-card__price.cio-product-card-price-section span:last-child:not(:first-child) {
+  font-size: 12px;
+  color: #9ca3af;
+  text-decoration: line-through;
+  font-weight: normal;
+  order: 1;
+}
+
+/* Carousel overrides */
+.cio-asa-results-group [data-slot="carousel-content"] {
+  padding: 0 !important;
+}
+
+.cio-asa-results-group [data-slot="carousel-item"] {
+  min-width: 0 !important;
+  align-self: stretch;
+}
+
+.cio-asa-results-group [data-slot="carousel-track"] {
+  padding-left: 0 !important;
+}
+
+/* Add to Cart (per card) */
+.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: -0.005em;
+  color: #14151A;
+  background: #f3f4f6;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  cursor: pointer;
+  width: 100%;
+  margin-top: auto;
+  padding-top: 4px;
+  transition: background-color 0.15s;
+}
+
+.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn::before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0311 8.66659C11.5311 8.66659 11.9711 8.39325 12.1977 7.97992L14.5844 3.65325C14.8311 3.21325 14.5111 2.66659 14.0044 2.66659H4.13772L3.51105 1.33325H1.33105V2.66659H2.66439L5.06439 7.72659L4.16439 9.35325C3.67772 10.2466 4.31772 11.3333 5.33105 11.3333H13.3311V9.99992H5.33105L6.06439 8.66659H11.0311ZM4.77105 3.99992H12.8711L11.0311 7.33325H6.35105L4.77105 3.99992ZM5.33105 11.9999C4.59772 11.9999 4.00439 12.5999 4.00439 13.3333C4.00439 14.0666 4.59772 14.6666 5.33105 14.6666C6.06439 14.6666 6.66439 14.0666 6.66439 13.3333C6.66439 12.5999 6.06439 11.9999 5.33105 11.9999ZM11.9977 11.9999C11.2644 11.9999 10.6711 12.5999 10.6711 13.3333C10.6711 14.0666 11.2644 14.6666 11.9977 14.6666C12.7311 14.6666 13.3311 14.0666 13.3311 13.3333C13.3311 12.5999 12.7311 11.9999 11.9977 11.9999Z' fill='%230F1324' fill-opacity='0.6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+}
+
+.cio-asa-product-card .cio-asa-product-card__add-to-cart.cio-product-card-add-to-cart-btn:hover {
+  background: #e5e7eb;
+  color: #14151A;
+}
+
+/* View More */
+.cio-asa-results-group__view-more {
+  display: inline-flex;
+  align-items: center;
+  gap: 11px;
+  font-size: 13px;
+  color: #1a1a1a;
+  text-decoration: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: inherit;
+  width: fit-content;
+}
+
+.cio-asa-results-group__view-more-text {
+  text-decoration: none;
+  border-bottom: 1px solid currentColor;
+  line-height: 1.2;
+}

package/lib/cjs/components/ResultsBlock/ResultsBlock.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const productNormalizer_1 = require("../../utils/productNormalizer");
+const icons_1 = require("../icons");
+const constants_1 = require("./constants");
+const renderProductCard_1 = tslib_1.__importDefault(require("./renderProductCard"));
+require("./ResultsBlock.css");
+function PreviousButton() {
+    return null;
+}
+function NextButton() {
+    return null;
+}
+function ResultsBlock({ groups, aspectRatio = '3:4', minCardWidth = 150, gap = 12, showTitle = true, viewMoreText = 'View more products', addToCartText = 'Add to cart', saleBadgeText = 'Sale', currency, normalizeItem = productNormalizer_1.normalizeItemToProduct, onProductClick, onAddToCart, onViewMore, componentOverrides, }) {
+    var _a, _b;
+    const containerRef = (0, react_1.useRef)(null);
+    const [slidesToShow, setSlidesToShow] = (0, react_1.useState)(3 + constants_1.PEEK_FRACTION);
+    (0, react_1.useEffect)(() => {
+        const el = containerRef.current;
+        if (!el)
+            return undefined;
+        const compute = () => {
+            const width = el.clientWidth;
+            const count = Math.max(1, Math.floor(width / (minCardWidth + gap)));
+            setSlidesToShow(count + constants_1.PEEK_FRACTION);
+        };
+        compute();
+        if (typeof ResizeObserver === 'undefined')
+            return undefined;
+        const ro = new ResizeObserver(compute);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [minCardWidth, gap]);
+    if (!groups || groups.length === 0)
+        return null;
+    const renderProductCard = (0, renderProductCard_1.default)({
+        currency,
+        addToCartText,
+        onProductClick,
+        onAddToCart,
+        componentOverrides: (_b = (_a = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.productCard,
+    });
+    return (react_1.default.createElement("div", { ref: containerRef, className: 'cio-asa-results-block', style: { '--cio-asa-image-ratio': constants_1.aspectRatioMap[aspectRatio] } }, groups.map((groupData, index) => {
+        var _a, _b, _c, _d, _e;
+        const label = ((_a = groupData.group) === null || _a === void 0 ? void 0 : _a.display_name) || ((_b = groupData.group) === null || _b === void 0 ? void 0 : _b.value) || '';
+        const groupKey = `${((_c = groupData.group) === null || _c === void 0 ? void 0 : _c.value) || label}-${index}`;
+        const products = groupData.searchResults.map((item) => normalizeItem(item, { saleBadgeText }));
+        const titleRenderProps = { label };
+        const viewMoreRenderProps = {
+            group: groupData.group,
+            onClick: () => onViewMore === null || onViewMore === void 0 ? void 0 : onViewMore(groupData.group),
+        };
+        const userCarousel = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.carousel;
+        const carouselOverrides = Object.assign(Object.assign({ previous: { reactNode: PreviousButton }, next: { reactNode: NextButton } }, userCarousel), { item: Object.assign(Object.assign({}, userCarousel === null || userCarousel === void 0 ? void 0 : userCarousel.item), { productCard: {
+                    reactNode: renderProductCard,
+                } }) });
+        return (react_1.default.createElement("div", { className: 'cio-asa-results-group', key: groupKey },
+            showTitle && label && (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_d = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.groupTitle) === null || _d === void 0 ? void 0 : _d.reactNode, props: titleRenderProps },
+                react_1.default.createElement("h3", { className: 'cio-asa-results-group__label' }, label))),
+            react_1.default.createElement(constructorio_ui_components_1.Carousel, { items: products, loop: false, responsive: {
+                    0: { gap, slidesToShow },
+                }, componentOverrides: carouselOverrides }),
+            onViewMore && (react_1.default.createElement(constructorio_ui_components_1.RenderPropsWrapper, { override: (_e = componentOverrides === null || componentOverrides === void 0 ? void 0 : componentOverrides.viewMore) === null || _e === void 0 ? void 0 : _e.reactNode, props: viewMoreRenderProps },
+                react_1.default.createElement("button", { type: 'button', className: 'cio-asa-results-group__view-more', onClick: () => onViewMore(groupData.group) },
+                    react_1.default.createElement("span", { className: 'cio-asa-results-group__view-more-text' }, viewMoreText),
+                    react_1.default.createElement(icons_1.ArrowRightIcon, null))))));
+    })));
+}
+ResultsBlock.displayName = 'ResultsBlock';
+exports.default = ResultsBlock;

package/lib/cjs/components/ResultsBlock/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aspectRatioMap = exports.PEEK_FRACTION = void 0;
+exports.PEEK_FRACTION = 0.3;
+exports.aspectRatioMap = {
+    '1:1': '1 / 1',
+    '3:4': '3 / 4',
+    '9:16': '9 / 16',
+    '4:3': '4 / 3',
+    '16:9': '16 / 9',
+};

package/lib/cjs/components/ResultsBlock/renderProductCard.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const constructorio_ui_components_1 = require("@constructor-io/constructorio-ui-components");
+const constants_1 = require("../../constants");
+function createProductCardRenderer({ currency, addToCartText, onProductClick, onAddToCart, componentOverrides, }) {
+    const handleAddToCart = onAddToCart
+        ? (_e, product) => onAddToCart(product)
+        : undefined;
+    return function renderProductCard(renderProps) {
+        const product = renderProps.product;
+        return (react_1.default.createElement(constructorio_ui_components_1.ProductCard, { product: product, className: 'cio-asa-product-card', onProductClick: onProductClick, onAddToCart: handleAddToCart, addToCartText: addToCartText, componentOverrides: componentOverrides },
+            react_1.default.createElement(constructorio_ui_components_1.ProductCard.ImageSection, { className: 'cio-asa-product-card__image-wrapper', imageUrl: product.imageUrl || constants_1.PLACEHOLDER_IMAGE }, product.badge && react_1.default.createElement("span", { className: 'cio-asa-product-card__badge' }, product.badge)),
+            react_1.default.createElement(constructorio_ui_components_1.ProductCard.Content, { className: 'cio-asa-product-card__info' },
+                react_1.default.createElement(constructorio_ui_components_1.ProductCard.TitleSection, { className: 'cio-asa-product-card__name' }),
+                currency && (react_1.default.createElement(constructorio_ui_components_1.ProductCard.PriceSection, { className: 'cio-asa-product-card__price', priceCurrency: currency })),
+                onAddToCart && (react_1.default.createElement(constructorio_ui_components_1.ProductCard.AddToCartButton, { className: 'cio-asa-product-card__add-to-cart' })))));
+    };
+}
+exports.default = createProductCardRenderer;

package/lib/cjs/components/icons/ArrowRightIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function ArrowRightIcon() {
+    return (react_1.default.createElement("svg", { width: '10', height: '10', viewBox: '0 0 10 10', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+        react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M8.25979 4.20698L4.63903 0.72032L5.33267 -1.97313e-07L9.84668 4.34682L9.84668 5.06714L5.33267 9.41396L4.63903 8.69364L8.25979 5.20698L-0.000141371 5.20698L-0.000141328 4.20698L8.25979 4.20698Z', fill: 'currentColor' })));
+}
+exports.default = ArrowRightIcon;

package/lib/cjs/components/icons/ChatBubbleDarkIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function ChatBubbleDarkIcon() {
+    return (react_1.default.createElement("svg", { className: 'cio-asa-button__icon', width: '14', height: '14', viewBox: '0 0 14 14', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true' },
+        react_1.default.createElement("path", { d: 'M12.667 3.16699C12.7573 3.16717 12.8328 3.24274 12.833 3.33301V12.126L10.874 10.167H3.33301C3.24263 10.1668 3.16699 10.0904 3.16699 10V9.16699H11.833V3.16699H12.667ZM0.666992 0.5H9.33301C9.42353 0.5 9.5 0.576467 9.5 0.666992V6.66699C9.49982 6.75737 9.42342 6.83301 9.33301 6.83301H2.45996L0.5 8.79297V0.666992C0.5 0.576468 0.576468 0.5 0.666992 0.5ZM0.833008 7.9873L2.32031 6.5H9.16699V0.833008H0.833008V7.9873Z', fill: 'white', stroke: 'white' })));
+}
+exports.default = ChatBubbleDarkIcon;

package/lib/cjs/components/icons/ChatBubbleLightIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function ChatBubbleLightIcon() {
+    return (react_1.default.createElement("svg", { className: 'cio-asa-button__icon', width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true' },
+        react_1.default.createElement("path", { d: 'M14 4.50024C14.0903 4.50043 14.1658 4.57599 14.166 4.66626V13.4592L12.207 11.5002H4.66602C4.57563 11.5001 4.5 11.4237 4.5 11.3333V10.5002H13.166V4.50024H14ZM2 1.83325H10.666C10.7565 1.83325 10.833 1.90972 10.833 2.00024V8.00024C10.8328 8.09063 10.7564 8.16626 10.666 8.16626H3.79297L1.83301 10.1262V2.00024C1.83301 1.90972 1.90948 1.83325 2 1.83325ZM2.16602 9.32056L3.65332 7.83325H10.5V2.16626H2.16602V9.32056Z', fill: 'black', stroke: 'black' })));
+}
+exports.default = ChatBubbleLightIcon;

package/lib/cjs/components/icons/SendArrowIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function SendArrowIcon() {
+    return (react_1.default.createElement("svg", { width: '10', height: '11', viewBox: '0 0 10 11', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true' },
+        react_1.default.createElement("path", { d: 'M0.5 5L5 0.5L9.5 5M5 1.125V10.25', stroke: '#0F1324', strokeOpacity: '0.7', strokeLinecap: 'round', strokeLinejoin: 'round' })));
+}
+exports.default = SendArrowIcon;

package/lib/cjs/components/icons/SendPlaneIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function SendPlaneIcon() {
+    return (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": 'true' },
+        react_1.default.createElement("path", { d: 'M14.8934 7.09539L14.8884 7.0932L1.54219 1.55758C1.42993 1.51059 1.30778 1.49217 1.18666 1.50395C1.06554 1.51573 0.949225 1.55734 0.848125 1.62508C0.741311 1.69507 0.653573 1.79052 0.592805 1.90283C0.532037 2.01515 0.500145 2.14081 0.5 2.26852V5.80883C0.50006 5.98341 0.561019 6.15249 0.67237 6.28695C0.783722 6.4214 0.938491 6.5128 1.11 6.54539L8.38906 7.89133C8.41767 7.89675 8.44348 7.91199 8.46205 7.93441C8.48062 7.95683 8.49078 7.98503 8.49078 8.01414C8.49078 8.04325 8.48062 8.07145 8.46205 8.09387C8.44348 8.11629 8.41767 8.13153 8.38906 8.13695L1.11031 9.48289C0.938851 9.51539 0.784092 9.60667 0.67269 9.741C0.561288 9.87534 0.500219 10.0443 0.5 10.2188V13.7598C0.499917 13.8817 0.530111 14.0018 0.587871 14.1092C0.645632 14.2166 0.729152 14.3079 0.830938 14.3751C0.953375 14.4564 1.09706 14.4999 1.24406 14.5001C1.34626 14.5 1.4474 14.4795 1.54156 14.4398L14.8875 8.9357L14.8934 8.93289C15.0731 8.85569 15.2262 8.72751 15.3337 8.56421C15.4413 8.40092 15.4986 8.20968 15.4986 8.01414C15.4986 7.81861 15.4413 7.62736 15.3337 7.46407C15.2262 7.30077 15.0731 7.1726 14.8934 7.09539Z', fill: 'white' })));
+}
+exports.default = SendPlaneIcon;

package/lib/cjs/components/icons/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowRightIcon = exports.SendPlaneIcon = exports.SendArrowIcon = exports.ChatBubbleLightIcon = exports.ChatBubbleDarkIcon = void 0;
+var ChatBubbleDarkIcon_1 = require("./ChatBubbleDarkIcon");
+Object.defineProperty(exports, "ChatBubbleDarkIcon", { enumerable: true, get: function () { return __importDefault(ChatBubbleDarkIcon_1).default; } });
+var ChatBubbleLightIcon_1 = require("./ChatBubbleLightIcon");
+Object.defineProperty(exports, "ChatBubbleLightIcon", { enumerable: true, get: function () { return __importDefault(ChatBubbleLightIcon_1).default; } });
+var SendArrowIcon_1 = require("./SendArrowIcon");
+Object.defineProperty(exports, "SendArrowIcon", { enumerable: true, get: function () { return __importDefault(SendArrowIcon_1).default; } });
+var SendPlaneIcon_1 = require("./SendPlaneIcon");
+Object.defineProperty(exports, "SendPlaneIcon", { enumerable: true, get: function () { return __importDefault(SendPlaneIcon_1).default; } });
+var ArrowRightIcon_1 = require("./ArrowRightIcon");
+Object.defineProperty(exports, "ArrowRightIcon", { enumerable: true, get: function () { return __importDefault(ArrowRightIcon_1).default; } });