@wix/editor-react-components 1.2153.0

package/dist/site/components/chunks/stylePropsSDKFactory.js

@@ -0,0 +1,828 @@
+import { t as templates, i as invalidEnumValueMessage } from "./messages.js";
+import { r as reportError, a as reportWarning } from "./reporters.js";
+import { w as withValidation } from "./corvidEvents.js";
+import { f as isString } from "./assert.js";
+const cssLevel1 = {
+  black: "#000000",
+  silver: "#c0c0c0",
+  gray: "#808080",
+  white: "#ffffff",
+  maroon: "#800000",
+  red: "#ff0000",
+  purple: "#800080",
+  fuchsia: "#ff00ff",
+  green: "#008000",
+  lime: "#00ff00",
+  olive: "#808000",
+  yellow: "#ffff00",
+  navy: "#000080",
+  blue: "#0000ff",
+  teal: "#008080",
+  aqua: "#00ffff"
+};
+const cssLevel2 = {
+  orange: "#ffa500",
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  blanchedalmond: "#ffebcd",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgreen: "#006400",
+  darkgrey: "#a9a9a9",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkslategrey: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  gold: "#ffd700",
+  goldenrod: "#daa520",
+  greenyellow: "#adff2f",
+  grey: "#808080",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavender: "#e6e6fa",
+  lavenderblush: "#fff0f5",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2"
+};
+const cssLevel3 = {
+  lightgray: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightgrey: "#d3d3d3",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#778899",
+  lightslategrey: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  oldlace: "#fdf5e6",
+  olivedrab: "#6b8e23",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  slategrey: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  whitesmoke: "#f5f5f5",
+  yellowgreen: "#9acd32"
+};
+const cssLevel4 = {
+  rebeccapurple: "#663399"
+};
+const colorKeywords = {
+  ...cssLevel1,
+  ...cssLevel2,
+  ...cssLevel3,
+  ...cssLevel4
+};
+function isRGBAColor(value) {
+  const rxValidRgba = /\b([R][G][B][A][(]\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])(\s*,\s*((0\.[0-9]*)|(1\.0)|(1)|(0)))?[)])/i;
+  return rxValidRgba.test(value);
+}
+function isRGBColor(value) {
+  const rxValidRgb = /\b([R][G][B][(]\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*,\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])(\s*)[)])/i;
+  return rxValidRgb.test(value);
+}
+function isHexColor(value) {
+  const validHexColor = /^#(([a-f0-9]){3}){1,2}$/i;
+  return validHexColor.test(value);
+}
+function isHexaColor(value) {
+  const validHexaColor = /^#([a-f0-9]{8}|[a-f0-9]{4})\b$/gi;
+  return validHexaColor.test(value);
+}
+function isKeyword(color) {
+  return colorKeywords[color];
+}
+function isValidRGBOrRGBA(color) {
+  return isRGBColor(color) || isRGBAColor(color);
+}
+function isValidHexaOrHex(color) {
+  return isHexaColor(color) || isHexColor(color);
+}
+function isValidColor(color) {
+  return isValidHexaOrHex(color) || isValidRGBOrRGBA(color) || isKeyword(color);
+}
+const getChannelsFromHex = (color) => {
+  const chunkSize = Math.floor((color.length - 1) / 3);
+  return color.slice(1).match(new RegExp(`.{${chunkSize}}`, "g"));
+};
+const convertHexUnitTo256 = (hex) => parseInt(hex.repeat(2 / hex.length), 16);
+const convertHexaOrHexToRGBAUnits = (color) => {
+  if (!isValidHexaOrHex(color)) {
+    return;
+  }
+  const hexArr = getChannelsFromHex(color);
+  const [r, g, b, a] = hexArr.map(convertHexUnitTo256);
+  const alpha = typeof a !== "undefined" ? roundToTwoDecimals(a / 255) : 1;
+  return [r, g, b, alpha];
+};
+const convertRGBAorRGBToRGBAUnits = (color) => {
+  if (!isValidRGBOrRGBA(color)) {
+    return;
+  }
+  const inParts = color.substring(color.indexOf("(")).split(",");
+  const r = parseInt(inParts[0].substring(1).trim(), 10);
+  const g = parseInt(inParts[1].trim(), 10);
+  const b = parseInt(inParts[2].trim(), 10);
+  const a = inParts[3] && parseFloat(inParts[3].substring(0, inParts[3].length - 1).trim());
+  const alpha = typeof a !== "undefined" ? a : 1;
+  return [r, g, b, alpha];
+};
+const convertColorToRGBAUnits = (color) => {
+  if (isValidHexaOrHex(color)) {
+    return convertHexaOrHexToRGBAUnits(color);
+  }
+  if (isValidRGBOrRGBA(color)) {
+    return convertRGBAorRGBToRGBAUnits(color);
+  }
+  if (isKeyword(color)) {
+    return convertHexaOrHexToRGBAUnits(colorKeywords[color]);
+  }
+  return;
+};
+const extractOpacity = (color) => {
+  const colorUnits = convertColorToRGBAUnits(color);
+  if (colorUnits) {
+    return colorUnits[3];
+  }
+  return;
+};
+const applyOpacity = (color, opacity) => {
+  const colorUnits = convertColorToRGBAUnits(color);
+  if (colorUnits) {
+    const [r, g, b] = colorUnits;
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  return;
+};
+const roundToTwoDecimals = (number) => Math.round(number * 100) / 100;
+function validatePixel(value) {
+  if (isString(value)) {
+    const endsWithPx = value.endsWith("px");
+    const integerToValidate = value.slice(0, value.length - 2);
+    const containsOnlyNumbers = /^\d*$/.test(integerToValidate);
+    return endsWithPx && containsOnlyNumbers && parseInt(integerToValidate, 10);
+  }
+  return false;
+}
+const getScopedVar = ({
+  name,
+  prefix
+}) => {
+  return prefix ? `--${prefix}-corvid-${name}` : `--corvid-${name}`;
+};
+const createColorValidator = ({
+  propertyName,
+  cssProperty,
+  supportAlpha
+}) => (color, api) => {
+  if (!isValidColor(color)) {
+    reportError(
+      templates.error_invalid_css_value_multiple_expected_formats({
+        propertyName,
+        cssProperty,
+        infoLink: `https://www.wix.com/corvid/new-reference/$w/style/${propertyName.toLowerCase()}`,
+        compName: api.metaData.role,
+        exampleFormats: supportAlpha ? '"red", "#FF0000", "#FF000000", "rgb(225, 0, 0)" or "rgba(225, 0, 0, 0)"' : '"red", "#FF0000", or "rgb(225, 0, 0)"'
+      })
+    );
+    return false;
+  }
+  if (!supportAlpha) {
+    reportRGBACastingWarning({ propertyName, color, api });
+  }
+  return true;
+};
+const createPixelValidator = ({
+  propertyName,
+  cssProperty
+}) => (unit, api) => {
+  if (!validatePixel(unit)) {
+    reportError(
+      templates.error_invalid_css_value({
+        propertyName,
+        cssProperty,
+        infoLink: `https://www.wix.com/corvid/new-reference/$w/style/${propertyName.toLowerCase()}`,
+        compName: api.metaData.role,
+        exampleFormat: "1px"
+      })
+    );
+    return false;
+  }
+  return true;
+};
+const reportRGBACastingWarning = ({
+  propertyName,
+  color,
+  api
+}) => {
+  if (isHexaColor(color) || isRGBAColor(color)) {
+    reportWarning(
+      templates.warning_color_casting_performed({
+        propertyName,
+        compName: api.metaData.role,
+        infoLink: `https://www.wix.com/corvid/new-reference/$w/style/${propertyName.toLowerCase()}`
+      })
+    );
+  }
+};
+const cssVars = {
+  backgroundColor: "background-color",
+  borderColor: "border-color",
+  borderRadius: "border-radius",
+  borderWidth: "border-width",
+  foregroundColor: "foreground-color",
+  textColor: "color",
+  fillColor: "fill-color",
+  strokeColor: "stroke-color",
+  iconColor: "icon-color"
+};
+const styleStates = ["hover", "disabled"];
+const styleStateCssVars = {
+  hover: {
+    textColor: "hover-color",
+    borderColor: "hover-border-color",
+    backgroundColor: "hover-background-color",
+    iconColor: "hover-icon-color"
+  },
+  disabled: {
+    textColor: "disabled-color",
+    borderColor: "disabled-border-color",
+    backgroundColor: "disabled-background-color",
+    iconColor: "disabled-icon-color"
+  }
+};
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+const buildColorPropsSDKFactoryCreator = (propertyName) => (options = { supportOpacity: true }) => {
+  const {
+    prefix,
+    supportOpacity,
+    withoutDefaultValue,
+    supportedStates = []
+  } = options;
+  const _createColorPropsSDKFactory = (cssRule, statePropertyName = propertyName) => {
+    const validateColor = createColorValidator({
+      propertyName,
+      cssProperty: supportOpacity ? "rgbaColor" : "rgbColor",
+      supportAlpha: supportOpacity
+    });
+    const _colorPropsSDKFactory = ({ setStyles, sdkData, createSdkState }) => {
+      var _a;
+      const editorInitialColor = (_a = sdkData == null ? void 0 : sdkData.initialSdkStyles) == null ? void 0 : _a[statePropertyName];
+      const editorOpacity = extractOpacity(editorInitialColor);
+      const initialValue = withoutDefaultValue ? void 0 : editorInitialColor;
+      const [state, setState] = createSdkState(
+        { [statePropertyName]: initialValue },
+        statePropertyName
+      );
+      return Object.defineProperty(
+        {
+          reset() {
+            setState({ [statePropertyName]: initialValue });
+            setStyles({ [cssRule]: void 0 });
+          }
+        },
+        propertyName,
+        {
+          enumerable: true,
+          set(value) {
+            let colorValue = value;
+            if (!supportOpacity && (isHexaColor(value) || isRGBAColor(value))) {
+              const [r, g, b] = convertColorToRGBAUnits(value);
+              colorValue = `rgb(${r}, ${g}, ${b})`;
+            }
+            if (typeof editorOpacity === "number" && editorOpacity !== 1) {
+              const userOpacity = extractOpacity(value);
+              const opacity = Number.isFinite(userOpacity) ? roundToTwoDecimals(editorOpacity * userOpacity) : editorOpacity;
+              colorValue = applyOpacity(colorValue, opacity);
+            }
+            setState({ [statePropertyName]: colorValue });
+            setStyles({ [cssRule]: colorValue });
+          },
+          get() {
+            return state[statePropertyName];
+          }
+        }
+      );
+    };
+    return withValidation(
+      _colorPropsSDKFactory,
+      {
+        properties: {
+          [propertyName]: {
+            type: ["string", "nil"]
+          }
+        }
+      },
+      {
+        [propertyName]: [validateColor]
+      }
+    );
+  };
+  const styleStateSDKFactories = supportedStates.map((styleState) => {
+    const _createStyleStateFactory = (api) => {
+      const styleStateSDK = _createColorPropsSDKFactory(
+        getScopedVar({
+          name: styleStateCssVars[styleState][propertyName],
+          prefix
+        }),
+        styleState + capitalize(propertyName)
+      )(api);
+      return {
+        [styleState]: styleStateSDK
+      };
+    };
+    return withValidation(_createStyleStateFactory, {
+      properties: {
+        [styleState]: {
+          type: ["object", "nil"]
+        }
+      }
+    });
+  });
+  const regularSDKFactory = _createColorPropsSDKFactory(
+    getScopedVar({ name: cssVars[propertyName], prefix })
+  );
+  return (api) => Object.assign(
+    regularSDKFactory(api),
+    styleStateSDKFactories.reduce(
+      (sdk, styleStateSDKFactory) => Object.assign(sdk, styleStateSDKFactory(api)),
+      {}
+    )
+  );
+};
+const createBackgroundColorPropsSDKFactory = buildColorPropsSDKFactoryCreator("backgroundColor");
+const createBorderColorPropsSDKFactory = buildColorPropsSDKFactoryCreator("borderColor");
+const createBorderRadiusPropsSDKFactory = (options = {}) => {
+  const { prefix, withoutDefaultValue } = options;
+  const cssRule = getScopedVar({
+    name: cssVars.borderRadius,
+    prefix
+  });
+  const validatePixel2 = createPixelValidator({
+    propertyName: "borderRadius",
+    cssProperty: "radius"
+  });
+  const _borderRadiusPropsSDKFactory = ({ setStyles, sdkData, createSdkState }) => {
+    var _a;
+    const editorInitialRadius = (_a = sdkData == null ? void 0 : sdkData.initialSdkStyles) == null ? void 0 : _a.borderRadius;
+    const [state, setState] = createSdkState(
+      {
+        borderRadius: withoutDefaultValue ? void 0 : editorInitialRadius
+      },
+      "borderRadius"
+    );
+    return {
+      set borderRadius(borderRadius) {
+        setState({ borderRadius });
+        setStyles({ [cssRule]: borderRadius });
+      },
+      get borderRadius() {
+        return state.borderRadius;
+      },
+      reset() {
+        setState({ borderRadius: editorInitialRadius });
+        setStyles({ [cssRule]: void 0 });
+      }
+    };
+  };
+  return withValidation(
+    _borderRadiusPropsSDKFactory,
+    {
+      properties: {
+        borderRadius: {
+          type: ["string", "nil"]
+        }
+      }
+    },
+    {
+      borderRadius: [validatePixel2]
+    }
+  );
+};
+const createBorderWidthPropsSDKFactory = (options = {}) => {
+  const { prefix, withoutDefaultValue } = options;
+  const cssRule = getScopedVar({
+    name: cssVars.borderWidth,
+    prefix
+  });
+  const validatePixel2 = createPixelValidator({
+    propertyName: "borderWidth",
+    cssProperty: "width"
+  });
+  const _borderWidthPropsSDKFactory = ({ setStyles, sdkData, createSdkState }) => {
+    var _a;
+    const editorInitialWidth = (_a = sdkData == null ? void 0 : sdkData.initialSdkStyles) == null ? void 0 : _a.borderWidth;
+    const [state, setState] = createSdkState(
+      {
+        borderWidth: withoutDefaultValue ? void 0 : editorInitialWidth
+      },
+      "borderWidth"
+    );
+    return {
+      set borderWidth(borderWidth) {
+        setState({ borderWidth });
+        setStyles({ [cssRule]: borderWidth });
+      },
+      get borderWidth() {
+        return state.borderWidth;
+      },
+      reset() {
+        setState({ borderWidth: editorInitialWidth });
+        setStyles({ [cssRule]: void 0 });
+      }
+    };
+  };
+  return withValidation(
+    _borderWidthPropsSDKFactory,
+    {
+      properties: {
+        borderWidth: {
+          type: ["string", "nil"]
+        }
+      }
+    },
+    {
+      borderWidth: [validatePixel2]
+    }
+  );
+};
+const createForegroundColorPropsSDKFactory = (options = {}) => {
+  const { prefix, withoutDefaultValue } = options;
+  const cssRule = getScopedVar({
+    name: cssVars.foregroundColor,
+    prefix
+  });
+  const validateColor = createColorValidator({
+    propertyName: "foregroundColor",
+    cssProperty: "rgbaColor",
+    supportAlpha: true
+  });
+  const _foregroundColorPropsSDKFactory = ({ setStyles, sdkData, createSdkState }) => {
+    var _a;
+    const [state, setState] = createSdkState(
+      {
+        foregroundColor: withoutDefaultValue ? void 0 : (_a = sdkData == null ? void 0 : sdkData.initialSdkStyles) == null ? void 0 : _a.foregroundColor
+      },
+      "foregroundColor"
+    );
+    return {
+      set foregroundColor(foregroundColor) {
+        setState({ foregroundColor });
+        setStyles({ [cssRule]: foregroundColor });
+      },
+      get foregroundColor() {
+        return state.foregroundColor;
+      },
+      reset() {
+        var _a2;
+        setState({
+          foregroundColor: withoutDefaultValue ? void 0 : (_a2 = sdkData == null ? void 0 : sdkData.initialSdkStyles) == null ? void 0 : _a2.foregroundColor
+        });
+        setStyles({ [cssRule]: void 0 });
+      }
+    };
+  };
+  return withValidation(
+    _foregroundColorPropsSDKFactory,
+    {
+      properties: {
+        foregroundColor: {
+          type: ["string", "nil"]
+        }
+      }
+    },
+    {
+      foregroundColor: [validateColor]
+    }
+  );
+};
+const TEXT_COLOR_STATE_PROPERTY_NAME = "textColor";
+const getStyleStatePropertyName = (styleState) => styleState + capitalize(TEXT_COLOR_STATE_PROPERTY_NAME);
+const TEXT_COLOR_INITIAL_STATE_PROPERTY_NAME = "color";
+const getInitialStatePropertyName = (styleState) => styleState + capitalize(TEXT_COLOR_INITIAL_STATE_PROPERTY_NAME);
+const createTextColorPropsSDKFactory = (options = {}) => {
+  const { prefix, withoutDefaultValue, supportedStates = [] } = options;
+  const _createTextColorPropsSDKFactory = (cssRule, statePropertyName = TEXT_COLOR_STATE_PROPERTY_NAME, initialStatePropertyName = TEXT_COLOR_INITIAL_STATE_PROPERTY_NAME) => {
+    const validateColor = createColorValidator({
+      propertyName: "color",
+      cssProperty: "rgbColor",
+      supportAlpha: false
+    });
+    const _textColorPropsSDKFactory = ({
+      setStyles,
+      sdkData,
+      createSdkState
+    }) => {
+      var _a;
+      const editorInitialColor = (_a = sdkData == null ? void 0 : sdkData.initialSdkStyles) == null ? void 0 : _a[initialStatePropertyName];
+      const initialColor = withoutDefaultValue ? void 0 : editorInitialColor;
+      const [state, setState] = createSdkState(
+        { [statePropertyName]: initialColor },
+        statePropertyName
+      );
+      return {
+        set color(value) {
+          let textColor = value;
+          if (isHexaColor(value) || isRGBAColor(value)) {
+            const [r, g, b] = convertColorToRGBAUnits(value);
+            textColor = `rgb(${r}, ${g}, ${b})`;
+          }
+          setState({ [statePropertyName]: textColor });
+          setStyles({ [cssRule]: textColor });
+        },
+        get color() {
+          return state[statePropertyName];
+        },
+        reset() {
+          setState({ [statePropertyName]: initialColor });
+          setStyles({ [cssRule]: void 0 });
+        }
+      };
+    };
+    return withValidation(
+      _textColorPropsSDKFactory,
+      {
+        properties: {
+          color: {
+            type: ["string", "nil"]
+          }
+        }
+      },
+      {
+        color: [validateColor]
+      }
+    );
+  };
+  const styleStateSDKFactories = supportedStates.map((styleState) => {
+    const _createStyleStateFactory = (api) => {
+      const styleStateSDK = _createTextColorPropsSDKFactory(
+        getScopedVar({
+          name: styleStateCssVars[styleState].textColor,
+          prefix
+        }),
+        getStyleStatePropertyName(styleState),
+        getInitialStatePropertyName(styleState)
+      )(api);
+      return {
+        [styleState]: styleStateSDK
+      };
+    };
+    return withValidation(_createStyleStateFactory, {
+      properties: {
+        [styleState]: {
+          type: ["object", "nil"]
+        }
+      }
+    });
+  });
+  const regularSDKFactory = _createTextColorPropsSDKFactory(
+    getScopedVar({ name: cssVars.textColor, prefix })
+  );
+  return (api) => Object.assign(
+    regularSDKFactory(api),
+    styleStateSDKFactories.reduce(
+      (sdk, styleStateSDKFactory) => Object.assign(sdk, styleStateSDKFactory(api)),
+      {}
+    )
+  );
+};
+const createFillColorPropsSDKFactory = buildColorPropsSDKFactoryCreator("fillColor");
+const createStrokeColorPropsSDKFactory = buildColorPropsSDKFactoryCreator("strokeColor");
+const createIconColorPropsSDKFactory = buildColorPropsSDKFactoryCreator("iconColor");
+const composeFactory = (resetMethodName) => (...objs) => {
+  const resetMap = {};
+  const result = {
+    [resetMethodName](propName) {
+      if (typeof resetMap[propName] === "function") {
+        return resetMap[propName](propName);
+      }
+    }
+  };
+  objs.forEach((obj) => {
+    Object.keys(obj).filter((key) => key !== resetMethodName).map((key) => ({
+      key,
+      descriptor: Object.getOwnPropertyDescriptor(
+        obj,
+        key
+      )
+    })).forEach(({ key, descriptor }) => {
+      if (typeof obj[resetMethodName] === "function") {
+        resetMap[key] = obj[resetMethodName];
+      }
+      Object.defineProperty(result, key, descriptor);
+    });
+  });
+  return result;
+};
+const STYLE_SDK_RESET_METHOD_NAME = "reset";
+function composeSDKFactoriesWithReset(...sources) {
+  const compose = composeFactory(STYLE_SDK_RESET_METHOD_NAME);
+  return (api) => {
+    const sdks = sources.map((source) => source(api));
+    const styleStateComposedSdks = {};
+    for (const styleState of styleStates) {
+      if (!sdks.some((sdk) => styleState in sdk)) {
+        continue;
+      }
+      styleStateComposedSdks[styleState] = compose(
+        ...sdks.map((sdk) => sdk[styleState] ?? {})
+      );
+      Object.defineProperty(
+        styleStateComposedSdks[styleState],
+        STYLE_SDK_RESET_METHOD_NAME,
+        { enumerable: false }
+      );
+      sdks.forEach((sdk) => {
+        delete sdk[styleState];
+      });
+    }
+    const composedSdk = compose(...sdks);
+    Object.defineProperty(composedSdk, STYLE_SDK_RESET_METHOD_NAME, {
+      enumerable: false
+    });
+    return Object.assign(composedSdk, styleStateComposedSdks);
+  };
+}
+const _stylePropsSDKFactory = (supportedSDKFactories) => (api) => {
+  const styleSDKs = supportedSDKFactories(api);
+  styleSDKs.removeProperty = (propertyName) => {
+    var _a;
+    const [propName, styleState] = propertyName.includes(".") ? propertyName.split(".").reverse() : [propertyName, void 0];
+    if (!styleState && !(propName in styleSDKs) || styleState && !(propName in (styleSDKs[styleState] ?? {}))) {
+      const styleSdkPropNames = Object.keys(styleSDKs).filter(
+        (k) => k !== "removeProperty"
+      );
+      reportError(
+        invalidEnumValueMessage({
+          functionName: "removeProperty",
+          propertyName: "propertyName",
+          value: propertyName,
+          enum: styleSdkPropNames,
+          index: void 0
+        })
+      );
+      return;
+    }
+    const sdk = styleState ? styleSDKs[styleState] : styleSDKs;
+    (_a = sdk[STYLE_SDK_RESET_METHOD_NAME]) == null ? void 0 : _a.call(sdk, propName);
+  };
+  return {
+    get style() {
+      return styleSDKs;
+    }
+  };
+};
+const styleFactories = {
+  BackgroundColor: createBackgroundColorPropsSDKFactory,
+  BorderColor: createBorderColorPropsSDKFactory,
+  BorderWidth: createBorderWidthPropsSDKFactory,
+  ForegroundColor: createForegroundColorPropsSDKFactory,
+  BorderRadius: createBorderRadiusPropsSDKFactory,
+  TextColor: createTextColorPropsSDKFactory,
+  FillColor: createFillColorPropsSDKFactory,
+  StrokeColor: createStrokeColorPropsSDKFactory,
+  IconColor: createIconColorPropsSDKFactory
+};
+const styleFactoriesDefaultOptions = {
+  BackgroundColor: {
+    supportOpacity: true
+  },
+  BorderColor: {
+    supportOpacity: true
+  },
+  BorderWidth: {},
+  ForegroundColor: {
+    supportOpacity: true
+  },
+  BorderRadius: {},
+  TextColor: {},
+  FillColor: {
+    supportOpacity: true
+  },
+  StrokeColor: {
+    supportOpacity: true
+  },
+  IconColor: {}
+};
+const createStylePropsSDKFactory = (list, styleSDKOptions) => {
+  const supported = Object.keys(list).filter(
+    (value) => list[value]
+  );
+  const supportedSDKFactories = supported.map((value) => {
+    const stylePropertyOptions = typeof list[value] !== "boolean" ? list[value] : styleFactoriesDefaultOptions[value];
+    return styleFactories[value]({
+      prefix: styleSDKOptions == null ? void 0 : styleSDKOptions.cssVarPrefix,
+      withoutDefaultValue: stylePropertyOptions.withoutDefaultValue,
+      supportOpacity: stylePropertyOptions.supportOpacity,
+      supportedStates: stylePropertyOptions.supportedStates
+    });
+  });
+  return withValidation(
+    _stylePropsSDKFactory(
+      composeSDKFactoriesWithReset(...supportedSDKFactories)
+    ),
+    {
+      properties: {
+        style: {
+          type: ["object"]
+        }
+      }
+    }
+  );
+};
+export {
+  createStylePropsSDKFactory as c
+};