@licklist/design 0.44.485-dev.8 → 0.44.485-dev.81

package/dist/static/loader/PaymentLoader.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { LoaderIndicatorProps } from "./LoaderIndicator";
-export declare type PaymentLoaderProps = {
+export type PaymentLoaderProps = {
     options?: LoaderIndicatorProps["options"];
 };
 export declare const PaymentLoader: ({ options, }: PaymentLoaderProps) => JSX.Element;

package/dist/static/loader/PaymentLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentLoader.d.ts","sourceRoot":"","sources":["../../../src/static/loader/PaymentLoader.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAS1E,oBAAY,kBAAkB,GAAG;IAAE,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,aAAa,iBAEvB,kBAAkB,gBAgCpB,CAAC"}
+{"version":3,"file":"PaymentLoader.d.ts","sourceRoot":"","sources":["../../../src/static/loader/PaymentLoader.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAS1E,MAAM,MAAM,kBAAkB,GAAG;IAAE,OAAO,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,aAAa,iBAEvB,kBAAkB,gBAgCpB,CAAC"}

package/dist/static/manual-date-picker/ManualDatePicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type ManualDatePickerProps = {
+export type ManualDatePickerProps = {
     isDisabled?: boolean;
     isRequred?: boolean;
     day?: number;

package/dist/static/manual-date-picker/ManualDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManualDatePicker.d.ts","sourceRoot":"","sources":["../../../src/static/manual-date-picker/ManualDatePicker.tsx"],"names":[],"mappings":";AAKA,oBAAY,qBAAqB,GAAG;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,4EAS1B,qBAAqB,gBAqEvB,CAAC"}
+{"version":3,"file":"ManualDatePicker.d.ts","sourceRoot":"","sources":["../../../src/static/manual-date-picker/ManualDatePicker.tsx"],"names":[],"mappings":";AAKA,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,4EAS1B,qBAAqB,gBAqEvB,CAAC"}

package/dist/static/manual-date-picker/hooks/useManualDatePicker.d.ts

@@ -1,11 +1,11 @@
-declare type UseManualDatePickerProps = {
+type UseManualDatePickerProps = {
     isRequired?: boolean | string;
     isSubmitted?: boolean;
     fieldName: string;
     fieldErrors?: string | string[];
     value?: string;
 };
-export declare type UseManualDatePicker = (props: UseManualDatePickerProps) => [
+export type UseManualDatePicker = (props: UseManualDatePickerProps) => [
     {
         day?: number;
         month?: number;

package/dist/static/manual-date-picker/hooks/useManualDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useManualDatePicker.d.ts","sourceRoot":"","sources":["../../../../src/static/manual-date-picker/hooks/useManualDatePicker.ts"],"names":[],"mappings":"AAKA,aAAK,wBAAwB,GAAG;IAC9B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,oBAAY,mBAAmB,GAAG,CAAC,KAAK,EAAE,wBAAwB,KAAK;IACrE;QACE,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QACjC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QACnC,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;KACnC;IACD;QACE,kBAAkB,EAAE,MAAM,OAAO,CAAC;QAClC,eAAe,EAAE,MAAM,OAAO,CAAC;QAC/B,kBAAkB,EAAE,MAAM,OAAO,CAAC;QAClC,gBAAgB,EAAE,MAAM,OAAO,CAAC;QAChC,WAAW,EAAE,MAAM,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;KAClD;CACF,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,mBAgGjC,CAAC"}
+{"version":3,"file":"useManualDatePicker.d.ts","sourceRoot":"","sources":["../../../../src/static/manual-date-picker/hooks/useManualDatePicker.ts"],"names":[],"mappings":"AAKA,KAAK,wBAAwB,GAAG;IAC9B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,wBAAwB,KAAK;IACrE;QACE,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QACjC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QACnC,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;KACnC;IACD;QACE,kBAAkB,EAAE,MAAM,OAAO,CAAC;QAClC,eAAe,EAAE,MAAM,OAAO,CAAC;QAC/B,kBAAkB,EAAE,MAAM,OAAO,CAAC;QAClC,gBAAgB,EAAE,MAAM,OAAO,CAAC;QAChC,WAAW,EAAE,MAAM,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;KAClD;CACF,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,mBAgGjC,CAAC"}

package/dist/static/tabs/Tab.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react";
-export declare type TabProps = {
+export type TabProps = {
     eventKey?: string;
     title?: string;
     tabClassName?: string;

package/dist/static/tabs/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/static/tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjD,oBAAY,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAGF,eAAO,MAAM,GAAG,EAAE,iBAAiB,CAAC,QAAQ,CAmB3C,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/static/tabs/Tab.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAGF,eAAO,MAAM,GAAG,EAAE,iBAAiB,CAAC,QAAQ,CAmB3C,CAAC"}

package/dist/static/tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from "react";
 import { TabsProps as BootstrapTabsProps } from "react-bootstrap";
-export declare type TabsProps = Omit<BootstrapTabsProps, "defaultActiveKey" | "activeKey" | "onSelect"> & {
+export type TabsProps = Omit<BootstrapTabsProps, "defaultActiveKey" | "activeKey" | "onSelect"> & {
     defaultActiveKey?: string;
     activeKey?: string;
     onSelect?: (key: string) => void;

package/dist/static/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/static/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAEL,SAAS,IAAI,kBAAkB,EAChC,MAAM,iBAAiB,CAAC;AAGzB,oBAAY,SAAS,GAAG,IAAI,CAC1B,kBAAkB,EAClB,kBAAkB,GAAG,WAAW,GAAG,UAAU,CAC9C,GAAG;IACF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,IAAI,CAAC,EACnB,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,SAAS,CAAC,eAe9B;yBArBe,IAAI"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/static/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAEL,SAAS,IAAI,kBAAkB,EAChC,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,kBAAkB,EAClB,kBAAkB,GAAG,WAAW,GAAG,UAAU,CAC9C,GAAG;IACF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,IAAI,CAAC,EACnB,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,SAAS,CAAC,eAe9B;yBArBe,IAAI"}

package/dist/striped-static-table/StripedStaticTable.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { StaticTableProps, StaticTableData } from "../table";
+export type StripedStaticTableProps = Omit<StaticTableProps, "data"> & {
+    data: StaticTableData[][];
+};
+export declare const StripedStaticTable: ({ columns, className, data, ...props }: StripedStaticTableProps) => JSX.Element;
+//# sourceMappingURL=StripedStaticTable.d.ts.map

package/dist/striped-static-table/StripedStaticTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StripedStaticTable.d.ts","sourceRoot":"","sources":["../../src/striped-static-table/StripedStaticTable.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAe,eAAe,EAAE,MAAM,UAAU,CAAC;AAE1E,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IACrE,IAAI,EAAE,eAAe,EAAE,EAAE,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,2CAK5B,uBAAuB,gBAiDzB,CAAC"}

package/dist/striped-static-table/StripedStaticTable.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e;require("../table/MenuButton.js"),require("../table/FilterHelperComponent.js"),require("../table/PaginationHelperComponent.js"),require("../table/PerPageHelperComponent.js");var l=require("../table/StaticTable.js");require("../table/TableHelperComponent.js"),require("../table/ReactTableHelperComponent.js");exports.StripedStaticTable=function(e){var a=e.columns,n=e.className,s=void 0===n?"":n,i=e.data,o=t.__rest(e,["columns","className","data"]),c=i.map((function(e){return e.map((function(e,a,l){var n=l.length;return Object.fromEntries(Object.entries(e).map((function(e){var l=t.__read(e,2),s=l[0],i=l[1];return"key"===s?[s,i]:0===a?[s,r.createElement("div",{key:s,className:"bold header-row"},i)]:a===n-1?[s,r.createElement("div",{key:s,className:"bold"},i)]:[s,i]})))}))})).flat();return r.createElement(l.StaticTable,t.__assign({columns:a,data:c,className:"striped-static-table ".concat(s),displayHeader:!1},o))};

package/dist/striped-static-table/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./StripedStaticTable";
+//# sourceMappingURL=index.d.ts.map

package/dist/striped-static-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/striped-static-table/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/styles/events/EventStatisticModal.scss

@@ -6,43 +6,6 @@
     .modal-body {
       height: 75vh;
       overflow: scroll;
-
-      table.event-statistic-table {
-        thead {
-          display: none;
-        }
-      
-        tbody {
-          tr {
-            border-bottom: 1px solid $gray-500;
-            td {
-              text-transform: capitalize;
-
-              &:nth-child(2), &:nth-child(3) {
-                text-align: right;
-              }
-              &:nth-child(2) {
-                width: 20%;
-              }
-              &:nth-child(3) {
-                width: 35%;
-              }
-            }
-
-            td:has(div.header-row){
-              background-color: #d8ecf7;
-            }
-
-            &:first-child {
-              border-top: 1px solid $gray-500;
-            }
-          }
-        }
-
-        .bold {
-          font-weight: 600;
-        }
-      }
     }
   }
 

package/dist/styles/events/EventVenueMap.scss

@@ -55,7 +55,7 @@
   .zoom-buttons {
     position: absolute;
     top: calc((100% - 10rem) / 2);
-    right: 0.75rem;
+    right: 1.75rem;
     z-index: 5;
 
     .buttons-wrapper {

package/dist/styles/iframe-customers-journey/ActivitiesCard.scss

@@ -0,0 +1,55 @@
+@import "../snippet-templates/snippetVariables";
+
+.iframe-activities-card {
+  position: relative;
+  border: 2px solid transparent;
+  transition: $color-transition;
+  color: $snippet-elements-body-color;
+  border-radius: 0.3rem;
+  padding: .375rem;
+  min-height: 12.5rem;
+  width: 12.375rem;
+  flex-direction: column;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+
+  &.active {
+    border: 2px solid #0E8BE1;
+  }
+
+  .card-image {
+    width: 100%;
+    height: 6.3rem;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    cursor: pointer;
+    border: 1px solid transparent;
+    margin-bottom: .5rem;
+    border-radius: .3rem;
+  }
+
+
+  .title {
+    transition: $color-transition;
+    color: $snippet-elements-body-color;
+    font-weight: 600;
+    line-height: 1.25rem;
+    cursor: pointer;
+    font-size: .875rem;
+  }
+
+  .cost {
+    transition: $color-transition;
+    color: $snippet-elements-body-color;
+    font-size: 0.8rem;
+  }
+
+  .label {
+    text-transform: lowercase;
+    transition: $color-transition;
+    color: $snippet-elements-body-color;
+    font-size: 0.8rem;
+  }
+}

package/dist/styles/iframe-customers-journey/ActivitiesSelectedCard.scss

@@ -0,0 +1,52 @@
+@import "../snippet-templates/snippetVariables";
+
+.selected-activities-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    height: 5rem;
+    border: 1px solid $snippet-product-set-border-color;
+    background-color: $snippet-product-set-background-color;
+    color: $snippet-product-set-font-color;
+    transition: $color-transition;
+
+    p {
+        margin-bottom: 0;
+    }
+
+    .description {
+        width: 70%;
+        font-size: .81rem;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .title {
+        font-weight: 600;
+        font-size: 0.875rem;
+        line-height: 1.5rem;
+    }
+
+    .image-container {
+        display: flex;
+        justify-content: start;
+        height: 100%;
+
+        .image {
+            display: flex;
+            align-items: start;
+            width: 7rem;
+            height: 4rem;
+            margin-left: 3rem;
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center;
+            border-radius: 0.5rem;
+        }
+    }
+}
+
+.selected-activities-card-hr {
+    margin-top: 0;
+}

package/dist/styles/iframe-customers-journey/SelectDateAndTime.scss

@@ -0,0 +1,126 @@
+.date-time-selector-container {
+    background-color: $snippet-page-background-color;
+    height: 35rem;
+    padding: 1rem;
+}
+
+.date-time-icon-container {
+    display: flex;
+    justify-content: end;
+    position: relative;
+    top: 2rem;
+
+    .icon-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 1rem;
+        height: 1.1rem;
+
+        .icon {
+            fill: $snippet-calendar-active-button-background-color;
+        }
+
+    }
+
+    h5 {
+        font-size: 1rem;
+        margin-left: .5rem;
+        text-transform: uppercase;
+    }
+}
+
+.date-list {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    grid-gap: 1rem;
+    margin: 1rem 0;
+    flex-wrap: wrap;
+
+    .date-set {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        font-size: .82rem;
+        line-height: 1.3rem;
+        font-weight: 600;
+        background-color: $snippet-calendar-button-background-color;
+        border-radius: .4rem;
+        text-align: center;
+        border: 2px solid $snippet-calendar-button-border-color;
+        color: $snippet-calendar-button-font-color;
+        flex-grow: 1;
+        transition: $color-transition;
+        min-width: 6rem;
+        max-width: 7.25rem;
+        min-height: 3.3rem;
+        max-height: 8.375rem;
+
+
+        &.disabled {
+            border: 2px solid $snippet-calendar-disabled-button-border-color;
+            background-color: $snippet-calendar-disabled-button-background-color;
+            color: $snippet-calendar-disabled-button-font-color;
+
+            .descriptions {
+                color: $snippet-calendar-disabled-button-font-color;
+            }
+        }
+
+        &.selected {
+            border: 2px solid $snippet-calendar-active-button-border-color;
+            background-color: $snippet-calendar-active-button-background-color;
+            color: $snippet-calendar-active-button-font-color;
+            transition: $color-transition;
+
+            .descriptions {
+                color: $snippet-calendar-active-button-font-color;
+                background-color: $snippet-calendar-active-button-background-color;
+                font-weight: 600;
+                transition: $color-transition;
+            }
+
+            .time {
+                font-weight: 600;
+            }
+        }
+
+        &.time-container {
+            min-width: 4.75rem;
+            max-width: 4.75rem;
+            min-height: 2.75rem;
+        }
+
+        &.only-time-container {
+            min-width: 5.3rem;
+            max-width: 5.3rem;
+            min-height: 2.75rem;
+        }
+    }
+
+    .time {
+        font-size: .875rem;
+        font-weight: 300;
+    }
+
+    .descriptions {
+        font-size: .7rem;
+        line-height: 1.03rem;
+        font-weight: 300;
+        color: $snippet-calendar-button-font-color;
+    }
+
+    .info {
+        display: flex;
+        justify-content: center;
+        font-weight: 300;
+        flex-direction: row;
+
+        .logo {
+            width: .5rem;
+            margin-right: .5rem;
+        }
+    }
+}

package/dist/styles/iframe-customers-journey/_index.scss

@@ -0,0 +1,3 @@
+@import "./ActivitiesSelectedCard.scss";
+@import "./SelectDateAndTime.scss";
+@import "./ActivitiesCard.scss";

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;
@@ -202,7 +202,7 @@
 
   .step-numbers {
     font-weight: 500;
-    margin-left: 1rem;
+    margin: 0 1rem;
     color: $snippet-page-header-steps-inactive-step-body-color;
 
     .active-step {
@@ -225,6 +225,7 @@
     height: 2rem;
     transition: $color-transition;
     max-width: calc(100% - 12rem);
+    flex-grow: 1;
 
     .step {
       display: flex;
@@ -233,11 +234,13 @@
       margin: 0 0.5rem;
       z-index: 1;
       scroll-margin: 10rem;
+      flex-grow: 1;
 
       .number {
         text-align: center;
-        width: 3rem;
-        height: 0.25rem;
+        max-width: 17rem;
+        width: 100%;
+        height: 0.35rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;
         display: block;

package/dist/styles/iframe-page/PageBody.scss

@@ -60,6 +60,7 @@
 
     .left-block-container {
       height: calc(100svh - 12rem);
+      scrollbar-width: none;
       overflow: scroll;
 
       .iframe-event-card {
@@ -119,6 +120,7 @@
 
         &.show {
           overflow: scroll;
+          scrollbar-width: none;
           overflow-x: hidden;
         }
 

package/dist/styles/{widgets/ImageRadioInput.scss → image-radio-input/_index.scss}

@@ -1,4 +1,5 @@
 .image-radio-input {
+  width: min-content;
   padding: 0;
 
   &-wrapper {
@@ -9,9 +10,16 @@
     cursor: pointer;
   }
 
+  &-image-wrapper {
+    display: flex;
+    max-width: 7.5rem;
+    max-height: 4.25rem;
+  }
+
   &-label {
     display: flex;
     justify-content: center;
+    align-items: center;
     gap: 0.5rem;
 
     input {
@@ -19,4 +27,8 @@
       margin: 0;
     }
   }
+
+  .disabled {
+    opacity: 0.5;
+  }
 }

package/dist/styles/packages.scss

@@ -11,6 +11,7 @@
 @import "./sortable-tree";
 @import "./static";
 @import "./table";
+@import "./iframe-customers-journey";
 @import "./custom-fields";
 @import "./file-upload";
 @import "./iframe-events";
@@ -29,10 +30,12 @@
 @import "./iframe-page";
 @import "./affiliate";
 @import "./zones";
-@import "./widgets/";
 @import "./resources-blocking";
 @import "./ryft-payment-form";
 @import "./skeleton";
 @import "./virtualized/";
 @import "./error";
 @import "./customers/";
+@import "./striped-static-table/";
+@import "./image-radio-input/";
+@import "./radio-card/";

package/dist/styles/{widgets/WidgetTypeRadioButton.scss → radio-card/_index.scss}

@@ -1,8 +1,15 @@
-.widget-type-radio {
+.radio-card {
   padding: 0;
 
+  &.invalid {
+    label {
+      border-color: $red;
+    }
+  }
+
   label {
     display: block;
+    align-items: center;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
     border: 2px solid #dcdcdc;

package/dist/styles/sales/BookingFilter.scss

@@ -33,7 +33,7 @@
             margin: 0.875rem;
             z-index: 3;
           }
-          
+
           .form-control {
             height: 2.75rem;
             color: $blue;
@@ -57,7 +57,11 @@
         margin-right: 0.5rem;
       }
 
-      .cancel-button, .add-filters-button, .refresh-button, .fullscreen-button, .minimize-button {
+      .cancel-button,
+      .add-filters-button,
+      .refresh-button,
+      .fullscreen-button,
+      .minimize-button {
         display: flex;
         color: $gray-800;
 
@@ -92,11 +96,14 @@
         }
       }
 
-      .fullscreen-button, .minimize-button {
+      .fullscreen-button,
+      .minimize-button {
         min-width: 7.25rem;
       }
 
-      .refresh-button, .fullscreen-button, .minimize-button {
+      .refresh-button,
+      .fullscreen-button,
+      .minimize-button {
         .icon {
           background-color: transparent;
 
@@ -145,13 +152,37 @@
   .additional-filter-section {
     margin-top: 1.25rem;
 
-    @include media-breakpoint-up(md){
+    @include media-breakpoint-up(md) {
       .form-group {
         margin-bottom: 0;
       }
     }
   }
 
+  .additional-filter-container {
+    flex-wrap: nowrap;
+
+    @include media-breakpoint-down(md) {
+      flex-wrap: wrap;
+      .date-container {
+        width: 100%;
+        flex: 1;
+      }
+      .btn-primary {
+        margin-top: 1rem;
+      }
+    }
+
+    @include media-breakpoint-between(md, lg) {
+      flex-wrap: nowrap;
+
+      .date-container {
+        width: auto;
+        flex: 0 0 35%;
+      }
+    }
+  }
+
   .searching-for-section {
     .tags {
       display: flex;
@@ -161,8 +192,9 @@
       p {
         margin: 0;
       }
-      
-      .label, .search-query-param {
+
+      .label,
+      .search-query-param {
         font-size: 1.125rem;
         font-weight: 600;
       }
@@ -175,18 +207,20 @@
       .result-tag {
         display: flex;
         align-items: center;
-        border: 1px solid #DCDCDC;
-        background-color: #F5F5F5;
+        border: 1px solid #dcdcdc;
+        background-color: #f5f5f5;
         padding: 0.5rem 0.75rem;
         font-size: 0.75rem;
         text-transform: capitalize;
 
         .icon {
           margin-left: 0.5rem;
+          border: none;
+          padding: 0;
           cursor: pointer;
           width: 1.125rem;
           height: 1.125rem;
-          background-color: #DCDCDC;
+          background-color: #dcdcdc;
           border-radius: 1rem;
           display: flex;
           align-items: center;
@@ -196,4 +230,4 @@
       }
     }
   }
-}
+}

package/dist/styles/sales/RandomColors.scss

@@ -1,17 +1,20 @@
 .random-color {
   &-blue {
-    background-color: #E4F9FF;
+    background-color: #e4f9ff;
   }
 
   &-yellow {
-    background-color: #F7F4C1;
+    background-color: #f7f4c1;
   }
 
   &-green {
-    background-color: #E4FFF3;
+    background-color: #e4fff3;
   }
 
   &-pink {
-    background-color: #FFE4F8;
+    background-color: #ffe4f8;
+  }
+  &-violet {
+    background-color: #e4e4ff;
   }
 }