@coveo/atomic 3.53.3 → 3.55.1

package/dist/atomic/components/components/commerce/atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet.js

@@ -1,264 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { deserializeRelativeDate, } from '@coveo/headless/commerce';
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-import { renderFacetContainer } from "../../common/facets/facet-container/facet-container";
-import { renderFacetHeader } from "../../common/facets/facet-header/facet-header";
-import { renderFacetValueLabelHighlight } from "../../common/facets/facet-value-label-highlight/facet-value-label-highlight";
-import { renderFacetValueLink } from "../../common/facets/facet-value-link/facet-value-link";
-import { renderFacetValuesGroup } from "../../common/facets/facet-values-group/facet-values-group";
-import { booleanConverter } from "../../../converters/boolean-converter";
-import { bindStateToController } from "../../../decorators/bind-state";
-import { bindingGuard } from "../../../decorators/binding-guard";
-import { errorGuard } from "../../../decorators/error-guard";
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles.js";
-import { FocusTargetController } from "../../../utils/accessibility-utils";
-import { parseDate } from "../../../utils/date-utils";
-import '../../common/atomic-facet-date-input/atomic-facet-date-input';
-import { bindings } from "../../../decorators/bindings";
-import { shouldDisplayInputForFacetRange } from '../../common/facets/facet-common';
-import facetCommonStyles from '../../common/facets/facet-common.tw.css';
-/**
- * A facet is a list of values for a certain field occurring in the products.
- * An `atomic-commerce-timeframe-facet` displays a facet of the products for the current query as date intervals.
- *
- * @part facet - The wrapper for the entire facet.
- * @part label-button - The header button to expand/collapse the facet.
- * @part label-button-icon - The expand/collapse icon in the header.
- * @part clear-button - The button to clear all selected values.
- * @part clear-button-icon - The icon in the clear button.
- * @part values - The container for the facet values list.
- * @part value-link - A facet value button.
- * @part value-link-selected - A selected facet value button.
- * @part value-count - The product count for a facet value.
- * @part value-label - The label text of a facet value.
- * @part input-label - The label for date input fields.
- * @part input-start - The start date input field.
- * @part input-end - The end date input field.
- * @part input-apply-button - The button to apply date range selection.
- */
-let AtomicCommerceTimeframeFacet = class AtomicCommerceTimeframeFacet extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Whether the facet is collapsed.
-         */
-        this.isCollapsed = false;
-    }
-    get displayName() {
-        return this.facetState.displayName || 'no-label';
-    }
-    get focusTarget() {
-        if (!this.headerFocus) {
-            this.headerFocus = new FocusTargetController(this, this.bindings);
-        }
-        return this.headerFocus;
-    }
-    initialize() {
-        this.validateFacet();
-    }
-    applyDateInput(event) {
-        this.inputRange = { start: event.detail.start, end: event.detail.end };
-    }
-    get valuesToRender() {
-        return (this.facetState.values.filter((value) => value.numberOfResults || value.state !== 'idle') || []);
-    }
-    get shouldRenderValues() {
-        return !this.hasInputRange && !!this.valuesToRender.length;
-    }
-    get shouldRenderFacet() {
-        return this.shouldRenderInput || this.shouldRenderValues;
-    }
-    get shouldRenderInput() {
-        const { firstRequestExecuted: firstSearchExecuted, hasError, isLoading, hasProducts: hasResults, } = this.summaryState;
-        return shouldDisplayInputForFacetRange({
-            hasInputRange: this.hasInputRange,
-            searchStatusState: {
-                firstSearchExecuted,
-                hasError,
-                hasResults,
-                isLoading,
-            },
-            facetValues: this.facetState.values || [],
-            hasInput: true,
-        });
-    }
-    get numberOfSelectedValues() {
-        if (this.hasInputRange) {
-            return 1;
-        }
-        return (this.facetState.values.filter(({ state }) => state === 'selected').length ||
-            0);
-    }
-    get hasInputRange() {
-        return !!this.inputRange;
-    }
-    resetRange() {
-        this.inputRange = undefined;
-        this.facet.setRanges([]);
-    }
-    formatFacetValue(facetValue) {
-        try {
-            const startDate = deserializeRelativeDate(facetValue.start);
-            const relativeDate = startDate.period === 'past'
-                ? startDate
-                : deserializeRelativeDate(facetValue.end);
-            return this.bindings.i18n.t(`${relativeDate.period}-${relativeDate.unit}`, {
-                count: relativeDate.amount,
-            });
-        }
-        catch (_error) {
-            return this.bindings.i18n.t('to', {
-                start: parseDate(facetValue.start).format('YYYY-MM-DD'),
-                end: parseDate(facetValue.end).format('YYYY-MM-DD'),
-            });
-        }
-    }
-    renderValues() {
-        return this.renderValuesContainer(this.valuesToRender.map((value) => this.renderValue(value)));
-    }
-    renderValue(facetValue) {
-        const displayValue = this.formatFacetValue(facetValue);
-        const isSelected = facetValue.state === 'selected';
-        const isExcluded = facetValue.state === 'excluded';
-        return renderFacetValueLink({
-            props: {
-                displayValue,
-                isSelected,
-                numberOfResults: facetValue.numberOfResults,
-                i18n: this.bindings.i18n,
-                onClick: () => this.facet.toggleSingleSelect(facetValue),
-            },
-        })(renderFacetValueLabelHighlight({
-            props: {
-                displayValue,
-                isSelected,
-                isExcluded,
-            },
-        }));
-    }
-    renderValuesContainer(children) {
-        return renderFacetValuesGroup({
-            props: {
-                i18n: this.bindings.i18n,
-                label: this.displayName,
-            },
-        })(html `<ul class="mt-3" part="values">
-        ${children}
-      </ul>`);
-    }
-    renderHeader() {
-        return renderFacetHeader({
-            props: {
-                i18n: this.bindings.i18n,
-                label: this.displayName,
-                onClearFilters: () => {
-                    this.focusTarget.focusAfterSearch();
-                    if (this.hasInputRange) {
-                        this.resetRange();
-                        return;
-                    }
-                    this.facet.deselectAll();
-                },
-                numberOfActiveValues: this.numberOfSelectedValues,
-                isCollapsed: this.isCollapsed,
-                headingLevel: 0,
-                onToggleCollapse: () => {
-                    this.isCollapsed = !this.isCollapsed;
-                },
-                headerRef: (el) => this.focusTarget.setTarget(el),
-            },
-        });
-    }
-    renderDateInput() {
-        return html `
-      <atomic-facet-date-input
-        .label=${this.displayName}
-        .inputRange=${this.inputRange}
-        .facetId=${this.facetState.facetId}
-        @atomic-date-input-apply=${(event) => {
-            const { start, end, endInclusive } = event.detail;
-            this.facet.setRanges([
-                {
-                    start,
-                    end,
-                    endInclusive,
-                    state: 'selected',
-                },
-            ]);
-            this.applyDateInput(event);
-        }}
-      ></atomic-facet-date-input>
-    `;
-    }
-    render() {
-        const { hasError, firstRequestExecuted } = this.summaryState;
-        return html `${when(!hasError && firstRequestExecuted && this.shouldRenderFacet, () => renderFacetContainer()(html `${this.renderHeader()}
-          ${when(!this.isCollapsed, () => html `
-              ${when(this.shouldRenderValues, () => this.renderValues())}
-              ${when(this.shouldRenderInput, () => this.renderDateInput())}
-            `)}`))}`;
-    }
-    updated(changedProps) {
-        super.updated(changedProps);
-        if (changedProps.has('facet')) {
-            this.validateFacet();
-        }
-    }
-    validateFacet() {
-        if (!this.facet) {
-            this.error = new Error('The "facet" property is required for <atomic-commerce-timeframe-facet>.');
-        }
-    }
-};
-AtomicCommerceTimeframeFacet.styles = facetCommonStyles;
-__decorate([
-    property({ type: Object })
-], AtomicCommerceTimeframeFacet.prototype, "summary", void 0);
-__decorate([
-    property({ type: Object })
-], AtomicCommerceTimeframeFacet.prototype, "facet", void 0);
-__decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        converter: booleanConverter,
-        attribute: 'is-collapsed',
-    })
-], AtomicCommerceTimeframeFacet.prototype, "isCollapsed", void 0);
-__decorate([
-    property({ reflect: true })
-], AtomicCommerceTimeframeFacet.prototype, "field", void 0);
-__decorate([
-    state()
-], AtomicCommerceTimeframeFacet.prototype, "bindings", void 0);
-__decorate([
-    state()
-], AtomicCommerceTimeframeFacet.prototype, "error", void 0);
-__decorate([
-    bindStateToController('summary'),
-    state()
-], AtomicCommerceTimeframeFacet.prototype, "summaryState", void 0);
-__decorate([
-    bindStateToController('facet'),
-    state()
-], AtomicCommerceTimeframeFacet.prototype, "facetState", void 0);
-__decorate([
-    state()
-], AtomicCommerceTimeframeFacet.prototype, "inputRange", void 0);
-__decorate([
-    bindingGuard(),
-    errorGuard()
-], AtomicCommerceTimeframeFacet.prototype, "render", null);
-AtomicCommerceTimeframeFacet = __decorate([
-    customElement('atomic-commerce-timeframe-facet'),
-    bindings(),
-    withTailwindStyles
-], AtomicCommerceTimeframeFacet);
-export { AtomicCommerceTimeframeFacet };

package/dist/atomic/components/components/commerce/atomic-product/atomic-product.js

@@ -1,221 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ref } from 'lit/directives/ref.js';
-import { resultComponentClass, } from "../../common/item-list/item-list-common";
-import { CustomRenderController } from "../../common/layout/custom-render-controller";
-import { ItemLayoutController } from "../../common/layout/item-layout-controller";
-import { booleanConverter } from "../../../converters/boolean-converter";
-import { withTailwindStyles } from "../../../decorators/with-tailwind-styles";
-import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
-import { parentNodeToString } from "../../../utils/dom-utils";
-import styles from './atomic-product.tw.css';
-import '../atomic-product-text/atomic-product-text';
-import '../atomic-product-link/atomic-product-link';
-import '../atomic-product-image/atomic-product-image';
-/**
- * The `atomic-product` component is used internally by the `atomic-commerce-product-list` and `atomic-commerce-recommendation-list` components.
- */
-let AtomicProduct = class AtomicProduct extends ChildrenUpdateCompleteMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        /**
-         * The product link to use when the product is clicked in a grid layout.
-         *
-         * @default - An `atomic-product-link` without any customization.
-         */
-        this.linkContent = new DocumentFragment();
-        /**
-         * How products should be displayed.
-         */
-        this.display = 'list';
-        /**
-         * How large or small products should be.
-         */
-        this.density = 'normal';
-        /**
-         * The size of the visual section in product list items.
-         *
-         * This is overwritten by the image size defined in the product content, if it exists.
-         */
-        this.imageSize = 'icon';
-        /**
-         * The classes to add to the product element.
-         */
-        this.classes = '';
-        this.resolveProduct = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            event.detail(this.product);
-        };
-        this.resolveInteractiveProduct = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.interactiveProduct) {
-                event.detail(this.interactiveProduct);
-            }
-        };
-        this.resolveStopPropagation = (event) => {
-            event.detail(this.stopPropagation);
-        };
-        this.resolveProductDisplayConfig = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            event.detail({
-                density: this.density,
-                imageSize: this.imageSize,
-            });
-        };
-        this.handleClick = (event) => {
-            if (this.stopPropagation) {
-                event.stopPropagation();
-            }
-            if (this.display === 'grid') {
-                this.clickLinkContainer();
-            }
-        };
-        this.clickLinkContainer = () => {
-            this.shadowRoot
-                ?.querySelector('.link-container > atomic-product-link a:not([slot])')
-                ?.click();
-        };
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        new CustomRenderController(this, {
-            renderingFunction: () => this.renderingFunction,
-            itemData: () => this.product,
-            rootElementRef: () => this.productRootRef,
-            linkContainerRef: () => this.linkContainerRef,
-            onRenderComplete: (element, output) => {
-                this.itemLayoutController.applyLayoutClassesToElement(element, output);
-            },
-        });
-        this.itemLayoutController = new ItemLayoutController(this, {
-            elementPrefix: 'atomic-product',
-            renderingFunction: () => this.renderingFunction,
-            content: () => this.content,
-            layoutConfig: () => ({
-                display: this.display,
-                density: this.density,
-                imageSize: this.imageSize,
-            }),
-            itemClasses: () => this.classes,
-        });
-        this.addEventListener('atomic/resolveResult', this.resolveProduct);
-        this.addEventListener('atomic/resolveInteractiveResult', this.resolveInteractiveProduct);
-        this.addEventListener('atomic/resolveStopPropagation', this.resolveStopPropagation);
-        this.addEventListener('atomic/resolveResultDisplayConfig', this.resolveProductDisplayConfig);
-        this.addEventListener('click', this.handleClick);
-        await this.getUpdateComplete();
-        this.classList.add('hydrated');
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('atomic/resolveResult', this.resolveProduct);
-        this.removeEventListener('atomic/resolveInteractiveResult', this.resolveInteractiveProduct);
-        this.removeEventListener('atomic/resolveStopPropagation', this.resolveStopPropagation);
-        this.removeEventListener('atomic/resolveResultDisplayConfig', this.resolveProductDisplayConfig);
-        this.removeEventListener('click', this.handleClick);
-    }
-    getContentHTML() {
-        if (!this.content) {
-            console.warn('atomic-product: content property is undefined. Cannot get content HTML.', this);
-            return '';
-        }
-        return parentNodeToString(this.content);
-    }
-    getLinkHTML() {
-        return parentNodeToString(this.linkContent ?? new HTMLElement());
-    }
-    render() {
-        if (this.renderingFunction !== undefined) {
-            return html `
-        <div class=${resultComponentClass}>
-          <div
-            class="result-root"
-            ${ref((el) => {
-                this.productRootRef = el;
-            })}
-          ></div>
-          <div
-            class="link-container"
-            ${ref((el) => {
-                this.linkContainerRef = el;
-            })}
-          ></div>
-        </div>
-      `;
-        }
-        // Handle case where content is undefined and layout was not created
-        if (!this.itemLayoutController.getLayout()) {
-            return html `<div class=${resultComponentClass}></div>`;
-        }
-        return html `
-      <div class=${resultComponentClass}>
-        <div
-          class="result-root ${this.itemLayoutController.getCombinedClasses().join(' ')}"
-          .innerHTML=${this.getContentHTML()}
-        ></div>
-        <div class="link-container" .innerHTML=${this.getLinkHTML()}></div>
-      </div>
-    `;
-    }
-    firstUpdated(_changedProperties) {
-        if (this.loadingFlag && this.store) {
-            this.store.unsetLoadingFlag(this.loadingFlag);
-        }
-    }
-};
-AtomicProduct.styles = styles;
-__decorate([
-    property({
-        attribute: 'stop-propagation',
-        type: Boolean,
-        converter: booleanConverter,
-        reflect: true,
-    })
-], AtomicProduct.prototype, "stopPropagation", void 0);
-__decorate([
-    property({ type: Object })
-], AtomicProduct.prototype, "product", void 0);
-__decorate([
-    property({ type: Object, attribute: 'interactive-product' })
-], AtomicProduct.prototype, "interactiveProduct", void 0);
-__decorate([
-    property({ type: Object })
-], AtomicProduct.prototype, "store", void 0);
-__decorate([
-    property({ type: Object })
-], AtomicProduct.prototype, "content", void 0);
-__decorate([
-    property({ type: Object, attribute: 'link-content' })
-], AtomicProduct.prototype, "linkContent", void 0);
-__decorate([
-    property({ reflect: true, type: String })
-], AtomicProduct.prototype, "display", void 0);
-__decorate([
-    property({ reflect: true, type: String })
-], AtomicProduct.prototype, "density", void 0);
-__decorate([
-    property({ reflect: true, type: String, attribute: 'image-size' })
-], AtomicProduct.prototype, "imageSize", void 0);
-__decorate([
-    property({ type: String })
-], AtomicProduct.prototype, "classes", void 0);
-__decorate([
-    property({ type: String, attribute: 'loading-flag' })
-], AtomicProduct.prototype, "loadingFlag", void 0);
-__decorate([
-    property({ type: Object, attribute: 'rendering-function' })
-], AtomicProduct.prototype, "renderingFunction", void 0);
-AtomicProduct = __decorate([
-    customElement('atomic-product'),
-    withTailwindStyles
-], AtomicProduct);
-export { AtomicProduct };

package/dist/atomic/components/components/commerce/atomic-product/atomic-product.tw.css.js

@@ -1,3 +0,0 @@
-import { css } from 'lit';
-const styles = css`/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties;:host{@layer components{:host{font-family:var(--atomic-font-family);--tw-font-weight:var(--atomic-font-normal);font-weight:var(--atomic-font-normal)}.result-root{&.with-sections{display:grid;justify-items:stretch;&.display-list{@media (width >= 1024px){&.image-large,&.image-small{grid-template-rows:repeat(6,auto) minmax(0,1fr)}&.image-icon,&.image-large,&.image-small{grid-template-areas:"badges badges          .               actions" "visual title           title           title" "visual title-metadata  title-metadata  title-metadata" "visual emphasized      emphasized      emphasized" "visual excerpt         excerpt         excerpt" "visual bottom-metadata bottom-metadata bottom-metadata" "visual children        children        children";grid-template-columns:minmax(0,min-content) auto 1fr auto}&.image-icon{grid-template-rows:repeat(7,minmax(0,min-content))}&.image-none{grid-template-areas:"badges          .               actions" "title           title           title" "title-metadata  title-metadata  title-metadata" "emphasized      emphasized      emphasized" "excerpt         excerpt         excerpt" "bottom-metadata bottom-metadata bottom-metadata" "children        children        children";grid-template-columns:auto 1fr auto;grid-template-rows:repeat(6,auto)}}}&.display-table{&.image-large,&.image-small{grid-template-rows:repeat(6,auto) minmax(0,1fr)}&.image-icon,&.image-large,&.image-small{grid-template-areas:"badges badges          .               actions" "visual title           title           title" "visual title-metadata  title-metadata  title-metadata" "visual emphasized      emphasized      emphasized" "visual excerpt         excerpt         excerpt" "visual bottom-metadata bottom-metadata bottom-metadata" "visual children        children        children";grid-template-columns:minmax(0,min-content) auto 1fr auto}&.image-icon{grid-template-rows:repeat(7,minmax(0,min-content))}&.image-none{grid-template-areas:"badges          .               actions" "title           title           title" "title-metadata  title-metadata  title-metadata" "emphasized      emphasized      emphasized" "excerpt         excerpt         excerpt" "bottom-metadata bottom-metadata bottom-metadata" "children        children        children";grid-template-columns:auto 1fr auto;grid-template-rows:repeat(6,auto)}}&.display-list{@media not all and (width >= 1024px){&.image-large{grid-template-areas:"visual" "badges" "title" "title-metadata" "emphasized" "excerpt" "bottom-metadata" "actions" "children";grid-template-columns:100%;grid-template-rows:repeat(8,auto)}&.image-small{grid-template-areas:"badges          badges" "visual          title" "visual          title-metadata" "visual          emphasized" "visual          ." "excerpt         excerpt" "bottom-metadata bottom-metadata" "actions         actions" "children        children";grid-template-rows:repeat(4,auto) minmax(0,1fr) repeat(3,auto)}&.image-icon,&.image-small{grid-template-columns:auto minmax(0,1fr)}&.image-icon{grid-template-areas:"badges          badges" "visual          title" "visual          title-metadata" "visual          emphasized" "visual          excerpt" "visual          bottom-metadata" "visual          actions" "visual          children";grid-template-rows:repeat(7,auto) 1fr}&.image-none{grid-template-areas:"badges" "title" "title-metadata" "emphasized" "excerpt" "bottom-metadata" "actions" "children";grid-template-columns:100%;grid-template-rows:repeat(7,auto)}}}&.display-grid{grid-template-areas:"badges" "visual" "title" "title-metadata" "emphasized" "excerpt" "children" "bottom-metadata" "actions";grid-template-columns:100%;grid-template-rows:repeat(9,auto);a,button{position:relative}@media not all and (width >= 1024px){&.image-large{&.image-large{grid-template-areas:"visual" "badges" "title" "title-metadata" "emphasized" "excerpt" "bottom-metadata" "actions" "children";grid-template-columns:100%;grid-template-rows:repeat(8,auto)}&.image-small{grid-template-areas:"badges          badges" "visual          title" "visual          title-metadata" "visual          emphasized" "visual          ." "excerpt         excerpt" "bottom-metadata bottom-metadata" "actions         actions" "children        children";grid-template-rows:repeat(4,auto) minmax(0,1fr) repeat(3,auto)}&.image-icon,&.image-small{grid-template-columns:auto minmax(0,1fr)}&.image-icon{grid-template-areas:"badges          badges" "visual          title" "visual          title-metadata" "visual          emphasized" "visual          excerpt" "visual          bottom-metadata" "visual          actions" "visual          children";grid-template-rows:repeat(7,auto) 1fr}&.image-none{grid-template-areas:"badges" "title" "title-metadata" "emphasized" "excerpt" "bottom-metadata" "actions" "children";grid-template-columns:100%;grid-template-rows:repeat(7,auto)}}}}}atomic-table-element{display:none}}.link-container{display:none}}position:relative;.result-root.display-grid{grid-template-areas:"badges" "visual" "title" "title-metadata" "emphasized" "excerpt" "bottom-metadata" "actions" "children"}.with-sections{&.display-grid{&.image-icon,&.image-large,&.image-none,&.image-small{atomic-product-section-name{display:-webkit-box;min-height:calc(var(--line-height)*2);overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}}@media (width >= 1024px){&.image-large atomic-product-section-children .product-child{aspect-ratio:1/1;height:auto;@supports not (aspect-ratio:1/1){height:auto}width:16.65%}&.image-small atomic-product-section-children .product-child{aspect-ratio:1/1;height:auto;@supports not (aspect-ratio:1/1){height:auto}width:16.65%}&.image-icon atomic-product-section-children .product-child,&.image-none atomic-product-section-children .product-child{height:2rem;width:2rem}}@media not all and (width >= 1024px){&.image-large atomic-product-section-children .product-child{aspect-ratio:1/1;height:auto;@supports not (aspect-ratio:1/1){height:auto}width:16.65%}&.image-small atomic-product-section-children .product-child{aspect-ratio:1/1;height:auto;@supports not (aspect-ratio:1/1){height:auto}max-width:4.75rem;width:16.65%}&.image-icon atomic-product-section-children .product-child,&.image-none atomic-product-section-children .product-child{height:2rem;width:2rem}}&.density-comfortable{&.image-icon,&.image-large,&.image-none,&.image-small{& atomic-product-section-description{margin-top:1.25rem}}}&.density-normal{&.image-icon,&.image-large,&.image-none,&.image-small{& atomic-product-section-description{margin-top:.75rem}}}&.density-compact{&.image-icon,&.image-large,&.image-none,&.image-small{& atomic-product-section-description{margin-top:.25rem}}@media (width >= 1024px){&.image-large atomic-product-section-children .product-child{aspect-ratio:1/1;height:auto;@supports not (aspect-ratio:1/1){height:auto}width:16.65%}&.image-small atomic-product-section-children .product-child{aspect-ratio:1/1;height:auto;@supports not (aspect-ratio:1/1){height:auto}width:16.65%}&.image-icon atomic-product-section-children .product-child,&.image-none atomic-product-section-children .product-child{height:2rem;width:2rem}}@media not all and (width >= 1024px){&.image-large atomic-product-section-children .product-child{aspect-ratio:1/1;height:auto;@supports not (aspect-ratio:1/1){height:auto}width:16.65%}&.image-small atomic-product-section-children .product-child{aspect-ratio:1/1;height:auto;@supports not (aspect-ratio:1/1){height:auto}max-width:4.75rem;width:16.65%}&.image-icon atomic-product-section-children .product-child,&.image-none atomic-product-section-children .product-child{height:2rem;width:2rem}}}}}}@property --tw-font-weight{syntax:"*";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-font-weight:initial}}}`;
-export default styles;