@app-studio/web 0.8.24 → 0.8.26

package/dist/components/Layout/Center/Center.d.ts

@@ -2,3 +2,4 @@ import React from 'react';
 import { CenterProps } from './Center.props';
 declare const Center: React.ForwardRefExoticComponent<Pick<CenterProps, string | number> & React.RefAttributes<HTMLElement>>;
 export { Center };
+export type { CenterProps };

package/dist/components/Layout/Horizontal/Horizontal.d.ts

@@ -2,3 +2,4 @@ import React from 'react';
 import { HorizontalProps } from './Horizontal.props';
 declare const Horizontal: React.ForwardRefExoticComponent<Pick<HorizontalProps, string | number> & React.RefAttributes<HTMLElement>>;
 export { Horizontal };
+export type { HorizontalProps };

package/dist/components/Layout/Vertical/Vertical.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { VerticalProps } from './Vertical.props';
-declare const Vertical: React.ForwardRefExoticComponent<Pick<VerticalProps, string | number> & React.RefAttributes<HTMLElement>>;
+declare const Vertical: React.ForwardRefExoticComponent<Pick<VerticalProps, string | number> & React.RefAttributes<HTMLDivElement>>;
 export { Vertical };
+export type { VerticalProps };

package/dist/web.cjs.development.js

@@ -173,16 +173,16 @@ var Text = TextComponent;
 var _excluded$1 = ["justifyContent", "isReversed"];
 var Vertical = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   var {
-      // Sets a default alignment for content within the Vertical container to 'flex-start'
       justifyContent = 'flex-start',
-      // Determines the direction in which the Vertical elements are stacked, default not reversed
       isReversed = false
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-    display: "flex",
-    justifyContent: justifyContent,
-    flexDirection: isReversed ? 'column-reverse' : 'column'
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+    style: {
+      display: 'flex',
+      justifyContent: justifyContent,
+      flexDirection: isReversed ? 'column-reverse' : 'column'
+    }
   }, props, {
     ref: ref
   }));
@@ -2507,7 +2507,8 @@ var useSelectState = _ref => {
     options
   } = _ref;
   // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
-  var defaultValue = placeholder ? isMulti ? [] : '' : options[0].value;
+  var defaultValue = placeholder ? isMulti ? [] : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
+  : Array.isArray(options) && options.length > 0 ? options[0].value : ''; // If no placeholder, use the first option value if available, otherwise undefined
   // State hook for managing visibility of the Select dropdown, initially set to hidden
   var [hide, setHide] = React__default.useState(true);
   // State hook for tracking mouse hover status over the Select component
@@ -2851,7 +2852,7 @@ var Item = _ref => {
   }, style), option.label));
 };
 var SelectBox = _ref2 => {
-  var _option$label;
+  var _ref3;
   var {
     size = 'md',
     styles = {
@@ -2876,16 +2877,21 @@ var SelectBox = _ref2 => {
     color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : 'auto'
   }, styles['field'], styles['text']);
-  var option = options.find(option => option.value === value);
-  return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || value && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_option$label = option == null ? void 0 : option.label) != null ? _option$label : value : value && value.length > 0 && (/*#__PURE__*/React__default.createElement(Horizontal, {
+  var option = options.length > 0 && options.find(option => option.value === value);
+  return /*#__PURE__*/React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || Array.isArray(value) && value.length === 0) && !!placeholder ? placeholder : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_ref3 = option && option.label) != null ? _ref3 : value :
+  // If value is an array and not empty, render MultiSelect options
+  Array.isArray(value) && value.length > 0 ? (/*#__PURE__*/React__default.createElement(Horizontal, {
     gap: 6
   }, value.map(option => (/*#__PURE__*/React__default.createElement(MultiSelect, {
     key: option,
     option: option,
     removeOption: removeOption
-  }))))))));
+  }))))) : (
+  /*#__PURE__*/
+  // Handle any other types of value (including objects or unexpected values)
+  React__default.createElement("span", null, value)))));
 };
-var HiddenSelect = _ref3 => {
+var HiddenSelect = _ref4 => {
   var {
       id,
       name,
@@ -2895,8 +2901,8 @@ var HiddenSelect = _ref3 => {
       isDisabled = false,
       isReadOnly = false,
       options = []
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$3);
   var handleChange = event => {
     if (onChange) onChange(event);
   };
@@ -2913,14 +2919,14 @@ var HiddenSelect = _ref3 => {
     readOnly: isReadOnly,
     onChange: handleChange,
     multiple: isMulti
-  }, props), options.map(option => {
+  }, props), options.length > 0 && options.map(option => {
     return /*#__PURE__*/React__default.createElement("option", {
       key: option.value,
       value: option.value
     }, option.label);
   }));
 };
-var DropDown = _ref4 => {
+var DropDown = _ref5 => {
   var {
     size,
     styles = {
@@ -2930,7 +2936,7 @@ var DropDown = _ref4 => {
     callback = () => {},
     highlightedIndex,
     setHighlightedIndex
-  } = _ref4;
+  } = _ref5;
   var itemStates = useItemState();
   var handleCallback = option => callback(option);
   var shadow = typeof document !== undefined ? {
@@ -2970,7 +2976,7 @@ var DropDown = _ref4 => {
         display: 'none'
       }
     }
-  }, shadow, styles['dropDown']), options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
+  }, shadow, styles['dropDown']), options.length > 0 && options.map((option, index) => (/*#__PURE__*/React__default.createElement(Item, Object.assign({
     key: option.value,
     size: size,
     style: styles['text'],
@@ -2980,13 +2986,13 @@ var DropDown = _ref4 => {
     onMouseEnter: () => setHighlightedIndex(index)
   }, itemStates)))));
 };
-var MultiSelect = _ref5 => {
+var MultiSelect = _ref6 => {
   var {
       option,
       size = 'md',
       removeOption = () => {}
-    } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$2);
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$2);
   var handleClick = () => removeOption(option);
   return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
     gap: 10,
@@ -3005,7 +3011,7 @@ var MultiSelect = _ref5 => {
     onClick: handleClick
   }));
 };
-var SelectView = _ref6 => {
+var SelectView = _ref7 => {
   var {
       id,
       name,
@@ -3041,8 +3047,8 @@ var SelectView = _ref6 => {
       setIsFocused = () => {},
       setHighlightedIndex,
       highlightedIndex
-    } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded4$2);
+    } = _ref7,
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded4$2);
   var isWithLabel = !!(isFocused && label);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);