@gem-sdk/core 1.17.6 → 1.17.9

package/dist/cjs/helpers/radius.js

@@ -97,11 +97,12 @@ const getRadiusStyleActiveState = (radiusValue)=>{
     }
     return getRadiusCSSFromGlobal('normal', radiusValue?.active?.radiusType);
 };
-const composeCornerCss = (value)=>{
+const composeCornerCss = (value, important = false)=>{
     if (!value) {
-        return;
+        return '';
     }
     const { radiusType, bblr, bbrr, btlr, btrr } = value;
+    const sub = important ? ' !important' : '';
     let radiusValue = undefined;
     switch(radiusType){
         case 'medium':
@@ -113,13 +114,10 @@ const composeCornerCss = (value)=>{
         case 'none':
         case 'custom':
             radiusValue = `
-      ${bblr ? `border-bottom-left-radius: ${bblr};` : ''}
-      
-      ${bbrr ? `border-bottom-right-radius: ${bbrr};` : ''}
-
-      ${btlr ? `border-top-left-radius: ${btlr};` : ''}
-      
-      ${btrr ? `border-top-right-radius: ${btrr};` : ''}
+      ${bblr ? `border-bottom-left-radius: ${bblr}${sub};` : ''}
+      ${bbrr ? `border-bottom-right-radius: ${bbrr}${sub};` : ''}
+      ${btlr ? `border-top-left-radius: ${btlr}${sub};` : ''}
+      ${btrr ? `border-top-right-radius: ${btrr}${sub};` : ''}
       `;
             break;
     }

package/dist/cjs/helpers/shadow.js

@@ -43,11 +43,12 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
     }
     return style;
 };
-const composeShadowCss = ({ hasBoxShadow, boxShadowValue })=>{
+const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
     if (!hasBoxShadow) return undefined;
     if (!boxShadowValue) return undefined;
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${boxShadowValue?.distance}`);
-    return `box-shadow: ${Math.cos(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${boxShadowValue?.blur} ${boxShadowValue?.spread + ' '}${colors.getSingleColorVariable(boxShadowValue?.color)};`;
+    const sub = important ? ' !important' : '';
+    return `box-shadow: ${Math.cos(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${boxShadowValue?.blur} ${boxShadowValue?.spread + ' '}${colors.getSingleColorVariable(boxShadowValue?.color)}${sub};`;
 };
 
 exports.composeShadowCss = composeShadowCss;

package/dist/esm/helpers/radius.js

@@ -95,11 +95,12 @@ const getRadiusStyleActiveState = (radiusValue)=>{
     }
     return getRadiusCSSFromGlobal('normal', radiusValue?.active?.radiusType);
 };
-const composeCornerCss = (value)=>{
+const composeCornerCss = (value, important = false)=>{
     if (!value) {
-        return;
+        return '';
     }
     const { radiusType, bblr, bbrr, btlr, btrr } = value;
+    const sub = important ? ' !important' : '';
     let radiusValue = undefined;
     switch(radiusType){
         case 'medium':
@@ -111,13 +112,10 @@ const composeCornerCss = (value)=>{
         case 'none':
         case 'custom':
             radiusValue = `
-      ${bblr ? `border-bottom-left-radius: ${bblr};` : ''}
-      
-      ${bbrr ? `border-bottom-right-radius: ${bbrr};` : ''}
-
-      ${btlr ? `border-top-left-radius: ${btlr};` : ''}
-      
-      ${btrr ? `border-top-right-radius: ${btrr};` : ''}
+      ${bblr ? `border-bottom-left-radius: ${bblr}${sub};` : ''}
+      ${bbrr ? `border-bottom-right-radius: ${bbrr}${sub};` : ''}
+      ${btlr ? `border-top-left-radius: ${btlr}${sub};` : ''}
+      ${btrr ? `border-top-right-radius: ${btrr}${sub};` : ''}
       `;
             break;
     }

package/dist/esm/helpers/shadow.js

@@ -41,11 +41,12 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
     }
     return style;
 };
-const composeShadowCss = ({ hasBoxShadow, boxShadowValue })=>{
+const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
     if (!hasBoxShadow) return undefined;
     if (!boxShadowValue) return undefined;
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${boxShadowValue?.distance}`);
-    return `box-shadow: ${Math.cos(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${boxShadowValue?.blur} ${boxShadowValue?.spread + ' '}${getSingleColorVariable(boxShadowValue?.color)};`;
+    const sub = important ? ' !important' : '';
+    return `box-shadow: ${Math.cos(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${boxShadowValue?.blur} ${boxShadowValue?.spread + ' '}${getSingleColorVariable(boxShadowValue?.color)}${sub};`;
 };
 
 export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit };

package/dist/types/index.d.ts

@@ -9290,7 +9290,7 @@ declare const getRadiusCSSFromGlobal: (state: StateType, key?: RoundedSize, devi
 declare const getCustomRadius: (state: StateType, radius?: CornerRadius, device?: NameDevices) => React.CSSProperties;
 declare const composeRadius: (value?: StateProp<CornerRadius> | ResponsiveStateProp<CornerRadius>) => React.CSSProperties;
 declare const getRadiusStyleActiveState: (radiusValue?: StateProp<CornerRadius>) => React.CSSProperties;
-declare const composeCornerCss: (value?: CornerRadius | undefined) => string | undefined;
+declare const composeCornerCss: (value?: CornerRadius | undefined, important?: boolean) => string | undefined;
 
 declare function getSelectedVariant(variants?: Maybe<VariantSelectFragment>[], choices?: Record<string, string>): Maybe<VariantSelectFragment>;
 declare function parseSelectedOption(options: SelectedOption[]): SelectedOption | undefined;
@@ -9370,9 +9370,10 @@ declare const getStyleShadow: (shadowStyle: ShadowStyle, isActiveState?: boolean
     [x: string]: string;
 };
 declare const getStyleShadowState: (shadow?: StateProp<ShadowProps>, styleAppliedFor?: ShadowStyleApplied, isEnableShadow?: StateProp<boolean>) => React.CSSProperties;
-declare const composeShadowCss: ({ hasBoxShadow, boxShadowValue, }: {
+declare const composeShadowCss: ({ hasBoxShadow, boxShadowValue, important, }: {
     hasBoxShadow?: boolean | undefined;
     boxShadowValue?: ShadowProps | undefined;
+    important?: boolean | undefined;
 }) => string | undefined;
 
 type Options = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.17.6",
+  "version": "1.17.9",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.12.0",
-    "@gem-sdk/styles": "1.15.12"
+    "@gem-sdk/styles": "1.17.7"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",