@licklist/design 0.44.485-dev.62 → 0.44.485-dev.64

package/dist/events/event-venue-map/components/MapPoint/MapPoint.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("tslib"),o=require("react"),t=(e=o)&&"object"==typeof e&&"default"in e?e.default:e,i=require("@licklist/plugins/dist/context/event/EventVenueMapContext"),r=require("react-konva"),u=require("../../utils/index.js"),c=require("./components/PointIcon/PointIcon.js"),d=require("./components/ProductIcon/ProductIcon.js");exports.MapPoint=function(e){var s=e.xCoordinate,l=e.yCoordinate,a=e.id,f=e.imageOffsetX,p=e.imageOffsetY,v=e.imageScale,m=e.localId,P=e.pointNumber,I=e.changeCursorType,x=e.usedInIframe,C=e.choosedProductUuids,M=void 0===C?[]:C,O=e.errorOnChoosedProductUuids,g=void 0===O?[]:O,E=e.isSoldOut,y=o.useContext(i.EventVenueMapContext),b=y.setActiveElementKey,h=y.activeElementKey,q=y.setMapPoints,U=y.editMode,j=y.mapPointProducts,S=n.__read(u.calculatePointsCoordinates(s,l,{imageScale:v,imageOffsetX:f,imageOffsetY:p}),2),B=S[0],_=S[1],k=String(a||m),A=k===h,K=j.find((function(e){return a&&e.pointId&&e.pointId===a})),N=Boolean(j.find((function(e){return M.includes(null==e?void 0:e.productUuid)&&M.includes(null==K?void 0:K.productUuid)}))),T=Boolean(j.find((function(e){return g.includes(null==e?void 0:e.productUuid)&&g.includes(null==K?void 0:K.productUuid)}))),V=function(){q((function(e){var n=e.slice(),o=n.find((function(e){return a&&e.id===a||m&&e.localId===m})),t=n.indexOf(o);return n.splice(t,1),n.push(o),n}))},X=function(e){e.cancelBubble=!0,A||E&&x||(b(k),V())};return t.createElement(r.Group,{onClick:X,onTap:X,onMouseEnter:function(){V(),I("pointer")},onMouseLeave:function(){I()}},x?t.createElement(d.ProductIcon,{x:B,y:_,isSoldOut:E,isActive:A,isProductChoosed:N,isErrorOnChoosedProduct:T}):t.createElement(c.PointIcon,{x:B,y:_,isActive:A,hasProduct:!E&&Boolean(K),pointNumber:P,onDelete:function(){b(),I(),q((function(e){return u.removeMapPointFromPoints(e,a,m)}))},editMode:U}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("tslib"),o=require("react"),t=(e=o)&&"object"==typeof e&&"default"in e?e.default:e,i=require("@licklist/plugins/dist/context/event/EventVenueMapContext"),r=require("react-konva"),u=require("../../utils/index.js"),c=require("./components/PointIcon/PointIcon.js"),d=require("./components/ProductIcon/ProductIcon.js");exports.MapPoint=function(e){var s=e.xCoordinate,l=e.yCoordinate,a=e.id,f=e.imageOffsetX,p=e.imageOffsetY,v=e.imageScale,m=e.localId,P=e.pointNumber,I=e.changeCursorType,x=e.usedInIframe,C=e.choosedProductUuids,M=void 0===C?[]:C,O=e.errorOnChoosedProductUuids,g=void 0===O?[]:O,E=e.isSoldOut,y=o.useContext(i.EventVenueMapContext),b=y.setActiveElementKey,h=y.activeElementKey,q=y.setMapPoints,U=y.editMode,j=y.mapPointProducts,S=n.__read(u.calculatePointsCoordinates(s,l,{imageScale:v,imageOffsetX:f,imageOffsetY:p}),2),B=S[0],_=S[1],k=String(a||m),A=k===h,K=j.find((function(e){return a&&e.pointId&&e.pointId===a})),N=Boolean(j.find((function(e){return M.includes(null==e?void 0:e.productUuid)&&M.includes(null==K?void 0:K.productUuid)}))),T=Boolean(j.find((function(e){return g.includes(null==e?void 0:e.productUuid)&&g.includes(null==K?void 0:K.productUuid)}))),V=function(){q((function(e){var n=e.slice(),o=n.find((function(e){return a&&e.id===a||m&&e.localId===m})),t=n.indexOf(o);return n.splice(t,1),n.push(o),n}))},X=function(e){e.cancelBubble=!0,A||E&&x||(b(k),V())};return t.createElement(r.Group,{onClick:X,onTap:X,onMouseEnter:function(){V(),I("pointer")},onMouseLeave:function(){I()}},x?t.createElement(d.ProductIcon,{x:B,y:_,isSoldOut:E,isActive:A,isProductChoosed:N,isErrorOnChoosedProduct:T}):t.createElement(c.PointIcon,{x:B,y:_,isActive:A,hasProduct:Boolean(K),pointNumber:P,onDelete:function(){b(),I(),q((function(e){return u.removeMapPointFromPoints(e,a,m)}))},editMode:U}))};

package/dist/product-set/product/quantity/ProductQuantityRechargingControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductQuantityRechargingControl.d.ts","sourceRoot":"","sources":["../../../../src/product-set/product/quantity/ProductQuantityRechargingControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EACL,mBAAmB,EACnB,UAAU,EACX,MAAM,8DAA8D,CAAC;AAStE,MAAM,WAAW,sCAAuC,SAAQ,UAAU;IACxE,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,qCAAqC,CAAC,CAAC,CACtD,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,gCAAgC,CAAC,CAAC,SAAS,UAAU,EACnE,KAAK,EAAE,qCAAqC,CAAC,CAAC,CAAC,eAuGhD"}
+{"version":3,"file":"ProductQuantityRechargingControl.d.ts","sourceRoot":"","sources":["../../../../src/product-set/product/quantity/ProductQuantityRechargingControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EACL,mBAAmB,EACnB,UAAU,EACX,MAAM,8DAA8D,CAAC;AAStE,MAAM,WAAW,sCAAuC,SAAQ,UAAU;IACxE,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,qCAAqC,CAAC,CAAC,CACtD,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,gCAAgC,CAAC,CAAC,SAAS,UAAU,EACnE,KAAK,EAAE,qCAAqC,CAAC,CAAC,CAAC,eAkGhD"}

package/dist/product-set/product/quantity/ProductQuantityRechargingControl.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),a=require("react-i18next"),n=require("react-bootstrap"),o=require("react-hook-form"),i=e(require("@licklist/plugins/dist/services/Form/HookFormService")),l=require("@react-aria/utils"),u=require("../../../assets/dashboard/increment.svg.js"),c=e(require("react-bootstrap/InputGroup"));exports.ProductQuantityRechargingControl=function(e){var s=e.isLoading,m=void 0!==s&&s,d=e.fieldNamePrefix,y=e.disabled,f=void 0!==y&&y,p=e.onFocus,b=o.useFormContext(),E=b.control,g=b.clearErrors,v=b.setError,Q=b.watch,F=b.trigger,x=b.formState.errors,q=a.useTranslation("Design").t,C=l.useId(),h=Q("".concat(d,".maxQuantity")),N=Q("".concat(d,".totalQuantity"));return t.useEffect((function(){F("".concat(d,".totalQuantity"))}),[f,d,F]),t.useEffect((function(){0===Number(N)?v("".concat(d,".totalQuantity"),{type:i.manualErrorType,message:q("Validation:fieldMinNumber",{attribute:q("totalQuantity"),min:1})}):Number(h)>Number(N)?v("".concat(d,".totalQuantity"),{type:i.manualErrorType,message:q("Validation:fieldTotalNumber",{attribute:q("totalQuantity"),max:q("maxOrderQuantity")})}):g("".concat(d,".totalQuantity"))}),[N,h,v,g]),r.createElement(r.Fragment,null,r.createElement(n.Form.Group,{controlId:C},r.createElement(n.Form.Label,null,q("totalQuantity")),r.createElement(c,{hasValidation:!0},r.createElement(c.Prepend,null,r.createElement(c.Text,{className:"py-0 px-3"},r.createElement(u.ReactComponent,null))),r.createElement(o.Controller,{render:function(e){var t=e.field,a=t.value,o=t.onChange,l=t.ref;return r.createElement(n.Form.Control,{ref:l,type:"number",min:0,step:1,value:a,onFocus:p,onChange:o,isInvalid:i.isInvalid("".concat(d,".totalQuantity"),x),disabled:m||f})},control:E,name:"".concat(d,".totalQuantity"),rules:f?{required:!1,min:0}:{}}),r.createElement(n.Form.Control.Feedback,{type:"invalid"},i.getErrors("".concat(d,".totalQuantity"),x)))))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),a=require("react-i18next"),n=require("react-bootstrap"),o=require("react-hook-form"),i=e(require("@licklist/plugins/dist/services/Form/HookFormService")),l=require("@react-aria/utils"),u=require("../../../assets/dashboard/increment.svg.js"),c=e(require("react-bootstrap/InputGroup"));exports.ProductQuantityRechargingControl=function(e){var s=e.isLoading,m=void 0!==s&&s,d=e.fieldNamePrefix,y=e.disabled,p=void 0!==y&&y,f=e.onFocus,b=o.useFormContext(),E=b.control,v=b.clearErrors,Q=b.setError,g=b.watch,F=b.formState.errors,x=a.useTranslation("Design").t,q=l.useId(),C=g("".concat(d,".maxQuantity")),h=g("".concat(d,".totalQuantity"));return t.useEffect((function(){0===Number(h)?Q("".concat(d,".totalQuantity"),{type:i.manualErrorType,message:x("Validation:fieldMinNumber",{attribute:x("totalQuantity"),min:1})}):Number(C)>Number(h)?Q("".concat(d,".totalQuantity"),{type:i.manualErrorType,message:x("Validation:fieldTotalNumber",{attribute:x("totalQuantity"),max:x("maxOrderQuantity")})}):v("".concat(d,".totalQuantity"))}),[h,C,Q,v]),r.createElement(r.Fragment,null,r.createElement(n.Form.Group,{controlId:q},r.createElement(n.Form.Label,null,x("totalQuantity")),r.createElement(c,{hasValidation:!0},r.createElement(c.Prepend,null,r.createElement(c.Text,{className:"py-0 px-3"},r.createElement(u.ReactComponent,null))),r.createElement(o.Controller,{render:function(e){var t=e.field,a=t.value,o=t.onChange,l=t.ref;return r.createElement(n.Form.Control,{ref:l,type:"number",min:0,step:1,value:a,onFocus:f,onChange:o,isInvalid:i.isInvalid("".concat(d,".totalQuantity"),F),disabled:m||p})},control:E,name:"".concat(d,".totalQuantity"),rules:p?{required:!1,min:0}:{}}),r.createElement(n.Form.Control.Feedback,{type:"invalid"},i.getErrors("".concat(d,".totalQuantity"),F)))))};

package/dist/provider/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const MAX_DESCRIPTION_CHARACTERS_LENGTH = 25256;
+export declare const MAX_DESCRIPTION_CHARACTERS_LENGTH = 25500;
 //# sourceMappingURL=constants.d.ts.map

package/dist/provider/constants.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.MAX_DESCRIPTION_CHARACTERS_LENGTH=25256;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.MAX_DESCRIPTION_CHARACTERS_LENGTH=25500;

package/dist/provider/provider-details-input/ProviderDetailsInput.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("tslib"),t=require("react"),i=e(t),n=require("react-i18next"),a=e(require("@licklist/plugins/dist/context/app/hooks/useNotification")),o=require("react-bootstrap"),l=require("react-hook-form"),s=e(require("@licklist/plugins/dist/services/Form/HookFormService")),m=require("@react-aria/utils"),d=require("../../typeahead/Typeahead.js"),u=require("../constants.js"),c=require("../provider-links-input/ProviderLinksInput.js");exports.ProviderDetailsInput=function(e){var p,g,E,v,F,b=e.companiesOptions,h=void 0===b?[]:b,I=e.linkTypes,q=void 0===I?[]:I,_=l.useFormContext(),f=_.register,y=_.watch,C=_.formState.errors,D=n.useTranslation(["App","Design","Validation"]).t,k=a(),T=m.useId(),w=m.useId(),A=m.useId(),L=m.useId(),M=m.useId(),S=m.useId(),R=y("description");return t.useEffect((function(){u.MAX_DESCRIPTION_CHARACTERS_LENGTH>R.length||k.warning({title:D("App:warning"),message:D("Validation:descriptionTooManyCharactersMessage",{max:u.MAX_DESCRIPTION_CHARACTERS_LENGTH})})}),[R.length]),i.createElement(i.Fragment,null,i.createElement(o.Form.Group,{controlId:T},i.createElement(o.Form.Label,null,D("Design:name")),i.createElement(o.Form.Control,r.__assign({},f("name",{required:D("Validation:fieldRequired",{attribute:D("Design:name")})}),{name:"name",required:!0,isInvalid:Boolean(C.name)})),i.createElement(o.Form.Control.Feedback,{type:"invalid"},s.hasError(C.name,"required")&&(null===(p=C.name)||void 0===p?void 0:p.message))),i.createElement(o.Form.Group,{controlId:w},i.createElement(o.Form.Label,null,D("Design:description")),i.createElement(o.Form.Control,r.__assign({},f("description"),{as:"textarea",name:"description",rows:6}))),i.createElement(o.Form.Group,{controlId:A},i.createElement(o.Form.Label,null,D("Design:email")),i.createElement(o.Form.Control,r.__assign({},f("email",{required:D("Validation:fieldRequired",{attribute:D("Design:email")}),pattern:{value:/^\S+@\S+$/,message:D("Validation:fieldValidEmail",{attribute:D("Design:email")})}}),{name:"email",type:"email",inputMode:"email",isInvalid:Boolean(C.email)})),i.createElement(o.Form.Control.Feedback,{type:"invalid"},s.hasError(C.email,"required")&&(null===(g=C.email)||void 0===g?void 0:g.message),s.hasError(C.email,"pattern")&&(null===(E=C.email)||void 0===E?void 0:E.message))),i.createElement(o.Form.Group,{controlId:L},i.createElement(o.Form.Label,null,D("Design:phone")),i.createElement(o.Form.Control,r.__assign({},f("phone",{required:D("Validation:fieldRequired",{attribute:D("Design:phone")})}),{name:"phone",type:"tel",inputMode:"tel",isInvalid:Boolean(C.phone)})),i.createElement(o.Form.Control.Feedback,{type:"invalid"},s.hasError(C.phone,"required")&&(null===(v=C.phone)||void 0===v?void 0:v.message))),i.createElement(o.Form.Group,{controlId:M},i.createElement(o.Form.Label,null,D("Design:website")),i.createElement(o.Form.Control,r.__assign({},f("website",{pattern:{value:/\S+\.\S+/,message:D("Validation:fieldInvalid",{attribute:D("Design:website")})}}),{name:"website",type:"url",inputMode:"url",isInvalid:Boolean(C.website)})),i.createElement(o.Form.Control.Feedback,{type:"invalid"},s.hasError(C.website,"pattern")&&(null===(F=C.website)||void 0===F?void 0:F.message))),h.length>1&&i.createElement(o.Form.Group,{controlId:S},i.createElement(o.Form.Label,null,D("Design:company")),i.createElement(d.Typeahead,{name:"company",options:h,placeholder:D("App:select"),noOptionsMessage:D("App:noMatchesFound")})),q.length>0&&i.createElement(c.ProviderLinksInput,{linkTypes:q}))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("tslib"),t=require("react"),i=e(t),n=require("react-i18next"),a=e(require("@licklist/plugins/dist/context/app/hooks/useNotification")),o=require("react-bootstrap"),l=require("react-hook-form"),s=e(require("@licklist/plugins/dist/services/Form/HookFormService")),m=require("@react-aria/utils"),d=require("../../typeahead/Typeahead.js"),u=require("../constants.js"),c=require("../provider-links-input/ProviderLinksInput.js");exports.ProviderDetailsInput=function(e){var p,g,E,v,F,b=e.companiesOptions,h=void 0===b?[]:b,I=e.linkTypes,q=void 0===I?[]:I,_=l.useFormContext(),f=_.register,y=_.watch,C=_.formState.errors,D=n.useTranslation(["App","Design","Validation"]).t,k=a(),T=m.useId(),w=m.useId(),A=m.useId(),L=m.useId(),M=m.useId(),S=m.useId(),R=y("description");return t.useEffect((function(){u.MAX_DESCRIPTION_CHARACTERS_LENGTH>R.length||k.danger({title:D("App:warning"),message:D("Validation:descriptionTooManyCharactersMessage",{max:u.MAX_DESCRIPTION_CHARACTERS_LENGTH})})}),[R.length]),i.createElement(i.Fragment,null,i.createElement(o.Form.Group,{controlId:T},i.createElement(o.Form.Label,null,D("Design:name")),i.createElement(o.Form.Control,r.__assign({},f("name",{required:D("Validation:fieldRequired",{attribute:D("Design:name")})}),{name:"name",required:!0,isInvalid:Boolean(C.name)})),i.createElement(o.Form.Control.Feedback,{type:"invalid"},s.hasError(C.name,"required")&&(null===(p=C.name)||void 0===p?void 0:p.message))),i.createElement(o.Form.Group,{controlId:w},i.createElement(o.Form.Label,null,D("Design:description")),i.createElement(o.Form.Control,r.__assign({},f("description"),{as:"textarea",name:"description",rows:6}))),i.createElement(o.Form.Group,{controlId:A},i.createElement(o.Form.Label,null,D("Design:email")),i.createElement(o.Form.Control,r.__assign({},f("email",{required:D("Validation:fieldRequired",{attribute:D("Design:email")}),pattern:{value:/^\S+@\S+$/,message:D("Validation:fieldValidEmail",{attribute:D("Design:email")})}}),{name:"email",type:"email",inputMode:"email",isInvalid:Boolean(C.email)})),i.createElement(o.Form.Control.Feedback,{type:"invalid"},s.hasError(C.email,"required")&&(null===(g=C.email)||void 0===g?void 0:g.message),s.hasError(C.email,"pattern")&&(null===(E=C.email)||void 0===E?void 0:E.message))),i.createElement(o.Form.Group,{controlId:L},i.createElement(o.Form.Label,null,D("Design:phone")),i.createElement(o.Form.Control,r.__assign({},f("phone",{required:D("Validation:fieldRequired",{attribute:D("Design:phone")})}),{name:"phone",type:"tel",inputMode:"tel",isInvalid:Boolean(C.phone)})),i.createElement(o.Form.Control.Feedback,{type:"invalid"},s.hasError(C.phone,"required")&&(null===(v=C.phone)||void 0===v?void 0:v.message))),i.createElement(o.Form.Group,{controlId:M},i.createElement(o.Form.Label,null,D("Design:website")),i.createElement(o.Form.Control,r.__assign({},f("website",{pattern:{value:/\S+\.\S+/,message:D("Validation:fieldInvalid",{attribute:D("Design:website")})}}),{name:"website",type:"url",inputMode:"url",isInvalid:Boolean(C.website)})),i.createElement(o.Form.Control.Feedback,{type:"invalid"},s.hasError(C.website,"pattern")&&(null===(F=C.website)||void 0===F?void 0:F.message))),h.length>1&&i.createElement(o.Form.Group,{controlId:S},i.createElement(o.Form.Label,null,D("Design:company")),i.createElement(d.Typeahead,{name:"company",options:h,placeholder:D("App:select"),noOptionsMessage:D("App:noMatchesFound")})),q.length>0&&i.createElement(c.ProviderLinksInput,{linkTypes:q}))};

package/dist/styles/iframe-order-process/IframeOrderProcess.scss

@@ -193,7 +193,7 @@
 }
 
 .steps-wrapper {
-  margin-left: 1rem;
+  margin: 0 3rem;
   flex: 1;
   display: flex;
   align-items: center;
@@ -238,9 +238,9 @@
 
       .number {
         text-align: center;
-        max-width: 3rem;
+        max-width: 17rem;
         width: 100%;
-        height: 0.25rem;
+        height: 0.35rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;
         display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.485-dev.62",
+  "version": "0.44.485-dev.64",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/events/event-venue-map/components/MapPoint/MapPoint.tsx

@@ -144,7 +144,7 @@ export const MapPoint = ({
           x={pointX}
           y={pointY}
           isActive={isActive}
-          hasProduct={!isSoldOut && Boolean(pointProduct)}
+          hasProduct={Boolean(pointProduct)}
           pointNumber={pointNumber}
           onDelete={onDelete}
           editMode={editMode}

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -37,7 +37,6 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
     clearErrors,
     setError,
     watch,
-    trigger,
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
@@ -48,10 +47,6 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
     `${fieldNamePrefix}.totalQuantity` as Path<T>
   );
 
-  // trigger total quantity field's validation if disabled state was changed
-  useEffect(() => {
-    trigger(`${fieldNamePrefix}.totalQuantity` as Path<T>);
-  }, [disabled, fieldNamePrefix, trigger]);
 
   useEffect(() => {
     if (Number(totalQuantityValue) === 0) {

package/src/provider/constants.ts

@@ -1 +1 @@
-export const MAX_DESCRIPTION_CHARACTERS_LENGTH = 25256;
+export const MAX_DESCRIPTION_CHARACTERS_LENGTH = 25500;

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -52,7 +52,7 @@ export function ProviderDetailsInput({
 
   useEffect(() => {
     if (MAX_DESCRIPTION_CHARACTERS_LENGTH > description.length) return;
-    notification.warning({
+    notification.danger({
       title: t("App:warning"),
       message: t("Validation:descriptionTooManyCharactersMessage", {
         max: MAX_DESCRIPTION_CHARACTERS_LENGTH,

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -193,7 +193,7 @@
 }
 
 .steps-wrapper {
-  margin-left: 1rem;
+  margin: 0 3rem;
   flex: 1;
   display: flex;
   align-items: center;
@@ -238,9 +238,9 @@
 
       .number {
         text-align: center;
-        max-width: 3rem;
+        max-width: 17rem;
         width: 100%;
-        height: 0.25rem;
+        height: 0.35rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;
         display: block;