@sc-360-v2/storefront-cms-library 0.5.38 → 0.5.40

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/kits.scss ADDED
@@ -0,0 +1,299 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./repeater-embla-controls.scss" as *;
4
+ @use "./functions.scss" as *;
5
+ $dataShowShadow: "[data-sw-sw='true']";
6
+ $dataShowBorder: "[data-sw-br='true']";
7
+
8
+ [data-div-type="element"] {
9
+ &[data-element-type="kits"] {
10
+ width: var(--_sf-el-wh-st-mx, calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl, 100)}));
11
+
12
+ &[data-cms-element-resizer="true"] {
13
+ --_sf-img-dwdth: 100%;
14
+ }
15
+
16
+ --_sf-ic-sz-nn: #{prepareMediaVariable(--_ctm-lt-aw-in-se, 40px)};
17
+ --_sf-ed-vl-sz: #{prepareMediaVariable(--_ctm-lt-dt-se, 10px)};
18
+ --_sf-sl-ct-ic-dt-at-cl: #{prepareMediaVariable(--_ctm-lt-cl-ae-cr)};
19
+
20
+ & > .wrapper {
21
+ min-height: prepareMediaVariable(--_ctm-lt-mn-ht, 0px);
22
+ background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
23
+ border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
24
+ &#{$dataShowBorder} {
25
+ border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
26
+ border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
27
+ border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
28
+ }
29
+ &#{$dataShowShadow} {
30
+ box-shadow: #{prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)}
31
+ #{prepareMediaVariable(--_ctm-dn-wt-se-sw-br)}
32
+ #{prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)}
33
+ #{prepareMediaVariable(--_ctm-dn-wt-se-sw-cr)};
34
+ }
35
+
36
+ padding: prepareMediaVariable(--_ctm-lt-pg);
37
+
38
+ @for $i from 1 through 3 {
39
+ &:is([data-control-type="#{$i}"]) {
40
+ @if ($i == 3) {
41
+ overflow-y: visible;
42
+ }
43
+ @include CMSRepeaterEmblaControlStyles($i);
44
+ }
45
+ }
46
+
47
+ .btn__with__text {
48
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-bd-cr));
49
+
50
+ padding: prepareMediaVariable(--_ctm-lt-bn-pg);
51
+ display: flex;
52
+ flex-direction: var(--_sf-fd-bn);
53
+ align-items: center;
54
+
55
+ justify-content: prepareMediaVariable(--_ctm-lt-at);
56
+ gap: prepareMediaVariable(--_ctm-lt-gp);
57
+
58
+ width: prepareMediaVariable(--_ctm-lt-bn-wh, 100%);
59
+ height: prepareMediaVariable(--_ctm-lt-bn-ht, 50px);
60
+
61
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-rs));
62
+
63
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-ae))
64
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-br))
65
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-sd))
66
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-cr));
67
+
68
+ &[data-show-border="true"] {
69
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-cr));
70
+
71
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-se));
72
+
73
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-wh));
74
+ }
75
+
76
+ &[data-show-shadow="false"] {
77
+ --_show-shadow: none;
78
+ }
79
+ &[data-icon-position="left"] {
80
+ --_sf-fd-bn: row;
81
+ }
82
+ &[data-icon-position="right"] {
83
+ --_sf-fd-bn: row-reverse;
84
+ }
85
+ &[data-icon-position="center"] {
86
+ --_sf-fd-bn: row;
87
+ }
88
+
89
+ &:hover {
90
+ --_sf-vw-hr-kt-pg: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-pg)};
91
+ --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-bd-cr)};
92
+ --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-cr)};
93
+ --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-se)};
94
+ --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-wh)};
95
+ --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-rs)};
96
+
97
+ // for shadow
98
+ --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-ae)};
99
+ --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-br)};
100
+
101
+ --_sf-hr-sw-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-cr)};
102
+
103
+ // for font
104
+
105
+ --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-cr)};
106
+ --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-fy)};
107
+ --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-se)};
108
+ --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-wt)};
109
+ --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-se-ic)};
110
+ --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-tt-an)};
111
+ --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-lr-sg)};
112
+ --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-le-ht)};
113
+
114
+ --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-tt-tm)};
115
+ --_sf-hr-wd-wp: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-wd-wp)};
116
+ --_sf-hr-wd-bk: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-wd-bk)};
117
+
118
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-in-se)};
119
+
120
+ --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-in-c1)};
121
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ue)};
122
+
123
+ &[data-hover-show-shadow="false"] {
124
+ --_hover-show-shadow: none;
125
+ }
126
+ &[data-hover-show-icon="false"] {
127
+ --_hover-show-icon: none;
128
+ }
129
+ }
130
+ &[data-show-icon="false"] {
131
+ --_show-icon: none;
132
+ }
133
+ &[data-element-style="Icon"] {
134
+ &[data-icon-position="left"] {
135
+ --_sf-jc: start;
136
+ }
137
+ &[data-icon-position="right"] {
138
+ --_sf-jc: end;
139
+ }
140
+ &[data-icon-position="center"] {
141
+ --_sf-jc: center;
142
+ }
143
+ }
144
+
145
+ .txt {
146
+ display: flex;
147
+
148
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-cr));
149
+
150
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-fy));
151
+
152
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-se));
153
+
154
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-wt));
155
+
156
+ font-style: var(
157
+ --_sf-hr-ft-se-ic,
158
+ prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-se-ic)
159
+ );
160
+
161
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-tt-an));
162
+
163
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-lr-sg));
164
+
165
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-le-ht));
166
+
167
+ text-transform: var(
168
+ --_sf-hr-txt-tr,
169
+ prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-tt-tm, normal)
170
+ );
171
+ word-break: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-wd-bk));
172
+ word-wrap: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));
173
+
174
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ue));
175
+ // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
176
+ }
177
+
178
+ .icon {
179
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
180
+ svg {
181
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-se));
182
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-se));
183
+
184
+ path {
185
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-c1));
186
+ }
187
+ }
188
+ }
189
+ [data-element-style="Text"] {
190
+ display: inline-block;
191
+ width: 100%;
192
+ }
193
+
194
+ .icon--hover {
195
+ // position: absolute;
196
+ // inset: 0;
197
+ // opacity: 0;
198
+ display: none;
199
+ transition: opacity 0.2s ease;
200
+ }
201
+
202
+ &:hover .icon--hover {
203
+ // opacity: 1;
204
+ display: flex;
205
+ }
206
+
207
+ &:hover .icon--default {
208
+ // opacity: 0;
209
+ display: none;
210
+ }
211
+ }
212
+ }
213
+ }
214
+ }
215
+
216
+ /**
217
+ * Kits element layout styles.
218
+ * NOTE: temporary location — move into the actual stylesheet path later.
219
+ *
220
+ * Both display types (slider + grid) are built on embla carousel.
221
+ * - Slider view: each embla slide = one product card. `--kit-spv` controls how
222
+ * many cards are visible per view, `--kit-gap` the gap between them.
223
+ * - Grid view: each embla slide = a page of items laid out in a CSS grid.
224
+ * `--kit-cols` controls the columns per row, items per page is chunked in JS
225
+ * (`itemsPerSlide`), so after N items a new embla slide begins.
226
+ */
227
+
228
+ $kit-gap: #{prepareMediaVariable(--_ctm-lt-se-gp, 16px)};
229
+ $grid-gap: #{prepareMediaVariable(--_ctm-lt-im-gp, 16px)};
230
+ $kit-spv: #{prepareMediaVariable(--_ctm-lt-ss-pr-vw, 3)};
231
+ $kit-cols: #{prepareMediaVariable(--_ctm-lt-gd-cs, 2)};
232
+
233
+ .kit__v2 {
234
+ // embla viewport
235
+ &.embla {
236
+ overflow: hidden;
237
+ width: 100%;
238
+ }
239
+
240
+ .embla__container {
241
+ display: flex;
242
+ gap: $kit-gap;
243
+ }
244
+
245
+ .embla__slide {
246
+ min-width: 0; // allow flex items to shrink below content size
247
+ width: 100%;
248
+ }
249
+
250
+ // ---- Product card (shared by slider + grid) ----
251
+ &__card,
252
+ &__grid-item {
253
+ display: flex;
254
+ flex-direction: column;
255
+ }
256
+
257
+ // wrapper the ResizeObserver measures (its width == the card/grid-item width)
258
+ &__img-wrap {
259
+ width: 100%;
260
+ line-height: 0;
261
+ }
262
+
263
+ &__img {
264
+ display: block;
265
+ width: 100%;
266
+ height: prepareMediaVariable(--_ctm-lt-ie-ht, 100px);
267
+ object-fit: cover;
268
+ }
269
+
270
+ &__title {
271
+ display: block;
272
+ margin-top: 8px;
273
+ }
274
+ }
275
+
276
+ // ---- Slider view: N cards per view ----
277
+ .kit--slider {
278
+ .embla__slide {
279
+ // width of one card accounting for the gaps between the visible cards
280
+ flex: 0 0 calc((100% - (#{$kit-gap} * (#{$kit-spv} - 1))) / #{$kit-spv});
281
+ }
282
+ }
283
+
284
+ .embla__slide.kit__slide--grid {
285
+ flex: 0 0 calc((100% - (#{$kit-gap} * (#{$kit-spv} - 1))) / #{$kit-spv});
286
+ }
287
+
288
+ // ---- Grid view: one page (grid) per embla slide ----
289
+ .kit--grid {
290
+ .embla__slide--grid {
291
+ flex: 0 0 100%; // one page fills the viewport
292
+ }
293
+
294
+ .kit__grid {
295
+ display: grid;
296
+ grid-template-columns: repeat(#{$kit-cols}, minmax(0, 1fr));
297
+ gap: $grid-gap;
298
+ }
299
+ }
@@ -547,10 +547,11 @@
547
547
  // --_ctm-mob-dn-pt-pl-dn-pt-ie-pn-as-bd-cr,
548
548
  // var(--_ctm-tab-dn-pt-pl-dn-pt-ie-pn-as-bd-cr, var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-bd-cr))
549
549
  // );
550
+ @include BgColorLighter(var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-bd-cr), 10%);
550
551
  &:not(:disabled):hover {
551
- @include BgColorLighter(var(--_thm-py-bs-hr-se-bd-cr), 5%);
552
+ @include BgColorLighter(var(--_ctm-dn-pt-pl-dn-pt-ie-pn-as-bd-cr), 20%);
552
553
  }
553
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
554
+ // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
554
555
  }
555
556
  }
556
557
 
@@ -0,0 +1,30 @@
1
+ import { CommonStyleProperties } from "../../../global/style-properties";
2
+ import { CMSHTMLAttributes } from "../../../global/attributes";
3
+ import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
4
+ import { BuilderAttributes, CMSElementInterface } from "../common";
5
+ export interface KitDetailsStyleProperties extends CommonStyleProperties {
6
+ minHeight?: MinHeightValue;
7
+ height?: HeightValue;
8
+ minWidth?: MinWidthValue;
9
+ maxWidth?: MaxWidthValue;
10
+ maxHeight?: MaxHeightValue;
11
+ gridArea?: GridAreaValue;
12
+ boxSizing?: BoxSizingValue;
13
+ padding?: PaddingValue;
14
+ marginLeft?: MarginValue;
15
+ marginTop?: MarginValue;
16
+ marginBottom?: MarginValue;
17
+ marginRight?: MarginValue;
18
+ justifySelf?: JustifySelfValue;
19
+ alignSelf?: AlignSelfValue;
20
+ }
21
+ export declare const getDefaultStyles: () => KitDetailsStyleProperties;
22
+ export interface CMSKitDetailsInterface extends Omit<CMSElementInterface, "attributes"> {
23
+ attributes: {
24
+ HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
25
+ BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
26
+ CUSTOM: any;
27
+ };
28
+ styles: KitDetailsStyleProperties;
29
+ childrenStyles?: CommonStyleProperties;
30
+ }
@@ -0,0 +1,30 @@
1
+ import { CommonStyleProperties } from "../../../global/style-properties";
2
+ import { CMSHTMLAttributes } from "../../../global/attributes";
3
+ import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
4
+ import { BuilderAttributes, CMSElementInterface } from "../common";
5
+ export interface KitsStyleProperties extends CommonStyleProperties {
6
+ minHeight?: MinHeightValue;
7
+ height?: HeightValue;
8
+ minWidth?: MinWidthValue;
9
+ maxWidth?: MaxWidthValue;
10
+ maxHeight?: MaxHeightValue;
11
+ gridArea?: GridAreaValue;
12
+ boxSizing?: BoxSizingValue;
13
+ padding?: PaddingValue;
14
+ marginLeft?: MarginValue;
15
+ marginTop?: MarginValue;
16
+ marginBottom?: MarginValue;
17
+ marginRight?: MarginValue;
18
+ justifySelf?: JustifySelfValue;
19
+ alignSelf?: AlignSelfValue;
20
+ }
21
+ export declare const getDefaultStyles: () => KitsStyleProperties;
22
+ export interface CMSBundleInterface extends Omit<CMSElementInterface, "attributes"> {
23
+ attributes: {
24
+ HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
25
+ BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
26
+ CUSTOM: any;
27
+ };
28
+ styles: KitsStyleProperties;
29
+ childrenStyles?: CommonStyleProperties;
30
+ }
@@ -360,6 +360,8 @@ export declare const CMSElementsListEnum: {
360
360
  REQUEST_FOR_QUOTE: string;
361
361
  EMBROIDERY: string;
362
362
  STOCK_STATUS: string;
363
+ KIT_DETAILS: string;
364
+ KITS: string;
363
365
  };
364
366
  export declare enum CMSResponsiveModeEnums {
365
367
  DESKTOP = "desktop",
@@ -94,4 +94,6 @@ import * as cartWrapperSchema from "./elements/cart-wrapper";
94
94
  import * as embroiderySchema from "./elements/embroidery";
95
95
  import embroideryVectors from "./embroidery-icons/index";
96
96
  import * as pageSchema from "./elements/page";
97
- export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, bundleDetailsSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, cartSummarySchema, toasterSchema, spotlightSchema, productCustomizationsSchema, iconListSchema, orderStatusSchema, menuV2Schema, menuItemSchema, layouterProSchema, layouterProItemSchema, userElementsSchema, filterResultsSchema, productSizeChartSchema, badgeSchema, cartAttributesSchema, loaderSchema, addProductsTabSchema, shippingPaymentsSchema, couponSchema, megaMenuSchema, megaMenuContainerSchema, simpleListSchema, cartWrapperSchema, embroiderySchema, embroideryVectors, pageSchema, };
97
+ import * as kitDetails from "./elements/kit-details";
98
+ import * as kitsSchema from "./elements/kits";
99
+ export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, bundleDetailsSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, cartSummarySchema, toasterSchema, spotlightSchema, productCustomizationsSchema, iconListSchema, orderStatusSchema, menuV2Schema, menuItemSchema, layouterProSchema, layouterProItemSchema, userElementsSchema, filterResultsSchema, productSizeChartSchema, badgeSchema, cartAttributesSchema, loaderSchema, addProductsTabSchema, shippingPaymentsSchema, couponSchema, megaMenuSchema, megaMenuContainerSchema, simpleListSchema, cartWrapperSchema, embroiderySchema, embroideryVectors, pageSchema, kitDetails, kitsSchema, };
@@ -27,7 +27,8 @@ export declare enum SelectorKeysEnum {
27
27
  HOVER_STATE = "hoverState",
28
28
  SLIDER_NAVIGATION_STYLES = "sliderNavigationStyles",
29
29
  CATEGORY_SLIDER = "categorySlider",
30
- PRODUCT_SLIDER = "ProductSlider"
30
+ PRODUCT_SLIDER = "ProductSlider",
31
+ WIDGET_STYLE = "widgetStyle"
31
32
  }
32
33
  export declare const getDefaultData: () => {
33
34
  layout: {
@@ -183,6 +184,20 @@ export declare const getDefaultData: () => {
183
184
  };
184
185
  design: {
185
186
  selectorKey: SelectorKeysEnum;
187
+ widgetStyle: {
188
+ selectorKey: SelectorKeysEnum;
189
+ backgroundColor: CMSIBCommonInterface;
190
+ borderColor: CMSIBCommonInterface;
191
+ borderStyle: CMSIBCommonInterface;
192
+ borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
193
+ showBorder: CMSIBCommonInterface;
194
+ showShadow: CMSIBCommonInterface;
195
+ shadowColor: CMSIBCommonInterface;
196
+ blur: import("../../interfaces/global").CMSIBSizeInterface;
197
+ spread: import("../../interfaces/global").CMSIBSizeInterface;
198
+ angle: import("../../interfaces/global").CMSIBSizeInterface;
199
+ borderRadius: import("../../interfaces/global").CSSPaddingValues;
200
+ };
186
201
  headingDesign: {
187
202
  borderColor: CMSIBCommonInterface;
188
203
  borderStyle: CMSIBCommonInterface;
@@ -117,4 +117,6 @@ import * as requestForQuote from "./request-for-quote";
117
117
  import * as categoryGroups from "./categoryGroups";
118
118
  import * as embroidery from "./embroidery";
119
119
  import * as stockStatus from "./stockStatus";
120
- export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, searchResultsHeading, itemStock, cartDetails, cartSummary, checkout, allocationDetails, line, tabsV2, tabContainer, marchandiserSets, createForm, quickLinks, addOrder, buyForWithTabs, buyForTabsContainer, toaster, spotlight, bundleDetails, productCustomizations, iconList, orderStatus, menuV2, menuItem, layouterPro, layouterProItem, filterResults, productSizeChart, userElements, badge, cartAttributes, languageMenu, loader, addProductsTab, quotaDetails, shippingPayments, coupon, productDescription, megaMenu, megaMenuContainer, simpleList, cartWrapper, optionBar, myTemplates, requestForQuote, categoryGroups, embroidery, stockStatus, page, lastXOrdersButton, quickInventoryCheck, productLabels, };
120
+ import * as kitDetails from "./kitDetails";
121
+ import * as kits from "./kits";
122
+ export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, searchResultsHeading, itemStock, cartDetails, cartSummary, checkout, allocationDetails, line, tabsV2, tabContainer, marchandiserSets, createForm, quickLinks, addOrder, buyForWithTabs, buyForTabsContainer, toaster, spotlight, bundleDetails, productCustomizations, iconList, orderStatus, menuV2, menuItem, layouterPro, layouterProItem, filterResults, productSizeChart, userElements, badge, cartAttributes, languageMenu, loader, addProductsTab, quotaDetails, shippingPayments, coupon, productDescription, megaMenu, megaMenuContainer, simpleList, cartWrapper, optionBar, myTemplates, requestForQuote, categoryGroups, embroidery, stockStatus, page, lastXOrdersButton, quickInventoryCheck, productLabels, kitDetails, kits, };