@gem-sdk/components 2.0.0-staging.997 → 2.0.0-staging.999

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

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core");const getContainerClasses=(e,s)=>{let o=core.cls("gp-flex gp-flex-col gp-w-full",{"gp-px-[1px]":"edit"===s},e);return core.composeClasses(o)},extendClasses=()=>core.composeClasses(core.cls("gp-hidden gp-rotate-90 -gp-rotate-90 gp-rotate-180")),getItemContainerClasses=core.composeClasses("gp-overflow-clip gp-group"),getIconClasses=core.composeClasses("gp-inline-flex"),getIconRotateClasses=(e,s)=>{let{isShow:o,iconExpand:t,iconSvg:r,iconCollapse:l}=s||{},{color:g}=e??{};return core.composeClasses(core.cls({"-gp-rotate-90":!0===o&&"plus"!==r&&!t,"gp-rotate-90":!1===o&&!l},"group-hover:[color:var(--icon-expand-hover-color)] gp-collapsible-icon gp-accordion-item_icon gp-inline-flex gp-items-center gp-justify-center gp-overflow-hidden gp-transition-all gp-duration-200 [&>svg]:!gp-h-[var(--height-iconCollapseSize)] [&>svg]:!gp-w-full",o?core.getGlobalColorClass("text",g?.active):core.getGlobalColorStateClass("text",g),o?"gp-text-[var(--icon-expand-active-color)]":""))},getDropdownClasses=(e,s)=>{let{isShow:o,uniqueId:t,makeIcon:r}=s||{},{itemHeaderSpacing:l,headerContentPadding:g,bgColor:a}=e??{};return core.composeClasses(core.cls("gp-flex gp-accordion-item_header gp-cursor-pointer gp-items-center",r?"gp-gap-[16px]":"",t,`gp-accordion-item-${t}-${s?.index}`,l?.type&&!g?core.genSizeClass(l?.type):"",{[core.getGlobalColorClass("bg",a?.active)]:o,[core.getGlobalColorStateClass("bg",a)]:!o}))},getContentClasses=e=>core.composeClasses(core.cls(`${e}`,"gp-overflow-hidden",`gp-child-item-${e}`,"gp-accordion-item")),getGapClasses=core.composeClasses("gp-flex gp-w-full gp-items-center gp-break-all"),getLayoutIconClasses=core.composeClasses("group-hover:[color:var(--icon-hover-color)] gp-icon gp-inline-flex header-icon gp-items-center gp-justify-center gp-overflow-hidden [&>svg]:!gp-h-[var(--height-configIconSize)] [&>svg]:!gp-w-full"),getRenderChildrenClasses=(e,s)=>{let{isShow:o,hasTransitionedIn:t,isMounted:r}=s||{},{itemContentSpacing:l,contentSizePadding:g}=e??{};return core.composeClasses(core.cls("gp-accordion-item_body gp-transition-all gp-grid gp-duration-500 gp-overflow-hidden",`gp-grid-rows-[${+!!o}fr]`,{"gp-grid-rows-[1fr]":o?t:r,"gp-grid-rows-[0fr]":o?!t:!r},l?.type&&!g?core.genSizeClass(l?.type):""))};exports.extendClasses=extendClasses,exports.getContainerClasses=getContainerClasses,exports.getContentClasses=getContentClasses,exports.getDropdownClasses=getDropdownClasses,exports.getGapClasses=getGapClasses,exports.getIconClasses=getIconClasses,exports.getIconRotateClasses=getIconRotateClasses,exports.getItemContainerClasses=getItemContainerClasses,exports.getLayoutIconClasses=getLayoutIconClasses,exports.getRenderChildrenClasses=getRenderChildrenClasses;
+"use strict";var core=require("@gem-sdk/core");const getContainerClasses=(e,s)=>{let o=core.cls("gp-flex gp-flex-col gp-w-full",{"gp-px-[1px]":"edit"===s},e);return core.composeClasses(o)},extendClasses=()=>core.composeClasses(core.cls("gp-hidden gp-rotate-90 -gp-rotate-90 gp-rotate-180")),getItemContainerClasses=core.composeClasses("gp-overflow-clip gp-group"),getIconClasses=core.composeClasses("gp-inline-flex"),getIconRotateClasses=(e,s)=>{let{isShow:o,iconExpand:t,iconSvg:r,iconCollapse:l}=s||{},{color:g}=e??{};return core.composeClasses(core.cls({"-gp-rotate-90":!0===o&&"plus"!==r&&!t,"gp-rotate-90":!1===o&&!l},"group-hover:[color:var(--icon-expand-hover-color)] gp-collapsible-icon gp-accordion-item_icon gp-inline-flex gp-items-center gp-justify-center gp-overflow-hidden gp-transition-all gp-duration-200 [&>svg]:!gp-h-[var(--height-iconCollapseSize)] [&>svg]:!gp-w-full",o?core.getGlobalColorClass("text",g?.active):core.getGlobalColorStateClass("text",g),o?"gp-text-[var(--icon-expand-active-color)]":""))},getDropdownClasses=(e,s)=>{let{isShow:o,uniqueId:t,makeIcon:r}=s||{},{itemHeaderSpacing:l,headerContentPadding:g,bgColor:a}=e??{};return core.composeClasses(core.cls("gp-flex gp-accordion-item_header gp-cursor-pointer gp-items-center",r?"gp-gap-[16px]":"",t,`gp-accordion-item-${t}-${s?.index}`,l?.type&&!g?core.genSizeClass(l?.type):"",{[core.getGlobalColorClass("bg",a?.active)]:o,[core.getGlobalColorStateClass("bg",a)]:!o}))},getContentClasses=e=>core.composeClasses(core.cls(`${e}`,"gp-overflow-hidden",`gp-child-item-${e}`,"gp-accordion-item")),getGapClasses=core.composeClasses("gp-flex gp-w-full gp-items-center gp-break-all"),getLayoutIconClasses=core.composeClasses("group-hover:[color:var(--icon-hover-color)!important] gp-icon gp-inline-flex header-icon gp-items-center gp-justify-center gp-overflow-hidden [&>svg]:!gp-h-[var(--height-configIconSize)] [&>svg]:!gp-w-full"),getRenderChildrenClasses=(e,s)=>{let{isShow:o,hasTransitionedIn:t,isMounted:r}=s||{},{itemContentSpacing:l,contentSizePadding:g}=e??{};return core.composeClasses(core.cls("gp-accordion-item_body gp-transition-all gp-grid gp-duration-500 gp-overflow-hidden",`gp-grid-rows-[${+!!o}fr]`,{"gp-grid-rows-[1fr]":o?t:r,"gp-grid-rows-[0fr]":o?!t:!r},l?.type&&!g?core.genSizeClass(l?.type):""))};exports.extendClasses=extendClasses,exports.getContainerClasses=getContainerClasses,exports.getContentClasses=getContentClasses,exports.getDropdownClasses=getDropdownClasses,exports.getGapClasses=getGapClasses,exports.getIconClasses=getIconClasses,exports.getIconRotateClasses=getIconRotateClasses,exports.getItemContainerClasses=getItemContainerClasses,exports.getLayoutIconClasses=getLayoutIconClasses,exports.getRenderChildrenClasses=getRenderChildrenClasses;

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

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core");const filterStyles=e=>{let o=["--mb","--mb-mobile","--mb-tablet","--d","--d-mobile","--d-tablet"];return o.forEach(o=>{delete e?.[o]}),e},contentSizePaddingSize=e=>core.makeGlobalSize(e?.contentSizePadding),getContainerStyles=(e,o)=>({...filterStyles(e),...contentSizePaddingSize(o).gap,...core.getStyleBackgroundByDevice(e?.backgroundContent),"border-radius":"inherit"}),widthHeightSizeControl=e=>core.makeGlobalSize(e),widthStyle=(e,o,t)=>widthHeightSizeControl(t).width["--w"]?widthHeightSizeControl(t).width:core.makeStyleResponsive("w",core.makeWidth(e,o)),getItemContainerStyles=(e,o)=>{let{borderContent:t,backgroundContent:r,roundedContent:l,accordionShadow:a,width:i,fullWidth:n,widthHeightSize:c,iconColor:g,color:S,textColor:d,hasActiveShadow:s}=e??{};return{"--text-hover-color":o?core.getSingleColorVariable(d?.active??d?.normal):core.getSingleColorVariable(d?.hover),"--icon-expand-hover-color":o?core.getSingleColorVariable(S?.active??S?.normal):core.getSingleColorVariable(S?.hover),"--icon-expand-active-color":core.getSingleColorVariable(S?.active??S?.normal),"--icon-active-color":core.getSingleColorVariable(g?.active??g?.normal),"--icon-hover-color":o?core.getSingleColorVariable(g?.active??g?.normal):core.getSingleColorVariable(g?.hover),...widthStyle(i,n,c),...core.makeStyle({bs:t?.border??t?.border,bw:t?.width??t?.width,bc:core.getSingleColorVariable(t?.color??t?.color)}),...core.makeStyleResponsive("bg",r),...core.getStyleShadow({value:a,styleAppliedFor:"box-shadow",isEnableShadow:a?.enable||s}),...core.getRadiusStyleActiveState({...l,active:{...l||{},radiusType:"custom"}})}},headerContentPaddingSize=e=>core.makeGlobalSize(e),composePosition=e=>core.makeStyle({fd:"left"===e?"row":"row-reverse",jc:"right"===e?"space-between":""}),getDropdownStyles=(e,o)=>{let{headerContentPadding:t,widthHeightSize:r,itemHeaderSpacing:l,bgColor:a,headerBorder:i}=e??{},{isShow:n,iconPosition:c}=o??{};return{...t&&headerContentPaddingSize(t).padding,...l?.type||t?{}:core.composeSize(l?.custom),...widthHeightSizeControl(r).height,...composePosition(c),...n?core.makeStyle({bgc:core.getSingleColorVariable(a?.active??a?.normal),bs:i?.active?.border??i?.normal?.border,bw:i?.active?.width??i?.normal?.width,bc:core.getSingleColorVariable(i?.active?.color??i?.normal?.color)}):{...core.getGlobalColorStateStyle("bgc",a),...core.handleConvertBorderStyle(i),...core.handleConvertBorderWidth(i),...core.handleConvertBorderColor(i),...core.getGlobalColorStateStyle("bgc",a)}}},getDropdownTextStyles=(e,o)=>({...o?core.makeStyle({c:core.getSingleColorVariable(e?.active??e?.normal)}):{...core.getGlobalColorStateStyle("c",e)}}),getIconRotateStyles=(e,o,t)=>{let{color:r}=e??{};return{...core.makeStyle({c:core.getSingleColorVariable(o?r?.active??r?.normal??"transparent":r?.normal??"transparent")}),width:`${t??16}px`,height:`${t??16}px`}},composeIconGlobalSize=e=>core.makeGlobalSize(e),getGapStyles=(e,o)=>({...composeIconGlobalSize(e).gap,...core.makeStyleResponsive("jc",o)}),getIconStyles=(e,o)=>{let t=o?`${o}px`:"16px";return{...e,width:t,height:t,"--height":t}},getTemplateRow=e=>({"grid-template-rows":`${+!!e}fr`}),getRenderChildrenStyles=()=>({"grid-template-columns":"minmax(auto, 100%)"}),getIconGlobalSize=e=>core.makeGlobalSize(e)?.padding;exports.getContainerStyles=getContainerStyles,exports.getDropdownStyles=getDropdownStyles,exports.getDropdownTextStyles=getDropdownTextStyles,exports.getGapStyles=getGapStyles,exports.getIconGlobalSize=getIconGlobalSize,exports.getIconRotateStyles=getIconRotateStyles,exports.getIconStyles=getIconStyles,exports.getItemContainerStyles=getItemContainerStyles,exports.getRenderChildrenStyles=getRenderChildrenStyles,exports.getTemplateRow=getTemplateRow;
+"use strict";var core=require("@gem-sdk/core");const filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet","--d","--d-mobile","--d-tablet"];return t.forEach(t=>{delete e?.[t]}),e},contentSizePaddingSize=e=>core.makeGlobalSize(e?.contentSizePadding),getContainerStyles=(e,t)=>({...filterStyles(e),...contentSizePaddingSize(t).gap,...core.getStyleBackgroundByDevice(e?.backgroundContent),"border-radius":"inherit"}),widthHeightSizeControl=e=>core.makeGlobalSize(e),widthStyle=(e,t,o)=>widthHeightSizeControl(o).width["--w"]?widthHeightSizeControl(o).width:core.makeStyleResponsive("w",core.makeWidth(e,t)),getItemContainerStyles=e=>{let{borderContent:t,backgroundContent:o,roundedContent:r,accordionShadow:l,width:a,fullWidth:i,widthHeightSize:n,iconColor:c,color:g,textColor:S,hasActiveShadow:d}=e??{};return{"--text-hover-color":core.getSingleColorVariable(S?.hover),"--icon-expand-hover-color":core.getSingleColorVariable(g?.hover),"--icon-expand-active-color":core.getSingleColorVariable(g?.active??g?.normal),"--icon-active-color":core.getSingleColorVariable(c?.active??c?.normal),"--icon-hover-color":core.getSingleColorVariable(c?.hover),...widthStyle(a,i,n),...core.makeStyle({bs:t?.border??t?.border,bw:t?.width??t?.width,bc:core.getSingleColorVariable(t?.color??t?.color)}),...core.makeStyleResponsive("bg",o),...core.getStyleShadow({value:l,styleAppliedFor:"box-shadow",isEnableShadow:l?.enable||d}),...core.getRadiusStyleActiveState({...r,active:{...r||{},radiusType:"custom"}})}},headerContentPaddingSize=e=>core.makeGlobalSize(e),composePosition=e=>core.makeStyle({fd:"left"===e?"row":"row-reverse",jc:"right"===e?"space-between":""}),getDropdownStyles=(e,t)=>{let{headerContentPadding:o,widthHeightSize:r,itemHeaderSpacing:l,bgColor:a,headerBorder:i}=e??{},{isShow:n,iconPosition:c}=t??{};return{...o&&headerContentPaddingSize(o).padding,...l?.type||o?{}:core.composeSize(l?.custom),...widthHeightSizeControl(r).height,...composePosition(c),...n?core.makeStyle({bgc:core.getSingleColorVariable(a?.active??a?.normal),bs:i?.active?.border??i?.normal?.border,bw:i?.active?.width??i?.normal?.width,bc:core.getSingleColorVariable(i?.active?.color??i?.normal?.color)}):{...core.getGlobalColorStateStyle("bgc",a),...core.handleConvertBorderStyle(i),...core.handleConvertBorderWidth(i),...core.handleConvertBorderColor(i),...core.getGlobalColorStateStyle("bgc",a)}}},getDropdownTextStyles=(e,t)=>({...t?core.makeStyle({c:core.getSingleColorVariable(e?.active??e?.normal)}):{...core.getGlobalColorStateStyle("c",e)}}),getIconRotateStyles=(e,t,o)=>{let{color:r}=e??{};return{...core.makeStyle({c:core.getSingleColorVariable(t?r?.active??r?.normal??"transparent":r?.normal??"transparent")}),width:`${o??16}px`,height:`${o??16}px`}},composeIconGlobalSize=e=>core.makeGlobalSize(e),getGapStyles=(e,t)=>({...composeIconGlobalSize(e).gap,...core.makeStyleResponsive("jc",t)}),getIconStyles=(e,t)=>{let o=t?`${t}px`:"16px";return{...e,width:o,height:o,"--height":o}},getTemplateRow=e=>({"grid-template-rows":`${+!!e}fr`}),getRenderChildrenStyles=()=>({"grid-template-columns":"minmax(auto, 100%)"}),getIconGlobalSize=e=>core.makeGlobalSize(e)?.padding;exports.getContainerStyles=getContainerStyles,exports.getDropdownStyles=getDropdownStyles,exports.getDropdownTextStyles=getDropdownTextStyles,exports.getGapStyles=getGapStyles,exports.getIconGlobalSize=getIconGlobalSize,exports.getIconRotateStyles=getIconRotateStyles,exports.getIconStyles=getIconStyles,exports.getItemContainerStyles=getItemContainerStyles,exports.getRenderChildrenStyles=getRenderChildrenStyles,exports.getTemplateRow=getTemplateRow;

package/dist/cjs/accordion/components/AccordionItem.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),ChildrenDroppable=require("../../grid/components/ChildrenDroppable.js"),Text=require("../../text/components/Text.js"),useAccordionItem=require("../hooks/useAccordionItem.js"),system=require("@gem-sdk/system"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js");const AccordionItem=e=>{let{children:s,index:t,parentUid:l,title:r,childrenIcon:a}=e,{iconSvg:n,titleTypo:c,layoutHeader:o,iconGlobalSize:i,iconCollapseSize:m,iconCollapse:y,iconExpand:d,alignment:u,configIconSize:x,iconPosition:p}=helpers.getParentSettings(e.parentSetting)??{},{refContainer:g,getIdDropdownItem:j,makeIcon:C,isShow:h,uniqueId:S,composeIconColor:I,isRenderChildren:R,composeContentSizeStyle:v,hasTransitionedIn:N,isMounted:f,productID:_}=useAccordionItem.default(e),b=system.createClass(classes.getItemContainerClasses),q=system.createClass(classes.getDropdownClasses(e.parentStyle,{isShow:h,uniqueId:S,makeIcon:C,index:t})),D=system.createClass(classes.getIconClasses),M=system.createClass(classes.getIconRotateClasses(e.parentStyle,{isShow:h,iconExpand:d,iconSvg:n,iconCollapse:y})),T=system.createClass(classes.getContentClasses(l)),A=system.createClass(classes.getGapClasses),L=system.createStyle(styles.getItemContainerStyles(e.parentStyle,h)),H=system.createStyle(styles.getDropdownStyles(e.parentStyle,{isShow:h,iconPosition:p})),k=system.createStyle(styles.getDropdownTextStyles(e.parentStyle?.textColor,h)),w=system.createStyle(styles.getIconRotateStyles(e.parentStyle,h,m)),G=system.createStyle(styles.getIconGlobalSize(i)),O=system.createStyle(styles.getGapStyles(i,u)),P=system.createClass(core.composeClasses("gp-inline-flex")),z=system.createClass(classes.getLayoutIconClasses),B=system.createStyle(styles.getIconStyles(I,x)),E=system.createClass(classes.getRenderChildrenClasses(e.parentStyle,{isShow:h,hasTransitionedIn:N,isMounted:f})),F=system.createStyle(styles.getRenderChildrenStyles()),U=system.createClass(core.composeClasses("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),X=system.createClass(core.composeClasses("gp-border gp-border-transparent group-hover:[color:var(--text-hover-color)]")),Y=React.useMemo(()=>{let e=React.Children.toArray(s);return e.length>=helpers.MINIMUM_CHILD?e[helpers.BODY_CHILD_INDEX]:jsxRuntime.jsx(ChildrenDroppable.default,{})},[s]);return jsxRuntime.jsx("div",{className:b,ref:g,style:L,children:jsxRuntime.jsxs("div",{"data-index":t?.toString(),className:T,children:[jsxRuntime.jsxs("div",{"aria-hidden":!0,onClick:e=>{j(e,t?.toString())},className:q,style:H,children:[system.If(!!C,jsxRuntime.jsx("div",{className:D,children:jsxRuntime.jsx("span",{style:w,className:M,dangerouslySetInnerHTML:{__html:C??""}})})),jsxRuntime.jsxs("div",{className:A,style:O,children:[system.If("before-text"===o,jsxRuntime.jsx("div",{className:P,style:{...G},children:jsxRuntime.jsx("span",{className:z,style:B,dangerouslySetInnerHTML:{__html:a??""}})})),jsxRuntime.jsx(Text.default,{setting:{text:r,htmlTag:"div",options:{uniqueId:S,productID:_,useState:!0},excludeFlex:!0},style:k,styles:{typo:c},className:X}),system.If("after-text"===o,jsxRuntime.jsx("div",{className:P,style:{...G},children:jsxRuntime.jsx("span",{className:z,style:B,dangerouslySetInnerHTML:{__html:a??""}})}))]})]}),R&&jsxRuntime.jsx("div",{...e?.builderAttrs,className:E,style:F,"data-index":t,"data-show":h,children:jsxRuntime.jsx("div",{className:U,style:v,children:Y})})]})})};exports.default=AccordionItem;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),ChildrenDroppable=require("../../grid/components/ChildrenDroppable.js"),Text=require("../../text/components/Text.js"),useAccordionItem=require("../hooks/useAccordionItem.js"),system=require("@gem-sdk/system"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js");const AccordionItem=e=>{let{children:s,index:t,parentUid:l,title:r,childrenIcon:a}=e,{iconSvg:n,titleTypo:c,layoutHeader:o,iconGlobalSize:i,iconCollapseSize:m,iconCollapse:y,iconExpand:d,alignment:u,configIconSize:x,iconPosition:p}=helpers.getParentSettings(e.parentSetting)??{},{refContainer:g,getIdDropdownItem:j,makeIcon:C,isShow:h,uniqueId:S,composeIconColor:I,isRenderChildren:R,composeContentSizeStyle:v,hasTransitionedIn:N,isMounted:f,productID:_}=useAccordionItem.default(e),b=system.createClass(classes.getItemContainerClasses),q=system.createClass(classes.getDropdownClasses(e.parentStyle,{isShow:h,uniqueId:S,makeIcon:C,index:t})),D=system.createClass(classes.getIconClasses),M=system.createClass(classes.getIconRotateClasses(e.parentStyle,{isShow:h,iconExpand:d,iconSvg:n,iconCollapse:y})),T=system.createClass(classes.getContentClasses(l)),A=system.createClass(classes.getGapClasses),L=system.createStyle(styles.getItemContainerStyles(e.parentStyle)),H=system.createStyle(styles.getDropdownStyles(e.parentStyle,{isShow:h,iconPosition:p})),k=system.createStyle(styles.getDropdownTextStyles(e.parentStyle?.textColor,h)),w=system.createStyle(styles.getIconRotateStyles(e.parentStyle,h,m)),G=system.createStyle(styles.getIconGlobalSize(i)),O=system.createStyle(styles.getGapStyles(i,u)),P=system.createClass(core.composeClasses("gp-inline-flex")),z=system.createClass(classes.getLayoutIconClasses),B=system.createStyle(styles.getIconStyles(I,x)),E=system.createClass(classes.getRenderChildrenClasses(e.parentStyle,{isShow:h,hasTransitionedIn:N,isMounted:f})),F=system.createStyle(styles.getRenderChildrenStyles()),U=system.createClass(core.composeClasses("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),X=system.createClass(core.composeClasses("gp-border gp-border-transparent group-hover:[color:var(--text-hover-color)]")),Y=React.useMemo(()=>{let e=React.Children.toArray(s);return e.length>=helpers.MINIMUM_CHILD?e[helpers.BODY_CHILD_INDEX]:jsxRuntime.jsx(ChildrenDroppable.default,{})},[s]);return jsxRuntime.jsx("div",{className:b,ref:g,style:L,children:jsxRuntime.jsxs("div",{"data-index":t?.toString(),className:T,children:[jsxRuntime.jsxs("div",{"aria-hidden":!0,onClick:e=>{j(e,t?.toString())},className:q,style:H,children:[system.If(!!C,jsxRuntime.jsx("div",{className:D,children:jsxRuntime.jsx("span",{style:w,className:M,dangerouslySetInnerHTML:{__html:C??""}})})),jsxRuntime.jsxs("div",{className:A,style:O,children:[system.If("before-text"===o,jsxRuntime.jsx("div",{className:P,style:{...G},children:jsxRuntime.jsx("span",{className:z,style:B,dangerouslySetInnerHTML:{__html:a??""}})})),jsxRuntime.jsx(Text.default,{setting:{text:r,htmlTag:"div",options:{uniqueId:S,productID:_,useState:!0},excludeFlex:!0},style:k,styles:{typo:c},className:X}),system.If("after-text"===o,jsxRuntime.jsx("div",{className:P,style:{...G},children:jsxRuntime.jsx("span",{className:z,style:B,dangerouslySetInnerHTML:{__html:a??""}})}))]})]}),R&&jsxRuntime.jsx("div",{...e?.builderAttrs,className:E,style:F,"data-index":t,"data-show":h,children:jsxRuntime.jsx("div",{className:U,style:v,children:Y})})]})})};exports.default=AccordionItem;

package/dist/cjs/accordion/components/AccordionItem.liquid.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../text/components/Text.liquid.js"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js");const AccordionItem=e=>{let{parentUid:s,childrenIcon:t,rawChildren:l,index:a,builderProps:r,title:o}=e,{iconSvg:c,titleTypo:n,layoutHeader:i,iconGlobalSize:y,iconCollapseSize:d,iconCollapse:m,iconExpand:p,alignment:g,configIconSize:$,iconPosition:C}=helpers.getParentSettings(e.parentSetting)??{},{isShow:u,composeContentSizeStyle:S,collapsibleIcon:v,composeIconColor:I,makeIcon:x}=helpers.getSettingItemLiquid(e),h=system.createClass(classes.getItemContainerClasses),q=system.createClass(classes.getDropdownClasses(e.parentStyle,{isShow:u,uniqueId:s,makeIcon:x(),index:a})),f=system.createStyle(styles.getIconGlobalSize(y)),_=system.createClass(classes.getIconClasses),D=system.createClass(classes.getIconRotateClasses(e.parentStyle,{isShow:u,iconExpand:p,iconSvg:c,iconCollapse:m})),T=system.createClass(classes.getContentClasses(s)),w=system.createClass(classes.getGapClasses),R=system.createStyle(styles.getItemContainerStyles(e.parentStyle,u)),j=system.createStyle(styles.getDropdownStyles(e.parentStyle,{isShow:u,iconPosition:C})),L=system.createStyle(styles.getIconRotateStyles(e.parentStyle,u,d)),M=system.createStyle(styles.getDropdownTextStyles(e.parentStyle?.textColor,u)),b=system.createStyle(styles.getGapStyles(y,g)),k=system.createClass(core.composeClasses("gp-inline-flex")),G=system.createClass(u?{...core.composeClasses("!gp-text-[var(--icon-active-color)]"),...classes.getLayoutIconClasses}:classes.getLayoutIconClasses),N=system.createStyle(styles.getIconStyles(I,$)),A=system.createClass(classes.getRenderChildrenClasses(e.parentStyle,{isShow:u,hasTransitionedIn:!1,isMounted:!1})),F=system.createStyle({...styles.getTemplateRow(u),...styles.getRenderChildrenStyles()}),H=system.createClass(core.composeClasses("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),O=()=>l&&l.length>=helpers.MINIMUM_CHILD?core.RenderChildren({...l[helpers.BODY_CHILD_INDEX]}):"";return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../text/components/Text.liquid.js"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js");const AccordionItem=e=>{let{parentUid:s,childrenIcon:t,rawChildren:l,index:a,builderProps:r,title:o}=e,{iconSvg:c,titleTypo:n,layoutHeader:i,iconGlobalSize:y,iconCollapseSize:d,iconCollapse:m,iconExpand:p,alignment:g,configIconSize:$,iconPosition:C}=helpers.getParentSettings(e.parentSetting)??{},{isShow:u,composeContentSizeStyle:S,collapsibleIcon:v,composeIconColor:I,makeIcon:x}=helpers.getSettingItemLiquid(e),h=system.createClass(classes.getItemContainerClasses),q=system.createClass(classes.getDropdownClasses(e.parentStyle,{isShow:u,uniqueId:s,makeIcon:x(),index:a})),f=system.createStyle(styles.getIconGlobalSize(y)),_=system.createClass(classes.getIconClasses),D=system.createClass(classes.getIconRotateClasses(e.parentStyle,{isShow:u,iconExpand:p,iconSvg:c,iconCollapse:m})),T=system.createClass(classes.getContentClasses(s)),w=system.createClass(classes.getGapClasses),R=system.createStyle(styles.getItemContainerStyles(e.parentStyle)),j=system.createStyle(styles.getDropdownStyles(e.parentStyle,{isShow:u,iconPosition:C})),L=system.createStyle(styles.getIconRotateStyles(e.parentStyle,u,d)),M=system.createStyle(styles.getDropdownTextStyles(e.parentStyle?.textColor,u)),b=system.createStyle(styles.getGapStyles(y,g)),k=system.createClass(core.composeClasses("gp-inline-flex")),G=system.createClass(u?{...core.composeClasses("!gp-text-[var(--icon-active-color)]"),...classes.getLayoutIconClasses}:classes.getLayoutIconClasses),N=system.createStyle(styles.getIconStyles(I,$)),A=system.createClass(classes.getRenderChildrenClasses(e.parentStyle,{isShow:u,hasTransitionedIn:!1,isMounted:!1})),F=system.createStyle({...styles.getTemplateRow(u),...styles.getRenderChildrenStyles()}),H=system.createClass(core.composeClasses("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),O=()=>l&&l.length>=helpers.MINIMUM_CHILD?core.RenderChildren({...l[helpers.BODY_CHILD_INDEX]}):"";return core.template`
   <div class="${h}" style="${R}">
     <div data-index="${a?.toString()}" class="${T}">
       <div aria-hidden uid="${r?.uid}" id="${r?.uid}" data-index="${a?.toString()}"

package/dist/esm/accordion/common/classes.js

@@ -1 +1 @@
-import{composeClasses as e,cls as t,getGlobalColorClass as o,getGlobalColorStateClass as g,genSizeClass as r}from"@gem-sdk/core";let getContainerClasses=(o,g)=>{let r=t("gp-flex gp-flex-col gp-w-full",{"gp-px-[1px]":"edit"===g},o);return e(r)},extendClasses=()=>e(t("gp-hidden gp-rotate-90 -gp-rotate-90 gp-rotate-180")),getItemContainerClasses=e("gp-overflow-clip gp-group"),getIconClasses=e("gp-inline-flex"),getIconRotateClasses=(r,s)=>{let{isShow:p,iconExpand:n,iconSvg:l,iconCollapse:i}=s||{},{color:a}=r??{};return e(t({"-gp-rotate-90":!0===p&&"plus"!==l&&!n,"gp-rotate-90":!1===p&&!i},"group-hover:[color:var(--icon-expand-hover-color)] gp-collapsible-icon gp-accordion-item_icon gp-inline-flex gp-items-center gp-justify-center gp-overflow-hidden gp-transition-all gp-duration-200 [&>svg]:!gp-h-[var(--height-iconCollapseSize)] [&>svg]:!gp-w-full",p?o("text",a?.active):g("text",a),p?"gp-text-[var(--icon-expand-active-color)]":""))},getDropdownClasses=(s,p)=>{let{isShow:n,uniqueId:l,makeIcon:i}=p||{},{itemHeaderSpacing:a,headerContentPadding:c,bgColor:d}=s??{};return e(t("gp-flex gp-accordion-item_header gp-cursor-pointer gp-items-center",i?"gp-gap-[16px]":"",l,`gp-accordion-item-${l}-${p?.index}`,a?.type&&!c?r(a?.type):"",{[o("bg",d?.active)]:n,[g("bg",d)]:!n}))},getContentClasses=o=>e(t(`${o}`,"gp-overflow-hidden",`gp-child-item-${o}`,"gp-accordion-item")),getGapClasses=e("gp-flex gp-w-full gp-items-center gp-break-all"),getLayoutIconClasses=e("group-hover:[color:var(--icon-hover-color)] gp-icon gp-inline-flex header-icon gp-items-center gp-justify-center gp-overflow-hidden [&>svg]:!gp-h-[var(--height-configIconSize)] [&>svg]:!gp-w-full"),getRenderChildrenClasses=(o,g)=>{let{isShow:s,hasTransitionedIn:p,isMounted:n}=g||{},{itemContentSpacing:l,contentSizePadding:i}=o??{};return e(t("gp-accordion-item_body gp-transition-all gp-grid gp-duration-500 gp-overflow-hidden",`gp-grid-rows-[${+!!s}fr]`,{"gp-grid-rows-[1fr]":s?p:n,"gp-grid-rows-[0fr]":s?!p:!n},l?.type&&!i?r(l?.type):""))};export{extendClasses,getContainerClasses,getContentClasses,getDropdownClasses,getGapClasses,getIconClasses,getIconRotateClasses,getItemContainerClasses,getLayoutIconClasses,getRenderChildrenClasses};
+import{composeClasses as e,cls as t,getGlobalColorClass as o,getGlobalColorStateClass as g,genSizeClass as r}from"@gem-sdk/core";let getContainerClasses=(o,g)=>{let r=t("gp-flex gp-flex-col gp-w-full",{"gp-px-[1px]":"edit"===g},o);return e(r)},extendClasses=()=>e(t("gp-hidden gp-rotate-90 -gp-rotate-90 gp-rotate-180")),getItemContainerClasses=e("gp-overflow-clip gp-group"),getIconClasses=e("gp-inline-flex"),getIconRotateClasses=(r,s)=>{let{isShow:p,iconExpand:n,iconSvg:l,iconCollapse:i}=s||{},{color:a}=r??{};return e(t({"-gp-rotate-90":!0===p&&"plus"!==l&&!n,"gp-rotate-90":!1===p&&!i},"group-hover:[color:var(--icon-expand-hover-color)] gp-collapsible-icon gp-accordion-item_icon gp-inline-flex gp-items-center gp-justify-center gp-overflow-hidden gp-transition-all gp-duration-200 [&>svg]:!gp-h-[var(--height-iconCollapseSize)] [&>svg]:!gp-w-full",p?o("text",a?.active):g("text",a),p?"gp-text-[var(--icon-expand-active-color)]":""))},getDropdownClasses=(s,p)=>{let{isShow:n,uniqueId:l,makeIcon:i}=p||{},{itemHeaderSpacing:a,headerContentPadding:c,bgColor:d}=s??{};return e(t("gp-flex gp-accordion-item_header gp-cursor-pointer gp-items-center",i?"gp-gap-[16px]":"",l,`gp-accordion-item-${l}-${p?.index}`,a?.type&&!c?r(a?.type):"",{[o("bg",d?.active)]:n,[g("bg",d)]:!n}))},getContentClasses=o=>e(t(`${o}`,"gp-overflow-hidden",`gp-child-item-${o}`,"gp-accordion-item")),getGapClasses=e("gp-flex gp-w-full gp-items-center gp-break-all"),getLayoutIconClasses=e("group-hover:[color:var(--icon-hover-color)!important] gp-icon gp-inline-flex header-icon gp-items-center gp-justify-center gp-overflow-hidden [&>svg]:!gp-h-[var(--height-configIconSize)] [&>svg]:!gp-w-full"),getRenderChildrenClasses=(o,g)=>{let{isShow:s,hasTransitionedIn:p,isMounted:n}=g||{},{itemContentSpacing:l,contentSizePadding:i}=o??{};return e(t("gp-accordion-item_body gp-transition-all gp-grid gp-duration-500 gp-overflow-hidden",`gp-grid-rows-[${+!!s}fr]`,{"gp-grid-rows-[1fr]":s?p:n,"gp-grid-rows-[0fr]":s?!p:!n},l?.type&&!i?r(l?.type):""))};export{extendClasses,getContainerClasses,getContentClasses,getDropdownClasses,getGapClasses,getIconClasses,getIconRotateClasses,getItemContainerClasses,getLayoutIconClasses,getRenderChildrenClasses};

package/dist/esm/accordion/common/styles.js

@@ -1 +1 @@
-import{getStyleBackgroundByDevice as e,getSingleColorVariable as t,makeStyle as o,makeStyleResponsive as r,getStyleShadow as i,getRadiusStyleActiveState as n,composeSize as l,getGlobalColorStateStyle as a,handleConvertBorderStyle as c,handleConvertBorderWidth as d,handleConvertBorderColor as g,makeGlobalSize as h,makeWidth as s}from"@gem-sdk/core";let filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet","--d","--d-mobile","--d-tablet"];return t.forEach(t=>{delete e?.[t]}),e},contentSizePaddingSize=e=>h(e?.contentSizePadding),getContainerStyles=(t,o)=>({...filterStyles(t),...contentSizePaddingSize(o).gap,...e(t?.backgroundContent),"border-radius":"inherit"}),widthHeightSizeControl=e=>h(e),widthStyle=(e,t,o)=>widthHeightSizeControl(o).width["--w"]?widthHeightSizeControl(o).width:r("w",s(e,t)),getItemContainerStyles=(e,l)=>{let{borderContent:a,backgroundContent:c,roundedContent:d,accordionShadow:g,width:h,fullWidth:s,widthHeightSize:S,iconColor:m,color:p,textColor:b,hasActiveShadow:w}=e??{};return{"--text-hover-color":l?t(b?.active??b?.normal):t(b?.hover),"--icon-expand-hover-color":l?t(p?.active??p?.normal):t(p?.hover),"--icon-expand-active-color":t(p?.active??p?.normal),"--icon-active-color":t(m?.active??m?.normal),"--icon-hover-color":l?t(m?.active??m?.normal):t(m?.hover),...widthStyle(h,s,S),...o({bs:a?.border??a?.border,bw:a?.width??a?.width,bc:t(a?.color??a?.color)}),...r("bg",c),...i({value:g,styleAppliedFor:"box-shadow",isEnableShadow:g?.enable||w}),...n({...d,active:{...d||{},radiusType:"custom"}})}},headerContentPaddingSize=e=>h(e),composePosition=e=>o({fd:"left"===e?"row":"row-reverse",jc:"right"===e?"space-between":""}),getDropdownStyles=(e,r)=>{let{headerContentPadding:i,widthHeightSize:n,itemHeaderSpacing:h,bgColor:s,headerBorder:S}=e??{},{isShow:m,iconPosition:p}=r??{};return{...i&&headerContentPaddingSize(i).padding,...h?.type||i?{}:l(h?.custom),...widthHeightSizeControl(n).height,...composePosition(p),...m?o({bgc:t(s?.active??s?.normal),bs:S?.active?.border??S?.normal?.border,bw:S?.active?.width??S?.normal?.width,bc:t(S?.active?.color??S?.normal?.color)}):{...a("bgc",s),...c(S),...d(S),...g(S),...a("bgc",s)}}},getDropdownTextStyles=(e,r)=>({...r?o({c:t(e?.active??e?.normal)}):{...a("c",e)}}),getIconRotateStyles=(e,r,i)=>{let{color:n}=e??{};return{...o({c:t(r?n?.active??n?.normal??"transparent":n?.normal??"transparent")}),width:`${i??16}px`,height:`${i??16}px`}},composeIconGlobalSize=e=>h(e),getGapStyles=(e,t)=>({...composeIconGlobalSize(e).gap,...r("jc",t)}),getIconStyles=(e,t)=>{let o=t?`${t}px`:"16px";return{...e,width:o,height:o,"--height":o}},getTemplateRow=e=>({"grid-template-rows":`${+!!e}fr`}),getRenderChildrenStyles=()=>({"grid-template-columns":"minmax(auto, 100%)"}),getIconGlobalSize=e=>h(e)?.padding;export{getContainerStyles,getDropdownStyles,getDropdownTextStyles,getGapStyles,getIconGlobalSize,getIconRotateStyles,getIconStyles,getItemContainerStyles,getRenderChildrenStyles,getTemplateRow};
+import{getStyleBackgroundByDevice as e,getSingleColorVariable as t,makeStyle as o,makeStyleResponsive as r,getStyleShadow as i,getRadiusStyleActiveState as n,composeSize as l,getGlobalColorStateStyle as a,handleConvertBorderStyle as d,handleConvertBorderWidth as c,handleConvertBorderColor as g,makeGlobalSize as h,makeWidth as s}from"@gem-sdk/core";let filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet","--d","--d-mobile","--d-tablet"];return t.forEach(t=>{delete e?.[t]}),e},contentSizePaddingSize=e=>h(e?.contentSizePadding),getContainerStyles=(t,o)=>({...filterStyles(t),...contentSizePaddingSize(o).gap,...e(t?.backgroundContent),"border-radius":"inherit"}),widthHeightSizeControl=e=>h(e),widthStyle=(e,t,o)=>widthHeightSizeControl(o).width["--w"]?widthHeightSizeControl(o).width:r("w",s(e,t)),getItemContainerStyles=e=>{let{borderContent:l,backgroundContent:a,roundedContent:d,accordionShadow:c,width:g,fullWidth:h,widthHeightSize:s,iconColor:S,color:p,textColor:m,hasActiveShadow:b}=e??{};return{"--text-hover-color":t(m?.hover),"--icon-expand-hover-color":t(p?.hover),"--icon-expand-active-color":t(p?.active??p?.normal),"--icon-active-color":t(S?.active??S?.normal),"--icon-hover-color":t(S?.hover),...widthStyle(g,h,s),...o({bs:l?.border??l?.border,bw:l?.width??l?.width,bc:t(l?.color??l?.color)}),...r("bg",a),...i({value:c,styleAppliedFor:"box-shadow",isEnableShadow:c?.enable||b}),...n({...d,active:{...d||{},radiusType:"custom"}})}},headerContentPaddingSize=e=>h(e),composePosition=e=>o({fd:"left"===e?"row":"row-reverse",jc:"right"===e?"space-between":""}),getDropdownStyles=(e,r)=>{let{headerContentPadding:i,widthHeightSize:n,itemHeaderSpacing:h,bgColor:s,headerBorder:S}=e??{},{isShow:p,iconPosition:m}=r??{};return{...i&&headerContentPaddingSize(i).padding,...h?.type||i?{}:l(h?.custom),...widthHeightSizeControl(n).height,...composePosition(m),...p?o({bgc:t(s?.active??s?.normal),bs:S?.active?.border??S?.normal?.border,bw:S?.active?.width??S?.normal?.width,bc:t(S?.active?.color??S?.normal?.color)}):{...a("bgc",s),...d(S),...c(S),...g(S),...a("bgc",s)}}},getDropdownTextStyles=(e,r)=>({...r?o({c:t(e?.active??e?.normal)}):{...a("c",e)}}),getIconRotateStyles=(e,r,i)=>{let{color:n}=e??{};return{...o({c:t(r?n?.active??n?.normal??"transparent":n?.normal??"transparent")}),width:`${i??16}px`,height:`${i??16}px`}},composeIconGlobalSize=e=>h(e),getGapStyles=(e,t)=>({...composeIconGlobalSize(e).gap,...r("jc",t)}),getIconStyles=(e,t)=>{let o=t?`${t}px`:"16px";return{...e,width:o,height:o,"--height":o}},getTemplateRow=e=>({"grid-template-rows":`${+!!e}fr`}),getRenderChildrenStyles=()=>({"grid-template-columns":"minmax(auto, 100%)"}),getIconGlobalSize=e=>h(e)?.padding;export{getContainerStyles,getDropdownStyles,getDropdownTextStyles,getGapStyles,getIconGlobalSize,getIconRotateStyles,getIconStyles,getItemContainerStyles,getRenderChildrenStyles,getTemplateRow};

package/dist/esm/accordion/components/AccordionItem.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useMemo as r,Children as s}from"react";import{composeClasses as l}from"@gem-sdk/core";import o from"../../grid/components/ChildrenDroppable.js";import a from"../../text/components/Text.js";import n from"../hooks/useAccordionItem.js";import{createClass as i,createStyle as m,If as d}from"@gem-sdk/system";import{getItemContainerStyles as c,getDropdownStyles as p,getDropdownTextStyles as y,getIconRotateStyles as h,getIconGlobalSize as g,getGapStyles as f,getIconStyles as x,getRenderChildrenStyles as S}from"../common/styles.js";import{getItemContainerClasses as u,getDropdownClasses as v,getIconClasses as N,getIconRotateClasses as j,getContentClasses as _,getGapClasses as b,getLayoutIconClasses as I,getRenderChildrenClasses as A}from"../common/classes.js";import{getParentSettings as T,MINIMUM_CHILD as k,BODY_CHILD_INDEX as C}from"../common/helpers.js";let AccordionItem=H=>{let{children:L,index:M,parentUid:w,title:D,childrenIcon:F}=H,{iconSvg:q,titleTypo:z,layoutHeader:B,iconGlobalSize:E,iconCollapseSize:G,iconCollapse:J,iconExpand:K,alignment:O,configIconSize:P,iconPosition:Q}=T(H.parentSetting)??{},{refContainer:R,getIdDropdownItem:U,makeIcon:V,isShow:W,uniqueId:X,composeIconColor:Y,isRenderChildren:Z,composeContentSizeStyle:$,hasTransitionedIn:ee,isMounted:et,productID:er}=n(H),es=i(u),el=i(v(H.parentStyle,{isShow:W,uniqueId:X,makeIcon:V,index:M})),eo=i(N),ea=i(j(H.parentStyle,{isShow:W,iconExpand:K,iconSvg:q,iconCollapse:J})),en=i(_(w)),ei=i(b),em=m(c(H.parentStyle,W)),ed=m(p(H.parentStyle,{isShow:W,iconPosition:Q})),ec=m(y(H.parentStyle?.textColor,W)),ep=m(h(H.parentStyle,W,G)),ey=m(g(E)),eh=m(f(E,O)),eg=i(l("gp-inline-flex")),ef=i(I),ex=m(x(Y,P)),eS=i(A(H.parentStyle,{isShow:W,hasTransitionedIn:ee,isMounted:et})),eu=m(S()),ev=i(l("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),eN=i(l("gp-border gp-border-transparent group-hover:[color:var(--text-hover-color)]")),ej=r(()=>{let t=s.toArray(L);return t.length>=k?t[C]:e(o,{})},[L]);return e("div",{className:es,ref:R,style:em,children:t("div",{"data-index":M?.toString(),className:en,children:[t("div",{"aria-hidden":!0,onClick:e=>{U(e,M?.toString())},className:el,style:ed,children:[d(!!V,e("div",{className:eo,children:e("span",{style:ep,className:ea,dangerouslySetInnerHTML:{__html:V??""}})})),t("div",{className:ei,style:eh,children:[d("before-text"===B,e("div",{className:eg,style:{...ey},children:e("span",{className:ef,style:ex,dangerouslySetInnerHTML:{__html:F??""}})})),e(a,{setting:{text:D,htmlTag:"div",options:{uniqueId:X,productID:er,useState:!0},excludeFlex:!0},style:ec,styles:{typo:z},className:eN}),d("after-text"===B,e("div",{className:eg,style:{...ey},children:e("span",{className:ef,style:ex,dangerouslySetInnerHTML:{__html:F??""}})}))]})]}),Z&&e("div",{...H?.builderAttrs,className:eS,style:eu,"data-index":M,"data-show":W,children:e("div",{className:ev,style:$,children:ej})})]})})};export{AccordionItem as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useMemo as r,Children as s}from"react";import{composeClasses as l}from"@gem-sdk/core";import o from"../../grid/components/ChildrenDroppable.js";import a from"../../text/components/Text.js";import n from"../hooks/useAccordionItem.js";import{createClass as i,createStyle as m,If as d}from"@gem-sdk/system";import{getItemContainerStyles as c,getDropdownStyles as p,getDropdownTextStyles as y,getIconRotateStyles as h,getIconGlobalSize as g,getGapStyles as f,getIconStyles as x,getRenderChildrenStyles as S}from"../common/styles.js";import{getItemContainerClasses as u,getDropdownClasses as v,getIconClasses as N,getIconRotateClasses as j,getContentClasses as _,getGapClasses as b,getLayoutIconClasses as I,getRenderChildrenClasses as A}from"../common/classes.js";import{getParentSettings as T,MINIMUM_CHILD as k,BODY_CHILD_INDEX as C}from"../common/helpers.js";let AccordionItem=H=>{let{children:L,index:M,parentUid:w,title:D,childrenIcon:F}=H,{iconSvg:q,titleTypo:z,layoutHeader:B,iconGlobalSize:E,iconCollapseSize:G,iconCollapse:J,iconExpand:K,alignment:O,configIconSize:P,iconPosition:Q}=T(H.parentSetting)??{},{refContainer:R,getIdDropdownItem:U,makeIcon:V,isShow:W,uniqueId:X,composeIconColor:Y,isRenderChildren:Z,composeContentSizeStyle:$,hasTransitionedIn:ee,isMounted:et,productID:er}=n(H),es=i(u),el=i(v(H.parentStyle,{isShow:W,uniqueId:X,makeIcon:V,index:M})),eo=i(N),ea=i(j(H.parentStyle,{isShow:W,iconExpand:K,iconSvg:q,iconCollapse:J})),en=i(_(w)),ei=i(b),em=m(c(H.parentStyle)),ed=m(p(H.parentStyle,{isShow:W,iconPosition:Q})),ec=m(y(H.parentStyle?.textColor,W)),ep=m(h(H.parentStyle,W,G)),ey=m(g(E)),eh=m(f(E,O)),eg=i(l("gp-inline-flex")),ef=i(I),ex=m(x(Y,P)),eS=i(A(H.parentStyle,{isShow:W,hasTransitionedIn:ee,isMounted:et})),eu=m(S()),ev=i(l("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),eN=i(l("gp-border gp-border-transparent group-hover:[color:var(--text-hover-color)]")),ej=r(()=>{let t=s.toArray(L);return t.length>=k?t[C]:e(o,{})},[L]);return e("div",{className:es,ref:R,style:em,children:t("div",{"data-index":M?.toString(),className:en,children:[t("div",{"aria-hidden":!0,onClick:e=>{U(e,M?.toString())},className:el,style:ed,children:[d(!!V,e("div",{className:eo,children:e("span",{style:ep,className:ea,dangerouslySetInnerHTML:{__html:V??""}})})),t("div",{className:ei,style:eh,children:[d("before-text"===B,e("div",{className:eg,style:{...ey},children:e("span",{className:ef,style:ex,dangerouslySetInnerHTML:{__html:F??""}})})),e(a,{setting:{text:D,htmlTag:"div",options:{uniqueId:X,productID:er,useState:!0},excludeFlex:!0},style:ec,styles:{typo:z},className:eN}),d("after-text"===B,e("div",{className:eg,style:{...ey},children:e("span",{className:ef,style:ex,dangerouslySetInnerHTML:{__html:F??""}})}))]})]}),Z&&e("div",{...H?.builderAttrs,className:eS,style:eu,"data-index":M,"data-show":W,children:e("div",{className:ev,style:$,children:ej})})]})})};export{AccordionItem as default};

package/dist/esm/accordion/components/AccordionItem.liquid.js

@@ -1,4 +1,4 @@
-import{composeClasses as t,template as e,RenderChildren as s}from"@gem-sdk/core";import i from"../../text/components/Text.liquid.js";import{getParentSettings as a,getSettingItemLiquid as o,MINIMUM_CHILD as n,BODY_CHILD_INDEX as l}from"../common/helpers.js";import{createClass as d,createStyle as r,If as $}from"@gem-sdk/system";import{getItemContainerClasses as c,getDropdownClasses as p,getIconClasses as m,getIconRotateClasses as v,getContentClasses as y,getGapClasses as x,getLayoutIconClasses as g,getRenderChildrenClasses as u}from"../common/classes.js";import{getIconGlobalSize as f,getItemContainerStyles as h,getDropdownStyles as S,getIconRotateStyles as I,getDropdownTextStyles as j,getGapStyles as k,getIconStyles as T,getTemplateRow as b,getRenderChildrenStyles as q}from"../common/styles.js";let AccordionItem=w=>{let{parentUid:A,childrenIcon:F,rawChildren:C,index:M,builderProps:N,title:V}=w,{iconSvg:_,titleTypo:z,layoutHeader:B,iconGlobalSize:D,iconCollapseSize:E,iconCollapse:G,iconExpand:H,alignment:J,configIconSize:K,iconPosition:L}=a(w.parentSetting)??{},{isShow:O,composeContentSizeStyle:P,collapsibleIcon:Q,composeIconColor:R,makeIcon:U}=o(w),W=d(c),X=d(p(w.parentStyle,{isShow:O,uniqueId:A,makeIcon:U(),index:M})),Y=r(f(D)),Z=d(m),tt=d(v(w.parentStyle,{isShow:O,iconExpand:H,iconSvg:_,iconCollapse:G})),te=d(y(A)),ts=d(x),ti=r(h(w.parentStyle,O)),ta=r(S(w.parentStyle,{isShow:O,iconPosition:L})),to=r(I(w.parentStyle,O,E)),tn=r(j(w.parentStyle?.textColor,O)),tl=r(k(D,J)),td=d(t("gp-inline-flex")),tr=d(O?{...t("!gp-text-[var(--icon-active-color)]"),...g}:g),t$=r(T(R,K)),tc=d(u(w.parentStyle,{isShow:O,hasTransitionedIn:!1,isMounted:!1})),tp=r({...b(O),...q()}),tm=d(t("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),tv=()=>C&&C.length>=n?s({...C[l]}):"";return e`
+import{composeClasses as t,template as e,RenderChildren as s}from"@gem-sdk/core";import i from"../../text/components/Text.liquid.js";import{getParentSettings as a,getSettingItemLiquid as o,MINIMUM_CHILD as n,BODY_CHILD_INDEX as l}from"../common/helpers.js";import{createClass as d,createStyle as r,If as $}from"@gem-sdk/system";import{getItemContainerClasses as c,getDropdownClasses as p,getIconClasses as m,getIconRotateClasses as v,getContentClasses as y,getGapClasses as x,getLayoutIconClasses as g,getRenderChildrenClasses as u}from"../common/classes.js";import{getIconGlobalSize as f,getItemContainerStyles as h,getDropdownStyles as S,getIconRotateStyles as I,getDropdownTextStyles as j,getGapStyles as k,getIconStyles as T,getTemplateRow as b,getRenderChildrenStyles as q}from"../common/styles.js";let AccordionItem=w=>{let{parentUid:A,childrenIcon:F,rawChildren:C,index:M,builderProps:N,title:V}=w,{iconSvg:_,titleTypo:z,layoutHeader:B,iconGlobalSize:D,iconCollapseSize:E,iconCollapse:G,iconExpand:H,alignment:J,configIconSize:K,iconPosition:L}=a(w.parentSetting)??{},{isShow:O,composeContentSizeStyle:P,collapsibleIcon:Q,composeIconColor:R,makeIcon:U}=o(w),W=d(c),X=d(p(w.parentStyle,{isShow:O,uniqueId:A,makeIcon:U(),index:M})),Y=r(f(D)),Z=d(m),tt=d(v(w.parentStyle,{isShow:O,iconExpand:H,iconSvg:_,iconCollapse:G})),te=d(y(A)),ts=d(x),ti=r(h(w.parentStyle)),ta=r(S(w.parentStyle,{isShow:O,iconPosition:L})),to=r(I(w.parentStyle,O,E)),tn=r(j(w.parentStyle?.textColor,O)),tl=r(k(D,J)),td=d(t("gp-inline-flex")),tr=d(O?{...t("!gp-text-[var(--icon-active-color)]"),...g}:g),t$=r(T(R,K)),tc=d(u(w.parentStyle,{isShow:O,hasTransitionedIn:!1,isMounted:!1})),tp=r({...b(O),...q()}),tm=d(t("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),tv=()=>C&&C.length>=n?s({...C[l]}):"";return e`
   <div class="${W}" style="${ti}">
     <div data-index="${M?.toString()}" class="${te}">
       <div aria-hidden uid="${N?.uid}" id="${N?.uid}" data-index="${M?.toString()}"

package/dist/types/index.d.ts

@@ -2628,7 +2628,9 @@ type VariantPreset$1 = {
     optionType: string;
     optionName: string;
     hide?: boolean;
-    presets: Record<VariantTypeof$1, VariantBaseSetting$1>;
+    presets: {
+        [key in VariantTypeof$1]?: VariantBaseSetting$1;
+    };
 };
 
 declare const PostPurchaseProductVariants: React.FC<PostPurchaseProductVariantsProps>;
@@ -2778,8 +2780,8 @@ type FeatureImagStyle = {
     ftAspectRatio?: string;
     ftWidth?: ObjectDevices<string>;
     ftObjectFit?: ObjectFit;
-    ftNavigation: 'none' | 'display';
-    ftSpacing: Spacing;
+    ftNavigation?: 'none' | 'display';
+    ftSpacing?: Spacing;
 };
 type ImageListSetting = {
     displayType: 'slider' | 'grid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.0.0-staging.997",
+  "version": "2.0.0-staging.999",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",