@northlight/ui 2.36.7 → 2.36.8

package/dist/umd/northlight.cjs

@@ -23,6 +23,24 @@
 
   var NorthlightIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(NorthlightIcons);
 
+  var __defProp$2u = Object.defineProperty;
+  var __getOwnPropSymbols$2u = Object.getOwnPropertySymbols;
+  var __hasOwnProp$2u = Object.prototype.hasOwnProperty;
+  var __propIsEnum$2u = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$2u = (obj, key, value) => key in obj ? __defProp$2u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$2u = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$2u.call(b, prop))
+        __defNormalProp$2u(a, prop, b[prop]);
+    if (__getOwnPropSymbols$2u)
+      for (var prop of __getOwnPropSymbols$2u(b)) {
+        if (__propIsEnum$2u.call(b, prop))
+          __defNormalProp$2u(a, prop, b[prop]);
+      }
+    return a;
+  };
+  const Accordion = (props) => /* @__PURE__ */ React.createElement(react.Accordion, __spreadValues$2u({}, props));
+
   var __defProp$2t = Object.defineProperty;
   var __getOwnPropSymbols$2t = Object.getOwnPropertySymbols;
   var __hasOwnProp$2t = Object.prototype.hasOwnProperty;
@@ -39,7 +57,7 @@
       }
     return a;
   };
-  const Accordion = (props) => /* @__PURE__ */ React.createElement(react.Accordion, __spreadValues$2t({}, props));
+  const AccordionButton = (props) => /* @__PURE__ */ React.createElement(react.AccordionButton, __spreadValues$2t({}, props));
 
   var __defProp$2s = Object.defineProperty;
   var __getOwnPropSymbols$2s = Object.getOwnPropertySymbols;
@@ -57,7 +75,7 @@
       }
     return a;
   };
-  const AccordionButton = (props) => /* @__PURE__ */ React.createElement(react.AccordionButton, __spreadValues$2s({}, props));
+  const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(react.AccordionPanel, __spreadValues$2s({}, props));
 
   var __defProp$2r = Object.defineProperty;
   var __getOwnPropSymbols$2r = Object.getOwnPropertySymbols;
@@ -75,25 +93,7 @@
       }
     return a;
   };
-  const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(react.AccordionPanel, __spreadValues$2r({}, props));
-
-  var __defProp$2q = Object.defineProperty;
-  var __getOwnPropSymbols$2q = Object.getOwnPropertySymbols;
-  var __hasOwnProp$2q = Object.prototype.hasOwnProperty;
-  var __propIsEnum$2q = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$2q = (obj, key, value) => key in obj ? __defProp$2q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$2q = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$2q.call(b, prop))
-        __defNormalProp$2q(a, prop, b[prop]);
-    if (__getOwnPropSymbols$2q)
-      for (var prop of __getOwnPropSymbols$2q(b)) {
-        if (__propIsEnum$2q.call(b, prop))
-          __defNormalProp$2q(a, prop, b[prop]);
-      }
-    return a;
-  };
-  const AccordionItem = (props) => /* @__PURE__ */ React.createElement(react.AccordionItem, __spreadValues$2q({}, props));
+  const AccordionItem = (props) => /* @__PURE__ */ React.createElement(react.AccordionItem, __spreadValues$2r({}, props));
 
   const useDebounce = (value, delay) => {
     const [debouncedValue, setDebouncedValue] = React.useState(value);
@@ -245,55 +245,65 @@
   };
 
   const isBetween = (point, min, max) => point >= min && point <= max;
+  const isEventInsideRect = (ref, event) => {
+    let clientX;
+    let clientY;
+    if (event instanceof MouseEvent) {
+      clientX = event.clientX;
+      clientY = event.clientY;
+    } else if (event instanceof TouchEvent && event.changedTouches[0]) {
+      clientX = event.changedTouches[0].clientX;
+      clientY = event.changedTouches[0].clientY;
+    }
+    if (ramda.isNil(clientX) || ramda.isNil(clientY))
+      return true;
+    const {
+      top,
+      right,
+      left,
+      bottom
+    } = ref.current.getBoundingClientRect();
+    return isBetween(clientX, left, right) && isBetween(clientY, top, bottom);
+  };
+  const isHtmlElementRef = (ref) => !ramda.isNil(ref.current);
   const useOutsideRectClick = (ref, callback) => {
     const stateRef = React.useRef({
-      isPointerDown: false,
+      isPointerDownOutsideRect: false,
       ignoreEmulatedMouseEvents: false
     });
     const state = stateRef.current;
     React.useEffect(() => {
       const handleMouseClick = (event) => {
-        let clientX;
-        let clientY;
-        if (event instanceof MouseEvent) {
-          clientX = event.clientX;
-          clientY = event.clientY;
-        } else if (event instanceof TouchEvent && event.changedTouches[0]) {
-          clientX = event.changedTouches[0].clientX;
-          clientY = event.changedTouches[0].clientY;
-        }
-        if (ramda.isNil(clientX) || ramda.isNil(clientY))
-          return;
-        if (ramda.isNil(ref == null ? void 0 : ref.current))
+        if (!isHtmlElementRef(ref)) {
           return;
-        const {
-          top,
-          right,
-          left,
-          bottom
-        } = ref.current.getBoundingClientRect();
-        const isInBound = isBetween(clientX, left, right) && isBetween(clientY, top, bottom);
+        }
+        const isInBound = isEventInsideRect(ref, event);
         if (isInBound)
           return;
         callback(event);
       };
-      const onPointerDown = () => {
-        state.isPointerDown = true;
+      const onPointerDown = (event) => {
+        if (!isHtmlElementRef(ref)) {
+          return;
+        }
+        if (!isEventInsideRect(ref, event)) {
+          state.isPointerDownOutsideRect = true;
+        }
       };
       const onMouseUp = (event) => {
         if (state.ignoreEmulatedMouseEvents) {
           state.ignoreEmulatedMouseEvents = false;
           return;
         }
-        if (state.isPointerDown) {
-          state.isPointerDown = false;
+        if (state.isPointerDownOutsideRect) {
+          state.isPointerDownOutsideRect = false;
           handleMouseClick(event);
         }
       };
       const onTouchEnd = (event) => {
         state.ignoreEmulatedMouseEvents = true;
-        if (state.isPointerDown) {
-          state.isPointerDown = false;
+        if (state.isPointerDownOutsideRect) {
+          state.isPointerDownOutsideRect = false;
           handleMouseClick(event);
         }
       };
@@ -412,6 +422,24 @@
     return fieldError;
   }
 
+  var __defProp$2q = Object.defineProperty;
+  var __getOwnPropSymbols$2q = Object.getOwnPropertySymbols;
+  var __hasOwnProp$2q = Object.prototype.hasOwnProperty;
+  var __propIsEnum$2q = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$2q = (obj, key, value) => key in obj ? __defProp$2q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$2q = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$2q.call(b, prop))
+        __defNormalProp$2q(a, prop, b[prop]);
+    if (__getOwnPropSymbols$2q)
+      for (var prop of __getOwnPropSymbols$2q(b)) {
+        if (__propIsEnum$2q.call(b, prop))
+          __defNormalProp$2q(a, prop, b[prop]);
+      }
+    return a;
+  };
+  const passPropsToChild = (child, styles) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$2q({}, styles)) : child;
+
   var __defProp$2p = Object.defineProperty;
   var __getOwnPropSymbols$2p = Object.getOwnPropertySymbols;
   var __hasOwnProp$2p = Object.prototype.hasOwnProperty;
@@ -428,27 +456,9 @@
       }
     return a;
   };
-  const passPropsToChild = (child, styles) => React.isValidElement(child) ? React.cloneElement(child, __spreadValues$2p({}, styles)) : child;
-
-  var __defProp$2o = Object.defineProperty;
-  var __getOwnPropSymbols$2o = Object.getOwnPropertySymbols;
-  var __hasOwnProp$2o = Object.prototype.hasOwnProperty;
-  var __propIsEnum$2o = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$2o = (obj, key, value) => key in obj ? __defProp$2o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$2o = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp$2o.call(b, prop))
-        __defNormalProp$2o(a, prop, b[prop]);
-    if (__getOwnPropSymbols$2o)
-      for (var prop of __getOwnPropSymbols$2o(b)) {
-        if (__propIsEnum$2o.call(b, prop))
-          __defNormalProp$2o(a, prop, b[prop]);
-      }
-    return a;
-  };
   const getChildrenWithProps = (children, styles, predicate = ramda.T) => {
     const childrenAsArr = React.Children.toArray(children);
-    const childrenWithoutFocus = childrenAsArr.map((child, i) => predicate(child, i) ? passPropsToChild(child, __spreadValues$2o({}, styles)) : child);
+    const childrenWithoutFocus = childrenAsArr.map((child, i) => predicate(child, i) ? passPropsToChild(child, __spreadValues$2p({}, styles)) : child);
     return childrenWithoutFocus;
   };
 
@@ -522,80 +532,80 @@
     };
   };
 
-  var __defProp$2n = Object.defineProperty;
-  var __defProps$x = Object.defineProperties;
-  var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$2n = Object.getOwnPropertySymbols;
-  var __hasOwnProp$2n = Object.prototype.hasOwnProperty;
-  var __propIsEnum$2n = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$2n = (obj, key, value) => key in obj ? __defProp$2n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$2n = (a, b) => {
+  var __defProp$2o = Object.defineProperty;
+  var __defProps$y = Object.defineProperties;
+  var __getOwnPropDescs$y = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$2o = Object.getOwnPropertySymbols;
+  var __hasOwnProp$2o = Object.prototype.hasOwnProperty;
+  var __propIsEnum$2o = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$2o = (obj, key, value) => key in obj ? __defProp$2o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$2o = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$2n.call(b, prop))
-        __defNormalProp$2n(a, prop, b[prop]);
-    if (__getOwnPropSymbols$2n)
-      for (var prop of __getOwnPropSymbols$2n(b)) {
-        if (__propIsEnum$2n.call(b, prop))
-          __defNormalProp$2n(a, prop, b[prop]);
+      if (__hasOwnProp$2o.call(b, prop))
+        __defNormalProp$2o(a, prop, b[prop]);
+    if (__getOwnPropSymbols$2o)
+      for (var prop of __getOwnPropSymbols$2o(b)) {
+        if (__propIsEnum$2o.call(b, prop))
+          __defNormalProp$2o(a, prop, b[prop]);
       }
     return a;
   };
-  var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
+  var __spreadProps$y = (a, b) => __defProps$y(a, __getOwnPropDescs$y(b));
   const customSelectStyles = {
-    container: (provided) => __spreadProps$x(__spreadValues$2n({}, provided), {
+    container: (provided) => __spreadProps$y(__spreadValues$2o({}, provided), {
       width: "100%",
       color: "text.default"
     }),
-    option: (provided, state) => __spreadProps$x(__spreadValues$2n({}, provided), {
+    option: (provided, state) => __spreadProps$y(__spreadValues$2o({}, provided), {
       background: state.isFocused && "background.select.option-focus",
       overflowWrap: "anywhere",
       _active: {
         background: "background.select.option-active"
       }
     }),
-    valueContainer: (provided) => __spreadProps$x(__spreadValues$2n({}, provided), {
+    valueContainer: (provided) => __spreadProps$y(__spreadValues$2o({}, provided), {
       paddingInlineStart: "padding-inline.select.default"
     }),
-    downChevron: (provided) => __spreadProps$x(__spreadValues$2n({}, provided), {
+    downChevron: (provided) => __spreadProps$y(__spreadValues$2o({}, provided), {
       color: "icon.select.default"
     }),
-    placeholder: (provided) => __spreadProps$x(__spreadValues$2n({}, provided), {
+    placeholder: (provided) => __spreadProps$y(__spreadValues$2o({}, provided), {
       color: "text.select.placeholder"
     }),
     multiValue: (provided, state) => {
       var _a;
       const background = state.data.isFixed ? "background.select.option-disabled" : (_a = state.data.color) != null ? _a : provided.bgColor;
-      return __spreadProps$x(__spreadValues$2n({}, provided), {
+      return __spreadProps$y(__spreadValues$2o({}, provided), {
         bgColor: background,
         color: getContrastColor(background)
       });
     },
-    menuList: (provided) => __spreadProps$x(__spreadValues$2n({}, provided), {
+    menuList: (provided) => __spreadProps$y(__spreadValues$2o({}, provided), {
       bgColor: "background.default"
     })
   };
 
-  var __defProp$2m = Object.defineProperty;
-  var __defProps$w = Object.defineProperties;
-  var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$2m = Object.getOwnPropertySymbols;
-  var __hasOwnProp$2m = Object.prototype.hasOwnProperty;
-  var __propIsEnum$2m = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$2m = (obj, key, value) => key in obj ? __defProp$2m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$2m = (a, b) => {
+  var __defProp$2n = Object.defineProperty;
+  var __defProps$x = Object.defineProperties;
+  var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$2n = Object.getOwnPropertySymbols;
+  var __hasOwnProp$2n = Object.prototype.hasOwnProperty;
+  var __propIsEnum$2n = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$2n = (obj, key, value) => key in obj ? __defProp$2n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$2n = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$2m.call(b, prop))
-        __defNormalProp$2m(a, prop, b[prop]);
-    if (__getOwnPropSymbols$2m)
-      for (var prop of __getOwnPropSymbols$2m(b)) {
-        if (__propIsEnum$2m.call(b, prop))
-          __defNormalProp$2m(a, prop, b[prop]);
+      if (__hasOwnProp$2n.call(b, prop))
+        __defNormalProp$2n(a, prop, b[prop]);
+    if (__getOwnPropSymbols$2n)
+      for (var prop of __getOwnPropSymbols$2n(b)) {
+        if (__propIsEnum$2n.call(b, prop))
+          __defNormalProp$2n(a, prop, b[prop]);
       }
     return a;
   };
-  var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
-  const tagsInputStyles = (isFocused, borderColor) => __spreadProps$w(__spreadValues$2m({}, customSelectStyles), {
-    container: (provided) => __spreadProps$w(__spreadValues$2m({}, provided), {
+  var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
+  const tagsInputStyles = (isFocused, borderColor) => __spreadProps$x(__spreadValues$2n({}, customSelectStyles), {
+    container: (provided) => __spreadProps$x(__spreadValues$2n({}, provided), {
       w: "full",
       height: "100%",
       resize: "vertical",
@@ -608,12 +618,12 @@
       color: "text.default",
       boxShadow: isFocused ? `0 0 0 1px ${borderColor}` : "none"
     }),
-    control: (provided) => __spreadProps$w(__spreadValues$2m({}, provided), {
+    control: (provided) => __spreadProps$x(__spreadValues$2n({}, provided), {
       minHeight: "20",
       height: "100%",
       alignItems: "start"
     }),
-    valueContainer: (provided) => __spreadProps$w(__spreadValues$2m({}, provided), {
+    valueContainer: (provided) => __spreadProps$x(__spreadValues$2n({}, provided), {
       paddingInlineStart: "padding-inline.select.default",
       overflowY: "auto",
       maxH: "100%"
@@ -1231,7 +1241,9 @@
         },
         _focus: {
           borderColor: color.border.input.focus,
-          bg: color.background.input["outline-focus"]
+          bg: color.background.input["outline-focus"],
+          boxShadow: "none",
+          borderWidth: borderWidth.sm
         },
         _invalid: {
           bg: color.background.input["outline-error"],
@@ -1567,6 +1579,21 @@
     })
   };
 
+  const themeMap = {
+    camphouseLightTheme: {
+      green: "moss",
+      pink: "rose",
+      orange: "coral",
+      gray: "smoke"
+    },
+    webappTheme: {},
+    tottTheme: {}
+  };
+  const processColorSchemeBasedOnTheme = ({
+    currentTheme,
+    colorScheme
+  }) => ramda.defaultTo(colorScheme, themeMap[currentTheme][colorScheme]);
+
   const Tag$1 = {
     parts: ["container"],
     baseStyle: {
@@ -1592,8 +1619,9 @@
       }
     },
     variants: {
-      solid: ({ theme: { colors }, bgColor, colorScheme }) => {
-        const tagBgColor = bgColor != null ? bgColor : colors[colorScheme] && colors[colorScheme][500] ? colors[colorScheme][500] : colorScheme;
+      solid: ({ theme: { colors }, bgColor, colorScheme, currentTheme }) => {
+        const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
+        const tagBgColor = bgColor != null ? bgColor : colors[processedColorScheme] && colors[processedColorScheme][500] ? colors[processedColorScheme][500] : processedColorScheme;
         const tagColor = getContrastColor(react.useToken("colors", tagBgColor));
         return {
           container: {
@@ -1602,8 +1630,9 @@
           }
         };
       },
-      subtle: ({ theme: { colors }, colorScheme, bgColor }) => {
-        const tagBgColor = bgColor != null ? bgColor : colors[colorScheme] && colors[colorScheme][100] ? colors[colorScheme][100] : colorScheme;
+      subtle: ({ theme: { colors }, colorScheme, bgColor, currentTheme }) => {
+        const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
+        const tagBgColor = bgColor != null ? bgColor : colors[processedColorScheme] && colors[processedColorScheme][100] ? colors[processedColorScheme][100] : processedColorScheme;
         const tagColor = getContrastColor(react.useToken("colors", tagBgColor));
         return {
           container: {
@@ -1888,19 +1917,19 @@
     })
   };
 
-  var __defProp$2l = Object.defineProperty;
-  var __getOwnPropSymbols$2l = Object.getOwnPropertySymbols;
-  var __hasOwnProp$2l = Object.prototype.hasOwnProperty;
-  var __propIsEnum$2l = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$2l = (obj, key, value) => key in obj ? __defProp$2l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$2l = (a, b) => {
+  var __defProp$2m = Object.defineProperty;
+  var __getOwnPropSymbols$2m = Object.getOwnPropertySymbols;
+  var __hasOwnProp$2m = Object.prototype.hasOwnProperty;
+  var __propIsEnum$2m = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$2m = (obj, key, value) => key in obj ? __defProp$2m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$2m = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$2l.call(b, prop))
-        __defNormalProp$2l(a, prop, b[prop]);
-    if (__getOwnPropSymbols$2l)
-      for (var prop of __getOwnPropSymbols$2l(b)) {
-        if (__propIsEnum$2l.call(b, prop))
-          __defNormalProp$2l(a, prop, b[prop]);
+      if (__hasOwnProp$2m.call(b, prop))
+        __defNormalProp$2m(a, prop, b[prop]);
+    if (__getOwnPropSymbols$2m)
+      for (var prop of __getOwnPropSymbols$2m(b)) {
+        if (__propIsEnum$2m.call(b, prop))
+          __defNormalProp$2m(a, prop, b[prop]);
       }
     return a;
   };
@@ -1925,7 +1954,7 @@
         bgColor: "background.default",
         borderRadius: "input.outline"
       },
-      dateSelect: __spreadValues$2l({
+      dateSelect: __spreadValues$2m({
         fontWeight: "semibold",
         border: "none",
         padding: "1",
@@ -3274,19 +3303,19 @@
     }
   };
 
-  var __defProp$2k = Object.defineProperty;
-  var __getOwnPropSymbols$2k = Object.getOwnPropertySymbols;
-  var __hasOwnProp$2k = Object.prototype.hasOwnProperty;
-  var __propIsEnum$2k = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$2k = (obj, key, value) => key in obj ? __defProp$2k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$2k = (a, b) => {
+  var __defProp$2l = Object.defineProperty;
+  var __getOwnPropSymbols$2l = Object.getOwnPropertySymbols;
+  var __hasOwnProp$2l = Object.prototype.hasOwnProperty;
+  var __propIsEnum$2l = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$2l = (obj, key, value) => key in obj ? __defProp$2l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$2l = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$2k.call(b, prop))
-        __defNormalProp$2k(a, prop, b[prop]);
-    if (__getOwnPropSymbols$2k)
-      for (var prop of __getOwnPropSymbols$2k(b)) {
-        if (__propIsEnum$2k.call(b, prop))
-          __defNormalProp$2k(a, prop, b[prop]);
+      if (__hasOwnProp$2l.call(b, prop))
+        __defNormalProp$2l(a, prop, b[prop]);
+    if (__getOwnPropSymbols$2l)
+      for (var prop of __getOwnPropSymbols$2l(b)) {
+        if (__propIsEnum$2l.call(b, prop))
+          __defNormalProp$2l(a, prop, b[prop]);
       }
     return a;
   };
@@ -3342,7 +3371,7 @@
   const FilePicker$1 = {
     parts: ["filePicker", "fileItem", "multiFilePicker"],
     baseStyle: ({ theme: { sizes, colors }, hasLoaded, isImage, isInvalid, currentTheme, sx }) => ({
-      filePicker: ramda.merge(__spreadValues$2k(__spreadValues$2k({
+      filePicker: ramda.merge(__spreadValues$2l(__spreadValues$2l({
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -3355,7 +3384,7 @@
         borderStyle: "dashed",
         borderRadius: "lg"
       }, getInvalidColorStyles(isInvalid, isImage, currentTheme)), thickRing), sx),
-      multiFilePicker: __spreadValues$2k(__spreadValues$2k({
+      multiFilePicker: __spreadValues$2l(__spreadValues$2l({
         width: "full",
         maxWidth: "inherit",
         height: "32",
@@ -3380,8 +3409,8 @@
     }),
     variants: {
       ai: ({ isInvalid }) => ({
-        filePicker: __spreadValues$2k({}, getAiColorStyles(isInvalid)),
-        multiFilePicker: __spreadValues$2k({}, getAiColorStyles(isInvalid))
+        filePicker: __spreadValues$2l({}, getAiColorStyles(isInvalid)),
+        multiFilePicker: __spreadValues$2l({}, getAiColorStyles(isInvalid))
       })
     }
   };
@@ -3512,31 +3541,35 @@
   };
 
   const Badge$1 = {
-    baseStyle: ({ colorScheme, theme: { colors } }) => {
-      const bgColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][100] : colors[colorScheme] && colors[colorScheme][100];
-      const textColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][800] : colors[colorScheme] && colors[colorScheme][800];
+    baseStyle: ({ colorScheme, theme: { colors }, currentTheme }) => {
+      const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
+      const bgColor = processedColorScheme === "mediatoolBlue" ? colors[processedColorScheme][100] : colors[processedColorScheme] && colors[processedColorScheme][100];
+      const textColor = processedColorScheme === "mediatoolBlue" ? colors[processedColorScheme][800] : colors[processedColorScheme] && colors[processedColorScheme][800];
       return {
         bgColor,
         color: textColor
       };
     },
     variants: {
-      solid: ({ colorScheme, theme: { colors } }) => {
-        const bgColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][500] : colors[colorScheme] && colors[colorScheme][500];
+      solid: ({ colorScheme, theme: { colors }, currentTheme }) => {
+        const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
+        const bgColor = processedColorScheme === "mediatoolBlue" ? colors[processedColorScheme][500] : colors[processedColorScheme] && colors[processedColorScheme][500];
         return {
           bgColor,
-          color: getContrastColor(bgColor != null ? bgColor : react.useToken("colors", colorScheme))
+          color: getContrastColor(bgColor != null ? bgColor : react.useToken("colors", processedColorScheme))
         };
       },
-      outline: ({ colorScheme, theme: { colors } }) => {
-        const textColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][500] : colors[colorScheme] && colors[colorScheme][700];
+      outline: ({ colorScheme, theme: { colors }, currentTheme }) => {
+        const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
+        const textColor = processedColorScheme === "mediatoolBlue" ? colors[processedColorScheme][500] : colors[processedColorScheme] && colors[processedColorScheme][700];
         return {
           bgColor: "mono.transparent",
           color: textColor
         };
       },
-      ghost: ({ colorScheme, theme: { colors } }) => {
-        const textColor = colorScheme === "mediatoolBlue" ? colors[colorScheme][500] : colors[colorScheme] && colors[colorScheme][700];
+      ghost: ({ colorScheme, theme: { colors }, currentTheme }) => {
+        const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
+        const textColor = processedColorScheme === "mediatoolBlue" ? colors[processedColorScheme][500] : colors[processedColorScheme] && colors[processedColorScheme][700];
         return {
           bgColor: "mono.transparent",
           color: textColor
@@ -3641,6 +3674,39 @@
     Tooltip: Tooltip$1
   });
 
+  var __defProp$2k = Object.defineProperty;
+  var __defProps$w = Object.defineProperties;
+  var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$2k = Object.getOwnPropertySymbols;
+  var __hasOwnProp$2k = Object.prototype.hasOwnProperty;
+  var __propIsEnum$2k = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$2k = (obj, key, value) => key in obj ? __defProp$2k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$2k = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$2k.call(b, prop))
+        __defNormalProp$2k(a, prop, b[prop]);
+    if (__getOwnPropSymbols$2k)
+      for (var prop of __getOwnPropSymbols$2k(b)) {
+        if (__propIsEnum$2k.call(b, prop))
+          __defNormalProp$2k(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
+  const WebappSkin = {
+    colors: __spreadProps$w(__spreadValues$2k(__spreadValues$2k({}, tokens.WebappSystemTokensSet.st.color), tokens.WebappComponentsTokensSet.color), {
+      text: __spreadValues$2k(__spreadValues$2k({}, tokens.WebappSystemTokensSet.st.color.text), tokens.WebappComponentsTokensSet.color.text),
+      border: __spreadValues$2k(__spreadValues$2k({}, tokens.WebappSystemTokensSet.st.color.border), tokens.WebappComponentsTokensSet.color.border)
+    }),
+    sizes: tokens.WebappComponentsTokensSet.sizing,
+    space: tokens.WebappComponentsTokensSet.spacing,
+    radii: __spreadValues$2k(__spreadValues$2k({}, tokens.WebappSystemTokensSet.st.borderRadius), tokens.WebappComponentsTokensSet.borderRadius),
+    borders: __spreadValues$2k(__spreadValues$2k({}, tokens.WebappSystemTokensSet.st.borderWidth), tokens.WebappComponentsTokensSet.borderWidth),
+    opacity: tokens.WebappComponentsTokensSet.opacity,
+    typography: tokens.typography,
+    shadows: __spreadValues$2k({}, tokens.WebappSystemTokensSet.st.boxShadow)
+  };
+
   var __defProp$2j = Object.defineProperty;
   var __defProps$v = Object.defineProperties;
   var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
@@ -3660,18 +3726,17 @@
     return a;
   };
   var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
-  const WebappSkin = {
-    colors: __spreadProps$v(__spreadValues$2j(__spreadValues$2j({}, tokens.WebappSystemTokensSet.st.color), tokens.WebappComponentsTokensSet.color), {
-      text: __spreadValues$2j(__spreadValues$2j({}, tokens.WebappSystemTokensSet.st.color.text), tokens.WebappComponentsTokensSet.color.text),
-      border: __spreadValues$2j(__spreadValues$2j({}, tokens.WebappSystemTokensSet.st.color.border), tokens.WebappComponentsTokensSet.color.border)
+  const TottSkin = {
+    colors: __spreadProps$v(__spreadValues$2j(__spreadValues$2j({}, tokens.TottSystemTokensSet.st.color), tokens.TottComponentsTokensSet.color), {
+      border: __spreadValues$2j(__spreadValues$2j({}, tokens.TottSystemTokensSet.st.color.border), tokens.TottComponentsTokensSet.color.border)
     }),
-    sizes: tokens.WebappComponentsTokensSet.sizing,
-    space: tokens.WebappComponentsTokensSet.spacing,
-    radii: __spreadValues$2j(__spreadValues$2j({}, tokens.WebappSystemTokensSet.st.borderRadius), tokens.WebappComponentsTokensSet.borderRadius),
-    borders: __spreadValues$2j(__spreadValues$2j({}, tokens.WebappSystemTokensSet.st.borderWidth), tokens.WebappComponentsTokensSet.borderWidth),
-    opacity: tokens.WebappComponentsTokensSet.opacity,
+    sizes: tokens.TottComponentsTokensSet.sizing,
+    space: tokens.TottComponentsTokensSet.spacing,
+    radii: __spreadValues$2j(__spreadValues$2j({}, tokens.TottSystemTokensSet.st.borderRadius), tokens.TottComponentsTokensSet.borderRadius),
+    borders: __spreadValues$2j(__spreadValues$2j({}, tokens.TottSystemTokensSet.st.borderWidth), tokens.TottComponentsTokensSet.borderWidth),
+    opacity: tokens.TottComponentsTokensSet.opacity,
     typography: tokens.typography,
-    shadows: __spreadValues$2j({}, tokens.WebappSystemTokensSet.st.boxShadow)
+    shadows: __spreadValues$2j({}, tokens.TottSystemTokensSet.st.boxShadow)
   };
 
   var __defProp$2i = Object.defineProperty;
@@ -3693,17 +3758,18 @@
     return a;
   };
   var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
-  const TottSkin = {
-    colors: __spreadProps$u(__spreadValues$2i(__spreadValues$2i({}, tokens.TottSystemTokensSet.st.color), tokens.TottComponentsTokensSet.color), {
-      border: __spreadValues$2i(__spreadValues$2i({}, tokens.TottSystemTokensSet.st.color.border), tokens.TottComponentsTokensSet.color.border)
+  const CamphouseLightSkin = {
+    colors: __spreadProps$u(__spreadValues$2i(__spreadValues$2i({}, tokens.CamphouseLightSystemTokensSet.st.color), tokens.CamphouseLightComponentsTokensSet.color), {
+      text: __spreadValues$2i(__spreadValues$2i({}, tokens.CamphouseLightSystemTokensSet.st.color.text), tokens.CamphouseLightComponentsTokensSet.color.text),
+      border: __spreadValues$2i(__spreadValues$2i({}, tokens.CamphouseLightSystemTokensSet.st.color.border), tokens.CamphouseLightComponentsTokensSet.color.border)
     }),
-    sizes: tokens.TottComponentsTokensSet.sizing,
-    space: tokens.TottComponentsTokensSet.spacing,
-    radii: __spreadValues$2i(__spreadValues$2i({}, tokens.TottSystemTokensSet.st.borderRadius), tokens.TottComponentsTokensSet.borderRadius),
-    borders: __spreadValues$2i(__spreadValues$2i({}, tokens.TottSystemTokensSet.st.borderWidth), tokens.TottComponentsTokensSet.borderWidth),
-    opacity: tokens.TottComponentsTokensSet.opacity,
+    sizes: tokens.CamphouseLightComponentsTokensSet.sizing,
+    space: tokens.CamphouseLightComponentsTokensSet.spacing,
+    radii: __spreadValues$2i(__spreadValues$2i({}, tokens.CamphouseLightSystemTokensSet.st.borderRadius), tokens.CamphouseLightComponentsTokensSet.borderRadius),
+    borders: __spreadValues$2i(__spreadValues$2i({}, tokens.CamphouseLightSystemTokensSet.st.borderWidth), tokens.CamphouseLightComponentsTokensSet.borderWidth),
+    opacity: tokens.CamphouseLightComponentsTokensSet.opacity,
     typography: tokens.typography,
-    shadows: __spreadValues$2i({}, tokens.TottSystemTokensSet.st.boxShadow)
+    shadows: __spreadValues$2i({}, tokens.CamphouseLightSystemTokensSet.st.boxShadow)
   };
 
   var __defProp$2h = Object.defineProperty;
@@ -3765,6 +3831,7 @@
   };
   const theme = react.extendTheme(overrides, WebappSkin);
   const tottTheme = react.extendTheme(overrides, TottSkin);
+  const camphouseLightTheme = react.extendTheme(overrides, CamphouseLightSkin);
 
   var __defProp$2g = Object.defineProperty;
   var __defProps$t = Object.defineProperties;
@@ -4971,7 +5038,8 @@
       "iconAs"
     ]);
     const IconComponent = iconAs ? NorthlightIcons__namespace[iconAs] : NorthlightIcons.MediatoolLogoSolid;
-    return /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1X({ ref }, rest), /* @__PURE__ */ React.createElement(react.Flex, { align: "center", gap: "1" }, withIcon && iconPosition === "left" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" }), children, withIcon && iconPosition === "right" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" })));
+    const currentTheme = useCurrentTheme();
+    return /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1X({ ref, currentTheme }, rest), /* @__PURE__ */ React.createElement(react.Flex, { align: "center", gap: "1" }, withIcon && iconPosition === "left" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" }), children, withIcon && iconPosition === "right" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" })));
   });
 
   var __defProp$1W = Object.defineProperty;
@@ -6061,7 +6129,7 @@
       }
     return target;
   };
-  const FlipButton = (props) => {
+  const FlipButton = React.forwardRef((props, wrapperRef) => {
     const _a = props, {
       children,
       size,
@@ -6124,13 +6192,14 @@
         sx: ramda.mergeAll([button, isFocused ? focusStyles : {}, { flexDirection: iconPlacement === "left" ? "row" : "row-reverse" }]),
         "aria-checked": isSelected,
         "aria-disabled": isDisabled,
-        as: "label"
+        as: "label",
+        ref: wrapperRef
       },
       /* @__PURE__ */ React.createElement("input", __spreadValues$1H({}, flipButtonProps)),
       icon && iconPlacement !== "none" ? /* @__PURE__ */ React.createElement(Icon, { as: icon || NorthlightIcons.CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React.createElement(react.SlideFade, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon, { as: icon || NorthlightIcons.CheckSolid, sx: buttonIcon })),
       /* @__PURE__ */ React.createElement(react.Text, { textAlign: "center" }, children)
     );
-  };
+  });
 
   var __defProp$1G = Object.defineProperty;
   var __defProps$p = Object.defineProperties;
@@ -9774,13 +9843,15 @@
       "bgColor",
       "colorScheme"
     ]);
+    const currentTheme = useCurrentTheme();
     return /* @__PURE__ */ React.createElement(
       react.Tag,
       __spreadValues$$({
         bgColor,
         colorScheme,
         ref,
-        variant
+        variant,
+        currentTheme
       }, rest),
       children
     );
@@ -15692,6 +15763,7 @@
   exports.Tooltip = Tooltip;
   exports.addAlpha = addAlpha;
   exports.advancedParseFloat = advancedParseFloat;
+  exports.camphouseLightTheme = camphouseLightTheme;
   exports.clamp = clamp;
   exports.createDebounceFunctionInstance = createDebounceFunctionInstance;
   exports.getChildrenWithProps = getChildrenWithProps;