@northlight/ui 2.36.7 → 2.36.8

package/dist/es/northlight.js

@@ -3,12 +3,12 @@ export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDial
 import React, { useState, useEffect, useRef, isValidElement, cloneElement, Children, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
 import { CreatableSelect, chakraComponents, AsyncSelect, Select as Select$3 } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, chakraComponents as selectChakraComponents } from 'chakra-react-select';
-import { isNil, last, map, prop, difference, replace, split, path, T, keys, omit, merge, isEmpty, identity, any, ifElse, gt, always, defaultTo, take, inc, dec, forEach, is, trim, values, equals, mergeAll, toLower, find, times, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
+import { isNil, last, map, prop, difference, replace, split, path, T, keys, omit, defaultTo, merge, isEmpty, identity, any, ifElse, gt, always, take, inc, dec, forEach, is, trim, values, equals, mergeAll, toLower, find, times, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
 import { useFocusManager, FocusScope, useFocusRing } from '@react-aria/focus';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import { useToken, useMultiStyleConfig as useMultiStyleConfig$1, chakra as chakra$1 } from '@chakra-ui/system';
-import { palette, WebappComponentsTokensSet, WebappSystemTokensSet, typography, TottComponentsTokensSet, TottSystemTokensSet, coreZIndex, coreSizing, coreSpacing, coreFontWeight, coreBoxShadow, coreFontSize, coreLineHeight, coreBorderRadius } from '@northlight/tokens';
+import { palette, WebappComponentsTokensSet, WebappSystemTokensSet, typography, TottComponentsTokensSet, TottSystemTokensSet, CamphouseLightComponentsTokensSet, CamphouseLightSystemTokensSet, coreZIndex, coreSizing, coreSpacing, coreFontWeight, coreBoxShadow, coreFontSize, coreLineHeight, coreBorderRadius } from '@northlight/tokens';
 import { keyframes } from '@emotion/react';
 export { keyframes } from '@emotion/react';
 import { randomColor, cssVar, mode } from '@chakra-ui/theme-tools';
@@ -45,6 +45,24 @@ import { NumericFormat, numericFormatter } from 'react-number-format';
 import InputMask from 'react-input-mask';
 import { uniqBy } from 'yafu';
 
+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(Accordion$1, __spreadValues$2u({}, props));
+
 var __defProp$2t = Object.defineProperty;
 var __getOwnPropSymbols$2t = Object.getOwnPropertySymbols;
 var __hasOwnProp$2t = Object.prototype.hasOwnProperty;
@@ -61,7 +79,7 @@ var __spreadValues$2t = (a, b) => {
     }
   return a;
 };
-const Accordion = (props) => /* @__PURE__ */ React.createElement(Accordion$1, __spreadValues$2t({}, props));
+const AccordionButton = (props) => /* @__PURE__ */ React.createElement(AccordionButton$1, __spreadValues$2t({}, props));
 
 var __defProp$2s = Object.defineProperty;
 var __getOwnPropSymbols$2s = Object.getOwnPropertySymbols;
@@ -79,7 +97,7 @@ var __spreadValues$2s = (a, b) => {
     }
   return a;
 };
-const AccordionButton = (props) => /* @__PURE__ */ React.createElement(AccordionButton$1, __spreadValues$2s({}, props));
+const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(AccordionPanel$1, __spreadValues$2s({}, props));
 
 var __defProp$2r = Object.defineProperty;
 var __getOwnPropSymbols$2r = Object.getOwnPropertySymbols;
@@ -97,25 +115,7 @@ var __spreadValues$2r = (a, b) => {
     }
   return a;
 };
-const AccordionPanel = (props) => /* @__PURE__ */ React.createElement(AccordionPanel$1, __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(AccordionItem$1, __spreadValues$2q({}, props));
+const AccordionItem = (props) => /* @__PURE__ */ React.createElement(AccordionItem$1, __spreadValues$2r({}, props));
 
 const useDebounce = (value, delay) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
@@ -267,55 +267,65 @@ const useSelectCallbacks = ({
 };
 
 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 (isNil(clientX) || isNil(clientY))
+    return true;
+  const {
+    top,
+    right,
+    left,
+    bottom
+  } = ref.current.getBoundingClientRect();
+  return isBetween(clientX, left, right) && isBetween(clientY, top, bottom);
+};
+const isHtmlElementRef = (ref) => !isNil(ref.current);
 const useOutsideRectClick = (ref, callback) => {
   const stateRef = useRef({
-    isPointerDown: false,
+    isPointerDownOutsideRect: false,
     ignoreEmulatedMouseEvents: false
   });
   const state = stateRef.current;
   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 (isNil(clientX) || isNil(clientY))
-        return;
-      if (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);
       }
     };
@@ -434,6 +444,24 @@ function getFieldError(name, errors) {
   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) => isValidElement(child) ? cloneElement(child, __spreadValues$2q({}, styles)) : child;
+
 var __defProp$2p = Object.defineProperty;
 var __getOwnPropSymbols$2p = Object.getOwnPropertySymbols;
 var __hasOwnProp$2p = Object.prototype.hasOwnProperty;
@@ -450,27 +478,9 @@ var __spreadValues$2p = (a, b) => {
     }
   return a;
 };
-const passPropsToChild = (child, styles) => isValidElement(child) ? 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 = T) => {
   const childrenAsArr = 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;
 };
 
@@ -544,80 +554,80 @@ const useResizeWidth = ({
   };
 };
 
-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",
@@ -630,12 +640,12 @@ const tagsInputStyles = (isFocused, borderColor) => __spreadProps$w(__spreadValu
     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%"
@@ -1253,7 +1263,9 @@ const PinInput$1 = {
       },
       _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"],
@@ -1589,6 +1601,21 @@ const Switch$1 = {
   })
 };
 
+const themeMap = {
+  camphouseLightTheme: {
+    green: "moss",
+    pink: "rose",
+    orange: "coral",
+    gray: "smoke"
+  },
+  webappTheme: {},
+  tottTheme: {}
+};
+const processColorSchemeBasedOnTheme = ({
+  currentTheme,
+  colorScheme
+}) => defaultTo(colorScheme, themeMap[currentTheme][colorScheme]);
+
 const Tag$1 = {
   parts: ["container"],
   baseStyle: {
@@ -1614,8 +1641,9 @@ const Tag$1 = {
     }
   },
   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(useToken$1("colors", tagBgColor));
       return {
         container: {
@@ -1624,8 +1652,9 @@ const Tag$1 = {
         }
       };
     },
-    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(useToken$1("colors", tagBgColor));
       return {
         container: {
@@ -1910,19 +1939,19 @@ const NotificationIconButton$1 = {
   })
 };
 
-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;
 };
@@ -1947,7 +1976,7 @@ const Calendar$1 = {
       bgColor: "background.default",
       borderRadius: "input.outline"
     },
-    dateSelect: __spreadValues$2l({
+    dateSelect: __spreadValues$2m({
       fontWeight: "semibold",
       border: "none",
       padding: "1",
@@ -3296,19 +3325,19 @@ const Toolbox$1 = {
   }
 };
 
-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;
 };
@@ -3364,7 +3393,7 @@ const getAiColorStyles = (isInvalid, isImage = true) => ({
 const FilePicker$1 = {
   parts: ["filePicker", "fileItem", "multiFilePicker"],
   baseStyle: ({ theme: { sizes, colors }, hasLoaded, isImage, isInvalid, currentTheme, sx }) => ({
-    filePicker: merge(__spreadValues$2k(__spreadValues$2k({
+    filePicker: merge(__spreadValues$2l(__spreadValues$2l({
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
@@ -3377,7 +3406,7 @@ const FilePicker$1 = {
       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",
@@ -3402,8 +3431,8 @@ const FilePicker$1 = {
   }),
   variants: {
     ai: ({ isInvalid }) => ({
-      filePicker: __spreadValues$2k({}, getAiColorStyles(isInvalid)),
-      multiFilePicker: __spreadValues$2k({}, getAiColorStyles(isInvalid))
+      filePicker: __spreadValues$2l({}, getAiColorStyles(isInvalid)),
+      multiFilePicker: __spreadValues$2l({}, getAiColorStyles(isInvalid))
     })
   }
 };
@@ -3534,31 +3563,35 @@ const Menu$1 = {
 };
 
 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 : useToken$1("colors", colorScheme))
+        color: getContrastColor(bgColor != null ? bgColor : useToken$1("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
@@ -3663,6 +3696,39 @@ var components = /*#__PURE__*/Object.freeze({
   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({}, WebappSystemTokensSet.st.color), WebappComponentsTokensSet.color), {
+    text: __spreadValues$2k(__spreadValues$2k({}, WebappSystemTokensSet.st.color.text), WebappComponentsTokensSet.color.text),
+    border: __spreadValues$2k(__spreadValues$2k({}, WebappSystemTokensSet.st.color.border), WebappComponentsTokensSet.color.border)
+  }),
+  sizes: WebappComponentsTokensSet.sizing,
+  space: WebappComponentsTokensSet.spacing,
+  radii: __spreadValues$2k(__spreadValues$2k({}, WebappSystemTokensSet.st.borderRadius), WebappComponentsTokensSet.borderRadius),
+  borders: __spreadValues$2k(__spreadValues$2k({}, WebappSystemTokensSet.st.borderWidth), WebappComponentsTokensSet.borderWidth),
+  opacity: WebappComponentsTokensSet.opacity,
+  typography,
+  shadows: __spreadValues$2k({}, WebappSystemTokensSet.st.boxShadow)
+};
+
 var __defProp$2j = Object.defineProperty;
 var __defProps$v = Object.defineProperties;
 var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
@@ -3682,18 +3748,17 @@ var __spreadValues$2j = (a, b) => {
   return a;
 };
 var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
-const WebappSkin = {
-  colors: __spreadProps$v(__spreadValues$2j(__spreadValues$2j({}, WebappSystemTokensSet.st.color), WebappComponentsTokensSet.color), {
-    text: __spreadValues$2j(__spreadValues$2j({}, WebappSystemTokensSet.st.color.text), WebappComponentsTokensSet.color.text),
-    border: __spreadValues$2j(__spreadValues$2j({}, WebappSystemTokensSet.st.color.border), WebappComponentsTokensSet.color.border)
+const TottSkin = {
+  colors: __spreadProps$v(__spreadValues$2j(__spreadValues$2j({}, TottSystemTokensSet.st.color), TottComponentsTokensSet.color), {
+    border: __spreadValues$2j(__spreadValues$2j({}, TottSystemTokensSet.st.color.border), TottComponentsTokensSet.color.border)
   }),
-  sizes: WebappComponentsTokensSet.sizing,
-  space: WebappComponentsTokensSet.spacing,
-  radii: __spreadValues$2j(__spreadValues$2j({}, WebappSystemTokensSet.st.borderRadius), WebappComponentsTokensSet.borderRadius),
-  borders: __spreadValues$2j(__spreadValues$2j({}, WebappSystemTokensSet.st.borderWidth), WebappComponentsTokensSet.borderWidth),
-  opacity: WebappComponentsTokensSet.opacity,
+  sizes: TottComponentsTokensSet.sizing,
+  space: TottComponentsTokensSet.spacing,
+  radii: __spreadValues$2j(__spreadValues$2j({}, TottSystemTokensSet.st.borderRadius), TottComponentsTokensSet.borderRadius),
+  borders: __spreadValues$2j(__spreadValues$2j({}, TottSystemTokensSet.st.borderWidth), TottComponentsTokensSet.borderWidth),
+  opacity: TottComponentsTokensSet.opacity,
   typography,
-  shadows: __spreadValues$2j({}, WebappSystemTokensSet.st.boxShadow)
+  shadows: __spreadValues$2j({}, TottSystemTokensSet.st.boxShadow)
 };
 
 var __defProp$2i = Object.defineProperty;
@@ -3715,17 +3780,18 @@ var __spreadValues$2i = (a, b) => {
   return a;
 };
 var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
-const TottSkin = {
-  colors: __spreadProps$u(__spreadValues$2i(__spreadValues$2i({}, TottSystemTokensSet.st.color), TottComponentsTokensSet.color), {
-    border: __spreadValues$2i(__spreadValues$2i({}, TottSystemTokensSet.st.color.border), TottComponentsTokensSet.color.border)
+const CamphouseLightSkin = {
+  colors: __spreadProps$u(__spreadValues$2i(__spreadValues$2i({}, CamphouseLightSystemTokensSet.st.color), CamphouseLightComponentsTokensSet.color), {
+    text: __spreadValues$2i(__spreadValues$2i({}, CamphouseLightSystemTokensSet.st.color.text), CamphouseLightComponentsTokensSet.color.text),
+    border: __spreadValues$2i(__spreadValues$2i({}, CamphouseLightSystemTokensSet.st.color.border), CamphouseLightComponentsTokensSet.color.border)
   }),
-  sizes: TottComponentsTokensSet.sizing,
-  space: TottComponentsTokensSet.spacing,
-  radii: __spreadValues$2i(__spreadValues$2i({}, TottSystemTokensSet.st.borderRadius), TottComponentsTokensSet.borderRadius),
-  borders: __spreadValues$2i(__spreadValues$2i({}, TottSystemTokensSet.st.borderWidth), TottComponentsTokensSet.borderWidth),
-  opacity: TottComponentsTokensSet.opacity,
+  sizes: CamphouseLightComponentsTokensSet.sizing,
+  space: CamphouseLightComponentsTokensSet.spacing,
+  radii: __spreadValues$2i(__spreadValues$2i({}, CamphouseLightSystemTokensSet.st.borderRadius), CamphouseLightComponentsTokensSet.borderRadius),
+  borders: __spreadValues$2i(__spreadValues$2i({}, CamphouseLightSystemTokensSet.st.borderWidth), CamphouseLightComponentsTokensSet.borderWidth),
+  opacity: CamphouseLightComponentsTokensSet.opacity,
   typography,
-  shadows: __spreadValues$2i({}, TottSystemTokensSet.st.boxShadow)
+  shadows: __spreadValues$2i({}, CamphouseLightSystemTokensSet.st.boxShadow)
 };
 
 var __defProp$2h = Object.defineProperty;
@@ -3787,6 +3853,7 @@ const overrides = {
 };
 const theme = extendTheme(overrides, WebappSkin);
 const tottTheme = extendTheme(overrides, TottSkin);
+const camphouseLightTheme = extendTheme(overrides, CamphouseLightSkin);
 
 var __defProp$2g = Object.defineProperty;
 var __defProps$t = Object.defineProperties;
@@ -4993,7 +5060,8 @@ const Badge = forwardRef$1((props, ref) => {
     "iconAs"
   ]);
   const IconComponent = iconAs ? NorthlightIcons[iconAs] : MediatoolLogoSolid;
-  return /* @__PURE__ */ React.createElement(Badge$2, __spreadValues$1X({ ref }, rest), /* @__PURE__ */ React.createElement(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(Badge$2, __spreadValues$1X({ ref, currentTheme }, rest), /* @__PURE__ */ React.createElement(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;
@@ -6083,7 +6151,7 @@ var __objRest$1k = (source, exclude) => {
     }
   return target;
 };
-const FlipButton = (props) => {
+const FlipButton = forwardRef$1((props, wrapperRef) => {
   const _a = props, {
     children,
     size,
@@ -6146,13 +6214,14 @@ const FlipButton = (props) => {
       sx: 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 || CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React.createElement(SlideFade$1, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon, { as: icon || CheckSolid, sx: buttonIcon })),
     /* @__PURE__ */ React.createElement(Text, { textAlign: "center" }, children)
   );
-};
+});
 
 var __defProp$1G = Object.defineProperty;
 var __defProps$p = Object.defineProperties;
@@ -9796,13 +9865,15 @@ const Tag = forwardRef$1((_a, ref) => {
     "bgColor",
     "colorScheme"
   ]);
+  const currentTheme = useCurrentTheme();
   return /* @__PURE__ */ React.createElement(
     Tag$2,
     __spreadValues$$({
       bgColor,
       colorScheme,
       ref,
-      variant
+      variant,
+      currentTheme
     }, rest),
     children
   );
@@ -14871,5 +14942,5 @@ const ComboPickerField = (_a) => {
   );
 };
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AspectRatio, AsyncError, Avatar, AvatarGroup, Badge, Blinker, Blockquote, Button, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxGroupField, Clickable, ClipboardInput, Collapse, ColorPicker, ColorPickerField, ComboPicker, ComboPickerField, CreatableSelectDropdown, CustomTheme, DatePicker, DatePickerField, DatePickerLocaleWrapper, DateRangePicker, DateRangePickerField, DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText, Fade, FastGrid, FastList, Field, FilePicker, FilePickerField, FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, FormattedNumberInputField, H1, H2, H3, H4, H5, H6, Icon, IconButton, IntentButton, Label, Lead, LoadingBar, MaskedTextInput, MediatoolThemeProvider, Menu, Modal, ModalBase, ModalBody, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumVal, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P, PaneDivider, PaneItem, PinInput, Popover, ProgressBar, Radio, RadioGroup, RadioGroupField, ResizeHandle, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner, SplitPane, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Table, Tabs, Tag, TagGroup, TagsInput, TextField, Textarea, TextareaField, Tiny, Toast, Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, Tooltip, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getConsistentRandomColorFromString, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AspectRatio, AsyncError, Avatar, AvatarGroup, Badge, Blinker, Blockquote, Button, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxGroupField, Clickable, ClipboardInput, Collapse, ColorPicker, ColorPickerField, ComboPicker, ComboPickerField, CreatableSelectDropdown, CustomTheme, DatePicker, DatePickerField, DatePickerLocaleWrapper, DateRangePicker, DateRangePickerField, DragAndDrop, DragHandle, DragItem, Draggable, DropZone, Droppable, EditableText, Fade, FastGrid, FastList, Field, FilePicker, FilePickerField, FlipButton, FlipButtonGroup, FlipButtonGroupField, Form, FormLabel, FormattedNumberInput, FormattedNumberInputField, H1, H2, H3, H4, H5, H6, Icon, IconButton, IntentButton, Label, Lead, LoadingBar, MaskedTextInput, MediatoolThemeProvider, Menu, Modal, ModalBase, ModalBody, MultiFileList, MultiFilePicker, MultiFilePickerField, MultiFileUploader, MultiSort, NotificationIconButton, NumVal, NumberInput, NumberInputField, OrganizationLogo, OverflowGroup, P, PaneDivider, PaneItem, PinInput, Popover, ProgressBar, Radio, RadioGroup, RadioGroupField, ResizeHandle, ScaleFade, SearchBar, SearchBarField, Select, SelectField, Slide, SlideFade, Small, Sortable, SortableContainer, SortableItem, SortableList, Spinner, SplitPane, StatusPin, Step, StepList, StepPanel, StepStack, Steps, Switch, SwitchField, TabPanel, Table, Tabs, Tag, TagGroup, TagsInput, TextField, Textarea, TextareaField, Tiny, Toast, Toolbox, ToolboxContent, ToolboxFooter, ToolboxHeader, Tooltip, addAlpha, advancedParseFloat, camphouseLightTheme, clamp, createDebounceFunctionInstance, getChildrenWithProps, getConsistentRandomColorFromString, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
 //# sourceMappingURL=northlight.js.map