@gem-sdk/components 3.0.0-pre-production.14 → 3.0.0

package/dist/cjs/stock-counter/settings/configs/settings-v2.js

@@ -0,0 +1,2 @@
+"use strict";var helpers=require("../../common/helpers.js");const StockCounterSettingsV2=[{id:"setting",controls:[{id:"layout",label:"layout",type:"layout-selector",iconViewBox:"0 0 72 72",enableItemBackground:!0,itemPerRow:2,itemSpacing:"large",popoverLabel:{en:"Layout"},enableItemOpacity:!0,options:[{label:"Full",value:"full",type:"p-image-layout",iconName:"gp-stock-counter-full"},{label:"Text & progress bar",value:"text-and-progress-bar",type:"p-image-layout",iconName:"gp-stock-counter-text-and-progress-bar"},{label:"Icon & Text",value:"icon-and-text",type:"p-image-layout",iconName:"gp-stock-counter-icon-and-text"},{label:"Text only",value:"text-only",type:"p-image-layout",iconName:"gp-stock-counter-text-only"},{label:"Progress bar only",value:"progress-bar",type:"p-image-layout",iconName:"gp-stock-counter-progress-bar"}],default:"full"},{id:"displayCondition",label:"Display Condition",type:"group",controls:[{id:"displayByDefault",label:"Display By Default",type:"select",options:[{label:"Always show",value:!0},{label:"Show if under",value:!1}],default:!0},{id:"scarcityThreshold",label:"Scarcity Threshold",type:"input:stepper",default:helpers.DEFAULT_SCARCITY_THRESHOLD,info:"Only show if inventory quantity less than or equal to the above number."}]},{id:"oosIcon",label:"",type:"icon",default:'<svg data-name="package-regular" style="width: 100%; height: 100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44-29.77,16.3-80.35-44ZM128,120,47.66,76l33.9-18.56,80.34,44ZM40,90l80,43.78v85.79L40,175.82Zm176,85.78h0l-80,43.79V133.82l32-17.51V152a8,8,0,0,0,16,0V107.55L216,90v85.77Z"></path></svg>'},{id:"hiddenCounterWhenOutOfStock",type:"select",options:[{value:!1,label:"Show message"},{value:!0,label:"Hide counter"}],default:!1},{id:"message",label:"Message",type:"group",controls:[{id:"template",label:"Template",type:"textarea",autoHeight:!0,showPlusBtn:!0,default:`Only ${helpers.DEFAULT_QUANTITY_TEMPLATE} left`,info:`Use ${helpers.DEFAULT_QUANTITY_TEMPLATE} to represent remaining number`,minHeight:56,suggestContents:[{message:"%number%",eg:"E.g: Only 2 left"}]},{id:"outOfStockMessage",label:"Out Of Stock Message",type:"input",default:"OUT OF STOCK"},{id:"continueSelling",label:"Continue Selling When Out Of Stock Message",type:"textarea",autoHeight:!0,default:"Restock soon! PREORDER NOW",info:"Turn out-of-stock productions into pre-orders"},{id:"unlimitedQuantityMessage",label:"Unlimited Quantity Message",type:"textarea",autoHeight:!0,default:"Hurry! LET BUY NOW"},{id:"translate",type:"input",default:"template,outOfStockMessage,continueSelling,unlimitedQuantityMessage"}]},{id:"icon",label:"Icon",type:"group",controls:[{id:"showIcon",label:"Show Icon",type:"toggle",default:!0},{id:"icon",label:"",type:"icon",default:`<svg height="20px" width="20px" data-name="lightning-filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508817742720598376">
+              <path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M213.85,125.46l-112,120a8,8,0,0,1-13.69-7l14.66-73.33L45.19,143.49a8,8,0,0,1-3-13l112-120a8,8,0,0,1,13.69,7L153.18,90.9l57.63,21.61a8,8,0,0,1,3,12.95Z"></path></svg>`}]},{id:"progressBarPosition",type:"option:value",options:[{value:"top",label:"Top"},{value:"bottom",label:"Bottom"}],default:"bottom"},{id:"iconPosition",type:"option:value",options:[{value:"left",label:"Left"},{value:"right",label:"Right"}],default:"left"},{id:"iconSize",type:"input:stepper",allowEmptyValue:!0,placeholder:"Enter size",devices:{desktop:{default:16}}},{id:"remainingPercentage",label:"Remaining Percentage (%)",type:"input:slider",default:helpers.DEFAULT_REMAINING_PERCENT,min:helpers.MIN_REMAINING_PERCENT,max:helpers.MAX_REMAINING_PERCENT,step:helpers.DEFAULT_RANGE_STEP,units:["%"],showDefaultUnit:!0,isNumber:!0,useOnlyUnitInit:!0}]},{id:"style",controls:[{id:"dimension",label:"Dimension",type:"group",controls:[{id:"fullWidth",label:"Full width",type:"toggle",devices:{desktop:{default:!0}}},{id:"width",label:"Width",type:"input:unit",units:["px","%"],devices:{desktop:{default:"100%"}}},{id:"alignment",label:"Alignment",type:"option:value",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}}]},{id:"display",label:"Display",type:"group",controls:[{id:"typo",type:"typography-v2",label:"Typography",default:{type:"paragraph-1",attrs:{color:"text-2"}},ignoreReRender:!0,hiddenSetting:{textAlign:!0}},{id:"textColor",label:"Text Color",type:"color-picker-v2",default:"text-2"},{id:"color",label:"Color",type:"color-picker-v2",default:"line-3"},{id:"iconColor",label:"Color",type:"color-picker-v2",default:"text-2"},{id:"oosIconColor",label:"Color",type:"color-picker-v2",default:"#DDDDDD"},{id:"oosTextColor",label:"Color",type:"color-picker-v2",default:"#DDDDDD"}]},{id:"progressBar",label:"Progress Bar",type:"group",controls:[{id:"displayProgressBar",label:"Display",type:"toggle",default:!0},{id:"progressBarHeight",type:"input:stepper",min:5,max:20,devices:{desktop:{default:10}}},{id:"roundedBorder",label:"Rounded Border",type:"toggle",default:!0},{id:"effect",label:"Effect",type:"toggle",default:!0}]},{id:"borderRadius",type:"corner-v2",default:{btrr:"99999px",bblr:"99999px",bbrr:"99999px",btlr:"99999px",radiusType:"circle"},compoDefaultValue:{btrr:"99999px",bblr:"99999px",bbrr:"99999px",btlr:"99999px",radiusType:"circle"}}]}];exports.StockCounterSettingsV2=StockCounterSettingsV2;

package/dist/cjs/stock-counter/settings/configs/ui-v1.js

@@ -0,0 +1 @@
+"use strict";const SettingUIV1=[{type:"group",label:{en:"Remaining stock"},controls:[{type:"control",label:{en:"Hide counter when out of stock"},setting:{id:"hiddenCounterWhenOutOfStock"}}]},{type:"group",controls:[{type:"control",label:{en:"Icon"},options:{label:"large"},setting:{id:"showIcon"}},{type:"control",condition:"showIcon == true",setting:{id:"icon"},layout:"vertical"},{type:"control",condition:"showIcon == true",label:{en:"Icon color"},setting:{id:"iconColor"}}]},{type:"group",controls:[{type:"control",label:{en:"Progress bar"},options:{label:"large"},setting:{id:"displayProgressBar"}},{type:"control",condition:"displayProgressBar == true",label:{en:"Percentage left"},setting:{id:"remainingPercentage"}},{type:"control",condition:"displayProgressBar == true",label:{en:"Color"},setting:{id:"color"}},{type:"control",condition:"displayProgressBar == true",label:{en:"Height"},setting:{id:"progressBarHeight"}},{type:"control",condition:"displayProgressBar == true",label:{en:"Corner"},setting:{id:"roundedBorder"}},{type:"control",condition:"displayProgressBar == true",label:{en:"Effect"},setting:{id:"effect"}}]},{type:"group",controls:[{type:"control",label:{en:"Always show"},setting:{id:"displayByDefault"},options:{label:"large"}},{type:"control",label:{en:"Show if under"},condition:"displayByDefault == false",setting:{id:"scarcityThreshold"}}]},{type:"group",label:{en:"Message"},controls:[{type:"control",label:{en:"Template"},setting:{id:"template"},options:{labelPosition:"start"}},{type:"control",label:{en:"Out of stock"},setting:{id:"outOfStockMessage"}},{type:"control",label:{en:"Continue <br> selling when <br> out of stock"},options:{styleControl:{"min-width":"140px"}},setting:{id:"continueSelling"}},{type:"control",label:{en:"Unlimited <br> quantity"},setting:{id:"unlimitedQuantityMessage"}}]},{type:"group",label:{en:"Size"},controls:[{type:"control",label:{en:"Full width"},setting:{id:"fullWidth"}},{type:"control",condition:"fullWidth == false",label:{en:"Width"},setting:{id:"width"}}]},{type:"control",label:{en:"Text"},setting:{id:"typo"},layout:"vertical",options:{label:"large"}},{type:"control",condition:"fullWidth == false",label:{en:"Align"},options:{label:"large"},setting:{id:"alignment"}}];exports.SettingUIV1=SettingUIV1;

package/dist/cjs/stock-counter/settings/configs/ui-v2.js

@@ -0,0 +1 @@
+"use strict";const SettingUIV2=[{label:{en:"layout"},controls:[{setting:{id:"layout"},layout:"vertical",controlChangeTrigger:{settings:[{action:{controlId:"displayProgressBar",newValue:!0,groupType:"style",controlType:"style"},source:["layout"],condition:"layout !== 'icon-and-text' && layout !== 'text-only'"},{action:{controlId:"displayProgressBar",newValue:!1,groupType:"style",controlType:"style"},source:["layout"],condition:"layout === 'icon-and-text' || layout === 'text-only'"},{action:{controlId:"showIcon",newValue:!0,groupType:"setting",controlType:"setting"},source:["layout"],condition:"layout === 'full' || layout === 'icon-and-text'"},{action:{controlId:"showIcon",newValue:!1,groupType:"setting",controlType:"setting"},source:["layout"],condition:"layout === 'text-and-progress-bar' || layout === 'progress-bar' || layout === 'text-only'"}],options:{noRecordHistory:!0}}}]},{controls:[{label:{en:"Progress bar"},setting:{id:"displayProgressBar"},options:{labelVariant:"primary",toggleStyle:"switch"}},{conditionDisplay:"displayProgressBar == true",label:{en:"Percentage left"},setting:{id:"remainingPercentage"}},{conditionDisplay:"displayProgressBar == true",label:{en:"Color"},setting:{id:"color"}},{conditionDisplay:"displayProgressBar == true",label:{en:"Effect"},setting:{id:"effect"}}],moreSettings:{type:"collapse",controls:[{conditionDisplay:"displayProgressBar == true",label:{en:"Height"},setting:{id:"progressBarHeight"}},{conditionDisplay:"displayProgressBar == true",label:{en:"Position"},setting:{id:"progressBarPosition"}},{conditionDisplay:"displayProgressBar == true",label:{en:"Corner"},setting:{id:"borderRadius"}}]}},{controls:[{label:{en:"Icon"},setting:{id:"showIcon"},options:{labelVariant:"primary",toggleStyle:"switch"}},{label:{en:"Icon"},conditionDisplay:"showIcon == true",setting:{id:"icon"},layout:"horizontal"},{label:{en:"Size"},conditionDisplay:"showIcon == true",setting:{id:"iconSize"},layout:"horizontal"},{conditionDisplay:"showIcon == true",label:{en:"Color"},setting:{id:"iconColor"}},{label:{en:"Position"},conditionDisplay:"showIcon == true",setting:{id:"iconPosition"},layout:"horizontal"}]},{label:{en:"Size"},controls:[{label:{en:"Width"},setting:{id:"width"}}]},{label:{en:"Text"},controls:[{label:{en:"Content"},type:"combo",iconName:"polaris-text-block",getValueFromSettingID:"template",isHideClear:!0,controls:[{label:{en:"Content"},setting:{id:"template"},layout:"vertical"}]},{setting:{id:"typo"},layout:"vertical"}]},{label:{en:"Out of stock state"},controls:[{label:{en:"Action"},setting:{id:"hiddenCounterWhenOutOfStock"}},{label:{en:"Icon"},setting:{id:"oosIcon"},conditionDisplay:"hiddenCounterWhenOutOfStock == false"},{label:{en:"Content"},type:"combo",iconName:"polaris-text-block",getValueFromSettingID:"outOfStockMessage",isHideClear:!0,controls:[{label:{en:"Content"},setting:{id:"outOfStockMessage"},layout:"vertical"}],conditionDisplay:"hiddenCounterWhenOutOfStock == false"},{label:{en:"Icon color"},setting:{id:"oosIconColor"},conditionDisplay:"hiddenCounterWhenOutOfStock == false"},{label:{en:"Text color"},setting:{id:"oosTextColor"},conditionDisplay:"hiddenCounterWhenOutOfStock == false"}]},{label:{en:"Message"},controls:[{label:{en:"Sell when OOS"},type:"combo",iconName:"polaris-text-block",getValueFromSettingID:"continueSelling",isHideClear:!0,popoverLabel:{en:"Out of stock sell"},controls:[{label:{en:"Content"},setting:{id:"continueSelling"},layout:"vertical"}]},{label:{en:"Unlimited stock"},type:"combo",iconName:"polaris-text-block",getValueFromSettingID:"unlimitedQuantityMessage",isHideClear:!0,popoverLabel:{en:"Unlimited quantity"},controls:[{label:{en:"Content"},setting:{id:"unlimitedQuantityMessage"},layout:"vertical"}]}]},{label:{en:"Display option"},controls:[{label:{en:"Display"},setting:{id:"displayByDefault"}},{label:{en:"Stock"},conditionDisplay:"displayByDefault == false",setting:{id:"scarcityThreshold"}}]},{controls:[{label:{en:"Align"},conditionEnable:'!(parseInt(width) >= 100 && width?.includes("%"))',setting:{id:"alignment"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];exports.SettingUIV2=SettingUIV2;

package/dist/cjs/tab/common/attrs.js

@@ -0,0 +1 @@
+"use strict";const getAttr=({uid:t})=>({"data-id":t}),getAttrContent=({uid:t})=>({key:t});exports.getAttr=getAttr,exports.getAttrContent=getAttrContent;

package/dist/cjs/tab/common/classes.js

@@ -0,0 +1,4 @@
+"use strict";var core=require("@gem-sdk/core"),helpers=require("./helpers.js");const getClassesWrapper=({builderProps:e,advancedCssClass:s})=>{let t="gp-flex";return e?.uid&&(t+=` ${e?.uid}`),s&&(t+=` ${s}`),{...core.composeClasses(t)}},getContainClasses=({setting:e})=>{let{position:s}=e??{},t="gp-flex ";return helpers.getWrapClassByPositionResponsive(s)&&(t+=` ${helpers.getWrapClassByPositionResponsive(s)}`),{...core.composeClasses(t)}},getTabListClasses=({setting:e})=>{let{position:s}=e??{},t="gp-tab-header-list gp-flex gp-flex-wrap gp-overflow-hidden ";return helpers.getUlClassByPositionResponsive(s)&&(t+=` ${helpers.getUlClassByPositionResponsive(s)}`),{...core.composeClasses(t)}},getItemClasses=({setting:e,isNotLiquid:s,isActive:t,currentDevice:a})=>{let{labelBgColor:o,labelColor:l,position:r,enableActiveEffect:p}=e??{},g="gp-tab-item gp-navs-tab gp-flex gp-cursor-pointer gp-py-2 gp-px-4 gp-whitespace-nowrap";return s&&(t&&p?g+=` ${core.getGlobalColorClass("bg",o?.active)} ${core.getGlobalColorClass("text",l?.active)}`:g+=` ${core.getGlobalColorStateClass("bg",o)} ${core.getGlobalColorStateClass("text",l)}`,a&&r?.[a]&&(g+=` ${r?.[a]}`)),{...core.composeClasses(g)}},getTabParentListClasses=()=>({...core.composeClasses("gp-flex")}),getStyleTagClasses=({panelWidth:e,builderProps:s})=>{let t="",a=helpers.makeStyleLayoutFullWidthResponsive(e,s);return s?.uid&&(t+=` .${s?.uid} .gp-tab-item p {
+            word-wrap: break-word;
+            white-space: break-spaces;
+          }`),a&&(t+=` ${a}`),t},getWrapperContentClasses=()=>({...core.composeClasses("gp-flex gp-flex-1 gp-min-w-0")}),getContainContentClasses=()=>({...core.composeClasses("gp-tab-item-container gp-p-4")}),getTextClasses=()=>({...core.composeClasses("gp-cursor-pointer gp-overflow-hidden gp-whitespace-nowrap !gp-text-inherit")}),getTabItemClasses=({parentUid:e,className:s,isNotLiquid:t,isActive:a})=>{let o="gp-tab-item";return e&&(o+=` gp-child-item-${e}`),s&&(o+=` ${s}`),t&&!a&&(o+=" !gp-hidden"),{...core.composeClasses(o)}};exports.getClassesWrapper=getClassesWrapper,exports.getContainClasses=getContainClasses,exports.getContainContentClasses=getContainContentClasses,exports.getItemClasses=getItemClasses,exports.getStyleTagClasses=getStyleTagClasses,exports.getTabItemClasses=getTabItemClasses,exports.getTabListClasses=getTabListClasses,exports.getTabParentListClasses=getTabParentListClasses,exports.getTextClasses=getTextClasses,exports.getWrapperContentClasses=getWrapperContentClasses;

package/dist/cjs/tab/common/helpers.js

@@ -0,0 +1,2 @@
+"use strict";var core=require("@gem-sdk/core");const makeStyleLayoutFullWidthResponsive=(e,t)=>core.DEVICES.map(o=>{if("100%"===core.getValueByDevice(e,o))return`.${t?.uid}
+      .wrap-width_full_${o}_top_true { width: 100%; } .${t?.uid} .wrap-width_full_${o}_top_true .gp-tab-item { flex: 1 }`}).join(""),makeDeviceDefault=(e={})=>{let{desktop:t="",tablet:o=t,mobile:s=o||t}=e;return{desktop:t,tablet:o,mobile:s}},getStyleWidthByPositionResponsive=e=>{let t={desktop:"",tablet:"",mobile:""};if(e.position)for(let o of Object.keys(t))if(e.position[o]&&"top"!==e.position[o]){let s=makeDeviceDefault(e.labelWidth);t[o]=s?.[o]||"min-content"}else{let s=makeDeviceDefault(e.panelWidth);t[o]=s?.[o]||"auto"}return t},getUlClassByPositionResponsive=e=>{let t="";if(e)for(let[o,s]of Object.entries(e))"left"===s||"right"===s?t+=` ${"desktop"===o?"gp-flex-col":o+":gp-flex-col"}`:t+=` ${"desktop"===o?"gp-flex-row":o+":gp-flex-row"}`;return t},getWrapClassByPositionResponsive=e=>{let t="";if(e)for(let[o,s]of Object.entries(e))"left"===s?t+=` ${"desktop"===o?"gp-flex-row":o+":gp-flex-row"}`:"right"===s?t+=` ${"desktop"===o?"gp-flex-row-reverse":o+":gp-flex-row-reverse"}`:"top"===s?t+=` ${"desktop"===o?"gp-flex-col":o+":gp-flex-col"}`:"bottom"===s&&(t+=` ${"desktop"===o?"gp-flex-col-reverse":o+":gp-flex-col-reverse"}`);return t};exports.getStyleWidthByPositionResponsive=getStyleWidthByPositionResponsive,exports.getUlClassByPositionResponsive=getUlClassByPositionResponsive,exports.getWrapClassByPositionResponsive=getWrapClassByPositionResponsive,exports.makeStyleLayoutFullWidthResponsive=makeStyleLayoutFullWidthResponsive;

package/dist/cjs/tab/common/styles.js

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),helpers$1=require("./helpers.js");const getStyleWrapper=(e,t)=>{let{background:r,containWidth:l,align:o}=e??{},a={...t,...core.getStyleBackgroundByDevice(r),...core.getGradientBgrStyleByDevice(r,{desktop:!0,tablet:!0,mobile:!0}),...core.makeStyleResponsive("w",core.makeWidth(l)),...core.makeStyleResponsive("as",o)};return helpers.filterTruthyStyles(a)},getTabListStyle=e=>{let{panelAlign:t}=e??{},r={...core.makeStyleResponsive("jc",t),...core.makeStyleResponsive("w",{desktop:"100%",tablet:"100%",mobile:"100%"})};return helpers.filterTruthyStyles(r)},getItemStyle=(e,t)=>{let{labelColor:r,labelBgColor:l,borderTab:o,labelAlign:a,enableActiveEffect:i,panelWidth:s,position:n,panelFullWidth:y,labelWidth:c}=e??{},S={},p=!0===i||void 0===i;return S={...S=t&&p?{...core.makeStyleResponsive("jc",a),...core.makeStyle({c:core.getSingleColorVariable(r?.active??r?.normal),bgc:core.getSingleColorVariable(l?.active??l?.normal),bs:o?.active?.border??o?.normal?.border,bw:o?.active?.width??o?.normal?.width,bc:core.getSingleColorVariable(o?.active?.color??o?.normal?.color)})}:{...core.makeStyleResponsive("jc",a),...core.getGlobalColorStateStyle("c",r),...core.getGlobalColorStateStyle("bgc",l),...core.handleConvertBorderStyle(o),...core.handleConvertBorderWidth(o),...core.handleConvertBorderColor(o)},...core.makeStyleResponsive("w",helpers$1.getStyleWidthByPositionResponsive({position:n,panelFullWidth:y,panelWidth:s,labelWidth:c}))},e?.enableHoverEffect||(S=core.filterHoverVariables(S)),helpers.filterTruthyStyles(S)},getTabParentListStyle=e=>{let{panelAlign:t,panelAlignVertical:r}=e??{},l={...core.makeStyleResponsive("jc",t),...core.makeStyleResponsive("ai",r)};return helpers.filterTruthyStyles(l)},getContainContentStyle=()=>{let e={};return core.makeStyle({w:"100%"})&&(e={...core.makeStyle({w:"100%"})}),helpers.filterTruthyStyles(e)},getTabItemStyle=(e,t)=>{let r={...e,...core.makeStyle({h:"100%",v:t?"visible":"hidden",pos:t?"relative":"absolute"})};return helpers.filterTruthyStyles(r)};exports.getContainContentStyle=getContainContentStyle,exports.getItemStyle=getItemStyle,exports.getStyleWrapper=getStyleWrapper,exports.getTabItemStyle=getTabItemStyle,exports.getTabListStyle=getTabListStyle,exports.getTabParentListStyle=getTabParentListStyle;

package/dist/cjs/tab/components/TabItem.js

@@ -1,24 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var ChildrenDroppable = require('../../grid/components/ChildrenDroppable.js');
-
-const TabItem = ({ children, builderAttrs, isActive, className, parentUid })=>{
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        ...builderAttrs,
-        className: core.cls(className, {
-            'gp-hidden': !isActive
-        }, `gp-child-item-${parentUid}`),
-        style: {
-            ...core.makeStyle({
-                h: '100%'
-            })
-        },
-        children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : children
-    });
-};
-
-exports.default = TabItem;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ChildrenDroppable=require("../../grid/components/ChildrenDroppable.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js");const TabItem=e=>{let{children:s,builderAttrs:t,className:r,parentUid:l,isActive:i,style:a}=e,m=system.createStyle({...styles.getTabItemStyle(a,i)}),o=system.createClass({...classes.getTabItemClasses({parentUid:l,className:r,isNotLiquid:!0,isActive:i})});return jsxRuntime.jsx("div",{...t,className:o,style:m,children:core.isEmptyChildren(s)?jsxRuntime.jsx(ChildrenDroppable.default,{}):s})};exports.default=TabItem;

package/dist/cjs/tab/components/TabItem.liquid.js

@@ -1,28 +1,9 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-
-const TabItem = ({ children, builderAttrs, style, className, parentUid, isActive })=>{
-    if (core.isEmptyChildren(children)) {
-        return core.template`<div class="gp-tab-item"></div>`;
-    }
-    return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js");const TabItem=e=>{let{children:s,builderAttrs:t,className:r,parentUid:l,style:a,isActive:m}=e,c=system.createStyle({...styles.getTabItemStyle(a,m)}),o=system.createClass({...classes.getTabItemClasses({parentUid:l,className:r,isNotLiquid:!1,isActive:m})});return core.template`
   <div
-    ${{
-        ...builderAttrs
-    }}
-    style="${{
-        ...style
-    }}"
-    class="${core.cls(`gp-tab-item gp-child-item-${parentUid}`, className, {
-        'gp-visible gp-h-0 gp-overflow-hidden': !isActive
-    })}"
+    ${{...t}}
+    class="${o}"
+    style="${c}"
   >
-    ${children}
+    ${s}
   </div>
-  `;
-};
-
-exports.default = TabItem;
+  `};exports.default=TabItem;

package/dist/cjs/tab/components/Tabs.js

@@ -1,157 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var React = require('react');
-var Text = require('../../text/components/Text.js');
-var common = require('./common.js');
-var useGetProductId = require('../../hooks/useGetProductId.js');
-var useTabInteraction = require('../hooks/useTabInteraction.js');
-
-const Tabs = ({ builderAttrs, builderProps, children, style, setting })=>{
-    const currentDevice = core.useCurrentDevice();
-    const [activeTab, setActiveKey] = React.useState(setting?.activeKey || 1);
-    const { refContainer, productID } = useGetProductId.useGetProductId();
-    const { dispatchEventTabActive } = useTabInteraction.useTabInteraction({
-        activeKey: setting?.activeKey || 1,
-        setActiveKey,
-        activeTab,
-        refContainer,
-        componentUid: builderProps?.uid || ''
-    });
-    if (setting && !setting?.labelWidth) {
-        setting.labelWidth = {
-            desktop: '200px'
-        };
-    }
-    const childItemUid = React.Children.map(children, (child)=>{
-        return child?.props?.uid;
-    });
-    const makeStyleLayoutFullWidthResponsive = React.useMemo(()=>{
-        const fullWidthInherit = common.makeDeviceFullWidthDefault(setting?.panelFullWidth);
-        return Object.entries(fullWidthInherit).filter(([, isFullWidth])=>isFullWidth).map(([device])=>`.${builderProps?.uid} 
-        .wrap-width_full_${device}_top_true { width: 100%; }\n`).join('');
-    }, [
-        setting?.panelFullWidth,
-        builderProps?.uid
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        ref: refContainer,
-        "data-id": builderProps?.uid,
-        ...builderAttrs,
-        style: {
-            ...style,
-            ...core.getStyleBackgroundByDevice(setting?.background)
-        },
-        className: core.cls('gp-flex', builderProps?.uid),
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx("style", {
-                children: `.${builderProps?.uid} .gp-tab-item.left p,
-          .${builderProps?.uid} .gp-tab-item.right p {
-            word-wrap: break-word;
-            white-space: break-spaces;
-          }
-          ${makeStyleLayoutFullWidthResponsive}
-        `
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: core.cls('gp-flex gp-w-full', common.getWrapClassByPositionResponsive(setting?.position)),
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: "gp-flex",
-                        style: {
-                            ...core.makeStyleResponsive('jc', setting?.panelAlign)
-                        },
-                        children: /*#__PURE__*/ jsxRuntime.jsx("ul", {
-                            className: core.cls('gp-tab-header-list gp-flex gp-flex-wrap', common.getUlClassByPositionResponsive(setting?.position), `wrap-width_full_${currentDevice}_${setting?.position?.[currentDevice]}_${common.makeDeviceFullWidthDefault(setting?.panelFullWidth)?.[currentDevice]}`),
-                            style: {
-                                ...core.makeStyleResponsive('maxw', common.getStyleWidthByPositionResponsive({
-                                    position: setting?.position,
-                                    panelFullWidth: setting?.panelFullWidth,
-                                    panelWidth: setting?.panelWidth,
-                                    labelWidth: setting?.labelWidth
-                                }))
-                            },
-                            children: setting?.childItem?.map((tab, index)=>{
-                                const isActive = activeTab - 1 == index;
-                                return /*#__PURE__*/ jsxRuntime.jsx("li", {
-                                    className: core.cls('gp-flex gp-cursor-pointer gp-px-4 gp-py-2 gp-whitespace-nowrap gp-flex-1 gp-tab-item', setting?.position?.[currentDevice], {
-                                        [core.getGlobalColorStateClass('bg', setting?.labelBgColor)]: !isActive,
-                                        [core.getGlobalColorStateClass('text', setting?.labelColor)]: !isActive,
-                                        [core.getGlobalColorClass('bg', setting?.labelBgColor?.active)]: isActive,
-                                        [core.getGlobalColorClass('text', setting?.labelColor?.active)]: isActive
-                                    }),
-                                    "aria-hidden": true,
-                                    onClick: ()=>{
-                                        setActiveKey(index + 1);
-                                        dispatchEventTabActive(index);
-                                    },
-                                    style: {
-                                        ...core.makeStyleResponsive('jc', setting?.labelAlign),
-                                        ...isActive ? core.makeStyle({
-                                            c: core.getSingleColorVariable(setting?.labelColor?.active ?? setting?.labelColor?.normal),
-                                            bgc: core.getSingleColorVariable(setting?.labelBgColor?.active ?? setting?.labelBgColor?.normal),
-                                            bs: setting?.borderTab?.active?.border ?? setting?.borderTab?.normal?.border,
-                                            bw: setting?.borderTab?.active?.width ?? setting?.borderTab?.normal?.width,
-                                            bc: core.getSingleColorVariable(setting?.borderTab?.active?.color ?? setting?.borderTab?.normal?.color)
-                                        }) : {
-                                            ...core.getGlobalColorStateStyle('c', setting?.labelColor),
-                                            ...core.getGlobalColorStateStyle('bgc', setting?.labelBgColor),
-                                            ...core.handleConvertBorderStyle(setting?.borderTab),
-                                            ...core.handleConvertBorderWidth(setting?.borderTab),
-                                            ...core.handleConvertBorderColor(setting?.borderTab)
-                                        }
-                                    },
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
-                                        setting: {
-                                            text: tab,
-                                            htmlTag: 'div',
-                                            options: {
-                                                useState: true,
-                                                uniqueId: productID ? `${childItemUid?.[index]}-${productID}` : `${childItemUid?.[index]}`,
-                                                productID
-                                            },
-                                            excludeFlex: true
-                                        },
-                                        styles: {
-                                            typo: setting?.labelTypoV2,
-                                            typography: setting?.labelTypo,
-                                            textAlign: setting?.labelAlign
-                                        },
-                                        className: "gp-overflow-hidden gp-border gp-border-transparent"
-                                    })
-                                }, childItemUid && childItemUid[index]);
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: "gp-flex gp-flex-1 gp-min-w-0",
-                        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "gp-p-4 gp-pb-0",
-                            style: {
-                                ...core.makeStyle({
-                                    w: '100%'
-                                })
-                            },
-                            children: React.Children.map(core.filterToolbarPreview(children), (child, index)=>{
-                                if (/*#__PURE__*/ React.isValidElement(child)) {
-                                    return /*#__PURE__*/ jsxRuntime.jsx(child.type, {
-                                        ...child.props,
-                                        isActive: index == activeTab - 1,
-                                        parentUid: builderProps?.uid
-                                    });
-                                }
-                                return null;
-                            })
-                        })
-                    })
-                ]
-            }),
-            core.filterToolbarPreview(children, true)
-        ]
-    });
-};
-
-exports.default = Tabs;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),useTab=require("../hooks/useTab.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),Text=require("../../text/components/Text.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const Tabs=e=>{let{builderAttrs:s,builderProps:t,style:a,setting:l,advanced:r,children:i}=e,{cssClass:c}=r??{},{panelWidth:n,childItem:m,labelAlign:y,labelTypo:u,labelTypoV2:d}=l??{},{currentDevice:o,productID:x,dispatchEventTabActive:C,activeTab:j,setActiveKey:p,refContainer:g}=useTab.useTab(l,t);l&&!l?.labelWidth&&(l.labelWidth={desktop:"200px"});let T=system.createAttr({...attrs.getAttr({uid:t?.uid||""})}),h=system.createStyle({...styles.getStyleWrapper(l,a)}),b=system.createClass({...classes.getClassesWrapper({builderProps:t,advancedCssClass:c})}),R=system.createClass({...classes.getContainClasses({setting:l})}),v=classes.getStyleTagClasses({panelWidth:n,builderProps:t}),S=system.createClass({...classes.getTabParentListClasses()}),q=system.createStyle({...styles.getTabParentListStyle(l)}),N=system.createClass({...classes.getTabListClasses({setting:l})}),f=system.createStyle({...styles.getTabListStyle(l)}),A=e=>system.createClass({...classes.getItemClasses({setting:l,isNotLiquid:!0,isActive:e,currentDevice:o})}),k=e=>system.createStyle({...styles.getItemStyle(l,e)}),L=React.Children.map(i,e=>e?.props?.uid),P=system.createClass({...classes.getWrapperContentClasses()}),W=system.createClass({...classes.getContainContentClasses()}),I=system.createStyle({...styles.getContainContentStyle()}),$=system.createClass({...classes.getTextClasses()}),w=system.createAttr({...attrs.getAttrContent({uid:t?.uid||""})}),_=()=>m?.map((e,s)=>{let t=j==s;return jsxRuntime.jsx("li",{"aria-hidden":!0,className:A(t),style:k(t),onClick:()=>{p(s),C(s)},children:jsxRuntime.jsx(Text.default,{className:$,styles:{typo:d,typography:u,textAlign:y},setting:{text:e,htmlTag:"div",excludeFlex:!0,options:{useState:!0,uniqueId:x?`${L?.[s]}-${x}`:`${L?.[s]}`,productID:x}}})},L&&L[s])}),E=()=>React.Children.map(core.filterToolbarPreview(i),(e,s)=>React.isValidElement(e)?jsxRuntime.jsx(e.type,{...e.props,isActive:s==j,parentUid:t?.uid}):null);return jsxRuntime.jsxs("div",{ref:g,...s,...T,style:h,className:b,children:[jsxRuntime.jsx("style",{children:v}),jsxRuntime.jsxs("div",{className:R,children:[jsxRuntime.jsx("div",{className:S,style:q,children:jsxRuntime.jsx("ul",{className:N,style:f,children:_()})}),jsxRuntime.jsx("div",{className:P,children:jsxRuntime.jsx("div",{...w,className:W,style:I,children:E()})})]}),core.filterToolbarPreview(i,!0)]})};exports.default=Tabs;

package/dist/cjs/tab/components/Tabs.liquid.js

@@ -1,128 +1,36 @@
-'use strict';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),Text_liquid=require("../../text/components/Text.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const Tabs=e=>{let{builderProps:s,style:t,setting:a,advanced:l,rawChildren:r}=e;delete a?.labelTypoV2?.attrs?.color;let{cssClass:i}=l??{},{panelWidth:c,childItem:y,labelAlign:d,labelTypo:o,labelTypoV2:n}=a??{},p=system.createStateOrContext({setting:a,builderProps:s}),m=void 0;a&&!a?.labelWidth&&(a.labelWidth={desktop:"200px"});let g=system.createAttr({...attrs.getAttr({uid:s?.uid||""})}),u=system.createStyle({...styles.getStyleWrapper(a,t)}),C=system.createClass({...classes.getClassesWrapper({builderProps:s,advancedCssClass:i})}),v=system.createClass({...classes.getContainClasses({setting:a})}),$=classes.getStyleTagClasses({panelWidth:c,builderProps:s}),S=system.createClass({...classes.getTabParentListClasses()}),h=system.createStyle({...styles.getTabParentListStyle(a)}),b=system.createClass({...classes.getTabListClasses({setting:a})}),x=system.createStyle({...styles.getTabListStyle(a)}),T=e=>system.createClass({...classes.getItemClasses({setting:a,isNotLiquid:!1,isActive:e,currentDevice:m})}),f=e=>system.createStyle({...styles.getItemStyle(a,e)}),q=system.createClass({...classes.getWrapperContentClasses()}),A=system.createClass({...classes.getContainContentClasses()}),j=system.createStyle({...styles.getContainContentStyle()}),I=system.createAttr({...attrs.getAttrContent({uid:s?.uid||""})}),L=system.createClass({...classes.getTextClasses()}),P=()=>y?.map(e=>e?.replaceAll("'","&#039;"))?.map((t,l)=>{let r=(a?.activeKey??0)<0||(a?.activeKey??0)>=(a?.childItem??[]).length?0===l:l===a?.activeKey,i=helpers.getDynamicSourceLocales({val:t,uid:s?.uid,settingId:`childItem_${l}`,pageContext:e.pageContext,isCapitalize:a?.labelTypoV2?.attrs?.transform==="capitalize",translate:a?.translate});return core.template`
+      <li
+        aria-hidden
+        class="${T(r)}"
+        style="${f(r)}"
+        key="${s?.uid}"
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var Text_liquid = require('../../text/components/Text.liquid.js');
-var common = require('./common.js');
-var helpers = require('../../helpers.js');
-
-const Tabs = ({ builderAttrs, builderProps, rawChildren, style, setting, advanced, pageContext })=>{
-    const initialStyles = '--bs:unset, --hvr-bs:unset, --hvr-bgc:unset, --hvr-c:unset,--hvr-bw:unset, --hvr-bc:unset';
-    if (setting?.childItem) setting.childItem = setting.childItem.map((item)=>item.replaceAll("'", '&#039;'));
-    const makeStyleLayoutFullWidthResponsive = ()=>{
-        const fullWidthInherit = common.makeDeviceFullWidthDefault(setting?.panelFullWidth);
-        return Object.entries(fullWidthInherit).filter(([, isFullWidth])=>isFullWidth).map(([device])=>`.${builderProps?.uid} .wrap-width_full_${device}_top_true { width: 100%; }\n`).join('');
-    };
-    return core.template`
-    <gp-tab data-id="${builderProps?.uid}" gp-data='${JSON.stringify({
-        setting,
-        builderProps
-    }).replaceAll("'", '&#039;')}'>
-      <div
-        ${{
-        ...builderAttrs
-    }}
-        data-id=""
-        style="${{
-        ...style,
-        ...core.getStyleBackgroundByDevice(setting?.background)
-    }}"
-        class="${core.cls('gp-flex', builderProps?.uid, advanced?.cssClass)}"
       >
-        <style>
-            .${builderProps?.uid} .gp-navs-tab.left p,
-            .${builderProps?.uid} .gp-navs-tab.right p {
-              word-wrap: break-word;
-              white-space: break-spaces;
-            }
-            ${makeStyleLayoutFullWidthResponsive()}
-        </style>
-        <div
-          class="${core.cls('gp-flex gp-w-full', common.getWrapClassByPositionResponsive(setting?.position))}"
-        >
-          <div
-            class="gp-flex"
-            style="${{
-        ...core.makeStyleResponsive('jc', setting?.panelAlign)
-    }}"
-          >
-            <ul
-              class="${core.cls('gp-tab-header-list gp-flex gp-flex-wrap', common.getUlClassByPositionResponsive(setting?.position))}"
-              style="${{
-        ...core.makeStyleResponsive('maxw', common.getStyleWidthByPositionResponsive({
-            position: setting?.position,
-            panelFullWidth: setting?.panelFullWidth,
-            panelWidth: setting?.panelWidth,
-            labelWidth: setting?.labelWidth
-        }))
-    }}"
-            >
-              ${setting?.childItem?.map((item, index)=>{
-        const val = helpers.getDynamicSourceLocales({
-            val: item,
-            uid: builderProps?.uid,
-            settingId: `childItem_${index}`,
-            pageContext,
-            isCapitalize: setting?.labelTypoV2?.attrs?.transform === 'capitalize',
-            translate: setting?.translate
-        });
-        return core.template`
-                  <li
-                    class="gp-navs-tab gp-flex gp-flex-1 gp-cursor-pointer gp-py-2 gp-px-4"
-                    aria-hidden
-                    style="${initialStyles}"
-                    key="${builderProps?.uid}"
-                  >
-                    ${Text_liquid.default({
-            styles: {
-                typo: setting?.labelTypoV2,
-                typography: setting?.labelTypo,
-                textAlign: setting?.labelAlign
-            },
-            setting: {
-                text: val,
-                htmlTag: 'div',
-                excludeFlex: true,
-                isForceValue: true
-            },
-            className: 'gp-cursor-pointer gp-overflow-hidden gp-whitespace-nowrap'
-        })}
-                  </li>
-                `;
-    }).join('')}
+        ${Text_liquid.default({className:L,styles:{typo:n,typography:o,textAlign:d},setting:{text:i,htmlTag:"div",excludeFlex:!0,isForceValue:!0}})}
+      </li>
+    `}).join(""),_=()=>core.WrapRenderChildren({uid:s?.uid||"",customProps:r?.[0].customProps},r?.map((e,t)=>{let l=(a?.activeKey??0)<0||(a?.activeKey??0)>=(a?.childItem??[]).length?0===t:t===a?.activeKey;return e?core.template`${core.RenderChildren({...e,parentUid:s?.uid,isActive:l})}`:""})),k=()=>core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-tab-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-tab-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
+    <gp-tab
+      ${{...g}}
+      style="${u}"
+      class="${C}"
+      gp-data='${JSON.stringify(p)?.replaceAll("'","&#039;")}'>
+        <style>${$}</style>
+        <div class="${v}">
+          <div class="${S}" style="${h}">
+            <ul class="${b}" style="${x}">
+              ${P()}
             </ul>
           </div>
-          <div
-            class="gp-flex gp-flex-1 gp-min-w-0"
-          >
+          <div class="${q}">
             <div
-              class="gp-tab-item-container gp-p-4 gp-pb-0"
-              ${builderProps?.uid && `key="${builderProps?.uid}"`}
-              style="${{
-        ...core.makeStyle({
-            w: '100%'
-        })
-    }}"
+              ${{...I}}
+              class="${A}"
+              style="${j}"
             >
-            ${core.WrapRenderChildren({
-        uid: builderProps?.uid || '',
-        customProps: rawChildren?.[0].customProps
-    }, rawChildren?.map((child, index)=>{
-        const isActive = (setting?.activeKey ?? 0) < 0 || (setting?.activeKey ?? 0) >= (setting?.childItem ?? []).length ? index === 0 : index === (setting?.activeKey ?? 0) - 1;
-        return child ? core.template`${core.RenderChildren({
-            ...child,
-            parentUid: builderProps?.uid,
-            isActive
-        })}` : '';
-    }))}
+              ${_()}
             </div>
           </div>
         </div>
-      </div>
     </gp-tab>
-    ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-tab.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-tab.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `;
-};
-
-exports.default = Tabs;
+    ${k()}
+  `};exports.default=Tabs;

package/dist/cjs/tab/hooks/useTab.js

@@ -0,0 +1 @@
+"use strict";var core=require("@gem-sdk/core"),React=require("react"),useGetProductId=require("../../hooks/useGetProductId.js"),useTabInteraction=require("./useTabInteraction.js");const useTab=(e,t)=>{let{activeKey:r}=e??{},u=core.useCurrentDevice(),[s,c]=React.useState(!r||r<0||r>=(e?.childItem??[]).length?0:r),{refContainer:a,productID:o}=useGetProductId.useGetProductId(),{dispatchEventTabActive:i}=useTabInteraction.useTabInteraction({activeKey:r||1,setActiveKey:c,activeTab:s,refContainer:a,componentUid:t?.uid||""});return e&&!e?.labelWidth&&(e.labelWidth={desktop:"200px"}),{currentDevice:u,productID:o,dispatchEventTabActive:i,activeTab:s,setActiveKey:c,refContainer:a}};exports.useTab=useTab;

package/dist/cjs/tab/hooks/useTabInteraction.js

@@ -1,56 +1 @@
-'use strict';
-
-var core = require('@gem-sdk/core');
-var React = require('react');
-
-const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const [previousTab, setPreviousTab] = React.useState(activeKey || 1);
-    const { trigger, onListener, interactionListenerLoaded } = core.useInteraction();
-    const mode = core.useEditorMode();
-    const changeOpenTabInteraction = (params)=>{
-        const { data, isRollback } = params || {};
-        if (data === undefined && isRollback === undefined) return;
-        if (isRollback) {
-            setActiveKey(previousTab);
-            setPreviousTab(activeTab);
-            return;
-        }
-        setPreviousTab(activeTab);
-        setActiveKey(data + 1);
-    };
-    const dispatchEventTabActive = (index)=>{
-        trigger({
-            event: 'gp:rollback:tab-active',
-            selector: `[data-id="${componentUid}"]`,
-            element: refContainer.current
-        });
-        trigger({
-            event: 'gp:tab-active',
-            selector: `[data-id="${componentUid}"]`,
-            data: index,
-            element: refContainer.current
-        });
-    };
-    React.useEffect(()=>{
-        if (mode === 'edit') return;
-        interactionListenerLoaded(()=>{
-            dispatchEventTabActive(activeTab - 1);
-        });
-        const selector = `[data-id="${componentUid}"]`;
-        const removeListener = onListener({
-            event: 'gp:change-open-tab',
-            selector
-        }, (params)=>{
-            changeOpenTabInteraction(params);
-        });
-        return ()=>{
-            removeListener?.();
-        };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return {
-        dispatchEventTabActive
-    };
-};
-
-exports.useTabInteraction = useTabInteraction;
+"use strict";var core=require("@gem-sdk/core"),React=require("react");const useTabInteraction=({activeKey:e,setActiveKey:t,activeTab:r,refContainer:a,componentUid:n})=>{let{trigger:c,onListener:i,interactionListenerLoaded:u,saveToElementInteractionData:o,findElementIncludingSelf:d}=core.useInteraction(),s=core.useEditorMode(),l=r=>{let{data:a,isRollback:n,element:c,key:i}=r||{};if(void 0===a&&n)return;let u=Number(a)+1;if(n){t(u);return}o(c,i,String(e)),t(u)},b=e=>{c({event:"gp:rollback:tab-active",selector:`[data-id="${n}"]`,element:a.current}),c({event:"gp:tab-active",selector:`[data-id="${n}"]`,data:e,element:a.current})};return React.useEffect(()=>{if("edit"===s)return;u(()=>{b(r-1)});let e=`[data-id="${n}"]`,t=d(document,e),a=i({event:"gp:change-open-tab",selector:e},e=>{l({...e,element:t,key:e?.uniqueStorageKey})});return()=>{a?.()}},[]),{dispatchEventTabActive:b}};exports.useTabInteraction=useTabInteraction;

package/dist/cjs/tab/index.js

@@ -0,0 +1 @@
+"use strict";require("react/jsx-runtime"),require("@gem-sdk/core"),require("react"),require("@gem-sdk/system"),require("next/link");var Tabs$1=require("./settings/Tabs.js"),TabItem$1=require("./settings/TabItem.js");const tabSetting={Tabs:Tabs$1.default,TabItem:TabItem$1.default};exports.tabSetting=tabSetting;

package/dist/cjs/tab/next.js

@@ -1,20 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var dynamic = require('next/dynamic');
-var Loading = require('../common/components/Loading.js');
-require('react/jsx-runtime');
-
-const Tabs = dynamic(()=>Promise.resolve().then(function () { return require('./components/Tabs.js'); }), {
-    loading: Loading.default
-});
-const TabItem = dynamic(()=>Promise.resolve().then(function () { return require('./components/TabItem.js'); }), {
-    loading: Loading.default
-});
-var tab = {
-    Tabs,
-    TabItem
-};
-
-exports.default = tab;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var dynamic=require("next/dynamic"),Loading=require("../common/components/Loading.js");require("react/jsx-runtime"),require("react"),require("@gem-sdk/core");const Tabs=dynamic(()=>Promise.resolve().then(function(){return require("./components/Tabs.js")}),{loading:Loading.default}),TabItem=dynamic(()=>Promise.resolve().then(function(){return require("./components/TabItem.js")}),{loading:Loading.default});var tab={Tabs,TabItem};exports.default=tab;

package/dist/cjs/tab/settings/TabItem.js

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const config={tag:"TabItem",label:"Tab Item",icon:`
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.16699 4C2.89085 4 2.66699 4.22386 2.66699 4.5V36.8333C2.66699 37.1095 2.89085 37.3333 3.16699 37.3333H36.8337C37.1098 37.3333 37.3337 37.1095 37.3337 36.8333V4.5C37.3337 4.22386 37.1098 4 36.8337 4H3.16699ZM16.0003 6.66667H24.0003V12H16.0003V6.66667ZM34.667 34.6667H5.33366V6.66667H13.3337V12V13.3333V14.1667C13.3337 14.4428 13.5575 14.6667 13.8337 14.6667H34.667V34.6667ZM34.667 12H26.667V6.66667H34.667V12Z" fill="currentColor"/>
+  </svg>
+  `,settings:[],editorConfigs:{component:{noSetting:!0,noDelete:!0,noDuplicate:!0,noDragDrop:!0},sideBar:{hide:!0},placeholder:{flowTag:["Tabs"],notAppendBeforeAfter:!0},toolbar:{hide:!0}}};exports.default=config;

package/dist/cjs/tab/settings/Tabs.js

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settings=require("./configs/settings.js"),uiV1=require("./configs/ui-v1.js"),uiV2=require("./configs/ui-v2.js");const config={tag:"Tabs",label:"Tab",icon:`
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.16699 4C2.89085 4 2.66699 4.22386 2.66699 4.5V36.8333C2.66699 37.1095 2.89085 37.3333 3.16699 37.3333H36.8337C37.1098 37.3333 37.3337 37.1095 37.3337 36.8333V4.5C37.3337 4.22386 37.1098 4 36.8337 4H3.16699ZM16.0003 6.66667H24.0003V12H16.0003V6.66667ZM34.667 34.6667H5.33366V6.66667H13.3337V12V13.3333V14.1667C13.3337 14.4428 13.5575 14.6667 13.8337 14.6667H34.667V34.6667ZM34.667 12H26.667V6.66667H34.667V12Z" fill="currentColor"/>
+  </svg>
+  `,settings:settings.TabsSettings,ui:uiV1.SettingUIV1,uiV2:uiV2.SettingUIV2,editorConfigs:{slots:{children:!1},placeholder:{notAppendTags:["MarqueeItem","Marquee"]}},presets:[{id:"tab",name:{en:"Tab"},icon:{desktop:`
+          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="8" y="30" width="32" height="2" fill="#D6D6D6"/>
+          <rect x="8" y="12" width="32" height="8" rx="4" fill="#757575"/>
+          <rect x="56" y="12" width="32" height="8" rx="4" fill="#757575"/>
+          </svg>
+        `},components:[{tag:"Tabs",settings:{childItem:["Tab 1","Tab 2","Tab 3"]},advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}}},childrens:[{tag:"TabItem"},{tag:"TabItem"},{tag:"TabItem"}]}]}],rootOverride:{settings:{containWidth:{desktop:"1200px"}},advanced:{"spacing-setting":{desktop:{margin:{bottom:0}}}}}};exports.default=config;

package/dist/cjs/tab/settings/configs/settings.js

@@ -0,0 +1 @@
+"use strict";const TabsSettings=[{id:"setting",controls:[{id:"childItem",label:"Tabs Item",type:"child-item",default:["Tab 1","Tab 2","Tab 3"]},{id:"activeKey",type:"select-custom-options",label:"Order",controlOption:"childItem",default:0},{id:"translate",type:"input",default:"childItem"},{id:"position",type:"layout-selector",label:"Layout",iconViewBox:"0 0 74 48",enableItemBackground:!0,itemPerRow:2,options:[{value:"top",label:"Top",iconName:"gp-tab-top"},{value:"left",label:"Left",iconName:"gp-tab-left"},{value:"right",label:"Right",iconName:"gp-tab-bottom"}],devices:{desktop:{default:"top"}}},{id:"group-header",label:"Tabs Header",type:"group",controls:[{id:"labelTypoV2",type:"typography-v2",default:{type:"paragraph-1",attrs:{color:"text-1"}},compoDefaultValue:{custom:{textShadow:{color:"rgba(18, 18, 18, 0.5)"}}},ignoreReRender:!0},{id:"panelFullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!1}}},{id:"panelWidth",label:"Width",type:"dropdown:input",units:["px","%"],displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}],devices:{desktop:{default:"Auto"}}},{id:"panelAlign",type:"option:value",label:"Alignment",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"right",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"left"}}},{id:"panelAlignVertical",type:"option:value",label:"Alignment",options:[{label:"Top",value:"start",type:"align",tooltip:"Align Top",iconName:"gp-align-top"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Bottom",value:"end",type:"align",tooltip:"Align Bottom",iconName:"gp-align-bottom"}],devices:{desktop:{default:"start"}}},{id:"labelWidth",label:"Width",type:"input:unit",units:["px","%"],devices:{desktop:{default:"auto"}}},{id:"padding",type:"padding-v2",devices:{desktop:{}}},{id:"labelAlign",type:"option:value",label:"Text alignment",options:[{label:"Left",value:"left",type:"text"},{label:"Center",value:"center",type:"text"},{label:"Right",value:"right",type:"text"}],devices:{desktop:{default:"left"}}}]},{id:"enableHoverEffect",label:"",type:"toggle",default:!0},{id:"enableActiveEffect",label:"",type:"toggle",default:!0},{id:"behavior-state-group",type:"behavior-state",controls:[{id:"labelBgColor",label:"Background Color",type:"color-picker-v2",default:{active:"bg-1"},compoDefaultValue:{normal:"bg-2",hover:"bg-2",active:"bg-1"}},{id:"labelColor",label:"Text Color",type:"color-picker-v2",default:{normal:"text-1"},compoDefaultValue:{normal:"text-1"}},{id:"borderTab",type:"border",label:"Border",default:{active:{border:"solid",width:"0px 0px 1px 0px",borderWidth:"1px",color:"line-3",position:"bottom",isCustom:!0}}}]},{id:"containWidth",type:"input:unit",placeholder:"Auto",units:["px","%"],devices:{desktop:{default:"100%"}}},{id:"background",type:"background-media",ignoreReRender:!0,devices:{desktop:{default:{type:"color",color:"transparent",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}},compoDefaultValue:{desktop:{default:{type:"color",color:"#DDDDDD",image:{src:"https://cdn.shopify.com/s/files/1/2005/9307/files/background_settings.jpg",width:1200,height:1200},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}}},{id:"align",label:"Align",type:"option:value",options:[{label:"Left",value:"start",type:"align",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",type:"align",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"end",type:"align",tooltip:"Align right",iconName:"gp-align-right"}],devices:{desktop:{default:"center"}}}]}];exports.TabsSettings=TabsSettings;

package/dist/cjs/tab/settings/configs/ui-v1.js

@@ -0,0 +1 @@
+"use strict";const SettingUIV1=[{type:"group",label:{en:"Item management"},controls:[{type:"control",layout:"vertical",setting:{id:"childItem"}}]},{type:"group",label:{en:"Default active tab"},controls:[{type:"control",label:{en:"Select item"},setting:{id:"activeKey"}}]},{type:"group",label:{en:"Layout"},options:{labelSpacing:"medium"},controls:[{type:"control",layout:"vertical",setting:{id:"position"}}]},{type:"group",label:{en:"Tab header"},controls:[{type:"control",layout:"vertical",setting:{id:"labelTypoV2"}},{type:"control",label:{en:"Text align"},setting:{id:"labelAlign"}},{type:"control",label:{en:"Full Width"},setting:{id:"panelFullWidth"},condition:'position == "top"'},{condition:'panelFullWidth == false && position == "top"',type:"control",label:{en:"Width"},setting:{id:"panelWidth"}},{condition:'panelFullWidth == false && position == "top"',type:"control",label:{en:"Align"},setting:{id:"panelAlign"}},{condition:'position != "top"',type:"control",label:{en:"Width"},setting:{id:"labelWidth"}}]},{type:"group",label:{en:"States"},options:{labelSpacing:"small"},controls:[{type:"tab",controls:[{type:"group",label:{en:"Normal"},controls:[{type:"control",label:{en:"Background color"},setting:{id:"labelBgColor",state:"normal"}},{type:"control",label:{en:"Text color"},setting:{id:"labelColor",state:"normal"}},{type:"control",options:{labelPosition:"start"},label:{en:"Border"},setting:{id:"borderTab",state:"normal"}}]},{type:"group",label:{en:"Hover"},controls:[{type:"control",label:{en:"Background color"},setting:{id:"labelBgColor",state:"hover"}},{type:"control",label:{en:"Text color"},setting:{id:"labelColor",state:"hover"}},{type:"control",options:{labelPosition:"start"},label:{en:"Border"},setting:{id:"borderTab",state:"hover"}}]},{type:"group",label:{en:"Active"},controls:[{type:"control",label:{en:"Background color"},setting:{id:"labelBgColor",state:"active"}},{type:"control",label:{en:"Text color"},setting:{id:"labelColor",state:"active"}},{type:"control",options:{labelPosition:"start"},label:{en:"Border"},setting:{id:"borderTab",state:"active"}}]}]}]},{type:"control",label:{en:"Background"},options:{label:"large",styleLabel:{marginBottom:"4px"}},setting:{id:"background"},layout:"vertical"}];exports.SettingUIV1=SettingUIV1;

package/dist/cjs/tab/settings/configs/ui-v2.js

@@ -0,0 +1 @@
+"use strict";const SettingUIV2=[{label:{en:"Layout"},controls:[{layout:"vertical",setting:{id:"position"}}]},{label:{en:"Tabs"},controls:[{label:{en:"Order"},setting:{id:"childItem"},controlConfig:{id:"childItem",type:"child-item",labelItem:"tab",labelPopover:{en:"Tab management"}}},{label:{en:"Text"},type:"combo",iconName:"polaris-text-title",getValueFromSettingID:"labelTypoV2.type",isTypoValue:!0,isHideClear:!0,controls:[{layout:"vertical",setting:{id:"labelTypoV2"},options:{updateFields:[{field:"attrs.textAlign",settingId:"labelAlign"},{field:"attrs.color",settingId:"labelColor",state:"normal"}]},controlChangeTrigger:{settings:[{action:{controlId:"labelAlign",valueFromField:"attrs.textAlign",groupType:"setting",controlType:"setting"}},{action:{controlId:"labelColor",valueFromField:"attrs.color",groupType:"setting",controlType:"setting",removeDevice:!0,state:"normal"}}],options:{noRecordHistory:!0}}}]},{conditionDisplay:'position == "top"',label:{en:"Width"},setting:{id:"panelWidth"}}],moreSettings:{type:"collapse",controls:[{id:"Width",label:{en:"Width"},conditionDisplay:'position != "top"',controlConfig:{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,fallbackValue:"Auto",linkWithSetting:{name:"labelWidth"},displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}]},layout:"horizontal"},{label:{en:"Background"},setting:{id:"labelBgColor",state:"normal"}},{label:{en:"Border"},setting:{id:"borderTab",state:"normal"}},{conditionDisplay:'position == "top" && panelWidth != "100%"',label:{en:"Tabs align"},setting:{id:"panelAlign"}},{conditionDisplay:'position != "top" && labelWidth != "100%"',label:{en:"Tabs align"},setting:{id:"panelAlignVertical"}},{label:{en:"Hover effect"},type:"combo",iconName:"polaris-check-hover",fixedValue:"Styled",state:"hover",setting:{id:"enableHoverEffect"},popoverLabel:{en:"Tabs hover effect"},controls:[{label:{en:"Text color"},setting:{id:"labelColor",state:"hover"}},{label:{en:"Background"},setting:{id:"labelBgColor",state:"hover"}},{label:{en:"Border"},setting:{id:"borderTab",state:"hover"}}]},{label:{en:"Active state"},type:"combo",setting:{id:"enableActiveEffect"},iconName:"polaris-status-active",fixedValue:"Styled",state:"active",popoverLabel:{en:"Tabs active state"},controls:[{label:{en:"Text color"},setting:{id:"labelColor",state:"active"}},{label:{en:"Background"},setting:{id:"labelBgColor",state:"active"}},{label:{en:"Border"},setting:{id:"borderTab",state:"active"}}]}]}},{label:{en:"Size"},controls:[{id:"containWidth",label:{en:"Width"},controlConfig:{id:"containWidth",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,linkWithSetting:{name:"containWidth"},displayOptions:[{label:"Full",value:"100%",showValue:!0},{label:"Default",value:"1200px",showValue:!0}]},layout:"horizontal"},{label:{en:"Padding"},controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"spacing-setting",field:"padding"}}}]},{label:{en:"Background"},controls:[{setting:{id:"background"},layout:"vertical"}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},controlConfig:{id:"border-advanced",type:"border-v2",linkWithSetting:{name:"border",field:"normal"},compoDefaultValue:{color:"line-3",border:"solid",width:"1px",borderWidth:"1px"}}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"Shadow"},setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:{en:"Display option"},controls:[{label:{en:"Default active"},setting:{id:"activeKey"}}]},{controls:[{label:{en:"Align"},setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0,disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"},conditionEnable:'!(parseInt(containWidth) >= 100 && containWidth?.includes("%"))'}]}];exports.SettingUIV2=SettingUIV2;

package/dist/cjs/text/common/attrs.js

@@ -0,0 +1 @@
+"use strict";const getAttr=({uid:t})=>({"data-id":t}),getTextAttr=t=>({"data-gp-text":"",...t?.uniqueId&&{"data-unique-text":t.uniqueId},...t?.productID&&{"data-product-id":t.productID},...t?.isCannotEditing&&{"data-not-editing":t.isCannotEditing}});exports.getAttr=getAttr,exports.getTextAttr=getTextAttr;