@sc-360-v2/storefront-cms-library 0.0.3 → 0.0.5

package/dist/text-editor.scss

@@ -0,0 +1,328 @@
+// Define SCSS variables for colors, font, and sizes
+$toolbar-bg-color: #ffffff;
+$toolbar-border-color: #eaecf0;
+$icon-color: #667085;
+$active-icon-color: #162578;
+$active-bg-color: #583fff;
+$dropdown-font-color: #344054;
+$font-family: "Lato", Arial, sans-serif;
+$font-size: 16px;
+$border-color: #a5b4fc;
+$focus-border-color: #5aea79;
+$focus-box-shadow:
+  0px 0px 0px 4px #ced4f6,
+  0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+$focus-outline-color: #818cf8;
+$active-border-color: #8190e8;
+$active-bg-light-color: #f5f6fd;
+$chip-bg-color: #e3dfff;
+$chip-border-color: #d5cfff;
+$chip-remove-color: rgb(0, 54, 172);
+
+// Style for text editor main container
+.text_editor_main {
+  .editor {
+    width: max-content;
+    min-width: 130px;
+    padding: 0px 8px;
+    outline: none;
+    position: relative;
+    word-break: break-all;
+    align-items: center;
+    z-index: 100;
+    color: #111827; // var(--gray-900)
+    border: 1px solid $border-color;
+
+    &:focus-visible {
+      border: 1px solid $focus-border-color;
+      box-shadow: $focus-box-shadow;
+    }
+
+    &:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow:
+        0px 1px 2px rgba(16, 24, 40, 0.05),
+        0px 0px 0px 2px $focus-outline-color;
+      border-radius: 8px;
+      border: 1px solid $focus-outline-color;
+    }
+  }
+
+  .input-box {
+    width: fit-content;
+    border: 1px solid #b9b8b8;
+    padding: 5px;
+    border-radius: 5px;
+    margin: 10px 0px;
+    line-height: 0;
+  }
+
+  .addCode-btn {
+    cursor: pointer;
+    margin: 10px;
+    padding: 5px 15px;
+    background: $active-bg-color;
+    border: 1px solid #fff;
+    border-radius: 4px;
+    color: #fff;
+  }
+
+  .chip-list {
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background-color: #fff;
+    padding: 12px;
+    box-shadow:
+      0px 4px 6px -2px rgba(16, 24, 40, 0.03),
+      0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+
+    li {
+      display: flex;
+      align-items: center;
+      height: 20px;
+      width: fit-content;
+      border: 1px solid #d1d5db; // var(--gray-300)
+      border-radius: 6px;
+      padding: 4px;
+      margin-bottom: 16px;
+      gap: 4px;
+      font-size: 12px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .app-icon {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        object-fit: contain;
+        border: 1px solid #f3f4f6; // var(--gray-100)
+      }
+
+      .attr-type {
+        height: 16px;
+        width: 16px;
+        object-fit: contain;
+      }
+    }
+  }
+
+  .sc_chip_main {
+    display: inline-block;
+    padding: 0 4px;
+    border-radius: 4px;
+    align-items: center;
+    margin: 3px 3px !important;
+    user-select: none;
+    position: relative;
+    background-color: $chip-bg-color;
+    border: 1px solid $chip-border-color;
+    color: $active-bg-color;
+
+    .remove-chip {
+      margin-left: 5px;
+      color: $chip-remove-color;
+      font-weight: bold;
+    }
+
+    img {
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+      vertical-align: text-top;
+      margin-bottom: 1px;
+
+      &:nth-child(2) {
+        border: 0;
+      }
+    }
+
+    &::after {
+      content: attr(data-title);
+      position: absolute;
+      background-color: #fff;
+      color: #000;
+      padding: 5px 10px;
+      box-shadow:
+        0px 4px 6px -2px rgba(16, 24, 40, 0.03),
+        0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+      font-size: 12px;
+      display: none;
+      bottom: 20px;
+      z-index: 1000;
+      border-radius: 6px;
+      border: 1px solid #e5e7eb; // var(--gray-200)
+      margin-top: 20px;
+      left: 30%;
+      transform: translateX(-30%);
+      word-break: normal;
+    }
+
+    &:hover {
+      &::after,
+      &::before {
+        display: inline;
+      }
+
+      &::after {
+        z-index: 100;
+      }
+
+      &::before {
+        display: inline;
+      }
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 8px 8px 0;
+      border-color: transparent #fff transparent transparent;
+      bottom: 100%;
+      z-index: 1000;
+      transform: rotate(45deg);
+      left: 10px;
+      display: none;
+    }
+  }
+
+  .p-autocomplete.p-disabled {
+    background-color: #f9fafb !important; // var(--gray-50)
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: #6b7280; // var(--gray-500)
+  }
+
+  .accordion {
+    width: 100%;
+  }
+
+  .accordion_section {
+    border-bottom: 1px solid #d1d5db;
+  }
+
+  .accordion_header {
+    background-color: #f3f4f6;
+    color: #374151;
+    padding: 12px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: left;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    &:focus {
+      outline: 2px solid $focus-outline-color;
+    }
+  }
+
+  .accordion_content {
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+  }
+
+  .accordion_body {
+    padding: 16px;
+    background-color: #ffffff;
+    color: #374151;
+    font-size: 14px;
+  }
+
+  .active {
+    max-height: 500px;
+  }
+
+  .inactive {
+    max-height: 0px;
+  }
+}
+
+// Apply font-family to the editor view
+.fr-view {
+  font-family: $font-family;
+}
+
+// Style for toolbar command button icons
+.fr-toolbar,
+.fr-popup,
+.fr-modal {
+  .fr-command.fr-btn {
+    svg path {
+      fill: $icon-color !important;
+    }
+  }
+}
+
+// Style for inline toolbar
+.fr-toolbar.fr-inline {
+  border-radius: 88px;
+  border: 1px solid $toolbar-border-color;
+  background: $toolbar-bg-color;
+}
+
+// Style for dropdowns and selections
+.fr-toolbar,
+.fr-popup,
+.fr-modal {
+  .fr-command.fr-btn.fr-dropdown.fr-selection {
+    span {
+      color: $dropdown-font-color;
+      font-family: $font-family;
+      font-size: $font-size;
+      font-style: normal;
+      font-weight: 500;
+    }
+  }
+}
+
+// Style for active toolbar buttons
+.fr-toolbar,
+.fr-popup,
+.fr-modal {
+  .fr-command.fr-btn.fr-active:not(.fr-dropdown) {
+    border-radius: 4px;
+    border: 1px solid $active-border-color;
+    background: $active-bg-light-color;
+
+    svg path {
+      fill: $active-icon-color !important; // Apply icon color
+    }
+  }
+}
+
+.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span,
+.fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection span,
+.fr-modal .fr-command.fr-btn.fr-dropdown.fr-selection span {
+  width: fit-content !important;
+}
+
+.fr-popup .fr-color-set > span {
+  border-radius: 50%;
+  margin: 3px;
+  border: 0.2px solid #eae6e6;
+  box-shadow: #000;
+}
+
+.fr-dropdown-menu {
+  // border: 1px solid #eaecf0;
+  border-radius: 8px !important;
+}
+.fr-popup .fr-buttons.fr-tabs {
+  display: none;
+}
+
+.fr-popup[data-inst1="true"] {
+  left: 260px !important;
+  top: 200px !important;
+}

package/dist/types/builder/elements/button/index.d.ts

@@ -0,0 +1,26 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
+import { BuilderAttributes, CMSElementInterface } from "../common";
+export interface ButtonStyleProperties extends CommonStyleProperties {
+    minHeight?: MinHeightValue;
+    height?: HeightValue;
+    minWidth?: MinWidthValue;
+    maxWidth?: MaxWidthValue;
+    maxHeight?: MaxHeightValue;
+    gridArea?: GridAreaValue;
+    boxSizing?: BoxSizingValue;
+    padding?: PaddingValue;
+    justifySelf?: JustifySelfValue;
+    alignSelf?: AlignSelfValue;
+}
+export declare const getDefaultStyles: () => ButtonStyleProperties;
+export interface CMSButtonInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: ButtonStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+}

package/dist/types/builder/elements/code/index.d.ts

@@ -0,0 +1,59 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { DisplayValue, ResponsiveBehaviourTypes } from "../../../global/types";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { CMSGridsContainer } from "../grid";
+import { BuilderAttributes } from "../common";
+export interface CodeAttributes extends CMSHTMLAttributes {
+    role?: string;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    id?: string;
+    className?: string;
+    lang?: string;
+    dataMeta?: string;
+}
+export interface CodeStyleProperties extends CommonStyleProperties {
+    minHeight?: string;
+    height?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    gridArea?: string;
+    display?: DisplayValue;
+    boxSizing?: string;
+    rowGap?: string;
+    columnGap?: string;
+    gridTemplateRows?: string;
+    gridTemplateColumns?: string;
+}
+export declare const getDefaultStyles: () => CodeStyleProperties;
+export declare const getSectionDefaultStyles: () => CodeStyleProperties;
+export interface VariationConditionInterface {
+    customer?: any[];
+    user?: any[];
+    relation?: any;
+}
+export interface CodeVariationInterface {
+    condition?: VariationConditionInterface;
+    attributes?: {
+        BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType">;
+        HTML?: CodeAttributes;
+        CUSTOM?: any;
+    };
+    styles?: CodeStyleProperties;
+    editedStyles?: CommonStyleProperties;
+    sectionStyles?: CommonStyleProperties;
+    grids?: CMSGridsContainer;
+    responsiveBehaviour: ResponsiveBehaviourTypes;
+    highestGrid?: number | any;
+    gtc?: CMSGridsContainer;
+    gtr?: CMSGridsContainer;
+}
+export interface CMSCodeInterface {
+    id?: string | number;
+    uniqueId?: string | number;
+    variations?: {
+        [key: string]: CodeVariationInterface;
+    };
+    styles?: CodeStyleProperties;
+}

package/dist/types/builder/elements/common.d.ts

@@ -0,0 +1,25 @@
+import { ResponsiveBehaviourTypes } from "../../global/types";
+import { CMSHTMLAttributes } from "../../global/attributes";
+import { CommonStyleProperties } from "../../global/style-properties";
+export interface BuilderAttributes {
+    dataType?: string;
+    dataDivType?: string;
+    dataElementType?: string;
+    dataWidgetType?: string;
+    dataElementSubType?: string;
+    dataChildCount?: string | number;
+}
+export interface CMSElementAttributes {
+    HTML?: CMSHTMLAttributes;
+    BUILDER?: BuilderAttributes;
+    CUSTOM?: any;
+}
+export interface CMSElementInterface {
+    id: string | number;
+    styles: CommonStyleProperties;
+    attributes: CMSElementAttributes;
+    uniqueKey: string | number;
+    responsiveBehaviour: ResponsiveBehaviourTypes;
+    builderData?: any;
+    controls?: any;
+}

package/dist/types/builder/elements/extra.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+interface Events {
+    onCopy?: React.ClipboardEventHandler<HTMLElement>;
+    onCut?: React.ClipboardEventHandler<HTMLElement>;
+    onPaste?: React.ClipboardEventHandler<HTMLElement>;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionStart?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLElement>;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    onChange?: React.FormEventHandler<HTMLElement>;
+    onInput?: React.FormEventHandler<HTMLElement>;
+    onSubmit?: React.FormEventHandler<HTMLElement>;
+    onLoad?: React.ReactEventHandler<HTMLElement>;
+    onError?: React.ReactEventHandler<HTMLElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
+    onAbort?: React.ReactEventHandler<HTMLElement>;
+    onCanPlay?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLElement>;
+    onDurationChange?: React.ReactEventHandler<HTMLElement>;
+    onEmptied?: React.ReactEventHandler<HTMLElement>;
+    onEncrypted?: React.ReactEventHandler<HTMLElement>;
+    onEnded?: React.ReactEventHandler<HTMLElement>;
+    onLoadedData?: React.ReactEventHandler<HTMLElement>;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLElement>;
+    onLoadStart?: React.ReactEventHandler<HTMLElement>;
+    onPause?: React.ReactEventHandler<HTMLElement>;
+    onPlay?: React.ReactEventHandler<HTMLElement>;
+    onPlaying?: React.ReactEventHandler<HTMLElement>;
+    onProgress?: React.ReactEventHandler<HTMLElement>;
+    onRateChange?: React.ReactEventHandler<HTMLElement>;
+    onSeeked?: React.ReactEventHandler<HTMLElement>;
+    onSeeking?: React.ReactEventHandler<HTMLElement>;
+    onStalled?: React.ReactEventHandler<HTMLElement>;
+    onSuspend?: React.ReactEventHandler<HTMLElement>;
+    onTimeUpdate?: React.ReactEventHandler<HTMLElement>;
+    onVolumeChange?: React.ReactEventHandler<HTMLElement>;
+    onWaiting?: React.ReactEventHandler<HTMLElement>;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onContextMenu?: React.MouseEventHandler<HTMLElement>;
+    onDoubleClick?: React.MouseEventHandler<HTMLElement>;
+    onDrag?: React.DragEventHandler<HTMLElement>;
+    onDragEnd?: React.DragEventHandler<HTMLElement>;
+    onDragEnter?: React.DragEventHandler<HTMLElement>;
+    onDragExit?: React.DragEventHandler<HTMLElement>;
+    onDragLeave?: React.DragEventHandler<HTMLElement>;
+    onDragOver?: React.DragEventHandler<HTMLElement>;
+    onDragStart?: React.DragEventHandler<HTMLElement>;
+    onDrop?: React.DragEventHandler<HTMLElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+    onMouseMove?: React.MouseEventHandler<HTMLElement>;
+    onMouseOut?: React.MouseEventHandler<HTMLElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLElement>;
+    onMouseUp?: React.MouseEventHandler<HTMLElement>;
+    onSelect?: React.ReactEventHandler<HTMLElement>;
+    onTouchCancel?: React.TouchEventHandler<HTMLElement>;
+    onTouchEnd?: React.TouchEventHandler<HTMLElement>;
+    onTouchMove?: React.TouchEventHandler<HTMLElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLElement>;
+    onScroll?: React.UIEventHandler<HTMLElement>;
+    onWheel?: React.WheelEventHandler<HTMLElement>;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLElement>;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
+}

package/dist/types/builder/elements/faq/index.d.ts

@@ -0,0 +1,30 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
+import { BuilderAttributes, CMSElementInterface } from "../common";
+export interface FaqStyleProperties extends CommonStyleProperties {
+    minHeight?: MinHeightValue;
+    height?: HeightValue;
+    minWidth?: MinWidthValue;
+    maxWidth?: MaxWidthValue;
+    maxHeight?: MaxHeightValue;
+    gridArea?: GridAreaValue;
+    boxSizing?: BoxSizingValue;
+    padding?: PaddingValue;
+    marginLeft?: MarginValue;
+    marginTop?: MarginValue;
+    marginBottom?: MarginValue;
+    marginRight?: MarginValue;
+    justifySelf?: JustifySelfValue;
+    alignSelf?: AlignSelfValue;
+}
+export declare const getDefaultStyles: () => FaqStyleProperties;
+export interface CMSFaqSliderInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: FaqStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+}

package/dist/types/builder/elements/gallery-slider/index.d.ts

@@ -0,0 +1,30 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
+import { BuilderAttributes, CMSElementInterface } from "../common";
+export interface GallerySliderStyleProperties extends CommonStyleProperties {
+    minHeight?: MinHeightValue;
+    height?: HeightValue;
+    minWidth?: MinWidthValue;
+    maxWidth?: MaxWidthValue;
+    maxHeight?: MaxHeightValue;
+    gridArea?: GridAreaValue;
+    boxSizing?: BoxSizingValue;
+    padding?: PaddingValue;
+    marginLeft?: MarginValue;
+    marginTop?: MarginValue;
+    marginBottom?: MarginValue;
+    marginRight?: MarginValue;
+    justifySelf?: JustifySelfValue;
+    alignSelf?: AlignSelfValue;
+}
+export declare const getDefaultStyles: () => GallerySliderStyleProperties;
+export interface CMSGallerySliderInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: GallerySliderStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+}

package/dist/types/builder/elements/grid/index.d.ts

@@ -0,0 +1,63 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { DisplayValue, ResponsiveBehaviourTypes, SizeTypeValue } from "../../../global/types";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { BuilderAttributes } from "../common";
+import { SizeInterface } from "../../interfaces/global";
+export interface GridStyleProperties extends CommonStyleProperties {
+    minHeight: string;
+    height: string;
+    minWidth: string;
+    maxWidth: string;
+    maxHeight: string;
+    gridArea: string;
+    display: DisplayValue;
+    boxSizing: string;
+    rowGap: string;
+    columnGap: string;
+    gridTemplateRows: string;
+    gridTemplateColumns: string;
+}
+export declare const getDefaultStyles: () => GridStyleProperties;
+type AriaRoleValue = "grid" | "gridcell" | "row" | "rowgroup" | "presentation" | "none" | "button" | "link" | string;
+type AriaLabelValue = string;
+type AriaHiddenValue = "true" | "false";
+type AriaLiveValue = "off" | "polite" | "assertive";
+type LangValue = string;
+export interface CommonGridElementAttributes extends CMSHTMLAttributes {
+    role?: AriaRoleValue;
+    ariaLabel?: AriaLabelValue;
+    ariaHidden?: AriaHiddenValue;
+    ariaLive?: AriaLiveValue;
+    ariaDescribedBy?: string;
+    ariaControls?: string;
+    lang?: LangValue;
+    dataType?: string;
+    dataDivType?: string;
+    dataElementType?: string;
+    dataWidgetType?: string;
+    id?: string;
+}
+export interface CMSGridInterface {
+    responsiveBehaviour: ResponsiveBehaviourTypes;
+    id?: string | number;
+    styles: GridStyleProperties;
+    editedStyles?: CommonStyleProperties;
+    children: any;
+    attributes: {
+        BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType">;
+        HTML?: CommonGridElementAttributes;
+        CUSTOM?: any;
+    };
+    size?: SizeInterface;
+    uniqueSize?: SizeInterface;
+    number?: SizeInterface;
+    visible?: boolean;
+    gtccolorder?: number;
+    gtrroworder?: number;
+    type?: SizeTypeValue;
+    uniqueKey?: string;
+}
+export interface CMSGridsContainer {
+    [key: string]: CMSGridInterface;
+}
+export {};

package/dist/types/builder/elements/image/index.d.ts

@@ -0,0 +1,30 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MarginValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
+import { BuilderAttributes, CMSElementInterface } from "../common";
+export interface ImageStyleProperties extends CommonStyleProperties {
+    minHeight?: MinHeightValue;
+    height?: HeightValue;
+    minWidth?: MinWidthValue;
+    maxWidth?: MaxWidthValue;
+    maxHeight?: MaxHeightValue;
+    gridArea?: GridAreaValue;
+    boxSizing?: BoxSizingValue;
+    padding?: PaddingValue;
+    marginLeft?: MarginValue;
+    marginTop?: MarginValue;
+    marginBottom?: MarginValue;
+    marginRight?: MarginValue;
+    justifySelf?: JustifySelfValue;
+    alignSelf?: AlignSelfValue;
+}
+export declare const getDefaultStyles: () => ImageStyleProperties;
+export interface CMSImageInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: ImageStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+}