@majoo-ui/react 1.63.0-rc.1 → 1.63.0-rc.3

package/index.esm.js

@@ -1250,6 +1250,22 @@ function ThemeProvider({
   theme,
   children
 }) {
+  // Apply theme class to document.body so that Radix Portal content
+  // (which renders outside this ThemeProvider div) also inherits
+  // the active theme's CSS variables.
+  React__default.useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const body = document.body;
+    const themeClass = theme?.className || String(theme || '');
+    if (themeClass) {
+      body.classList.add(themeClass);
+    }
+    return () => {
+      if (themeClass) {
+        body.classList.remove(themeClass);
+      }
+    };
+  }, [theme]);
   return /*#__PURE__*/React__default.createElement("div", {
     id: name,
     className: theme
@@ -3711,7 +3727,7 @@ createTheme({
     cardDescMd: '20px'
   }
 });
-const colors$7 = foundations.colors;
+const colors$7 = theme.colors;
 
 const normalize = {
   '*,::before,::after': {
@@ -10451,7 +10467,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef(({
     readOnly: readOnly
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     size: 16,
-    color: theme.colors.iconSecondary.computedValue,
+    color: colors$7.iconSecondary,
     style: {
       verticalAlign: 'middle'
     }
@@ -13910,7 +13926,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef(({
     }, !item?.hideCheck && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
       color: colors$7.iconDisable
     }) : selectedValueSet.has(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
-      color: theme.colors.iconBrand.computedValue
+      color: colors$7.iconBrand
     })), isShowSelectAll && item?.id === '!all' && selectedValue?.length && selectedValue?.length < itemsLength && !selectedValueSet.has('!all') ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, null, "-") : /*#__PURE__*/React__default.createElement("div", null)), /*#__PURE__*/React__default.createElement(Item$2, {
       css: {
         backgroundColor: 'unset',
@@ -13946,9 +13962,9 @@ const InputSelectCheck = /*#__PURE__*/forwardRef(({
           ...checkBoxCss
         }
       }, !item?.hideCheck && item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-        color: theme.colors.iconDisable.computedValue
+        color: colors$7.iconDisable
       }) : filterSelectedChild?.length === item?.children?.filter(e => !e.isDisabled)?.length ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-        color: theme.colors.iconBrand.computedValue
+        color: colors$7.iconBrand
       }) : filterSelectedChild?.length > 0 ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, null, "-") : null), /*#__PURE__*/React__default.createElement(Item$2, {
         css: {
           backgroundColor: 'unset',
@@ -14186,7 +14202,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef(({
     }, !item?.hideCheck && item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
       color: colors$7.iconDisable
     }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length === item?.children?.filter(e => !e.isDisabled)?.length ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-      color: theme.colors.iconBrand.computedValue
+      color: colors$7.iconBrand
     }) : item?.children?.filter(e => selectedValueSet.has(e.id) && !e.isDisabled)?.length > 0 ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, null, "-") : null), /*#__PURE__*/React__default.createElement(Item$2, {
       css: {
         backgroundColor: 'unset',
@@ -14530,7 +14546,7 @@ function InputCreatable({
       display: isOpen ? 'block' : 'none'
     }
   }, /*#__PURE__*/React__default.createElement(ItemWrapper, null, /*#__PURE__*/React__default.createElement(CirclePlusOutline, {
-    color: theme.colors.iconBrand.computedValue
+    color: colors$7.iconBrand
   }), /*#__PURE__*/React__default.createElement(Item$1, {
     onClick: () => {
       if (onClickItem) onClickItem();
@@ -14966,7 +14982,7 @@ function InputResourceList({
             onClick: handleCheckedAllExpandable,
             border: !isAllSelected && !isIndeterminate,
             children: isAllSelected ? jsx(CheckOutline, {
-              color: theme.colors.iconBrand.computedValue
+              color: colors$7.iconBrand
             }) : isIndeterminate ? jsx(IndeterminateFilled, {
               children: "-"
             }) : ''
@@ -15383,7 +15399,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       onClick: handleDown,
       children: jsx(MinusOutline, {
         size: 24,
-        color: disabled || disabledDecrement ? theme.colors.iconDisable.computedValue : theme.colors.primary500.computedValue
+        color: disabled || disabledDecrement ? colors$7.iconDisable : colors$7.primary500
       })
     }), jsx(Input$3, {
       ref: ref,
@@ -15407,7 +15423,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       onClick: handleUp,
       children: jsx(PlusOutline, {
         size: 24,
-        color: disabled || disabledIncrement ? theme.colors.iconDisable.computedValue : theme.colors.primary500.computedValue
+        color: disabled || disabledIncrement ? colors$7.iconDisable : colors$7.primary500
       })
     })]
   });
@@ -19028,11 +19044,11 @@ const IconStateFull$1 = props => {
     setIsHover(false);
   }
   return props.type === 'next' ? jsx(ChevronRightOutline, Object.assign({}, props, {
-    color: isHover && !props.disabled ? theme.colors.primary400.computedValue : theme.colors.iconPrimary.computedValue,
+    color: isHover && !props.disabled ? colors$7.primary400 : colors$7.iconPrimary,
     onMouseEnter: handleHover,
     onMouseLeave: handleUnHover
   })) : jsx(ChevronLeftOutline, Object.assign({}, props, {
-    color: isHover && !props.disabled ? theme.colors.primary400.computedValue : theme.colors.iconPrimary.computedValue,
+    color: isHover && !props.disabled ? colors$7.primary400 : colors$7.iconPrimary,
     onMouseEnter: handleHover,
     onMouseLeave: handleUnHover
   }));
@@ -20427,7 +20443,7 @@ const TabsList$1 = ({
     icon: true,
     onClick: () => listContainerRef.current.scrollLeft -= scrollAreaWidth / 2
   }, /*#__PURE__*/React__default.createElement(ChevronLgLeftOutline, {
-    color: theme.colors.iconBrand.computedValue
+    color: colors$7.iconBrand
   }))), listContainerScrollPosition < scrollAreaWidth - 10 && /*#__PURE__*/React__default.createElement(ScrollButtonContainer, {
     position: "right"
   }, /*#__PURE__*/React__default.createElement(ScrollButton, {
@@ -20438,7 +20454,7 @@ const TabsList$1 = ({
     icon: true,
     onClick: () => listContainerRef.current.scrollLeft += scrollAreaWidth / 2
   }, /*#__PURE__*/React__default.createElement(ChevronLgRightOutline, {
-    color: theme.colors.iconBrand.computedValue
+    color: colors$7.iconBrand
   }))));
 };
 const TabsTrigger$1 = ({
@@ -20466,7 +20482,7 @@ const TabsTrigger$1 = ({
       whiteSpace: 'nowrap'
     }
   }, icon && /*#__PURE__*/React__default.cloneElement(icon, {
-    color: activeTabs === value || isIconHovered ? theme.colors.iconBrand.computedValue : theme.colors.iconDisable.computedValue
+    color: activeTabs === value || isIconHovered ? colors$7.iconBrand : colors$7.iconDisable
   }), (!icon || activeTabs === value) && children)));
 };
 TabsTrigger$1.propTypes = {
@@ -25322,13 +25338,13 @@ const IconStateFull = ({
     setIsHover(false);
   }
   return props.type === 'close' ? /*#__PURE__*/React__default.createElement(CloseIcon, _extends({}, props, {
-    color: isHover ? '#E13743' : '#DF2A36',
+    color: isHover ? colors$7.red400 : colors$7.red500,
     onMouseEnter: handleEnter,
     onMouseLeave: handleLeave
   })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, customPreviewIcon ? (/*#__PURE__*/React__default.cloneElement(customPreviewIcon, {
     ...customPreviewIcon.props,
     ...props,
-    color: isHover ? theme.colors.iconBrand.computedValue : customPreviewIcon.props.color,
+    color: isHover ? colors$7.iconBrand : customPreviewIcon.props.color,
     onMouseEnter: handleEnter,
     onMouseLeave: handleLeave,
     style: {
@@ -25341,7 +25357,7 @@ const IconStateFull = ({
       ...customPreviewIcon.props.style
     }
   })) : /*#__PURE__*/React__default.createElement(EyeIcon, _extends({}, props, {
-    color: isHover ? theme.colors.iconBrand.computedValue : '#A5ABAB',
+    color: isHover ? colors$7.iconBrand : colors$7.gray400,
     onMouseEnter: handleEnter,
     onMouseLeave: handleLeave
   })));
@@ -25386,7 +25402,7 @@ const Upload = ({
   customPreviewIcon,
   onPreviewIconClick,
   maxWidthOrHeight,
-  theme: theme$1,
+  theme,
   uploadingLabel,
   placeholder,
   cancelLabel,
@@ -25996,7 +26012,7 @@ const Upload = ({
       justify: "center",
       align: "center"
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
-      color: disabled ? '#C0C4C4' : '#404545'
+      color: disabled ? colors$7.gray300 : colors$7.gray800
     })), /*#__PURE__*/React__default.createElement(Text, {
       css: {
         margin: '$spacing-04 $spacing-05 0 $spacing-05'
@@ -26016,7 +26032,7 @@ const Upload = ({
         }
       },
       isMobile: isMobile,
-      theme: theme$1
+      theme: theme
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
       asChild: true
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -26060,7 +26076,7 @@ const Upload = ({
       style: {
         cursor: 'pointer'
       },
-      color: aspect ? theme.colors.iconBrand.computedValue : theme.colors.iconPrimary.computedValue,
+      color: aspect ? colors$7.iconBrand : colors$7.iconPrimary,
       onClick: toggleAspect
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
       gap: 4
@@ -26830,7 +26846,7 @@ const Device = props => {
       onClick: prevSlide,
       buttonType: "secondary",
       children: jsx(ChevronLeftOutline, {
-        color: theme.colors.btnPrimary.computedValue
+        color: colors$7.btnPrimary
       })
     }), jsxs(Flex$1, {
       align: "center",
@@ -26884,7 +26900,7 @@ const Device = props => {
       onClick: nextSlide,
       buttonType: "secondary",
       children: jsx(ChevronRightOutline, {
-        color: theme.colors.btnPrimary.computedValue
+        color: colors$7.btnPrimary
       })
     })]
   });
@@ -28784,7 +28800,7 @@ const Navigation = props => {
           marginRight: 9
         },
         size: "24",
-        color: theme.colors.bgBrand.computedValue
+        color: colors$7.bgBrand
       }), typeof data[i - 1].title === 'string' ? data[i - 1].title : data[i - 1].title?.(), data[i - 1]?.withTolltip && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
         label: data[i - 1]?.tooltipsContents
@@ -28793,7 +28809,7 @@ const Navigation = props => {
           margin: '0 9px'
         },
         size: "20",
-        color: theme.colors.iconSecondary.computedValue
+        color: colors$7.iconSecondary
       })), data[i - 1]?.comingSoon && /*#__PURE__*/React__default.createElement(Flex$1, {
         css: {
           marginLeft: data[i - 1]?.withTolltip ? 0 : '$spacing-03'
@@ -28823,7 +28839,7 @@ const Navigation = props => {
         label: data[i - 1]?.tooltipsContents
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         size: "20",
-        color: theme.colors.iconPrimary.computedValue
+        color: colors$7.iconPrimary
       })), data[i - 1]?.comingSoon && /*#__PURE__*/React__default.createElement(Flex$1, {
         align: "center",
         justify: "center",
@@ -29086,10 +29102,10 @@ Collapse.defaultProps = {
 const DesktopContainer = styled(Flex$1, {
   display: 'none',
   '& .active-scroll-spy': {
-    borderLeft: `4px solid ${theme.colors.primary500.computedValue} !important`
+    borderLeft: `4px solid ${colors$7.primary500} !important`
   },
   '& .active-scroll-spy .link-title': {
-    color: `${theme.colors.primary500.computedValue} !important`
+    color: `${colors$7.primary500} !important`
   },
   '@md': {
     display: 'unset'
@@ -29198,7 +29214,7 @@ function Content({
         marginLeft: '-4px !important',
         borderLeftWidth: '4px !important',
         borderLeftStyle: 'solid !important',
-        borderLeftColor: `${item?.id === activeId ? theme.colors.primary500.computedValue : 'transparent'} !important`,
+        borderLeftColor: `${item?.id === activeId ? colors$7.primary500 : 'transparent'} !important`,
         paddingLeft: '16px !important',
         minHeight: 25
       },
@@ -47230,7 +47246,7 @@ function Remove(props) {
     css: props === null || props === void 0 ? void 0 : props.css,
     position: props === null || props === void 0 ? void 0 : props.position,
     onClick: props === null || props === void 0 ? void 0 : props.onRemove,
-    color: isHover ? theme.colors.red400.computedValue : theme.colors.gray400.computedValue,
+    color: isHover ? colors$7.red400 : colors$7.gray400,
     onMouseEnter: onEnter,
     onMouseLeave: onLeave
   });
@@ -48363,13 +48379,13 @@ function ZoomControls({
       onClick: onZoomIn,
       children: jsx(PlusOutline, {
         size: 20,
-        color: theme.colors.iconBrand.computedValue
+        color: colors$7.iconBrand
       })
     }), jsx(ZoomControlButton, {
       onClick: onZoomOut,
       children: jsx(MinusOutline, {
         size: 20,
-        color: theme.colors.iconBrand.computedValue
+        color: colors$7.iconBrand
       })
     })]
   });
@@ -48475,8 +48491,8 @@ function MapPicker(props) {
           center: [center === null || center === void 0 ? void 0 : center.lat, center === null || center === void 0 ? void 0 : center.lng],
           radius: radius,
           pathOptions: {
-            color: theme.colors.bgBrand.computedValue,
-            fillColor: theme.colors.bgBrand.computedValue
+            color: colors$7.bgBrand,
+            fillColor: colors$7.bgBrand
           }
         }), jsx(TileLayer, {
           url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.63.0-rc.1",
+  "version": "1.63.0-rc.3",
   "main": "./index.esm.js",
   "exports": {
     ".": {