@northlight/ui 2.36.6 → 2.36.8

package/dist/es/northlight.js

@@ -1,14 +1,14 @@
-import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, extendTheme, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Flex, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, CheckboxGroup, IconButton as IconButton$1, Popover as Popover$2, Portal, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, Table as Table$2, Thead, Tr, Tbody, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Spacer, useOutsideClick, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem, theme as theme$1 } from '@chakra-ui/react';
+import { Accordion as Accordion$1, AccordionButton as AccordionButton$1, AccordionPanel as AccordionPanel$1, AccordionItem as AccordionItem$1, useInterval, useMediaQuery, useToken as useToken$1, extendTheme, Box, useMultiStyleConfig, chakra, Alert as Alert$2, AspectRatio as AspectRatio$1, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, HStack, Badge as Badge$2, Flex, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, CheckboxGroup, IconButton as IconButton$1, Popover as Popover$2, Portal, useDisclosure, useBoolean, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, SimpleGrid, SlideFade as SlideFade$1, Table as Table$2, Thead, Tr, Tbody, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, Link as Link$1, Spacer, useOutsideClick, Tooltip as Tooltip$2, VStack, Circle, Center, Fade as Fade$1, ScaleFade as ScaleFade$1, Slide as Slide$1, Collapse as Collapse$1, CloseButton as CloseButton$1, Radio as Radio$2, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress as Progress$1, Image as Image$1, ChakraProvider, Menu as Menu$2, NumberInputStepper as NumberInputStepper$1, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField as NumberInputField$1, PinInput as PinInput$2, Switch as Switch$2, TabPanel as TabPanel$1, Tabs as Tabs$2, Textarea as Textarea$2, useToast as useToast$1, AlertTitle, AlertDescription, Tab, TabList, useClipboard, Grid, GridItem, theme as theme$1 } from '@chakra-ui/react';
 export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, Box, BreadcrumbItem as Breadcrumb, BreadcrumbLink, BreadcrumbSeparator, Breadcrumb as Breadcrumbs, ButtonGroup, Card, CardBody, CardFooter, CardHeader, Center, Modal as ChakraModal, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Container, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, Mark, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderThumb, RangeSliderTrack, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableCaption, TableContainer, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
 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))
+      if (!isHtmlElementRef(ref)) {
         return;
-      if (isNil(ref == null ? void 0 : ref.current))
-        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%"
@@ -671,18 +681,18 @@ const Breadcrumb = {
   baseStyle: {
     link: {
       padding: [0.5, 1],
-      color: "primary",
-      fontWeight: "600",
-      fontSize: "semibold",
+      color: "text.default",
+      fontWeight: "semibold",
+      fontSize: "md",
       _hover: {
-        bg: "blue.50",
+        bg: "brand-alt",
         borderRadius: "base",
         textDecor: "none"
       }
     },
     separator: {
-      color: "gray.300",
-      fontSize: "semibold"
+      color: "subdued",
+      fontSize: "sm"
     }
   }
 };
@@ -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",
@@ -2358,7 +2387,7 @@ const Avatar$1 = {
         fontSize: "xs",
         fontWeight: "semibold",
         padding: sizing["0a"],
-        bgColor: color.red["500"],
+        bgColor: color.destructive,
         color: color.text.inverted,
         borderRadius: borderRadius.avatar.square,
         border: "none"
@@ -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;
 };
@@ -3344,27 +3373,27 @@ const getBgColor = (currentTheme) => {
   }
 };
 const getInvalidColorStyles = (isInvalid, isImage = true, currentTheme = "webappTheme") => ({
-  borderColor: isInvalid ? "red.500" : "gray.300",
-  bgColor: isInvalid && "red.50",
+  borderColor: isInvalid ? "border.error" : "border.default",
+  bgColor: isInvalid && "bg.error.default",
   animation: isInvalid && `500ms ${shakeAnimation} ease`,
   _hover: isImage && {
-    bgColor: isInvalid ? "red.50" : getBgColor(currentTheme),
-    borderColor: isInvalid ? "red.500" : "blue.500"
+    bgColor: isInvalid ? "bg.error.default" : getBgColor(currentTheme),
+    borderColor: isInvalid ? "border.error" : "border.brand.default"
   }
 });
 const getAiColorStyles = (isInvalid, isImage = true) => ({
-  borderColor: isInvalid ? "red.500" : "gray.300",
-  bgColor: isInvalid && "red.50",
+  borderColor: isInvalid ? "border.error" : "border.default",
+  bgColor: isInvalid && "bg.error.default",
   animation: isInvalid && `500ms ${shakeAnimation} ease`,
   _hover: isImage && {
-    bgColor: isInvalid ? "red.50" : "bg.filled",
-    borderColor: isInvalid ? "red.500" : "border.ai"
+    bgColor: isInvalid ? "bg.error.default" : "bg.filled",
+    borderColor: isInvalid ? "border.error" : "border.ai"
   }
 });
 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
@@ -3593,6 +3626,17 @@ const Popover$1 = {
   }
 };
 
+const Progress = {
+  baseStyle: ({ theme: { colors: color } }) => ({
+    track: {
+      bg: color["subdued-alt"]
+    },
+    filledTrack: {
+      bg: color.brand
+    }
+  })
+};
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Alert: Alert$1,
@@ -3634,6 +3678,7 @@ var components = /*#__PURE__*/Object.freeze({
   PaneDivider: PaneDivider$1,
   PinInput: PinInput$1,
   Popover: Popover$1,
+  Progress: Progress,
   Radio: Radio$1,
   Select: Select$1,
   Small: Small$1,
@@ -3651,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;
@@ -3670,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;
@@ -3703,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;
@@ -3775,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;
@@ -4937,7 +5016,7 @@ const AvatarGroup = (_a) => {
     { ml: spacing },
     (_child, idx) => idx > 0
   );
-  return /* @__PURE__ */ React.createElement(HStack, __spreadValues$1Y({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(HStack, { spacing: 0 }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small, { sx: { color: "blue.500" } }, "+", nbrRemainingAvatars));
+  return /* @__PURE__ */ React.createElement(HStack, __spreadValues$1Y({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(HStack, { spacing: 0 }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small, { sx: { color: "brand" } }, "+", nbrRemainingAvatars));
 };
 
 var __defProp$1X = Object.defineProperty;
@@ -4981,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;
@@ -6071,7 +6151,7 @@ var __objRest$1k = (source, exclude) => {
     }
   return target;
 };
-const FlipButton = (props) => {
+const FlipButton = forwardRef$1((props, wrapperRef) => {
   const _a = props, {
     children,
     size,
@@ -6134,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;
@@ -6607,7 +6688,7 @@ const CalendarCell = ({
       fontWeight: "medium",
       variant: isSelected ? "brand" : "ghost",
       ring: isToday && !isSelected ? "1px" : "0px",
-      ringColor: "blue.500"
+      ringColor: "brand"
     }),
     formattedDate
   ));
@@ -6924,11 +7005,11 @@ const RangeCell = ({
       type: "button",
       ref,
       borderRadius: "xs",
-      bgColor: isHighlighted ? "brand-alt" : isSelected ? "blue.500" : "transparent",
+      bgColor: isHighlighted ? "brand-alt" : isSelected ? "brand" : "transparent",
       color: isSelected ? "text.inverted" : "text.default",
       fontSize: "sm",
       ring: isToday && !isSelected ? "1px" : "0px",
-      ringColor: "blue.500",
+      ringColor: "brand",
       mx: "-1px",
       ml: isToday ? "-2px " : void 0,
       my: "0a",
@@ -6943,7 +7024,7 @@ const RangeCell = ({
         ringOffset: "1px"
       },
       _hover: {
-        bgColor: isSelected ? "blue.400" : "bg.filled",
+        bgColor: isSelected ? " background.button.brand-hover" : "bg.filled",
         _disabled: {
           bgColor: "transparent"
         }
@@ -9784,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
   );
@@ -10977,7 +11060,7 @@ const ProgressBar = forwardRef$1(
   (_a, ref) => {
     var _b = _a, { animationSlideTimeMs = animationSlideTime, sx } = _b, props = __objRest$B(_b, ["animationSlideTimeMs", "sx"]);
     return /* @__PURE__ */ React.createElement(
-      Progress,
+      Progress$1,
       __spreadValues$I({
         ref,
         width: "full",
@@ -11551,7 +11634,7 @@ const FilePicker = (_a) => {
         {
           as: onlyImageAccepted ? Image03Solid : UploadCloudSolid,
           boxSize: "32px",
-          color: isInvalid ? "red.500" : editable ? "blue.500" : "gray.300",
+          color: isInvalid ? "destructive" : editable ? "brand" : "text.subdued",
           display: isImage && !hasLoaded ? "inline-block" : "none",
           "aria-label": "file-icon-upload"
         }
@@ -11583,7 +11666,7 @@ const FilePicker = (_a) => {
         {
           sx: {
             textDecoration: "underline",
-            color: isInvalid ? "red.500" : "blue.500"
+            color: isInvalid ? "destructive" : "brand"
           },
           display: isLoading || hasLoaded ? "none" : "default"
         },
@@ -11633,7 +11716,7 @@ const FilePicker = (_a) => {
             "aria-label": "delete-file",
             onClick: confirmDelete ? deleteModal.onOpen : clearImage,
             icon: TrashFullDuo,
-            color: "red.500"
+            color: "destructive"
           }
         )
       )
@@ -11872,12 +11955,12 @@ function MultiFileUploader(_a) {
         {
           as: onlyImageAccepted ? Image03Solid : UploadCloudSolid,
           boxSize: "32px",
-          color: isInvalid ? "red.500 " : active ? "blue.500 " : "gray.300",
+          color: isInvalid ? "destructive" : active ? "brand" : "text.subdued",
           "aria-label": "image-icon-upload",
           mb: onlyImageAccepted ? "0a" : 0
         }
       ),
-      /* @__PURE__ */ React.createElement(HStack, { spacing: 1, display: isInvalid ? "none" : "flex" }, /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center" }, "Drag & drop ", onlyImageAccepted ? "images" : "files", " here or"), /* @__PURE__ */ React.createElement(Lead, { sx: { textDecoration: "underline", color: "blue.500" } }, "choose ", onlyImageAccepted ? "image" : "file")),
+      /* @__PURE__ */ React.createElement(HStack, { spacing: 1, display: isInvalid ? "none" : "flex" }, /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center" }, "Drag & drop ", onlyImageAccepted ? "images" : "files", " here or"), /* @__PURE__ */ React.createElement(Lead, { sx: { textDecoration: "underline", color: "brand" } }, "choose ", onlyImageAccepted ? "image" : "file")),
       /* @__PURE__ */ React.createElement(P, { variant: "14", textAlign: "center", alignSelf: "center", display: isInvalid ? "initial" : "none" }, errorMessage),
       /* @__PURE__ */ React.createElement(P, { variant: "14", sx: { color: "gray.400" } }, "Max file size is ", readableFileSize(maxFileSize))
     ), /* @__PURE__ */ React.createElement(
@@ -12459,7 +12542,7 @@ const Menu = (_a) => {
 const NumberInputStepper = ({
   includePercentage = false,
   enableStepperArrows = false
-}) => /* @__PURE__ */ React.createElement(NumberInputStepper$1, null, /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P, null, "%")), enableStepperArrows && /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ React.createElement(NumberInputStepper$1, null, /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(Center, { bgColor: "bg.layer", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P, null, "%")), enableStepperArrows && /* @__PURE__ */ React.createElement(HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
   Icon,
   {
     as: ChevronUpSolid,
@@ -14324,7 +14407,7 @@ const StepStack = (_a) => {
       Box,
       {
         borderRadius: "full",
-        bgColor: "blue.500",
+        bgColor: "brand",
         boxSize: "6",
         minW: "6",
         minH: "6",
@@ -14859,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