@superblocksteam/library 2.0.3-next.164 → 2.0.3-next.166

package/dist/{index-IwE7Zb_b.js → index-CX74kQ18.js}

@@ -2692,14 +2692,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-BXEYCda4.js"
+            "./allPathsLoader-D6axntCf.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-CMZq0zI0.js"
+            "./splitPathsBySizeLoader-o49Z1Cr0.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -10313,10 +10313,6 @@ const CLASS_NAMES = {
   CARET_ICON: "sb-caret-icon",
   PRIMARY_COLOR_ICON: "sb-primary-color-icon",
   CLOSE_ICON: "sb-close-icon",
-  // key-value widget
-  KEY_VALUE_ENTRY_ELLIPSIS: "sb-key-value-entry-ellipsis",
-  KEY_VALUE_ENTRY_VALUE_RIGHT_ALIGN: "sb-key-value-entry-value-right-align",
-  KEY_VALUE_ENTRY_VERTICAL: "sb-key-value-entry-vertical",
   ICON: "sb-icon",
   // misc
   PAGINATOR: "sb-rc-paginator",
@@ -41329,7 +41325,7 @@ function requireLodash() {
             index2 = wrapper ? index2 : length2;
             while (++index2 < length2) {
               func = funcs[index2];
-              var funcName = getFuncName(func), data2 = funcName == "wrapper" ? getData2(func) : undefined$1;
+              var funcName = getFuncName(func), data2 = funcName == "wrapper" ? getData(func) : undefined$1;
               if (data2 && isLaziable(data2[0]) && data2[1] == (WRAP_ARY_FLAG | WRAP_CURRY_FLAG | WRAP_PARTIAL_FLAG | WRAP_REARG_FLAG) && !data2[4].length && data2[9] == 1) {
                 wrapper = wrapper[getFuncName(data2[0])].apply(wrapper, data2[3]);
               } else {
@@ -41558,7 +41554,7 @@ function requireLodash() {
             var partialsRight = partials, holdersRight = holders;
             partials = holders = undefined$1;
           }
-          var data2 = isBindKey ? undefined$1 : getData2(func);
+          var data2 = isBindKey ? undefined$1 : getData(func);
           var newData = [
             func,
             bitmask,
@@ -41753,7 +41749,7 @@ function requireLodash() {
         function getAllKeysIn(object4) {
           return baseGetAllKeys(object4, keysIn, getSymbolsIn);
         }
-        var getData2 = !metaMap ? noop3 : function(func) {
+        var getData = !metaMap ? noop3 : function(func) {
           return metaMap.get(func);
         };
         function getFuncName(func) {
@@ -41981,7 +41977,7 @@ function requireLodash() {
           if (func === other) {
             return true;
           }
-          var data2 = getData2(other);
+          var data2 = getData(other);
           return !!data2 && func === data2[0];
         }
         function isMasked(func) {
@@ -46912,21 +46908,6 @@ const getDynamicBindings = (dynamicString) => {
 function getStableScopeId(scopeName) {
   return generatePredictableId(`sc-${scopeName}`);
 }
-const createPerSideBorder = ({
-  color,
-  width
-}) => {
-  const borderSide = {
-    color,
-    width: Dim.px(width)
-  };
-  return {
-    top: borderSide,
-    right: borderSide,
-    bottom: borderSide,
-    left: borderSide
-  };
-};
 const generateBorderStyleObject = ({
   border: border2,
   fallbackBorderColor,
@@ -50609,7 +50590,7 @@ const ButtonClass = styleAsClass`
     border-color: transparent !important;
   }
 `;
-const ButtonLikeLinkClass = styleAsClass`
+styleAsClass`
   cursor: default;
 
   .button-content {
@@ -50663,7 +50644,7 @@ const ButtonLoader = styleAsClass`
   }
 `;
 const ButtonHoverClass = styleAsClass`${getHoverCss(":disabled")}`;
-const ButtonLikeLinkHoverClass = styleAsClass`${getHoverCss(
+styleAsClass`${getHoverCss(
   `.${CLASS_NAMES.DISABLED_MODIFIER}`
 )}`;
 const getClassNameForStyle = (style2) => {
@@ -50750,7 +50731,7 @@ const useButtonContent = (props, forceTextColorWhenDisabled) => {
     } else {
       style2.color = textColor;
     }
-    if (disabled && !forceTextColorWhenDisabled) {
+    if (disabled && true) {
       style2.color = "";
     }
     return style2;
@@ -50933,90 +50914,6 @@ const Button$4 = (props) => {
     }
   );
 };
-const ButtonLikeLink = (props) => {
-  const {
-    linkStyle,
-    border: border2,
-    borderRadius: borderRadius2,
-    backgroundColor,
-    textColor,
-    textAlignment,
-    isLoadingAnimated = true,
-    isLoading,
-    disabled,
-    theme
-  } = props;
-  const containerClassNames = [
-    SharedButtonClass,
-    ButtonLikeLinkClass,
-    isLoading ? "loading-button" : "",
-    getTextAlignmentClass(textAlignment)
-  ].filter(Boolean).join(" ");
-  const anchorClassNames = [
-    ButtonLikeLinkHoverClass,
-    getClassNameForStyle(linkStyle),
-    disabled ? CLASS_NAMES.DISABLED_MODIFIER : ""
-  ].filter(Boolean).join(" ");
-  const sharedStyles = useSharedStyles(props);
-  const buttonLikeLinkSpecificStyles = useMemo$2(() => {
-    const borderStyleObject = generateBorderStyleObject({
-      border: border2,
-      borderRadius: borderRadius2,
-      fallbackBorderColor: theme.colors.primary500
-    });
-    const hoverStyleObject = generateHoverVariableAssignmentStyleObject({
-      borderStyleObject,
-      backgroundColor,
-      textColor
-    });
-    const autoWidthWhenLink = linkStyle === "LINK" ? { width: "auto" } : {};
-    return { ...borderStyleObject, ...hoverStyleObject, ...autoWidthWhenLink };
-  }, [
-    border2,
-    borderRadius2,
-    theme.colors.primary500,
-    backgroundColor,
-    textColor,
-    linkStyle
-  ]);
-  const forceTextColorWhenDisabled = linkStyle === "LINK";
-  const buttonContent = useButtonContent(props, forceTextColorWhenDisabled);
-  const href2 = props.url && !disabled ? props.url : void 0;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassNames, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "a",
-    {
-      href: href2,
-      className: anchorClassNames,
-      target: props.openInNewTab ? "_blank" : "_self",
-      rel: props.openInNewTab ? "noopener noreferrer" : "",
-      draggable: false,
-      onClick: (e3) => {
-        if (props.disabled) {
-          e3.preventDefault();
-        }
-        if (props.onClick) {
-          props.onClick(e3);
-        }
-      },
-      style: { ...sharedStyles, ...buttonLikeLinkSpecificStyles },
-      "data-test": props["data-test"],
-      "data-content-width": props.width,
-      children: [
-        buttonContent,
-        isLoadingAnimated && props.isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: ButtonLoader,
-            style: {
-              background: theme.colors.neutral100
-            },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner$1, { size: 20 })
-          }
-        )
-      ]
-    }
-  ) });
-};
 var contentType = {};
 /*!
  * content-type
@@ -117347,7 +117244,7 @@ const textStyle$3 = textStyleProp().default(function() {
     }
   };
 });
-const propertiesDefinition$i = {
+const propertiesDefinition$h = {
   general: Section.category(PropsPanelCategory.Content).children({
     label: Prop.string().readAndWrite().validate(VALIDATORS.TEXT_ALLOW_UNDEFINED).propertiesPanel({
       label: "Label",
@@ -117471,7 +117368,7 @@ const propertiesDefinition$i = {
 const SbButton = registerSbComponent(
   "SbButton",
   {
-    propertiesDefinition: propertiesDefinition$i
+    propertiesDefinition: propertiesDefinition$h
   },
   (props) => {
     var _a2;
@@ -117940,7 +117837,7 @@ const InternalVStack = (props) => {
 const InternalHStack = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InternalStack, { direction: "row", ...props });
 };
-const propertiesDefinition$h = {
+const propertiesDefinition$g = {
   contents: Section.category(PropsPanelCategory.Content).children({
     columns: Prop.array().readAndWrite().propertiesPanel({
       label: "Columns",
@@ -117980,7 +117877,7 @@ const SbSection = registerSbComponent(
   "SbSection",
   {
     container: true,
-    propertiesDefinition: propertiesDefinition$h
+    propertiesDefinition: propertiesDefinition$g
   },
   (props) => {
     const { style: style2, ...passthroughProps } = usePassthroughProps(props);
@@ -118336,7 +118233,7 @@ const StaticComponent = ({
   }, [staticHeight]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...style2, width: "100%", height: "100%" }, children });
 };
-const propertiesDefinition$g = {
+const propertiesDefinition$f = {
   layout: Section.category(PropsPanelCategory.Layout).add(containerLayout()).add(spacing()).add({
     padding: Prop.composite({
       top: Prop.dimension().default(function() {
@@ -118536,11 +118433,11 @@ const SbContainer = registerSbComponent(
   "SbContainer",
   {
     container: true,
-    propertiesDefinition: propertiesDefinition$g
+    propertiesDefinition: propertiesDefinition$f
   },
   InternalContainer
 );
-const propertiesDefinition$f = {
+const propertiesDefinition$e = {
   layout: Section.category(PropsPanelCategory.Layout).add(containerLayout()).add(spacing()).add(padding()).add(
     size$2({
       defaults: {
@@ -118569,7 +118466,7 @@ const SbColumn = registerSbComponent(
   "SbColumn",
   {
     container: true,
-    propertiesDefinition: propertiesDefinition$f
+    propertiesDefinition: propertiesDefinition$e
   },
   (props) => {
     const { style: style2, ...passthroughProps } = usePassthroughProps(props);
@@ -125980,7 +125877,7 @@ const textStyle$2 = textStyleProp({
     }
   })
 );
-const propertiesDefinition$e = {
+const propertiesDefinition$d = {
   general: Section.category(PropsPanelCategory.Content).children({
     label: Prop.string().readAndWrite().default("").propertiesPanel({
       label: "Label",
@@ -126210,7 +126107,7 @@ const propertiesDefinition$e = {
 const SbInput = registerSbComponent(
   "SbInput",
   {
-    propertiesDefinition: propertiesDefinition$e
+    propertiesDefinition: propertiesDefinition$d
   },
   (props) => {
     var _a2, _b2, _c2;
@@ -126369,7 +126266,7 @@ const SbInput = registerSbComponent(
     ) });
   }
 );
-const propertiesDefinition$d = {
+const propertiesDefinition$c = {
   layout: Section.category(PropsPanelCategory.Layout).add(
     size$2({
       defaults: {
@@ -126393,7 +126290,7 @@ const SbPage = registerSbComponent(
   "SbPage",
   {
     container: true,
-    propertiesDefinition: propertiesDefinition$d
+    propertiesDefinition: propertiesDefinition$c
   },
   (props) => {
     const { name, isAnonymous, style: style2, onLoad, ...other } = props;
@@ -133078,7 +132975,7 @@ const textStyle$1 = textStyleProp().default(function() {
     textColor: Theme.typographies.label.textColor
   };
 });
-const propertiesDefinition$c = {
+const propertiesDefinition$b = {
   general: Section.category(PropsPanelCategory.Content).children({
     text: Prop.string().readAndWrite().propertiesPanel({
       label: "Text",
@@ -133343,7 +133240,7 @@ const useIconContainerStyles = ({
 const SbText = registerSbComponent(
   "SbText",
   {
-    propertiesDefinition: propertiesDefinition$c
+    propertiesDefinition: propertiesDefinition$b
   },
   (props) => {
     const {
@@ -133604,7 +133501,7 @@ const ModalComponent = (props) => {
     )
   ] });
 };
-const propertiesDefinition$b = {
+const propertiesDefinition$a = {
   layout: Section.category(PropsPanelCategory.Layout).add(containerLayout()).add(spacing()).add(padding()),
   appearance: Section.category(PropsPanelCategory.Appearance).children({
     backgroundColor: Prop.string().readAndWrite().propertiesPanel({
@@ -133678,7 +133575,7 @@ const propertiesDefinition$b = {
 const SbModal = registerSbComponent(
   "SbModal",
   {
-    propertiesDefinition: propertiesDefinition$b,
+    propertiesDefinition: propertiesDefinition$a,
     container: true
   },
   (props) => {
@@ -143679,14 +143576,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-Cjd2UGyJ.js"
+            "./allPathsLoader-Brtj2ENg.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-SUyShF60.js"
+            "./splitPathsBySizeLoader-8QKjMEzI.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -155085,7 +154982,7 @@ function getFilteredTableData(props) {
     finalTableData.map(({ $originalIndex }) => $originalIndex)
   ];
 }
-const propertiesDefinition$a = {
+const propertiesDefinition$9 = {
   general: Section.category(PropsPanelCategory.Content).children({
     tableHeader: Prop.string().readAndWrite().default("").propertiesPanel({
       label: "Header",
@@ -170718,7 +170615,7 @@ const noop = () => {
 const SbTable = registerSbComponent(
   "SbTable",
   {
-    propertiesDefinition: propertiesDefinition$a
+    propertiesDefinition: propertiesDefinition$9
   },
   (props) => {
     const { update } = useActions();
@@ -174109,7 +174006,7 @@ const textStyle = textStyleProp({
     }
   })
 );
-const propertiesDefinition$9 = {
+const propertiesDefinition$8 = {
   general: Section.category(PropsPanelCategory.Content).children({
     label: Prop.string().readAndWrite().default("").propertiesPanel({
       label: "Label",
@@ -174425,7 +174322,7 @@ const SbDropdown = registerSbComponent(
   "SbDropdown",
   {
     container: false,
-    propertiesDefinition: propertiesDefinition$9
+    propertiesDefinition: propertiesDefinition$8
   },
   (props) => {
     var _a2, _b2, _c2, _d2;
@@ -174677,1583 +174574,6 @@ const SbCustom = registerSbComponent(
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "block" }, ...props, children });
   }
 );
-const INVALID_NUMBER_TEXT = "Invalid number";
-const getStringValue = (text) => {
-  if (text === void 0 || text === null) {
-    return void 0;
-  }
-  if (typeof text === "string" || typeof text === "number") {
-    return text.toString();
-  }
-  return JSON.stringify(text);
-};
-const toNumericValue = (text) => {
-  const trimmed = text.trim();
-  if (!trimmed) return "";
-  const num = Number(trimmed);
-  return !isNaN(num) && isFinite(num) ? num : INVALID_NUMBER_TEXT;
-};
-const getValueByType = (property, data2) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2, _n2, _o2;
-  const text = `${property.displayedValue ?? (property.isDerived ? `${property.computedValue}` : `${data2[property.id]}`)}`;
-  switch (property.type) {
-    case KeyValuePropertyType.CURRENCY: {
-      const textToNumber = toNumericValue(text);
-      if (typeof textToNumber === "string") return textToNumber;
-      return formatCurrency(
-        textToNumber,
-        (_a2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _a2.currency,
-        (_b2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _b2.notation,
-        (_c2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _c2.minimumFractionDigits,
-        (_d2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _d2.maximumFractionDigits
-      );
-    }
-    case KeyValuePropertyType.NUMBER: {
-      const textToNumber = toNumericValue(text);
-      if (typeof textToNumber === "string") return textToNumber;
-      return formatNumber(
-        textToNumber,
-        (_e2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _e2.notation,
-        (_f2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _f2.minimumFractionDigits,
-        (_g2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _g2.maximumFractionDigits
-      );
-    }
-    case KeyValuePropertyType.PERCENTAGE: {
-      const textToNumber = toNumericValue(text);
-      if (typeof textToNumber === "string") return textToNumber;
-      return formatPercentage(
-        textToNumber,
-        (_h2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _h2.minimumFractionDigits,
-        (_i = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _i.maximumFractionDigits
-      );
-    }
-    case KeyValuePropertyType.DATE: {
-      return formatDate(
-        text,
-        (_j = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _j.dateInputFormat,
-        ((_k = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _k.dateOutputFormat) ?? DEFAULT_DATE_OUTPUT_FORMAT,
-        ((_l2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _l2.manageTimezone) ? (_m2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _m2.timezone : void 0,
-        ((_n2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _n2.manageTimezone) ? (_o2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _o2.displayTimezone : void 0
-      );
-    }
-    case KeyValuePropertyType.BOOLEAN: {
-      return !!(property && (property.isDerived ? property.computedValue : data2[property.id]));
-    }
-    default:
-      return getStringValue(text) ?? "";
-  }
-};
-const toReadableKey = (key2) => {
-  return key2.replace(/[_-]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").trim().toLowerCase().replace(/^\w/, (c3) => c3.toUpperCase());
-};
-const getProperties = (data2, currentProperties = {}, cachedProperties = {}) => {
-  const derivedProperties = Object.values(currentProperties).filter(
-    (property) => property == null ? void 0 : property.isDerived
-  );
-  const baseProperties = derivedProperties.reduce(
-    (acc, property) => {
-      acc[property.id] = property;
-      return acc;
-    },
-    {}
-  );
-  return Object.keys(data2).reduce((acc, key2) => {
-    const cachedDefinition = currentProperties[key2] ?? cachedProperties[key2] ?? {};
-    acc[key2] = {
-      ...getDefaultProperty(key2),
-      ...cachedDefinition
-    };
-    return acc;
-  }, baseProperties);
-};
-const getPropertiesOrder = (properties2, propertiesOrder) => {
-  const currentOrder = propertiesOrder.filter((key2) => properties2[key2]);
-  const remainingKeys = Object.keys(properties2).filter(
-    (key2) => !currentOrder.includes(key2)
-  );
-  return [...currentOrder, ...remainingKeys];
-};
-const getDefaultProperty = (key2) => {
-  return {
-    id: key2,
-    key: key2,
-    displayedKey: toReadableKey(key2),
-    type: KeyValuePropertyType.TEXT,
-    isVisible: true,
-    isDerived: false
-  };
-};
-const getTagsColorAssignment = (tagValues) => {
-  return {
-    uniqueTagsCount: tagValues.length,
-    mapping: tagValues.reduce(
-      (acc, tag2, index2) => {
-        acc[sanitizeCellValue(tag2)] = index2;
-        return acc;
-      },
-      {}
-    )
-  };
-};
-const PropertyKeyWrapperClass = styleAsClass`
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  color: ${colors.GREY_500};
-  flex-grow: 1;
-  max-width: 100%;
-
-  p {
-    margin-bottom: 0;
-  }
-
-  &:not(${CLASS_NAMES.KEY_VALUE_ENTRY_ELLIPSIS}) > p {
-    word-break: break-word;
-  }
-
-  &.${CLASS_NAMES.KEY_VALUE_ENTRY_ELLIPSIS} > p {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-`;
-const useKeyClassNames = (keyProps) => {
-  return useMemo$2(() => {
-    let classNames2 = PropertyKeyWrapperClass;
-    if (!(keyProps == null ? void 0 : keyProps.textWrap)) {
-      classNames2 += ` ${CLASS_NAMES.KEY_VALUE_ENTRY_ELLIPSIS}`;
-    }
-    return classNames2;
-  }, [keyProps == null ? void 0 : keyProps.textWrap]);
-};
-const KeyValuePropertyKey = ({
-  property,
-  style: style2,
-  keyProps,
-  iconSize
-}) => {
-  var _a2, _b2, _c2;
-  const icon = ((_a2 = property.keyProps) == null ? void 0 : _a2.icon) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-    DynamicSVG,
-    {
-      iconName: (_b2 = property.keyProps) == null ? void 0 : _b2.icon,
-      size: iconSize ?? DEFAULT_ICON_SIZE$1
-    }
-  ) : null;
-  const iconPosition = ((_c2 = property.keyProps) == null ? void 0 : _c2.iconPosition) ?? "left";
-  const classNames2 = useKeyClassNames(keyProps);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classNames2, style: style2, children: [
-    iconPosition === "left" && icon,
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: getStringValue(property.displayedKey) ?? property.key }),
-    iconPosition === "right" && icon
-  ] });
-};
-const ValueContentWrapperClass = styleAsClass`
-  display: flex;
-  gap: 5px;
-  max-width: 100%;
-  align-items: center;
-`;
-const ValueWrapperClass = styleAsClass`
-  display: flex;
-  overflow: hidden;
-
-  [data-dd-action-name="link"] {
-    max-width: 100%;
-
-    a {
-      text-align: start;
-      max-width: 100%;
-
-      span {
-        // The following fixes the italic text getting cut off at the right
-        padding-right: 2px;
-      }
-    }
-  }
-  
-  p {
-    margin-bottom: 0;
-    // The following fixes the italic text getting cut off at the right
-    padding-right: 2px;
-  }
-
-  &.${CLASS_NAMES.KEY_VALUE_ENTRY_VALUE_RIGHT_ALIGN} {
-    justify-content: end;
-    text-align: end;
-    flex-grow: 1;
-
-    [data-dd-action-name="link"] a {
-      text-align: end;
-    }
-  }
-
-  &.${CLASS_NAMES.KEY_VALUE_ENTRY_ELLIPSIS} {
-    .${ValueContentWrapperClass} {
-      > p {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  &:not(.${CLASS_NAMES.KEY_VALUE_ENTRY_ELLIPSIS}) {
-    word-break: break-word;
-
-    .button-text, .${ValueContentWrapperClass} p {
-      white-space: unset;
-      word-break: break-word;
-    }
-  }
-`;
-const ImageWrapperClass = styleAsClass`
-  img {
-    vertical-align: top;
-  }
-
-  &[data-image-size="FIXED"] {
-    width: 32px;
-    height: 32px;
-    img {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &[data-image-size="FIT"] {
-    height: 32px;
-    width: 100%;
-    overflow: hidden;
-    img {
-      max-width: 100%;
-      max-height: 100%;
-      height: auto;
-    }
-  }
-
-  &[data-image-size="COVER"] {
-    height: 32px;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  &[data-image-size="GROW"] {
-    width: 100%;
-    img {
-      width: 100%;
-      height: auto;
-    }
-  }
-`;
-const TagCellWrapperClass = styleAsClass`
-  max-width: 100%;
-  
-  > div {
-    padding: 0;
-  }
-`;
-const useValueClassNames = (valueProps) => {
-  return useMemo$2(() => {
-    let classNames2 = ValueWrapperClass;
-    const isValueRightAligned = (valueProps == null ? void 0 : valueProps.position) === "right";
-    if (isValueRightAligned) {
-      classNames2 += ` ${CLASS_NAMES.KEY_VALUE_ENTRY_VALUE_RIGHT_ALIGN}`;
-    }
-    if (!(valueProps == null ? void 0 : valueProps.textWrap)) {
-      classNames2 += ` ${CLASS_NAMES.KEY_VALUE_ENTRY_ELLIPSIS}`;
-    }
-    return classNames2;
-  }, [valueProps == null ? void 0 : valueProps.position, valueProps == null ? void 0 : valueProps.textWrap]);
-};
-const KeyValuePropertyValue = (props) => {
-  var _a2;
-  const [isLoading, setIsLoading] = useState(false);
-  const { property, data: data2, valueStyles, valueProps, theme } = props;
-  const valueClassNames = useValueClassNames(valueProps);
-  const onClick = (_a2 = property.typeSpecificProps) == null ? void 0 : _a2.onClick;
-  const handleButtonClick = useCallback(
-    async (e3) => {
-      e3.stopPropagation();
-      if (onClick && !isLoading) {
-        setIsLoading(true);
-        await (onClick == null ? void 0 : onClick());
-        setIsLoading(false);
-      }
-    },
-    [onClick, isLoading]
-  );
-  const content = useMemo$2(() => {
-    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2, _n2, _o2, _p2, _q;
-    const icon = ((_a3 = property.valueProps) == null ? void 0 : _a3.icon) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      DynamicSVG,
-      {
-        iconName: (_b2 = property.valueProps) == null ? void 0 : _b2.icon,
-        size: props.iconSize ?? DEFAULT_ICON_SIZE$1
-      }
-    ) : null;
-    const iconPosition = ((_c2 = property.valueProps) == null ? void 0 : _c2.iconPosition) ?? "left";
-    const value = property.isDerived ? property.computedValue : data2[property.id];
-    switch (property.type) {
-      case KeyValuePropertyType.BUTTON: {
-        const borderColor = (_d2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _d2.buttonBorderColor;
-        const backgroundColor = (_e2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _e2.buttonBackgroundColor;
-        const buttonStyle = (_f2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _f2.buttonStyle;
-        const buttonLabel = getStringValue(
-          (_g2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _g2.buttonLabel
-        );
-        const buttonLabelColor = (_h2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _h2.buttonLabelColor;
-        const isDisabled = (_i = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _i.isDisabled;
-        const buttonIconSize = getIconSizeBasedOnFontSize(
-          getFontSizeInPxFromTextStyle({
-            nestedProps: buttonStyle,
-            typographies: theme.typographies,
-            textStyleVariant: "buttonLabel",
-            defaultTextStyleVariant: "buttonLabel"
-          })
-        );
-        const buttonIcon = ((_j = property.valueProps) == null ? void 0 : _j.icon) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          DynamicSVG,
-          {
-            iconName: (_k = property.valueProps) == null ? void 0 : _k.icon,
-            size: buttonIconSize ?? DEFAULT_ICON_SIZE$1
-          }
-        ) : null;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button$4,
-          {
-            theme,
-            version: "v2",
-            disabled: isDisabled,
-            buttonStyle: buttonStyle ?? "primary",
-            backgroundColor,
-            border: borderColor ? createPerSideBorder({
-              color: borderColor ?? "#000000",
-              width: 1
-            }) : void 0,
-            text: buttonLabel ?? "Click me",
-            icon: buttonIcon,
-            iconPosition,
-            textColor: buttonLabelColor,
-            isLoading,
-            onClick: handleButtonClick,
-            width: "auto",
-            height: "100%"
-          }
-        );
-      }
-      case KeyValuePropertyType.LINK: {
-        const url2 = value ? value.toString() : "";
-        const label = getStringValue((_l2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _l2.linkLabel);
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ButtonLikeLink,
-          {
-            url: url2,
-            theme,
-            text: label || url2,
-            isLoading: false,
-            linkStyle: "LINK",
-            textProps: {
-              textStyleVariant: ((_m2 = props.linkStyles) == null ? void 0 : _m2.textStyleVariant) ?? "link",
-              style: (_n2 = props.linkStyles) == null ? void 0 : _n2.style
-            },
-            textColor: theme == null ? void 0 : theme.typographies.link.textColor.default,
-            icon,
-            iconPosition,
-            openInNewTab: ((_o2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _o2.openInNewTab) ?? true
-          }
-        );
-      }
-      case KeyValuePropertyType.BOOLEAN: {
-        const ButtonIcon = getValueByType(property, data2) ? RadioButtonControlIcons["CHECK"] : RadioButtonControlIcons[((_p2 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _p2.booleanStyleFalse) || BooleanStyleFalse.EMPTY];
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, {});
-      }
-      case KeyValuePropertyType.IMAGE: {
-        const imageUrls = parseImageURLValue(value);
-        if (!imageUrls || imageUrls.length === 0) {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Invalid Image" });
-        }
-        return imageUrls.map((item, index2) => {
-          var _a4, _b3, _c3, _d3, _e3, _f3;
-          if (isValidUrl(item)) {
-            const imageStyle = {
-              borderRadius: typeof ((_a4 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _a4.imageBorderRadius) === "string" ? (_b3 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _b3.imageBorderRadius : ((_c3 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _c3.imageBorderRadius) ? `${property.typeSpecificProps.imageBorderRadius.value}${property.typeSpecificProps.imageBorderRadius.mode}` : "50%"
-            };
-            if ((_d3 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _d3.openImageUrl) {
-              return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "a",
-                {
-                  onClick: (e3) => e3.stopPropagation(),
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  href: item,
-                  className: ImageWrapperClass,
-                  "data-image-size": ((_e3 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _e3.imageSize) ?? ImageSize.Fixed,
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: item, alt: "", style: imageStyle })
-                },
-                index2
-              );
-            }
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: ImageWrapperClass,
-                "data-image-size": ((_f3 = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _f3.imageSize) ?? ImageSize.Fixed,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: item, alt: "", style: imageStyle })
-              },
-              index2
-            );
-          } else {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: ValueContentWrapperClass, children: "Invalid Image" }, index2);
-          }
-        });
-      }
-      case KeyValuePropertyType.VIDEO: {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverVideo, { url: value });
-      }
-      case KeyValuePropertyType.TAGS: {
-        let displayValue = value;
-        if (displayValue && typeof displayValue === "string") {
-          displayValue = displayValue.split(",");
-        } else if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-          displayValue = [value];
-        }
-        if (!Array.isArray(displayValue)) {
-          return null;
-        }
-        const tagsColorAssignment = getTagsColorAssignment(displayValue);
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: TagCellWrapperClass, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          TagsCell,
-          {
-            theme,
-            cellProperties: { textWrap: !!(valueProps == null ? void 0 : valueProps.textWrap) },
-            isHidden: false,
-            tagValues: displayValue,
-            tagsColorAssignment,
-            tagsCustomColorAssignment: (_q = property == null ? void 0 : property.typeSpecificProps) == null ? void 0 : _q.tagDisplayConfig,
-            compactMode: "SHORT"
-          },
-          `${props.width}-${props.height}`
-        ) });
-      }
-      case KeyValuePropertyType.EMAIL: {
-        const value2 = getValueByType(property, data2);
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("a", { className: ValueContentWrapperClass, href: `mailto:${value2}`, children: [
-          iconPosition === "left" && icon,
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: value2 }),
-          iconPosition === "right" && icon
-        ] });
-      }
-      default:
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: ValueContentWrapperClass, children: [
-          iconPosition === "left" && icon,
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: getValueByType(property, data2) }),
-          iconPosition === "right" && icon
-        ] });
-    }
-  }, [
-    property,
-    data2,
-    handleButtonClick,
-    isLoading,
-    props.iconSize,
-    valueProps == null ? void 0 : valueProps.textWrap,
-    props.width,
-    props.height,
-    theme,
-    props.linkStyles
-  ]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      className: `${ValueWrapperClass} ${valueClassNames}`,
-      style: valueStyles == null ? void 0 : valueStyles.style,
-      children: content
-    }
-  );
-};
-const VARIABLE_PREFIX = "kv";
-const VARIABLE_NAMES = {
-  borderTopWidth: getVariableName("border-top-width", VARIABLE_PREFIX),
-  borderRightWidth: getVariableName("border-right-width", VARIABLE_PREFIX),
-  borderBottomWidth: getVariableName("border-bottom-width", VARIABLE_PREFIX),
-  borderLeftWidth: getVariableName("border-left-width", VARIABLE_PREFIX),
-  borderColor: getVariableName("border-color", VARIABLE_PREFIX),
-  borderTopRightRadius: getVariableName(
-    "border-top-right-radius",
-    VARIABLE_PREFIX
-  ),
-  borderTopLeftRadius: getVariableName(
-    "border-top-left-radius",
-    VARIABLE_PREFIX
-  ),
-  borderBottomRightRadius: getVariableName(
-    "border-bottom-right-radius",
-    VARIABLE_PREFIX
-  ),
-  borderBottomLeftRadius: getVariableName(
-    "border-bottom-left-radius",
-    VARIABLE_PREFIX
-  ),
-  backgroundColor: getVariableName("background-color", VARIABLE_PREFIX),
-  spacing: getVariableName("spacing", VARIABLE_PREFIX),
-  paddingLeft: getVariableName("padding-left", VARIABLE_PREFIX),
-  paddingRight: getVariableName("padding-right", VARIABLE_PREFIX),
-  paddingTop: getVariableName("padding-top", VARIABLE_PREFIX),
-  paddingBottom: getVariableName("padding-bottom", VARIABLE_PREFIX),
-  labelWidth: getVariableName("label-width", VARIABLE_PREFIX),
-  dividerColor: getVariableName("divider-color", VARIABLE_PREFIX),
-  dividerHeight: getVariableName("divider-height", VARIABLE_PREFIX),
-  spacingDarkSVG: getVariableName("spacing-dark-svg", VARIABLE_PREFIX),
-  spacingSVG: getVariableName("spacing-svg", VARIABLE_PREFIX)
-};
-const DEFAULT_KEY_VALUE_WIDGET_KEY_STYLE_VARIANT = "label";
-const DEFAULT_KEY_VALUE_WIDGET_VALUE_STYLE_VARIANT = "body2";
-const getDimensionValue = (dimension) => `${dimension.value}${dimension.mode}`;
-const createCssVariables = ({
-  theme,
-  styleProps,
-  keyWidth
-}) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2;
-  const borderColorOnHover = generateInputBorderOnHoverColor(
-    styleProps == null ? void 0 : styleProps.border,
-    theme.colors.primary500,
-    theme.colors
-  );
-  const borderCssVariables = createCssVariablesForBorderWidthAndColorWithHover({
-    border: styleProps.border,
-    fallbackBorderColor: theme.colors.neutral100,
-    borderColorOnHover,
-    defaultBorderWidth: theme.defaultBorder.borderWidth,
-    prefix: VARIABLE_PREFIX
-  });
-  const defaultBorderRadius = theme.defaultBorder.borderRadius;
-  const paddingVariables = generatePaddingVariableAssignmentStyleObject(
-    styleProps.padding ?? {
-      left: Dim.px(10),
-      right: Dim.px(10),
-      top: Dim.px(10),
-      bottom: Dim.px(10)
-    },
-    // theme.keyValue.padding,
-    VARIABLE_PREFIX
-  );
-  const keyVars = {
-    [VARIABLE_NAMES.labelWidth]: getLabelWidthCssValue(keyWidth)
-  };
-  return {
-    ...borderCssVariables,
-    ...paddingVariables,
-    ...keyVars,
-    [VARIABLE_NAMES.borderTopRightRadius]: getDimensionValue(
-      ((_a2 = styleProps.borderRadius) == null ? void 0 : _a2.topRight) ?? defaultBorderRadius
-    ),
-    [VARIABLE_NAMES.borderTopLeftRadius]: getDimensionValue(
-      ((_b2 = styleProps.borderRadius) == null ? void 0 : _b2.topLeft) ?? defaultBorderRadius
-    ),
-    [VARIABLE_NAMES.borderBottomRightRadius]: getDimensionValue(
-      ((_c2 = styleProps.borderRadius) == null ? void 0 : _c2.bottomRight) ?? defaultBorderRadius
-    ),
-    [VARIABLE_NAMES.borderBottomLeftRadius]: getDimensionValue(
-      ((_d2 = styleProps.borderRadius) == null ? void 0 : _d2.bottomLeft) ?? defaultBorderRadius
-    ),
-    [VARIABLE_NAMES.backgroundColor]: styleProps.backgroundColor ?? theme.colors.neutral,
-    [VARIABLE_NAMES.spacing]: getDimensionValue(
-      styleProps.spacing ?? Dim.px(10)
-      // theme.keyValue.spacing,
-    ),
-    [VARIABLE_NAMES.dividerHeight]: getDimensionValue(
-      ((_e2 = styleProps.divider) == null ? void 0 : _e2.size) ?? Dim.px(1)
-      // theme.keyValue.divider.size,
-    ),
-    [VARIABLE_NAMES.dividerColor]: ((_f2 = styleProps.divider) == null ? void 0 : _f2.color) ?? theme.colors.neutral100
-    // theme.keyValue.divider.color,
-    // [VARIABLE_NAMES.spacingDarkSVG]: `url(${spacingDarkSVG})`,
-    // [VARIABLE_NAMES.spacingSVG]: `url(${spacingSVG})`,
-  };
-};
-const CanvasSpacingClass = styleAsClass`
-  position: absolute;
-  top: 100%;
-  left: -1px;
-  right: -1px;
-  height: var(--kv-spacing);
-  box-sizing: border-box;
-  pointer-events: none;
-  
-  opacity: 0.4;
-  transition: opacity 0.1s;
-
-  &[data-dark-theme="true"] {
-    background: var(${VARIABLE_NAMES.spacingDarkSVG});
-  }
-  &[data-dark-theme="false"] {
-    background: var(${VARIABLE_NAMES.spacingSVG});
-  }
-
-  &[data-edit-mode="false"], &:not(.selected) {
-    display: none;
-  }
-
-  &.hovered {
-    opacity: 1;
-  }
-`;
-const KeyValueComponentClass = styleAsClass`
-  display: flex;
-  flex-direction: column;
-  gap: var(${VARIABLE_NAMES.spacing});
-
-  overflow: auto;
-
-  border-style: solid;
-
-  border-top-width: var(${VARIABLE_NAMES.borderTopWidth});
-  border-right-width: var(${VARIABLE_NAMES.borderRightWidth});
-  border-bottom-width: var(${VARIABLE_NAMES.borderBottomWidth});
-  border-left-width: var(${VARIABLE_NAMES.borderLeftWidth});
-  border-color: var(${VARIABLE_NAMES.borderColor});
-
-  border-top-right-radius: var(${VARIABLE_NAMES.borderTopRightRadius});
-  border-top-left-radius: var(${VARIABLE_NAMES.borderTopLeftRadius});
-  border-bottom-right-radius: var(${VARIABLE_NAMES.borderBottomRightRadius});
-  border-bottom-left-radius: var(${VARIABLE_NAMES.borderBottomLeftRadius});
-
-  background-color: var(${VARIABLE_NAMES.backgroundColor});
-  
-  padding-left: var(${VARIABLE_NAMES.paddingLeft});
-  padding-right: var(${VARIABLE_NAMES.paddingRight});
-  padding-top: var(${VARIABLE_NAMES.paddingTop});
-  padding-bottom: var(${VARIABLE_NAMES.paddingBottom});
-`;
-const KeyValueEntryClass = styleAsClass`
-  display: flex;
-  position: relative;
-
-  &:not(:last-child)::after {
-    content: "";
-    position: absolute;
-
-    // Center the divider between the two entries
-    bottom: calc(var(${VARIABLE_NAMES.spacing}) * -1 / 2 - var(${VARIABLE_NAMES.dividerHeight}) / 2);
-    left: calc(var(${VARIABLE_NAMES.paddingLeft}) * -1);
-    right: calc(var(${VARIABLE_NAMES.paddingRight}) * -1);
-
-    background-color: var(${VARIABLE_NAMES.dividerColor});
-    height: var(${VARIABLE_NAMES.dividerHeight});
-  }
-
-  &:not(.${CLASS_NAMES.KEY_VALUE_ENTRY_VERTICAL}) {
-    align-items: center;
-    gap: 10px;
-
-    .${PropertyKeyWrapperClass} {
-      flex: 0 0 var(${VARIABLE_NAMES.labelWidth});
-      max-width: var(${VARIABLE_NAMES.labelWidth});
-    }
-  }
-
-  &.${CLASS_NAMES.KEY_VALUE_ENTRY_VERTICAL} {
-    flex-direction: column;
-    gap: 4px;
-
-    .${ValueWrapperClass} {
-      justify-content: flex-start;
-    }
-  }
-
-  &:last-child > .${CanvasSpacingClass} {
-    display: none;
-  }
-`;
-const useLabelStyles = (keyProps, theme) => {
-  return useTypographyStyling({
-    theme,
-    textStyle: keyProps == null ? void 0 : keyProps.textStyle,
-    defaultTextStyleVariant: DEFAULT_KEY_VALUE_WIDGET_KEY_STYLE_VARIANT,
-    applyClassNameStylesToStyle: true
-  });
-};
-const useInputStyles = (valueProps, theme) => {
-  return useTypographyStyling({
-    theme,
-    textStyle: valueProps == null ? void 0 : valueProps.textStyle,
-    defaultTextStyleVariant: DEFAULT_KEY_VALUE_WIDGET_VALUE_STYLE_VARIANT,
-    applyClassNameStylesToStyle: true
-  });
-};
-const useLinkStyles = (valueProps, theme) => {
-  return useTypographyStyling({
-    theme,
-    textStyle: {
-      ...(valueProps == null ? void 0 : valueProps.textStyle) ?? theme.typographies.link,
-      variant: "link"
-    },
-    defaultTextStyleVariant: "link",
-    priorityStyle: {
-      fontWeight: theme.typographies.link.fontWeight,
-      color: theme.typographies.link.textColor.default
-    }
-  });
-};
-const useEntryClassNames = (keyProps) => {
-  return useMemo$2(() => {
-    let classNames2 = KeyValueEntryClass;
-    const isVertical = (keyProps == null ? void 0 : keyProps.position) === "top";
-    if (isVertical) {
-      classNames2 += ` ${CLASS_NAMES.KEY_VALUE_ENTRY_VERTICAL}`;
-    }
-    return classNames2;
-  }, [keyProps == null ? void 0 : keyProps.position]);
-};
-const KeyValueComponent = (props) => {
-  var _a2;
-  const cssVariableDeclarations = useMemo$2(
-    () => {
-      var _a3;
-      return createCssVariables({
-        theme: props.theme,
-        styleProps: props.styleProps,
-        keyWidth: (_a3 = props.keyProps) == null ? void 0 : _a3.width
-      });
-    },
-    [props.theme, props.styleProps, (_a2 = props.keyProps) == null ? void 0 : _a2.width]
-  );
-  const keyStyles = useLabelStyles(props.keyProps, props.theme);
-  const valueStyles = useInputStyles(props.valueProps, props.theme);
-  const entryClassNames = useEntryClassNames(props.keyProps);
-  const keyIconSize = getIconSizeBasedOnFontSize(
-    getFontSizeInPxFromTextStyle({
-      nestedProps: keyStyles.style,
-      typographies: props.theme.typographies,
-      textStyleVariant: keyStyles.textStyleVariant,
-      defaultTextStyleVariant: DEFAULT_KEY_VALUE_WIDGET_VALUE_STYLE_VARIANT
-    })
-  );
-  const valueIconSize = getIconSizeBasedOnFontSize(
-    getFontSizeInPxFromTextStyle({
-      nestedProps: valueStyles.style,
-      typographies: props.theme.typographies,
-      textStyleVariant: valueStyles.textStyleVariant,
-      defaultTextStyleVariant: DEFAULT_KEY_VALUE_WIDGET_VALUE_STYLE_VARIANT
-    })
-  );
-  const linkStyles = useLinkStyles(props.valueProps, props.theme);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      style: cssVariableDeclarations,
-      className: `${KeyValueComponentClass} ${props.isLoading ? SKELETON : ""}`,
-      children: props.propertiesOrder.map((key2) => {
-        const property = props.properties[key2];
-        if (!property) {
-          console.warn(
-            `KeyValueComponent: Property ${key2} not defined in widget properties`
-          );
-          return null;
-        }
-        if (!property.isVisible) {
-          return null;
-        }
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: entryClassNames, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "span",
-            {
-              className: `${CanvasSpacingClass}`,
-              "data-dark-theme": props.theme.mode === ThemeMode$1.DARK,
-              "data-edit-mode": true
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            KeyValuePropertyKey,
-            {
-              style: keyStyles.style,
-              property,
-              keyProps: props.keyProps,
-              iconSize: keyIconSize
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            KeyValuePropertyValue,
-            {
-              theme: props.theme,
-              valueStyles,
-              property,
-              data: props.sourceData ?? {},
-              valueProps: props.valueProps,
-              iconSize: valueIconSize,
-              width: props.width,
-              height: props.height,
-              linkStyles
-            }
-          )
-        ] }, key2);
-      })
-    }
-  );
-};
-function getData(props) {
-  const properties2 = getProperties(props.sourceData ?? {}, props.properties);
-  return Object.values(properties2).reduce(
-    (accum, property) => {
-      let value = "computedValue" in property && property.computedValue || props.sourceData && props.sourceData[property.key];
-      if ((property.type === "percentage" || property.type === "number" || property.type === "currency") && typeof value === "string") {
-        const trimmed = value.trim();
-        if (!trimmed) {
-          value = void 0;
-        } else {
-          const num = Number(trimmed);
-          value = !isNaN(num) && isFinite(num) ? parseFloat(value) : NaN;
-        }
-      }
-      accum[property.key] = value;
-      return accum;
-    },
-    {}
-  );
-}
-const KEY_VALUE_WIDGET_PROPERTY_TYPES = [
-  {
-    label: "Plain text",
-    value: KeyValuePropertyType.TEXT
-  },
-  {
-    label: "Number",
-    value: KeyValuePropertyType.NUMBER
-  },
-  {
-    label: "Currency",
-    value: KeyValuePropertyType.CURRENCY
-  },
-  {
-    label: "Percentage",
-    value: KeyValuePropertyType.PERCENTAGE
-  },
-  {
-    label: "Image",
-    value: KeyValuePropertyType.IMAGE
-  },
-  {
-    label: "Video",
-    value: KeyValuePropertyType.VIDEO
-  },
-  {
-    label: "Date",
-    value: KeyValuePropertyType.DATE
-  },
-  {
-    label: "Button",
-    value: KeyValuePropertyType.BUTTON
-  },
-  {
-    label: "Link",
-    value: KeyValuePropertyType.LINK
-  },
-  {
-    label: "Boolean",
-    value: KeyValuePropertyType.BOOLEAN
-  },
-  {
-    label: "Tags",
-    value: KeyValuePropertyType.TAGS
-  },
-  {
-    label: "Email",
-    value: KeyValuePropertyType.EMAIL
-  }
-];
-({
-  width: Dimension.px(1)
-});
-const textProperties = {
-  general: {
-    displayedValue: Prop.string().readAndWrite().default("{{value}}").propertiesPanel({
-      label: "Displayed value",
-      helpText: "The value displayed for the key-value pair",
-      // controlType: "COMPUTE_KEY_VALUE_PROPERTY",
-      controlType: "INPUT_TEXT",
-      isTriggerProperty: false,
-      isRemovable: true,
-      visibility: "SHOW_NAME"
-      // TODO: Add editor arguments
-    })
-  }
-};
-const buttonProperties = {
-  general: {
-    "typeSpecificProps.buttonLabel": Prop.string().readAndWrite().default("Click me").propertiesPanel({
-      label: "Button label",
-      // controlType: "COMPUTE_KEY_VALUE_PROPERTY",
-      isTriggerProperty: false,
-      controlType: "INPUT_TEXT"
-      // TODO: Add editor arguments
-    }),
-    "typeSpecificProps.isDisabled": Prop.boolean().readAndWrite().default(false).propertiesPanel({
-      label: "Disabled",
-      controlType: "SWITCH",
-      helpText: "Disables user interaction with this component",
-      isJSConvertible: true
-    })
-  },
-  appearance: {
-    // TODO: add union for different button styles
-    "typeSpecificProps.buttonStyle": Prop.string().default("primary").propertiesPanel({
-      label: "Button style",
-      controlType: "DROP_DOWN",
-      helpText: "Changes the style of the button",
-      options: [
-        {
-          label: "Primary",
-          value: "primary"
-        },
-        {
-          label: "Secondary",
-          value: "secondary"
-        },
-        {
-          label: "Tertiary",
-          value: "tertiary"
-        }
-      ],
-      isJSConvertible: true,
-      isTriggerProperty: false
-    }),
-    "typeSpecificProps.buttonBackgroundColor": Prop.string().propertiesPanel({
-      label: "Background",
-      controlType: "COLOR_PICKER",
-      helpText: "Changes the color of the button",
-      isJSConvertible: true,
-      isTriggerProperty: false
-      // TODO: add hidden logic
-    }),
-    "typeSpecificProps.buttonLabelColor": Prop.string().propertiesPanel({
-      helpText: "Changes the color of the label",
-      label: "Label color",
-      controlType: "COLOR_PICKER",
-      isJSConvertible: true,
-      isTriggerProperty: false
-      // TODO: add hidden logic
-    })
-  },
-  eventHandlers: {
-    "typeSpecificProps.onClick": Prop.event().propertiesPanel({
-      label: "On click",
-      helpText: "Triggers an action when the button is clicked"
-    })
-  }
-};
-const currencyProperties = {
-  general: {
-    "typeSpecificProps.currency": Prop.string().readAndWrite().default("USD").propertiesPanel({
-      label: "Currency",
-      controlType: "DROP_DOWN",
-      options: CurrencyList$1.map((currency) => ({
-        label: currency,
-        value: currency
-      })),
-      helpText: "The three letter ISO 4217 currency code"
-    }),
-    "typeSpecificProps.notation": Prop.string().readAndWrite().propertiesPanel({
-      label: "Number format",
-      controlType: "DROP_DOWN",
-      options: NUMBER_FORMATTING_OPTIONS,
-      helpText: "The display format of the number"
-    }),
-    "typeSpecificProps.minimumFractionDigits": Prop.number().readAndWrite().default(1).propertiesPanel({
-      label: "Min decimals",
-      helpText: "The minimum number of digits after the decimal separator",
-      controlType: "INPUT_TEXT",
-      isTriggerProperty: false,
-      placeholder: "# between 0-20",
-      isRemovable: true,
-      visibility: "SHOW_NAME"
-    }),
-    "typeSpecificProps.maximumFractionDigits": Prop.number().readAndWrite().default(2).propertiesPanel({
-      label: "Max decimals",
-      helpText: "The maximum number of digits after the decimal separator",
-      controlType: "INPUT_TEXT",
-      isTriggerProperty: false,
-      placeholder: "# between 0-20",
-      isRemovable: true,
-      visibility: "SHOW_NAME"
-    })
-  }
-};
-const numberProperties = {
-  general: {
-    "typeSpecificProps.notation": Prop.string().readAndWrite().propertiesPanel({
-      label: "Number format",
-      controlType: "DROP_DOWN",
-      options: NUMBER_FORMATTING_OPTIONS,
-      helpText: "The display format of the number"
-    }),
-    "typeSpecificProps.minimumFractionDigits": Prop.number().readAndWrite().default(1).propertiesPanel({
-      label: "Min decimals",
-      helpText: "The minimum number of digits after the decimal separator",
-      controlType: "INPUT_TEXT",
-      isTriggerProperty: false,
-      placeholder: "# between 0-20",
-      isRemovable: true,
-      visibility: "SHOW_NAME"
-    }),
-    "typeSpecificProps.maximumFractionDigits": Prop.number().readAndWrite().default(2).propertiesPanel({
-      label: "Max decimals",
-      helpText: "The maximum number of digits after the decimal separator",
-      controlType: "INPUT_TEXT",
-      isTriggerProperty: false,
-      placeholder: "# between 0-20",
-      isRemovable: true,
-      visibility: "SHOW_NAME"
-    })
-  }
-};
-const percentageProperties = {
-  general: {
-    "typeSpecificProps.notation": Prop.string().readAndWrite().propertiesPanel({
-      label: "Number format",
-      controlType: "DROP_DOWN",
-      options: NUMBER_FORMATTING_OPTIONS,
-      helpText: "The display format of the number"
-    }),
-    "typeSpecificProps.minimumFractionDigits": Prop.number().readAndWrite().default(1).propertiesPanel({
-      label: "Min decimals",
-      helpText: "The minimum number of digits after the decimal separator",
-      controlType: "INPUT_TEXT",
-      isTriggerProperty: false,
-      placeholder: "# between 0-20",
-      isRemovable: true,
-      visibility: "SHOW_NAME"
-    }),
-    "typeSpecificProps.maximumFractionDigits": Prop.number().readAndWrite().default(2).propertiesPanel({
-      label: "Max decimals",
-      helpText: "The maximum number of digits after the decimal separator",
-      controlType: "INPUT_TEXT",
-      isTriggerProperty: false,
-      placeholder: "# between 0-20",
-      isRemovable: true,
-      visibility: "SHOW_NAME"
-    })
-  }
-};
-const linkProperties = {
-  general: {
-    "typeSpecificProps.linkLabel": Prop.string().readAndWrite().default("{{value}}").propertiesPanel({
-      label: "Link label",
-      // controlType: "COMPUTE_KEY_VALUE_PROPERTY",
-      isTriggerProperty: false,
-      controlType: "INPUT_TEXT",
-      isRemovable: true,
-      visibility: "SHOW_NAME"
-      // TODO: Add editor arguments
-    }),
-    "typeSpecificProps.openInNewTab": Prop.boolean().readAndWrite().default(true).propertiesPanel({
-      label: "Open in a new tab",
-      controlType: "SWITCH",
-      isTriggerProperty: false
-    })
-  }
-};
-const imageProperties = {
-  general: {
-    "typeSpecificProps.openImageUrl": Prop.boolean().readAndWrite().default(false).propertiesPanel({
-      label: "Open URL on click",
-      controlType: "SWITCH",
-      helpText: "Opens the image in a new tab when the image is clicked",
-      isTriggerProperty: false,
-      isJSConvertible: true
-    })
-  },
-  appearance: {
-    "typeSpecificProps.imageSize": Prop.string().default(ImageSize.Fixed).readAndWrite().propertiesPanel({
-      label: "Image sizing",
-      controlType: "DROP_DOWN",
-      helpText: "Controls the sizing behavior of the image",
-      options: [
-        {
-          label: "Fixed",
-          value: ImageSize.Fixed,
-          subText: "Image is cropped to a fixed size"
-        },
-        {
-          label: "Fit",
-          value: ImageSize.Fit,
-          subText: "Image will fill as much space as possible while maintaining the aspect ratio"
-        },
-        {
-          label: "Cover",
-          value: ImageSize.Cover,
-          subText: "Image covers the entire space and is clipped horizontally or vertically as needed"
-        },
-        {
-          label: "Grow vertically",
-          value: ImageSize.Grow,
-          subText: "Image fills the width of the property. If necessary, the row height will grow to maintain the aspect ratio"
-        }
-      ],
-      isJSConvertible: true,
-      isTriggerProperty: false
-    }),
-    "typeSpecificProps.imageBorderRadius": Prop.any().default(Dim.percent(50)).propertiesPanel({
-      label: "Image border radius",
-      controlType: "DROP_DOWN",
-      helpText: "Controls the border radius of the image",
-      options: [
-        {
-          label: "0px",
-          value: Dim.px(0)
-        },
-        {
-          label: "4px",
-          value: Dim.px(4)
-        },
-        {
-          label: "50% (circular)",
-          value: Dim.percent(50)
-        }
-      ],
-      isJSConvertible: true,
-      isTriggerProperty: false
-      // TODO: Add optionValueToKey
-      // optionValueToKey: (value: Dim) => {
-      //   return `${value?.value}${value?.mode}`;
-      // },
-    })
-  }
-};
-const dateProperties = {
-  general: {
-    "typeSpecificProps.dateInputFormat": Prop.string().readAndWrite().propertiesPanel({
-      helpText: "Sets the format of the selected date",
-      label: "Value format",
-      controlType: "DROP_DOWN",
-      options: DATE_INPUT_FORMATS,
-      isJSConvertible: true,
-      isTriggerProperty: false
-    }),
-    "typeSpecificProps.dateOutputFormat": Prop.string().readAndWrite().propertiesPanel({
-      helpText: "Sets the format of the date displayed in the UI",
-      label: "Display format",
-      controlType: "DROP_DOWN",
-      isJSConvertible: true,
-      options: DATE_OUTPUT_FORMATS,
-      isTriggerProperty: false
-    }).default(DEFAULT_DATE_OUTPUT_FORMAT),
-    // todo: this should actually be a union too (nested unions ?)
-    "typeSpecificProps.manageTimezone": Prop.boolean().readAndWrite().propertiesPanel({
-      helpText: "Allows you to control the timezone of the original dates and displayed dates",
-      label: "Manage timezone",
-      controlType: "SWITCH",
-      isJSConvertible: false,
-      isTriggerProperty: false
-    }),
-    "typeSpecificProps.valueTimezone": Prop.string().readAndWrite().propertiesPanel({
-      helpText: "Timezone of the original date",
-      label: "Value timezone",
-      controlType: "DROP_DOWN",
-      isJSConvertible: false,
-      options: TIMEZONE_OPTIONS,
-      isTriggerProperty: false
-      // TODO: Hide when manageTimezone is false
-    }),
-    "typeSpecificProps.displayTimezone": Prop.string().readAndWrite().propertiesPanel({
-      helpText: "Timezone of the displayed date",
-      label: "Display timezone",
-      controlType: "DROP_DOWN",
-      isJSConvertible: false,
-      options: TIMEZONE_OPTIONS,
-      isTriggerProperty: false
-      // TODO: Hide when manageTimezone is false
-    })
-  }
-};
-const emailProperties = {};
-const booleanProperties = {
-  general: {
-    "typeSpecificProps.booleanStyleFalse": Prop.string().readAndWrite().propertiesPanel({
-      label: "False display",
-      controlType: "RADIO_BUTTON_GROUP",
-      options: [
-        {
-          label: "Empty",
-          value: BooleanStyleFalse.EMPTY
-        },
-        {
-          label: "Close",
-          isIcon: true,
-          icon: "CLOSE",
-          value: BooleanStyleFalse.CLOSE
-        },
-        {
-          label: "Minus",
-          isIcon: true,
-          icon: "MINUS",
-          value: BooleanStyleFalse.MINUS
-        }
-      ]
-    })
-  }
-};
-const videoProperties = {};
-const tagsProperties = {
-  appearance: {
-    "typeSpecificProps.textWrap": Prop.boolean().propertiesPanel({
-      label: "Wrap tags",
-      controlType: "SWITCH",
-      isJSConvertible: true,
-      isTriggerProperty: false,
-      helpText: "If enabled, the tags will wrap within the cell"
-    }),
-    "typeSpecificProps.tagDisplayConfig": Prop.any().propertiesPanel({
-      label: "Custom tag colors",
-      controlType: "CUSTOM_TAG_COLORS",
-      headerControlType: "ADD_TAG_COLOR",
-      customJSControl: "INPUT_JS_EXPR",
-      isJSConvertible: true,
-      isTriggerProperty: false
-    })
-  }
-};
-const variantProperties = {
-  [KeyValuePropertyType.TEXT]: textProperties,
-  [KeyValuePropertyType.NUMBER]: numberProperties,
-  [KeyValuePropertyType.CURRENCY]: currencyProperties,
-  [KeyValuePropertyType.PERCENTAGE]: percentageProperties,
-  [KeyValuePropertyType.IMAGE]: imageProperties,
-  [KeyValuePropertyType.VIDEO]: videoProperties,
-  [KeyValuePropertyType.DATE]: dateProperties,
-  [KeyValuePropertyType.BUTTON]: buttonProperties,
-  [KeyValuePropertyType.LINK]: linkProperties,
-  [KeyValuePropertyType.BOOLEAN]: booleanProperties,
-  [KeyValuePropertyType.TAGS]: tagsProperties,
-  [KeyValuePropertyType.EMAIL]: emailProperties
-};
-const generateVariantsBySection = (section) => {
-  return Object.entries(variantProperties).reduce(
-    (acc, [type5, properties2]) => {
-      if (properties2[section]) {
-        acc.push({
-          type: Prop.literal(type5),
-          ...properties2[section]
-        });
-      }
-      return acc;
-    },
-    []
-  );
-};
-const keyValuePropertiesDefinition = {
-  general: Section.category(PropsPanelCategory.Content).children({
-    id: Prop.string().default("").readable()
-  }).add(
-    Prop.union({
-      shared: {
-        isDerived: Prop.boolean().default(false).readable()
-      },
-      variants: [
-        {
-          isDerived: Prop.literal(true),
-          key: Prop.string().default("").readAndWrite().propertiesPanel({
-            label: "Key",
-            helpText: "The key of the key-value pair",
-            controlType: "INPUT_TEXT",
-            isTriggerProperty: false
-            // TODO: Hide when property is not derived
-          })
-        },
-        {
-          isDerived: Prop.literal(false),
-          key: Prop.string().default("").readable()
-        }
-      ]
-    })
-  ).add({
-    displayedKey: Prop.string().default("email").propertiesPanel({
-      label: "Displayed key",
-      helpText: "The label displayed for the key-value pair",
-      // controlType: "COMPUTE_KEY_VALUE_PROPERTY",
-      controlType: "INPUT_TEXT",
-      isTriggerProperty: false,
-      isRemovable: true,
-      visibility: "SHOW_NAME"
-      // TODO: Add editor arguments
-    })
-  }).add(
-    Prop.union({
-      shared: {
-        isDerived: Prop.boolean().default(false).readable()
-      },
-      variants: [
-        {
-          isDerived: Prop.literal(true),
-          computedValue: Prop.string().readAndWrite().default("").propertiesPanel({
-            label: "Computed value",
-            helpText: "The value of the key-value pair",
-            // controlType: "COMPUTE_KEY_VALUE_PROPERTY",
-            controlType: "INPUT_TEXT",
-            isTriggerProperty: false,
-            isRemovable: true,
-            visibility: "SHOW_NAME"
-            // TODO: Add editor arguments
-          })
-        }
-      ]
-    })
-  ).add(
-    Prop.union({
-      shared: {
-        type: Prop.string().readAndWrite().default(KeyValuePropertyType.TEXT).propertiesPanel({
-          label: "Type",
-          helpText: "The type of the key-value pair",
-          controlType: "DROP_DOWN",
-          options: KEY_VALUE_WIDGET_PROPERTY_TYPES
-          // TODO: Add update hook to update computedValue when type changes
-        })
-      },
-      variants: generateVariantsBySection("general")
-    })
-  ).add({
-    isVisible: Prop.boolean().readAndWrite().default(true).propertiesPanel({
-      label: "Visible",
-      helpText: "Whether the key-value pair is visible",
-      controlType: "SWITCH",
-      isTriggerProperty: false
-    })
-  }),
-  appearance: Section.category(PropsPanelCategory.Appearance).children({
-    "keyProps.icon": Prop.string().readAndWrite().default("info").propertiesPanel({
-      label: "Key icon",
-      helpText: "Select an icon to be displayed alongside the property key",
-      controlType: "ICON_SELECTOR",
-      isTriggerProperty: false,
-      isJSConvertible: true,
-      customJSControl: "CODE_EDITOR_ICON_SELECTOR",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: "info"
-      // TODO: Hide when icon is not set
-    }),
-    "keyProps.iconPosition": Prop.string().readAndWrite().default("left").propertiesPanel({
-      helpText: "The alignment of the icon",
-      label: "Icon position",
-      controlType: "RADIO_BUTTON_GROUP",
-      options: [
-        {
-          icon: "ICON_LEFT_ALIGN",
-          value: "left",
-          label: "Left"
-        },
-        {
-          icon: "ICON_RIGHT_ALIGN",
-          value: "right",
-          label: "Right"
-        }
-      ],
-      isTriggerProperty: false
-    }),
-    "valueProps.icon": Prop.string().readAndWrite().default("info").propertiesPanel({
-      label: "Value icon",
-      helpText: "Select an icon to be displayed alongside the property value",
-      controlType: "ICON_SELECTOR",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: "info"
-      // TODO: Hide when icon is not set
-      // TODO: Add update hook to update email icon when icon changes
-    }),
-    "valueProps.iconPosition": Prop.string().readAndWrite().default("left").propertiesPanel({
-      helpText: "The alignment of the value icon",
-      label: "Icon position",
-      controlType: "RADIO_BUTTON_GROUP",
-      options: [
-        {
-          icon: "ICON_LEFT_ALIGN",
-          value: "left",
-          label: "Left"
-        },
-        {
-          icon: "ICON_RIGHT_ALIGN",
-          value: "right",
-          label: "Right"
-        }
-      ],
-      isTriggerProperty: false
-      // TODO: Hide when icon is not set
-    })
-  }).add(
-    Prop.union({
-      shared: {
-        type: Prop.string()
-      },
-      variants: generateVariantsBySection("appearance")
-    })
-  ),
-  eventHandlers: Section.category(PropsPanelCategory.EventHandlers).add(
-    Prop.union({
-      shared: {
-        type: Prop.string()
-      },
-      variants: generateVariantsBySection("eventHandlers")
-    })
-  )
-};
-const propertiesDefinition$8 = {
-  general: Section.category(PropsPanelCategory.Content).children({
-    sourceData: Prop.any().readAndWrite().propertiesPanel({
-      label: "Source data",
-      placeholder: 'Enter { "col1": "val1" }',
-      controlType: "INPUT_EXPR",
-      helpText: "The object to be displayed",
-      forceVertical: true,
-      isTriggerProperty: false,
-      isJSConvertible: false
-    }),
-    properties: Prop.record(keyValuePropertiesDefinition).propertiesPanel({
-      label: "Key value pairs",
-      helpText: "Properties to display",
-      controlType: "KEY_VALUE_PROPERTIES",
-      headerControlType: "ADD_KEYVALUE_PROPERTY",
-      childrenDisplayMode: {
-        type: "popover",
-        title: "Edit property",
-        panelIdPropertyName: "id",
-        titlePropertyName: "key"
-      }
-    }),
-    propertiesOrder: Prop.any().readable().default([])
-  }),
-  appearance: Section.category(PropsPanelCategory.Appearance).children({
-    "keyProps.position": Prop.string().readAndWrite().default("left").propertiesPanel({
-      label: "Key position",
-      controlType: "RADIO_BUTTON_GROUP",
-      options: [
-        { label: "Left", value: "left" },
-        { label: "Top", value: "top" }
-      ]
-      // TODO: Add update hook to update valueProps.position when position changes
-    }),
-    "keyProps.keyStyle": Prop.any().propertiesPanel({
-      label: "Key style",
-      controlType: "TEXT_STYLE"
-    }),
-    "keyProps.textWrap": Prop.boolean().readAndWrite().default(false).propertiesPanel({
-      label: "Wrap key",
-      controlType: "SWITCH",
-      helpText: "If enabled, the key text will wrap",
-      isJSConvertible: true,
-      isTriggerProperty: false
-    }),
-    "valueProps.valueStyle": Prop.any().propertiesPanel({
-      label: "Value style",
-      controlType: "TEXT_STYLE"
-    }),
-    "valueProps.textWrap": Prop.boolean().readAndWrite().default(false).propertiesPanel({
-      label: "Wrap value",
-      controlType: "SWITCH",
-      helpText: "If enabled, the value text will wrap",
-      isJSConvertible: true,
-      isTriggerProperty: false
-    }),
-    "styleProps.backgroundColor": Prop.string().propertiesPanel({
-      label: "Background color",
-      controlType: "COLOR_PICKER"
-    }),
-    "styleProps.border": Prop.any().propertiesPanel({
-      label: "Border",
-      controlType: "BORDER_CONTROL"
-    }),
-    "styleProps.borderRadius": Prop.any().propertiesPanel({
-      label: "Border radius",
-      controlType: "BORDER_RADIUS_CONTROL"
-    }),
-    "styleProps.divider": Prop.any().default(() => ({
-      size: Dim.px(1),
-      color: Theme.colors.neutral100
-    })).propertiesPanel({
-      label: "Divider",
-      helpText: "Display dividers between key value pairs",
-      controlType: "COLORED_DIMENSION_CONTROL",
-      isJSConvertible: false,
-      isTriggerProperty: false,
-      isRemovable: true,
-      visibility: "SHOW_NAME"
-    })
-  }),
-  layout: Section.category(PropsPanelCategory.Layout).children({
-    ...size$2(),
-    keyProps: Prop.any().default({}),
-    "keyProps.width": Prop.any().readAndWrite().propertiesPanel({
-      options: [
-        {
-          label: "Percentage",
-          value: "%",
-          labelWhenSelected: "%",
-          subText: "Key takes up a % of entry's width"
-        },
-        {
-          label: "Pixels",
-          labelWhenSelected: "px",
-          value: "px",
-          subText: "Width in pixels that remains constant"
-        }
-      ],
-      controlType: "SIMPLE_SIZE_CONTROL",
-      label: "Key width"
-    }),
-    "valueProps.position": Prop.string().readAndWrite().default("left").propertiesPanel({
-      label: "Value alignment",
-      controlType: "RADIO_BUTTON_GROUP",
-      options: [
-        { label: "LEFT", value: "left" },
-        { label: "RIGHT", value: "right" }
-      ],
-      helpText: "Position the value to the right or left"
-    }),
-    ...visible()
-  }),
-  derived: Section.category(PropsPanelCategory.Derived).children({
-    data: Prop.any().readable().default(function() {
-      return getData(this);
-    })
-  })
-};
-const SbKeyValue = registerSbComponent(
-  "SbKeyValue",
-  {
-    propertiesDefinition: propertiesDefinition$8
-  },
-  (props) => {
-    const passthroughProps = usePassthroughProps(props);
-    const { theme } = useTheme();
-    const properties2 = getProperties(props.sourceData ?? {}, props.properties);
-    const propertiesOrder = getPropertiesOrder(
-      properties2 ?? {},
-      props.propertiesOrder ?? []
-    );
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...passthroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      KeyValueComponent,
-      {
-        sourceData: props.sourceData,
-        theme,
-        styleProps: props.styleProps ?? {},
-        keyProps: props.keyProps,
-        valueProps: props.valueProps,
-        widgetId: props.widgetId,
-        properties: properties2,
-        propertiesOrder,
-        width: props.width,
-        height: props.height
-      }
-    ) });
-  }
-);
 const layoutPropDef = {
   layout: basicLayout()
 };
@@ -191649,145 +189969,144 @@ function requireClient() {
 }
 var clientExports = requireClient();
 export {
-  HashRouter as $,
+  IDLE_BLOCKER as $,
   AppStateVarPersistence6 as A,
-  navigateTo as B,
-  setQueryParams as C,
-  download as D,
-  showAlert as E,
-  logoutIntegrations as F,
-  registerScope as G,
-  registerPage as H,
+  setQueryParams as B,
+  download as C,
+  showAlert as D,
+  logoutIntegrations as E,
+  registerScope as F,
+  registerPage as G,
+  createSbScope as H,
   IconSize$2 as I,
-  createSbScope as J,
-  Global as K,
-  Embed as L,
-  Env as M,
-  SbEvent as N,
-  useUpdateProperties as O,
+  Global as J,
+  Embed as K,
+  Env as L,
+  SbEvent as M,
+  useUpdateProperties as N,
+  sbComputed as O,
   Prop as P,
-  sbComputed as Q,
-  Dim as R,
+  Dim as Q,
+  SB as R,
   SbButton as S,
   Theme as T,
-  SB as U,
-  Outlet as V,
-  clientExports as W,
-  Await as X,
-  BrowserRouter as Y,
-  Form2 as Z,
+  Outlet as U,
+  clientExports as V,
+  Await as W,
+  BrowserRouter as X,
+  Form2 as Y,
+  HashRouter as Z,
   __awaiter as _,
   __generator as a,
-  href as a$,
-  IDLE_BLOCKER as a0,
-  IDLE_FETCHER as a1,
-  IDLE_NAVIGATION as a2,
-  Link as a3,
-  Links as a4,
-  MemoryRouter as a5,
-  Meta as a6,
-  NavLink as a7,
-  Navigate as a8,
-  Action as a9,
-  decodeViaTurboStream as aA,
-  deserializeErrors2 as aB,
-  getPatchRoutesOnNavigationFunction as aC,
-  getSingleFetchDataStrategy as aD,
-  invariant as aE,
-  mapRouteProperties as aF,
-  shouldHydrateRouteLoader as aG,
-  useFogOFWarDiscovery as aH,
-  useScrollRestoration as aI,
-  createBrowserRouter as aJ,
-  createCookie as aK,
-  createCookieSessionStorage as aL,
-  createHashRouter as aM,
-  createMemoryRouter as aN,
-  createMemorySessionStorage as aO,
-  createPath as aP,
-  createRequestHandler as aQ,
-  createRoutesFromChildren as aR,
-  createRoutesFromElements as aS,
-  createRoutesStub as aT,
-  createSearchParams as aU,
-  createSession as aV,
-  createSessionStorage as aW,
-  createStaticHandler2 as aX,
-  createStaticRouter as aY,
-  data as aZ,
-  generatePath as a_,
-  PrefetchPageLinks as aa,
-  Route as ab,
-  Router as ac,
-  RouterProvider as ad,
-  Routes as ae,
-  Scripts as af,
-  ScrollRestoration as ag,
-  ServerRouter as ah,
-  StaticRouter as ai,
-  StaticRouterProvider as aj,
-  DataRouterContext as ak,
-  DataRouterStateContext as al,
-  ErrorResponseImpl as am,
-  FetchersContext as an,
-  FrameworkContext as ao,
-  LocationContext as ap,
-  NavigationContext as aq,
-  RemixErrorBoundary as ar,
-  RouteContext as as,
-  ServerMode as at,
-  SingleFetchRedirectSymbol as au,
-  ViewTransitionContext as av,
-  createBrowserHistory as aw,
-  createClientRoutes as ax,
-  createClientRoutesWithHMRRevalidationOptOut as ay,
-  createRouter as az,
+  isCookie as a$,
+  IDLE_FETCHER as a0,
+  IDLE_NAVIGATION as a1,
+  Link as a2,
+  Links as a3,
+  MemoryRouter as a4,
+  Meta as a5,
+  NavLink as a6,
+  Navigate as a7,
+  Action as a8,
+  PrefetchPageLinks as a9,
+  deserializeErrors2 as aA,
+  getPatchRoutesOnNavigationFunction as aB,
+  getSingleFetchDataStrategy as aC,
+  invariant as aD,
+  mapRouteProperties as aE,
+  shouldHydrateRouteLoader as aF,
+  useFogOFWarDiscovery as aG,
+  useScrollRestoration as aH,
+  createBrowserRouter as aI,
+  createCookie as aJ,
+  createCookieSessionStorage as aK,
+  createHashRouter as aL,
+  createMemoryRouter as aM,
+  createMemorySessionStorage as aN,
+  createPath as aO,
+  createRequestHandler as aP,
+  createRoutesFromChildren as aQ,
+  createRoutesFromElements as aR,
+  createRoutesStub as aS,
+  createSearchParams as aT,
+  createSession as aU,
+  createSessionStorage as aV,
+  createStaticHandler2 as aW,
+  createStaticRouter as aX,
+  data as aY,
+  generatePath as aZ,
+  href as a_,
+  Route as aa,
+  Router as ab,
+  RouterProvider as ac,
+  Routes as ad,
+  Scripts as ae,
+  ScrollRestoration as af,
+  ServerRouter as ag,
+  StaticRouter as ah,
+  StaticRouterProvider as ai,
+  DataRouterContext as aj,
+  DataRouterStateContext as ak,
+  ErrorResponseImpl as al,
+  FetchersContext as am,
+  FrameworkContext as an,
+  LocationContext as ao,
+  NavigationContext as ap,
+  RemixErrorBoundary as aq,
+  RouteContext as ar,
+  ServerMode as as,
+  SingleFetchRedirectSymbol as at,
+  ViewTransitionContext as au,
+  createBrowserHistory as av,
+  createClientRoutes as aw,
+  createClientRoutesWithHMRRevalidationOptOut as ax,
+  createRouter as ay,
+  decodeViaTurboStream as az,
   IconSize as b,
-  isCookie as b0,
-  isRouteErrorResponse as b1,
-  isSession as b2,
-  matchPath as b3,
-  matchRoutes as b4,
-  parsePath as b5,
-  redirect as b6,
-  redirectDocument as b7,
-  renderMatches as b8,
-  replace2 as b9,
-  useParams as bA,
-  useResolvedPath as bB,
-  useRevalidator as bC,
-  useRouteError as bD,
-  useRouteLoaderData as bE,
-  useRoutes as bF,
-  useSearchParams as bG,
-  useSubmit as bH,
-  useViewTransitionState as bI,
-  resolvePath as ba,
-  HistoryRouter as bb,
-  unstable_RouterContextProvider as bc,
-  unstable_createContext as bd,
-  setDevServerHooks as be,
-  usePrompt as bf,
-  useActionData as bg,
-  useAsyncError as bh,
-  useAsyncValue as bi,
-  useBeforeUnload as bj,
-  useBlocker as bk,
-  useFetcher as bl,
-  useFetchers as bm,
-  useFormAction as bn,
-  useHref as bo,
-  useInRouterContext as bp,
-  useLinkClickHandler as bq,
-  useLoaderData as br,
-  useLocation as bs,
-  useMatch as bt,
-  useMatches as bu,
-  useNavigate as bv,
-  useNavigation as bw,
-  useNavigationType as bx,
-  useOutlet as by,
-  useOutletContext as bz,
+  isRouteErrorResponse as b0,
+  isSession as b1,
+  matchPath as b2,
+  matchRoutes as b3,
+  parsePath as b4,
+  redirect as b5,
+  redirectDocument as b6,
+  renderMatches as b7,
+  replace2 as b8,
+  resolvePath as b9,
+  useResolvedPath as bA,
+  useRevalidator as bB,
+  useRouteError as bC,
+  useRouteLoaderData as bD,
+  useRoutes as bE,
+  useSearchParams as bF,
+  useSubmit as bG,
+  useViewTransitionState as bH,
+  HistoryRouter as ba,
+  unstable_RouterContextProvider as bb,
+  unstable_createContext as bc,
+  setDevServerHooks as bd,
+  usePrompt as be,
+  useActionData as bf,
+  useAsyncError as bg,
+  useAsyncValue as bh,
+  useBeforeUnload as bi,
+  useBlocker as bj,
+  useFetcher as bk,
+  useFetchers as bl,
+  useFormAction as bm,
+  useHref as bn,
+  useInRouterContext as bo,
+  useLinkClickHandler as bp,
+  useLoaderData as bq,
+  useLocation as br,
+  useMatch as bs,
+  useMatches as bt,
+  useNavigate as bu,
+  useNavigation as bv,
+  useNavigationType as bw,
+  useOutlet as bx,
+  useOutletContext as by,
+  useParams as bz,
   SbSection as c,
   SbColumn as d,
   SbContainer as e,
@@ -191798,19 +190117,19 @@ export {
   SbTable as j,
   SbDropdown as k,
   SbCustom as l,
-  SbKeyValue as m,
-  SbCheckbox as n,
-  SbDatePicker as o,
+  SbCheckbox as m,
+  SbDatePicker as n,
+  SbSwitch as o,
   pascalCase as p,
-  SbSwitch as q,
+  SbIcon as q,
   registerComponent as r,
-  SbIcon as s,
-  SbImage as t,
-  SbVariable as u,
-  SbTimer as v,
-  SbApi as w,
-  SbProvider as x,
-  SbEventFlow as y,
-  copyToClipboard as z
-};
-//# sourceMappingURL=index-IwE7Zb_b.js.map
+  SbImage as s,
+  SbVariable as t,
+  SbTimer as u,
+  SbApi as v,
+  SbProvider as w,
+  SbEventFlow as x,
+  copyToClipboard as y,
+  navigateTo as z
+};
+//# sourceMappingURL=index-CX74kQ18.js.map