@northlight/ui 1.5.0 → 1.5.2

package/dist/es/sandbox.mjs

@@ -1,3747 +0,0 @@
-import React, { useMemo, Suspense, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, useRef, useEffect, cloneElement, memo, useState } from 'react';
-import { Switch as Switch$2, Route, Redirect, NavLink, useLocation, useHistory, BrowserRouter, Link as Link$2 } from 'react-router-dom';
-import { forwardRef, useStyleConfig, Icon as Icon$2, Text, FormLabel as FormLabel$1, VisuallyHidden, Box, Button as Button$2, IconButton as IconButton$1, useMultiStyleConfig, chakra, Table, Thead, Tbody, Tr, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, HStack, Editable, InputGroup, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, InputRightElement, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalHeader, ModalBody, Stack, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, keyframes, useToken as useToken$1, extendTheme, ChakraProvider, Switch as Switch$3, LinkOverlay, useDisclosure, Card, Grid, Flex, Link as Link$1, FormControl } from '@chakra-ui/react';
-import { CheckDuo, SearchDuo, DotsMatrixSolid, XCloseSolid, EditDuo, ZoomInDuo, ArrowCircleRightDuo, NorthlightLogoXs } from '@northlight/icons';
-import { useToken, useMultiStyleConfig as useMultiStyleConfig$1, chakra as chakra$1 } from '@chakra-ui/system';
-import { palette, WebappSkin as WebappSkin$1, typography, TottSkin as TottSkin$1, coreZIndex, coreSizing, coreSpacing, coreFontWeight, coreBoxShadow, coreFontSize, coreLineHeight, coreBorderRadius } from '@northlight/tokens';
-import { ifElse, gt, always, identity, forEach, is, trim, keys, values, equals, isNil, last, map, prop, difference, times, merge, filter, test, toLower, chain, defaultTo, head } from 'ramda';
-import { useForm, FormProvider } from 'react-hook-form';
-import { useFocusManager } from '@react-aria/focus';
-import '@react-aria/checkbox';
-import '@react-aria/radio';
-import '@react-aria/utils';
-import '@react-stately/radio';
-import '@react-stately/checkbox';
-import '@react-aria/datepicker';
-import '@react-stately/datepicker';
-import { today, isSameMonth, getWeeksInMonth } from '@internationalized/date';
-import '@react-aria/button';
-import { I18nProvider as I18nProvider$1 } from '@react-aria/i18n';
-import '@react-stately/calendar';
-import { useCalendarCell, useCalendarGrid } from '@react-aria/calendar';
-import '@chakra-ui/clickable';
-import 'framer-motion';
-import { chakraComponents, AsyncSelect } from 'chakra-react-select';
-import '@dnd-kit/core';
-import '@dnd-kit/utilities';
-import '@dnd-kit/sortable';
-import '@dnd-kit/modifiers';
-import { VariableSizeList, VariableSizeGrid } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import AvatarEditor from 'react-avatar-editor';
-import { randomColor } from '@chakra-ui/theme-tools';
-import 'react-input-mask';
-import 'react-live';
-import 'markdown-to-jsx';
-import Fuse from 'fuse.js';
-import { I18nManager, I18nContext } from '@shopify/react-i18n';
-
-const LazyPage = ({ loader, children, ...rest }) => {
-  const Component = useMemo(() => React.lazy(loader), []);
-  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement("p", null, "Loading....") }, children ? children(Component, { ...rest }) : /* @__PURE__ */ React.createElement(Component, { ...rest }));
-};
-
-const normalizePath = ({
-  basename,
-  path
-}) => basename ? `${basename}${path}` : path;
-const Routing = ({ routes, basename, fallback }) => /* @__PURE__ */ React.createElement(Switch$2, null, routes.flatMap(({ path, component, subItems = [] }) => {
-  const routePath = normalizePath({ basename, path });
-  const mainRoute = /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      key: routePath,
-      exact: true,
-      path: routePath,
-      render: (props) => /* @__PURE__ */ React.createElement(
-        LazyPage,
-        {
-          ...props,
-          loader: component
-        }
-      )
-    }
-  );
-  const subRoutes = subItems.map(({ path: subPath, component: subComponent, extraProps }) => {
-    const fullPath = `${path}${subPath}`;
-    return /* @__PURE__ */ React.createElement(
-      Route,
-      {
-        key: fullPath,
-        path: fullPath,
-        render: (props) => /* @__PURE__ */ React.createElement(
-          LazyPage,
-          {
-            ...props,
-            loader: subComponent,
-            ...extraProps
-          }
-        )
-      }
-    );
-  });
-  return [mainRoute, ...subRoutes];
-}), fallback && /* @__PURE__ */ React.createElement(Redirect, { to: fallback }));
-
-const Icon$1 = forwardRef(({
-  as: As,
-  size,
-  color,
-  boxSize,
-  ...rest
-}, ref) => {
-  const CustomIcon = As ?? (() => /* @__PURE__ */ React.createElement(Icon$2, null));
-  const styles = useStyleConfig("Icon", { size, color, boxSize });
-  return /* @__PURE__ */ React.createElement(
-    Icon$2,
-    {
-      ref,
-      sx: styles,
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(CustomIcon, null)
-  );
-});
-
-const luminosity = (hexcolor) => {
-  let color = hexcolor;
-  if (color.slice(0, 1) === "#") {
-    color = color.slice(1);
-  }
-  if (color.length === 3) {
-    color = color.split("").map((hex) => hex + hex).join("");
-  }
-  const r = parseInt(color.substring(0, 2), 16);
-  const g = parseInt(color.substring(2, 4), 16);
-  const b = parseInt(color.substring(4, 6), 16);
-  const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
-  return brightness;
-};
-
-const getContrastColor = (color) => {
-  const colorTwo = useToken("colors", "text.default");
-  const colorOne = useToken("colors", "text.inverted");
-  const colorInHex = useToken("colors", color);
-  const l1 = luminosity(colorOne);
-  const l2 = luminosity(colorTwo);
-  const threshold = (l1 + l2) / 2;
-  const brightColor = l1 > l2 ? colorOne : colorTwo;
-  const darkColor = l1 > l2 ? colorTwo : colorOne;
-  return luminosity(colorInHex) >= threshold ? darkColor : brightColor;
-};
-
-const ring = {
-  _focusVisible: {
-    outline: "none",
-    ring: "2px",
-    ringColor: "border.wcag",
-    ringOffset: "1px"
-  }
-};
-
-const getShades = (startShade, endShade) => {
-  let start;
-  let end;
-  if (!endShade) {
-    start = startShade;
-    end = startShade;
-  } else if (endShade > startShade) {
-    start = startShade;
-    end = endShade;
-  } else {
-    start = endShade;
-    end = startShade;
-  }
-  return Object.keys(palette).reduce((colors, color) => {
-    if (color === "mono")
-      return colors;
-    return colors.concat(
-      Object.keys(palette[color]).filter(
-        (value) => parseInt(value, 10) >= start && parseInt(value, 10) <= end
-      ).map((shade) => palette[color][shade])
-    );
-  }, []);
-};
-
-const createDebounceFunctionInstance = (delay) => {
-  let timeout;
-  return (fn) => (...args) => {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      fn(...args);
-    }, delay);
-  };
-};
-
-const CustomTheme = createContext("webappTheme");
-const useCurrentTheme = () => {
-  const theme = useContext(CustomTheme);
-  return theme;
-};
-
-const P$1 = ({
-  children,
-  variant = "16",
-  sx = {},
-  ...rest
-}) => {
-  const styles = useStyleConfig("P", { variant, sx });
-  return /* @__PURE__ */ React.createElement(
-    Text,
-    {
-      variant,
-      sx: styles,
-      ...rest
-    },
-    children
-  );
-};
-
-const Capitalized$1 = ({
-  children,
-  sx = {},
-  ...rest
-}) => {
-  const styles = useStyleConfig("Capitalized", { sx });
-  return /* @__PURE__ */ React.createElement(
-    Text,
-    {
-      as: "span",
-      sx: styles,
-      ...rest
-    },
-    children
-  );
-};
-
-const Label$1 = ({
-  children,
-  size = "sm",
-  sx = {},
-  ...rest
-}) => {
-  const styles = useStyleConfig("Label", { sx, size });
-  return /* @__PURE__ */ React.createElement(
-    FormLabel$1,
-    {
-      sx: styles,
-      requiredIndicator: /* @__PURE__ */ React.createElement(VisuallyHidden, null),
-      ...rest
-    },
-    children
-  );
-};
-
-ifElse(gt(0), always(0), identity);
-
-const Blinker$1 = ({
-  color = "",
-  size,
-  isBlinking = true,
-  ...rest
-}) => {
-  const styles = useStyleConfig("Blinker", { color, size, isBlinking });
-  return /* @__PURE__ */ React.createElement(Box, { sx: styles, "data-testid": "blinker-test-id", ...rest });
-};
-
-const Button$1 = forwardRef$1(
-  ({ variant = "default", children, ...rest }, ref) => /* @__PURE__ */ React.createElement(Button$2, { variant, ref, ...rest }, children)
-);
-
-const shouldTrim = (value) => is(Array, value) ? values : identity;
-const trimFormValues = (obj) => {
-  const newObj = obj;
-  forEach((property) => {
-    const value = obj[property];
-    if (is(Object, value)) {
-      const format = shouldTrim(value);
-      newObj[property] = format(trimFormValues(value));
-    }
-    if (is(String, value)) {
-      newObj[property] = trim(value);
-    }
-  }, keys(obj));
-  return newObj;
-};
-
-forwardRef$1(({
-  initialValues,
-  onSubmit,
-  children,
-  validate,
-  formSettings = { mode: "onChange" },
-  methods = void 0,
-  enableReinitialize = false,
-  shouldTrim = true,
-  ...rest
-}, ref) => {
-  const customResolver = (values, _context, _options) => ({
-    values,
-    errors: validate(values)
-  });
-  const newMethods = methods || useForm({
-    defaultValues: initialValues,
-    resolver: validate ? customResolver : void 0,
-    ...formSettings
-  });
-  useImperativeHandle(ref, always(newMethods), []);
-  if (enableReinitialize) {
-    const initalValuesImage = useRef({});
-    useEffect(() => {
-      if (!equals(initalValuesImage.current, initialValues)) {
-        newMethods?.reset(initialValues);
-        initalValuesImage.current = initialValues;
-      }
-    }, [initialValues]);
-  }
-  const formatValues = (values) => {
-    if (!shouldTrim) {
-      return values;
-    }
-    return trimFormValues(values);
-  };
-  const handleSubmit = newMethods.formState.isValid ? newMethods.handleSubmit(
-    (values) => onSubmit(formatValues(values), newMethods)
-  ) : (e) => {
-    newMethods.trigger();
-    e.preventDefault();
-  };
-  return /* @__PURE__ */ React.createElement(FormProvider, { ...newMethods, ...rest }, /* @__PURE__ */ React.createElement("form", { style: { width: "100%" }, onSubmit: handleSubmit }, typeof children === "function" ? children(newMethods) : children));
-});
-
-const FormLabel = ({
-  children: label,
-  ...rest
-}) => /* @__PURE__ */ React.createElement(
-  Label$1,
-  {
-    size: "sm",
-    sx: {
-      width: "80%",
-      maxWidth: "45ch",
-      marginBottom: 1,
-      marginInlineEnd: 3
-    },
-    requiredIndicator: void 0,
-    ...rest
-  },
-  label
-);
-
-const useArrowFocus = (columns) => {
-  const {
-    focusNext: next,
-    focusPrevious: previous,
-    focusFirst,
-    focusLast
-  } = useFocusManager();
-  const defaultOpts = {
-    ArrowRight: {
-      wrap: true,
-      repeat: 1
-    },
-    ArrowLeft: {
-      wrap: true,
-      repeat: 1
-    },
-    ArrowDown: {
-      wrap: false,
-      repeat: columns
-    },
-    ArrowUp: {
-      wrap: false,
-      repeat: columns
-    }
-  };
-  const focusPrevious = ({
-    repeat,
-    wrap
-  } = defaultOpts.ArrowLeft) => {
-    for (let i = 0; i < repeat; i += 1) {
-      previous({ wrap });
-    }
-  };
-  const focusNext = ({
-    repeat,
-    wrap
-  } = defaultOpts.ArrowRight) => {
-    for (let i = 0; i < repeat; i += 1) {
-      next({ wrap });
-    }
-  };
-  const defaultArrows = (e) => {
-    switch (e.key) {
-      case "ArrowRight":
-        focusNext(defaultOpts.ArrowRight);
-        break;
-      case "ArrowLeft":
-        focusPrevious(defaultOpts.ArrowLeft);
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        focusNext(defaultOpts.ArrowDown);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        focusPrevious(defaultOpts.ArrowUp);
-        break;
-    }
-  };
-  return {
-    defaultArrows,
-    focusPrevious,
-    focusNext,
-    focusFirst,
-    focusLast
-  };
-};
-
-const useSelectCallbacks = ({
-  onChange,
-  onAdd,
-  onRemove,
-  isMulti,
-  value
-}) => {
-  const items = useRef(value);
-  const handleChange = (val, event) => {
-    onChange(val, event);
-    if (!isMulti && !isNil(value)) {
-      onAdd(val.value);
-    } else if (val.length > items.current.length) {
-      onAdd(last(val)?.value);
-    } else {
-      const removedItems = map(
-        prop("value"),
-        difference(items.current, val)
-      );
-      onRemove(removedItems.length === 1 ? removedItems[0] : removedItems);
-    }
-    items.current = val;
-  };
-  return handleChange;
-};
-
-const IconButton = forwardRef$1(({
-  variant = "default",
-  icon,
-  "aria-label": ariaLabel,
-  children,
-  ...rest
-}, ref) => {
-  const IconComponent = icon ?? children;
-  const IconWithSize = cloneElement(IconComponent, { size: rest.size });
-  return /* @__PURE__ */ React.createElement(
-    IconButton$1,
-    {
-      variant,
-      icon: IconWithSize,
-      "aria-label": ariaLabel,
-      ref,
-      ...rest
-    }
-  );
-});
-
-const columns = 5;
-getShades(100, 500);
-getShades(500);
-
-forwardRef$1(({
-  color,
-  onClick,
-  size,
-  selected = false
-}, ref) => {
-  if (!color)
-    return /* @__PURE__ */ React.createElement(Box, null);
-  const { defaultArrows, focusPrevious, focusNext } = useArrowFocus(columns);
-  const onKeyDown = (e) => {
-    switch (e.key) {
-      case "PageUp":
-        e.preventDefault();
-        focusPrevious({ wrap: false, repeat: columns * 5 });
-        break;
-      case "PageDown":
-        e.preventDefault();
-        focusNext({ wrap: false, repeat: columns * 5 });
-        break;
-      default:
-        defaultArrows(e);
-        break;
-    }
-  };
-  const { colorButton } = useMultiStyleConfig("ColorPicker", { size });
-  return /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      bg: color,
-      ref,
-      onKeyDown,
-      "aria-label": `select-${color}`,
-      onClick,
-      sx: colorButton,
-      icon: /* @__PURE__ */ React.createElement(Icon$1, { as: CheckDuo, boxSize: selected ? void 0 : "0" }),
-      color: getContrastColor(color)
-    }
-  );
-});
-
-createContext(null);
-
-forwardRef$1(
-  ({ isInvalid, isDisabled, children, variant, ...rest }, ref) => {
-    const { styledField } = useMultiStyleConfig("DatePicker", { variant });
-    return /* @__PURE__ */ React.createElement(
-      Box,
-      {
-        ...rest,
-        ref,
-        "aria-invalid": isInvalid,
-        "aria-disabled": isDisabled,
-        display: "flex",
-        alignItems: "center",
-        h: 10,
-        __css: styledField
-      },
-      children
-    );
-  }
-);
-
-const CalendarCell = ({
-  state,
-  date,
-  currentMonth
-}) => {
-  const ref = useRef(null);
-  const { cellProps, buttonProps, isSelected, formattedDate } = useCalendarCell(
-    { date },
-    state,
-    ref
-  );
-  const isToday = date.compare(today(state.timeZone)) === 0;
-  const isOutsideMonth = !isSameMonth(currentMonth, date);
-  return /* @__PURE__ */ React.createElement(chakra.td, { ...cellProps }, /* @__PURE__ */ React.createElement(
-    Button$1,
-    {
-      ...buttonProps,
-      ref,
-      borderRadius: "xs",
-      boxSize: 8,
-      hidden: isOutsideMonth,
-      size: "sm",
-      fontWeight: "medium",
-      variant: isSelected ? "brand" : "ghost",
-      ring: isToday && !isSelected ? "1px" : "0px",
-      ringColor: "blue.500"
-    },
-    formattedDate
-  ));
-};
-
-const DayLabels = memo(({
-  weekDays
-}) => {
-  const { dayLabel } = useMultiStyleConfig$1("Calendar");
-  const weekDaysWithIds = weekDays.map((day, i) => ({ label: day, _id: i }));
-  return /* @__PURE__ */ React.createElement(chakra$1.tr, null, weekDaysWithIds.map(({ label, _id }) => /* @__PURE__ */ React.createElement(chakra$1.th, { key: _id, __css: dayLabel }, label)));
-});
-
-memo(
-  ({ state, locale, ...rest }) => {
-    const startDate = state.visibleRange.start;
-    const { gridProps, headerProps, weekDays } = useCalendarGrid(rest, state);
-    const weeksInMonth = getWeeksInMonth(startDate, locale);
-    return /* @__PURE__ */ React.createElement(Table, { variant: "unstyled", ...gridProps }, /* @__PURE__ */ React.createElement(Thead, { ...headerProps }, /* @__PURE__ */ React.createElement(DayLabels, { weekDays })), /* @__PURE__ */ React.createElement(Tbody, null, times((weekIndex) => /* @__PURE__ */ React.createElement(Tr, { key: weekIndex }, state.getDatesInWeek(weekIndex, startDate).map(
-      (date) => date ? /* @__PURE__ */ React.createElement(
-        CalendarCell,
-        {
-          key: date.day,
-          state,
-          date,
-          currentMonth: startDate
-        }
-      ) : /* @__PURE__ */ React.createElement(chakra.td, null)
-    )), weeksInMonth)));
-  }
-);
-
-`1px solid ${palette.gray["100"]}`;
-
-const searchBarStyles = (sx) => merge({
-  container: (provided) => ({
-    ...provided,
-    width: "100%",
-    color: "text.default",
-    alignSelf: "center"
-  }),
-  option: (provided, state) => ({
-    ...provided,
-    background: state.isFocused && "background.select.option-focus",
-    _active: {
-      background: "background.select.option-active"
-    }
-  }),
-  valueContainer: (provided) => ({
-    ...provided,
-    paddingInlineStart: "padding-inline.select.default"
-  }),
-  downChevron: (provided) => ({
-    ...provided,
-    color: "icon.select.default"
-  }),
-  placeholder: (provided) => ({
-    ...provided,
-    color: "text.select.placeholder"
-  }),
-  multiValue: (provided, state) => {
-    const background = state.data.isFixed ? "background.select.option-disabled" : state.data.color ?? provided.bgColor;
-    return {
-      ...provided,
-      bgColor: background,
-      color: getContrastColor(background),
-      ...sx.multiValue
-    };
-  },
-  menuList: (provided) => ({
-    ...provided,
-    bgColor: "background.default"
-  })
-}, sx);
-
-function getComponents() {
-  return {
-    DropdownIndicator: (props) => props.selectProps.icon ? /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, { ...props }, /* @__PURE__ */ React.createElement(Icon$1, { as: props.selectProps.icon })) : /* @__PURE__ */ React.createElement(chakraComponents.DropdownIndicator, { ...props }),
-    Option: (props) => props.selectProps.customOption ? /* @__PURE__ */ React.createElement(chakraComponents.Option, { ...props }, props.selectProps.customOption(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.Option, { ...props }),
-    MultiValueContainer: (props) => props.selectProps.customTag ? /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, { ...props }, props.selectProps.customTag(props.data)) : /* @__PURE__ */ React.createElement(chakraComponents.MultiValueContainer, { ...props })
-  };
-}
-
-const SearchBar = forwardRef$1(
-  ({
-    defaultOptions = [],
-    isMulti = false,
-    customOption = null,
-    customTag = null,
-    sx = {},
-    debouncedWaitTime = 200,
-    loadOptions: getCustomOptions = null,
-    clearInputOnSelect = true,
-    closeMenuOnSelect = false,
-    onChange = identity,
-    onAdd = identity,
-    onRemove = identity,
-    "data-testid": testId,
-    value,
-    onSearchInputChange = identity,
-    icon = SearchDuo,
-    ...rest
-  }, ref) => {
-    const [filtered, setFiltered] = useState(defaultOptions);
-    const [filterInput, setFilterInput] = useState("");
-    const debounceFunction = useMemo(
-      () => createDebounceFunctionInstance(debouncedWaitTime),
-      [debouncedWaitTime]
-    );
-    const handleChange = useSelectCallbacks({
-      onChange,
-      onAdd,
-      onRemove,
-      isMulti,
-      value: is(Array, value) ? value : []
-    });
-    const customComponents = getComponents();
-    const simpleFilter = (query) => filter(
-      (option) => test(new RegExp(toLower(query), "g"), toLower(option.label)),
-      defaultOptions
-    );
-    const getOptions = async (query) => {
-      const newOptions = getCustomOptions ? await getCustomOptions(query) : simpleFilter(query);
-      setFiltered(newOptions);
-      return newOptions;
-    };
-    const loadOptions = debounceFunction(async (query, callback) => {
-      const newOptions = await getOptions(query);
-      callback(newOptions);
-      return [];
-    });
-    const resetFiltered = (v, { action }) => {
-      if (clearInputOnSelect || action !== "set-value") {
-        setFilterInput(v);
-        onSearchInputChange(v);
-        if (v === "") {
-          setFiltered(defaultOptions);
-        }
-      }
-    };
-    return /* @__PURE__ */ React.createElement(Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
-      AsyncSelect,
-      {
-        cacheOptions: true,
-        defaultOptions: filtered,
-        loadOptions,
-        onChange: handleChange,
-        placeholder: "Search...",
-        chakraStyles: searchBarStyles(sx),
-        isMulti,
-        useBasicStyles: true,
-        selectedOptionStyle: "check",
-        hideSelectedOptions: false,
-        closeMenuOnSelect,
-        isClearable: false,
-        onInputChange: resetFiltered,
-        inputValue: filterInput,
-        customOption,
-        customTag,
-        icon,
-        components: customComponents,
-        ref,
-        value,
-        ...rest
-      }
-    ));
-  }
-);
-
-const Tag$1 = forwardRef$1(({
-  children,
-  variant = "solid",
-  bgColor,
-  colorScheme,
-  ...rest
-}, ref) => /* @__PURE__ */ React.createElement(
-  Tag$2,
-  {
-    bgColor,
-    colorScheme,
-    ref,
-    variant,
-    ...rest
-  },
-  children
-));
-
-forwardRef$1(
-  ({
-    size = "md",
-    isDragging,
-    itemLabel = "Drag Me",
-    bgColor,
-    ...rest
-  }, ref) => /* @__PURE__ */ React.createElement(
-    Tag$1,
-    {
-      ref,
-      cursor: isDragging ? "grabbing" : "grab",
-      bgColor: bgColor || (isDragging ? "blue.200" : void 0),
-      size,
-      minW: "max-content",
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(TagLabel, null, itemLabel),
-    /* @__PURE__ */ React.createElement(TagRightIcon, null, /* @__PURE__ */ React.createElement(Icon$1, { as: DotsMatrixSolid }))
-  )
-);
-
-forwardRef$1(({
-  itemCount,
-  itemSize,
-  direction = "column",
-  children,
-  width,
-  height,
-  overscanCount = 0,
-  initialScrollOffset,
-  ...rest
-}, ref) => /* @__PURE__ */ React.createElement(AutoSizer, null, ({ width: autoWidth, height: autoHeight }) => /* @__PURE__ */ React.createElement(
-  VariableSizeList,
-  {
-    itemCount,
-    itemSize: typeof itemSize === "number" ? (_index) => itemSize : itemSize,
-    height: height ?? autoHeight,
-    width: width ?? autoWidth,
-    layout: direction === "column" ? "vertical" : "horizontal",
-    initialScrollOffset,
-    overscanCount,
-    ref,
-    ...rest
-  },
-  ({ style, index }) => /* @__PURE__ */ React.createElement("div", { style }, typeof children === "function" ? children(index) : children)
-)));
-
-forwardRef$1(({
-  columns,
-  rows,
-  columnSize,
-  rowSize,
-  children,
-  width,
-  height,
-  overscanRowCount = 0,
-  overscanColumnCount = 0,
-  ...rest
-}, ref) => /* @__PURE__ */ React.createElement(AutoSizer, null, ({ width: autoWidth, height: autoHeight }) => /* @__PURE__ */ React.createElement(
-  VariableSizeGrid,
-  {
-    rowCount: rows,
-    columnCount: columns,
-    columnWidth: typeof columnSize === "number" ? (_index) => columnSize : columnSize,
-    rowHeight: typeof rowSize === "number" ? (_index) => rowSize : rowSize,
-    height: height ?? autoHeight,
-    width: width ?? autoWidth,
-    overscanRowCount,
-    overscanColumnCount,
-    ref,
-    ...rest
-  },
-  ({ style, rowIndex, columnIndex }) => /* @__PURE__ */ React.createElement("div", { style }, typeof children === "function" ? children(rowIndex, columnIndex) : children)
-)));
-
-const EditableControls = ({ size }) => {
-  const {
-    getSubmitButtonProps,
-    getCancelButtonProps
-  } = useEditableControls();
-  const { onEdit, isEditing } = useEditableState();
-  const { button, icon, controls } = useMultiStyleConfig("EditableText", { size, isEditing });
-  return /* @__PURE__ */ React.createElement(HStack, { spacing: 1, sx: controls }, isEditing ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      "aria-label": "Cancel",
-      sx: button,
-      variant: "danger",
-      ...getCancelButtonProps()
-    },
-    /* @__PURE__ */ React.createElement(Icon$1, { sx: icon, as: XCloseSolid })
-  ), /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      "aria-label": "Save",
-      sx: button,
-      variant: "success",
-      ...getSubmitButtonProps()
-    },
-    /* @__PURE__ */ React.createElement(Icon$1, { sx: icon, as: CheckDuo })
-  )) : /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      "aria-label": "Edit",
-      variant: "ghost",
-      sx: button,
-      onClick: onEdit
-    },
-    /* @__PURE__ */ React.createElement(Icon$1, { sx: icon, as: EditDuo })
-  ));
-};
-
-const EditableText$1 = ({
-  size = "md",
-  value: inputValue,
-  onSubmit,
-  leftItem,
-  ...rest
-}) => {
-  const [value, setValue] = useState(inputValue);
-  const { input, preview } = useMultiStyleConfig("EditableText", { size });
-  useEffect(() => {
-    setValue(inputValue);
-  }, [inputValue]);
-  return /* @__PURE__ */ React.createElement(
-    Editable,
-    {
-      isPreviewFocusable: true,
-      selectAllOnFocus: false,
-      value,
-      onChange: (newValue) => setValue(newValue),
-      onSubmit,
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(InputGroup, { size }, leftItem && /* @__PURE__ */ React.createElement(InputLeftElement, null, leftItem), /* @__PURE__ */ React.createElement(
-      Input$1,
-      {
-        as: EditablePreview,
-        sx: preview
-      }
-    ), /* @__PURE__ */ React.createElement(
-      Input$1,
-      {
-        as: EditableInput,
-        size,
-        sx: input
-      }
-    ), /* @__PURE__ */ React.createElement(InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React.createElement(EditableControls, { size })))
-  );
-};
-
-const Modal$1 = ({
-  isCentered = true,
-  children,
-  ...rest
-}) => /* @__PURE__ */ React.createElement(
-  Modal$2,
-  {
-    isCentered,
-    scrollBehavior: "inside",
-    motionPreset: "slideInBottom",
-    ...rest
-  },
-  /* @__PURE__ */ React.createElement(ModalOverlay, null),
-  /* @__PURE__ */ React.createElement(ModalContent, { "data-testid": "modal-test-id" }, /* @__PURE__ */ React.createElement(ModalCloseButton, { "data-testid": "modal-test-button-id" }), children)
-);
-
-forwardRef$1(({
-  fileName,
-  setFileName,
-  isOpen,
-  onClose,
-  image = "",
-  handleCrop,
-  isImage,
-  canEditFileName = true,
-  canCropImage = false,
-  ...rest
-}, ref) => {
-  const [zoomLevel, setZoomLevel] = useState(1);
-  const [position, setPosition] = useState({ x: 0.5, y: 0.5 });
-  const handleClose = () => {
-    setZoomLevel(1);
-    onClose();
-  };
-  return /* @__PURE__ */ React.createElement(
-    Modal$1,
-    {
-      isOpen,
-      onClose,
-      closeOnOverlayClick: false,
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(ModalHeader, null, "Edit ", isImage ? "image" : "file"),
-    /* @__PURE__ */ React.createElement(
-      ModalBody,
-      {
-        display: "flex",
-        justifyContent: "start",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 4,
-        minH: "300px"
-      },
-      /* @__PURE__ */ React.createElement(Stack, { display: isImage && canCropImage ? "inherit" : "none" }, /* @__PURE__ */ React.createElement(
-        AvatarEditor,
-        {
-          ref,
-          image: image || "",
-          onPositionChange: (pos) => setPosition(pos),
-          position,
-          width: 250,
-          height: 250,
-          border: 50,
-          color: [255, 255, 255, 0.7],
-          scale: zoomLevel,
-          rotate: 0
-        }
-      ), /* @__PURE__ */ React.createElement(HStack, { w: "90%" }, /* @__PURE__ */ React.createElement(FormLabel, null, "Zoom"), /* @__PURE__ */ React.createElement(
-        Slider,
-        {
-          "aria-label": "zoom",
-          defaultValue: zoomLevel,
-          maxW: "50%",
-          min: 0.1,
-          step: 0.05,
-          max: 10,
-          onChange: (value) => setZoomLevel(value)
-        },
-        /* @__PURE__ */ React.createElement(SliderTrack, null, /* @__PURE__ */ React.createElement(SliderFilledTrack, null)),
-        /* @__PURE__ */ React.createElement(SliderThumb, { boxSize: 6 }, /* @__PURE__ */ React.createElement(Icon$1, { as: ZoomInDuo }))
-      ))),
-      canEditFileName && /* @__PURE__ */ React.createElement(Stack, { w: "90%", direction: isImage ? "row" : "column", pt: 2 }, /* @__PURE__ */ React.createElement(FormLabel, null, "Name the file:"), /* @__PURE__ */ React.createElement(Box, { maxW: "50%" }, /* @__PURE__ */ React.createElement(EditableText$1, { onSubmit: (v) => setFileName(v), value: fileName, size: "sm" })))
-    ),
-    /* @__PURE__ */ React.createElement(ModalFooter, null, /* @__PURE__ */ React.createElement(HStack, null, /* @__PURE__ */ React.createElement(Button$1, { variant: "danger", onClick: handleClose }, "Cancel"), /* @__PURE__ */ React.createElement(Button$1, { variant: "success", onClick: handleCrop }, "Save")))
-  );
-});
-
-const scrollbarStyles = {
-  "::-webkit-scrollbar": {
-    width: "8px",
-    height: "8px"
-  },
-  "::-webkit-scrollbar-track": {
-    background: "background.scrollbar.track"
-  },
-  "::-webkit-scrollbar-thumb": {
-    borderRadius: "scrollbar.thumb",
-    border: "2px solid",
-    borderColor: "border.scrollbar.thumb",
-    backgroundClip: "padding-box !important",
-    background: "background.scrollbar.thumb"
-  },
-  "::-webkit-scrollbar-thumb:hover": {
-    borderRadius: "scrollbar.thumb",
-    border: "1px solid ",
-    borderColor: "border.scrollbar.thumb",
-    backgroundClip: "padding-box !important",
-    background: "background.scrollbar.thumb"
-  }
-};
-
-const Breadcrumb = {
-  parts: ["link", "separator"],
-  baseStyle: {
-    link: {
-      padding: [0.5, 1],
-      color: "primary",
-      fontWeight: "600",
-      fontSize: "semibold",
-      _hover: {
-        bg: "blue.50",
-        borderRadius: "base",
-        textDecor: "none"
-      }
-    },
-    separator: {
-      color: "gray.300",
-      fontSize: "semibold"
-    }
-  }
-};
-
-const Button = {
-  sizes: {
-    xs: ({ theme: { sizes: sizing, space: spacing } }) => ({
-      height: sizing.button.xs,
-      minWidth: sizing.button.xs,
-      paddingInlineStart: spacing["padding-inline"].button.xs,
-      paddingInlineEnd: spacing["padding-inline"].button.xs
-    }),
-    sm: ({ theme: { sizes: sizing, space: spacing } }) => ({
-      height: sizing.button.sm,
-      minWidth: sizing.button.sm,
-      paddingInlineStart: spacing["padding-inline"].button.md,
-      paddingInlineEnd: spacing["padding-inline"].button.md
-    }),
-    md: ({ theme: { sizes: sizing, space: spacing } }) => ({
-      height: sizing.button.md,
-      minWidth: sizing.button.md,
-      paddingInlineStart: spacing["padding-inline"].button.md,
-      paddingInlineEnd: spacing["padding-inline"].button.md
-    }),
-    lg: ({ theme: { sizes: sizing, space: spacing } }) => ({
-      height: sizing.button.lg,
-      minWidth: sizing.button.lg,
-      paddingInlineStart: spacing["padding-inline"].button.lg,
-      paddingInlineEnd: spacing["padding-inline"].button.lg
-    })
-  },
-  baseStyle: ({ theme: { colors: color, radii: borderRadius } }) => ({
-    color: color.text.default,
-    borderRadius: borderRadius.button.default,
-    _focusVisible: {
-      ring: "2px",
-      ringColor: color.border.wcag,
-      ringOffset: "1px"
-    }
-  }),
-  variants: {
-    default: ({ theme: { colors: color } }) => ({
-      bgColor: color.background.button.default,
-      _hover: {
-        bgColor: color.background.button["default-hover"]
-      },
-      _active: {
-        bgColor: color.background.button["default-active"]
-      }
-    }),
-    danger: ({ theme: { colors: color } }) => ({
-      bgColor: color.background.button.danger,
-      color: color.text.button.danger,
-      _hover: {
-        bg: color.background.button["danger-hover"],
-        _disabled: {
-          bgColor: color.background.button.danger
-        }
-      },
-      _active: {
-        bgColor: color.background.button["danger-active"]
-      }
-    }),
-    success: ({ theme: { colors: color } }) => ({
-      bgColor: color.background.button.success,
-      _hover: {
-        bg: color.background.button["success-hover"],
-        _disabled: {
-          bgColor: color.background.button.success
-        }
-      },
-      _active: {
-        bgColor: color.background.button["success-active"]
-      }
-    }),
-    brand: ({ theme: { colors: color } }) => ({
-      color: color.text.inverted,
-      bgColor: color.background.button.brand,
-      _hover: {
-        bg: color.background.button["brand-hover"],
-        _disabled: {
-          bgColor: color.background.button.brand
-        }
-      },
-      _active: {
-        bgColor: color.background.button["brand-active"]
-      }
-    }),
-    link: ({ theme: { colors: color } }) => ({
-      textDecoration: "underline",
-      color: color.text.button.link,
-      bgColor: color.background.button.link,
-      _hover: {
-        color: color.text.button["link-hover"],
-        bgColor: color.background.button["link-hover"]
-      },
-      _active: {
-        color: color.text.button["link-hover"],
-        bgColor: color.background.button["link-active"]
-      }
-    }),
-    ghost: ({ theme: { colors: color } }) => ({
-      color: color.text.default,
-      bgColor: color.background.button.ghost,
-      _hover: {
-        bg: color.background.button["ghost-hover"],
-        _disabled: {
-          bgColor: color.background.button.ghost
-        }
-      },
-      _active: {
-        bgColor: color.background.button["ghost-active"]
-      }
-    })
-  },
-  defaultProps: {
-    size: "md"
-  }
-};
-
-const pulseRing = keyframes`
-0% {
-  transform: scale(0.33);
-}
-30% {
-  transform: scale(0.66);
-},
-40%,
-50% {
-  opacity: 0;
-}
-100% {
-  opacity: 0;
-}
-`;
-const Blinker = {
-  baseStyle: ({ theme: { colors: palette }, color, isBlinking }) => ({
-    position: "relative",
-    borderRadius: "50%",
-    bgColor: color === "" ? palette.blue["500"] : color,
-    _before: isBlinking ? {
-      content: "''",
-      position: "absolute",
-      display: "block",
-      width: "300%",
-      height: "300%",
-      marginLeft: "-100%",
-      marginTop: "-100%",
-      borderRadius: "50%",
-      bgColor: color === "" ? "blue.500" : color,
-      animation: `2.25s ${pulseRing} cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite`,
-      zIndex: "base"
-    } : {}
-  }),
-  sizes: {
-    "2xs": ({ theme: { sizes: sizing } }) => ({
-      height: sizing.blinker["2xs"],
-      width: sizing.blinker["2xs"]
-    }),
-    xs: ({ theme: { sizes: sizing } }) => ({
-      height: sizing.blinker.xs,
-      width: sizing.blinker.xs
-    }),
-    sm: ({ theme: { sizes: sizing } }) => ({
-      height: sizing.blinker.sm,
-      width: sizing.blinker.sm
-    }),
-    md: ({ theme: { sizes: sizing } }) => ({
-      height: sizing.blinker.md,
-      width: sizing.blinker.md
-    }),
-    lg: ({ theme: { sizes: sizing } }) => ({
-      height: sizing.blinker.lg,
-      width: sizing.blinker.lg
-    })
-  },
-  defaultProps: {
-    size: "md",
-    color: "blue.500"
-  }
-};
-
-const Checkbox = {
-  parts: ["control", "label"],
-  sizes: {
-    sm: {
-      control: {
-        fontSize: 5
-      }
-    },
-    md: {
-      control: {
-        fontSize: 7
-      }
-    },
-    lg: {
-      control: {
-        fontSize: 8
-      }
-    }
-  },
-  baseStyle: ({ theme: { colors: color, opacity } }) => ({
-    control: {
-      borderColor: color.border.checkbox.default,
-      bg: color.background.checkbox.default,
-      borderWidth: 2,
-      _checked: {
-        borderColor: color.border.checkbox.checked,
-        bg: color.background.checkbox.checked,
-        _hover: {
-          borderColor: color.border.checkbox.checked,
-          bg: color.background.checkbox.checked
-        }
-      },
-      _invalid: {
-        borderColor: color.border.checkbox.error,
-        bg: color.background.checkbox.default,
-        _checked: {
-          bg: color.background.checkbox.error
-        },
-        _hover: {
-          borderColor: color.border.checkbox.error,
-          bg: color.background.checkbox.default
-        }
-      },
-      _focusVisible: {
-        ring: "2px",
-        ringColor: color.border.wcag,
-        ringOffset: "1px"
-      },
-      _hover: {
-        borderColor: color.border.checkbox["default-hover"],
-        bg: color.background.checkbox.default
-      },
-      _disabled: {
-        borderColor: color.border.checkbox.disabled,
-        bg: color.background.checkbox.disabled,
-        opacity: opacity.checkbox.disabled,
-        _checked: {
-          borderColor: color.border.checkbox.checked,
-          bg: color.background.checkbox.checked,
-          opacity: opacity.checkbox.disabled,
-          color: "white",
-          _hover: {
-            borderColor: color.border.checkbox.checked,
-            bg: color.background.checkbox.checked,
-            opacity: opacity.checkbox.disabled
-          }
-        },
-        _hover: {
-          borderColor: color.border.checkbox.disabled,
-          bg: color.background.checkbox.disabled,
-          opacity: opacity.checkbox.disabled
-        }
-      }
-    }
-  }),
-  variants: {
-    default: ({ theme: { radii: borderRadius } }) => ({
-      control: {
-        borderRadius: borderRadius.checkbox.default
-      }
-    }),
-    rounded: ({ theme: { radii: borderRadius } }) => ({
-      control: {
-        borderRadius: borderRadius.checkbox.full
-      }
-    })
-  }
-};
-
-const Input = {
-  parts: ["field", "addon"],
-  baseStyle: ({ theme: { colors: color } }) => ({
-    field: {
-      color: color.text.default,
-      _placeholder: {
-        color: color.text.input.placeholder,
-        opacity: 1
-      }
-    }
-  }),
-  variants: {
-    outline: ({ theme: {
-      colors: color,
-      space: spacing,
-      radii: borderRadius,
-      borders: borderWidth,
-      opacity
-    } }) => ({
-      field: {
-        paddingInlineStart: spacing["padding-inline"].input.default,
-        paddingInlineEnd: spacing["padding-inline"].input.default,
-        bgColor: color.background.input["outline-default"],
-        borderRadius: borderRadius.input.outline,
-        borderWidth: borderWidth.input.default,
-        borderColor: color.border.input.default,
-        _readOnly: {
-          _focusVisible: {
-            borderColor: color.border.input.readonly
-          },
-          _hover: {
-            borderColor: color.border.input.readonly
-          }
-        },
-        _focusVisible: {
-          bgColor: color.background.input["outline-focus"],
-          borderColor: color.border.input.focus,
-          _invalid: {
-            boxShadow: `0 0 0 1px ${color.border.input.error}`,
-            bgColor: color.background.input["outline-error"],
-            borderColor: color.border.input.error
-          }
-        },
-        _hover: {
-          bgColor: color.background.input["outline-hover"],
-          borderColor: color.border.input["default-hover"]
-        },
-        _invalid: {
-          bgColor: color.background.input["outline-error"],
-          borderColor: color.border.input.error
-        },
-        _disabled: {
-          bgColor: color.background.input["outline-disabled"],
-          borderColor: color.border.input.disabled,
-          opacity: opacity.input.disabled
-        }
-      },
-      addon: {
-        border: "none",
-        background: "none",
-        color: color.text.default
-      }
-    }),
-    filled: ({ theme: {
-      colors: color,
-      space: spacing,
-      radii: borderRadius,
-      borders: borderWidth,
-      opacity
-    } }) => ({
-      field: {
-        paddingInlineStart: spacing["padding-inline"].input.default,
-        paddingInlineEnd: spacing["padding-inline"].input.default,
-        borderRadius: borderRadius.input.filled,
-        borderWidth: borderWidth.input.default,
-        bgColor: color.background.input["filled-default"],
-        _readOnly: {
-          _focusVisible: {
-            borderColor: color.border.input.readonly
-          },
-          _hover: {
-            bgColor: color.background.input["filled-default"]
-          }
-        },
-        _hover: {
-          bgColor: color.background.input["filled-hover"]
-        },
-        _focusVisible: {
-          boxShadow: `0 0 0 1px ${color.border.input.focus}`,
-          borderColor: color.border.input.focus,
-          bgColor: color.background.input["filled-focus"],
-          _readOnly: {
-            bgColor: color.background.input["filled-default"]
-          },
-          _invalid: {
-            boxShadow: `0 0 0 1px ${color.border.input.error}`,
-            bgColor: color.background.input["outline-error"],
-            borderColor: color.border.input.error
-          }
-        },
-        _invalid: {
-          boxShadow: `0 0 0 1px ${color.border.input.error}`,
-          bgColor: color.background.input["filled-error"],
-          borderColor: color.border.input.error
-        },
-        _disabled: {
-          bgColor: color.background.input["filled-disabled"],
-          borderColor: color.border.input.disabled,
-          opacity: opacity.input.disabled
-        }
-      }
-    }),
-    flushed: ({ theme: {
-      colors: color,
-      space: spacing,
-      radii: borderRadius,
-      borders: borderWidth,
-      opacity
-    } }) => ({
-      field: {
-        paddingInlineStart: spacing["padding-inline"].input.flushed,
-        paddingInlineEnd: spacing["padding-inline"].input.flushed,
-        bgColor: color.background.input["flushed-default"],
-        borderRadius: borderRadius.input.flushed,
-        borderBottomWidth: borderWidth.input.default,
-        borderBottomColor: color.border.input.default,
-        _readOnly: {
-          _focusVisible: {
-            borderColor: color.border.input.readonly
-          },
-          _hover: {
-            borderColor: color.border.input.readonly
-          }
-        },
-        _hover: {
-          bgColor: color.background.input["flushed-hover"],
-          borderColor: color.border.input["default-hover"]
-        },
-        _focusVisible: {
-          _hover: {
-            boxShadow: `0 1px 0 0 ${color.border.input.focus}`,
-            borderColor: color.border.input.focus
-          },
-          _invalid: {
-            boxShadow: `0 1px 0 0 ${color.border.input.error}`,
-            borderColor: color.border.input.error,
-            bgColor: color.background.input["flushed-error"]
-          }
-        },
-        _invalid: {
-          _hover: {
-            boxShadow: `0 1px 0 0 ${color.border.input.error}`,
-            borderColor: color.border.input.error
-          },
-          bgColor: color.background.input["flushed-error"]
-        },
-        _disabled: {
-          bgColor: color.background.input["flushed-disabled"],
-          borderColor: color.border.input.disabled,
-          opacity: opacity.input.disabled
-        }
-      }
-    })
-  }
-};
-
-const PinInput = {
-  variants: {
-    outline: ({ theme: {
-      radii: borderRadius,
-      borders: borderWidth,
-      colors: color,
-      space: spacing,
-      opacity
-    } }) => ({
-      borderColor: color.border.input.default,
-      borderRadius: borderRadius.input.outline,
-      borderWidth: borderWidth.input.default,
-      bg: color.background.input["outline-default"],
-      color: color.text.default,
-      paddingInline: spacing["padding-inline"].input.default,
-      _hover: {
-        bg: color.background.input["outline-hover"],
-        borderColor: color.border.input["default-hover"]
-      },
-      _focus: {
-        borderColor: color.border.input.focus,
-        bg: color.background.input["outline-focus"]
-      },
-      _invalid: {
-        bg: color.background.input["outline-error"],
-        borderColor: color.border.input.error,
-        _placeholder: {
-          color: "transparent"
-        }
-      },
-      _disabled: {
-        bg: color.background.input["outline-disabled"],
-        borderColor: color.border.input.disabled,
-        opacity: opacity.input.disabled,
-        _hover: {
-          bg: color.background.input["outline-disabled"],
-          borderColor: color.border.input.disabled
-        }
-      },
-      _placeholder: {
-        color: color.text.input.placeholder
-      },
-      _readonly: {
-        borderColor: color.border.input.readonly
-      }
-    })
-  }
-};
-
-const Select = {
-  parts: ["field", "icon"],
-  variants: {
-    outline: ({ theme: {
-      radii: borderRadius,
-      borders: borderWidth,
-      colors: color,
-      space: spacing
-    } }) => ({
-      field: {
-        paddingInlineStart: spacing["padding-inline"].select.default,
-        paddingInlineEnd: spacing["padding-inline"].select.default,
-        borderWidth: borderWidth.select,
-        color: color.text.default,
-        borderColor: color.border.select.default,
-        borderRadius: borderRadius.select.default,
-        _hover: {
-          borderColor: color.border.select["default-hover"]
-        },
-        _focusVisible: {
-          borderColor: color.border.select.focus,
-          boxShadow: `0 0 0 1px ${color.border.select.focus}`
-        },
-        _invalid: {
-          borderColor: color.border.select.error,
-          boxShadow: "none"
-        },
-        _readOnly: {
-          borderWidth: borderWidth.select,
-          borderColor: color.border.select.readonly,
-          _focusVisible: {
-            borderColor: color.border.select.readonly
-          }
-        },
-        _disabled: {
-          borderColor: color.border.select.disabled,
-          bg: color.background.select.disabled,
-          _hover: {
-            borderColor: color.border.select.disabled
-          }
-        },
-        _placeholder: {
-          color: color.text.select.placeholder
-        }
-      },
-      icon: {
-        color: color.icon.select.default
-      }
-    })
-  }
-};
-
-const Radio = {
-  parts: ["control", "label", "container"],
-  sizes: {
-    sm: ({ theme: { borders: borderWidth } }) => ({
-      control: {
-        _checked: {
-          borderWidth: borderWidth.radio["checked-sm"]
-        }
-      }
-    }),
-    md: ({ theme: { borders: borderWidth } }) => ({
-      control: {
-        _checked: {
-          borderWidth: borderWidth.radio["checked-md"]
-        }
-      }
-    }),
-    lg: ({ theme: { borders: borderWidth } }) => ({
-      control: {
-        _checked: {
-          borderWidth: borderWidth.radio["checked-lg"]
-        }
-      }
-    })
-  },
-  baseStyle: ({ theme: { borders: borderWidth, colors: color } }) => ({
-    control: {
-      borderColor: color.border.radio.default,
-      bg: color.background.radio.default,
-      borderWidth: borderWidth.radio.default,
-      _checked: {
-        borderColor: color.border.radio.checked,
-        bg: color.background.radio.checked,
-        _hover: {
-          borderColor: color.border.radio.checked,
-          bg: color.background.radio.checked
-        }
-      },
-      _hover: {
-        borderColor: color.border.radio["default-hover"],
-        bg: color.background.radio.default
-      },
-      _disabled: {
-        borderColor: color.border.radio.disabled,
-        bg: color.background.radio.disabled,
-        _hover: {
-          borderColor: color.border.radio.disabled,
-          bg: color.background.radio.disabled
-        }
-      },
-      _invalid: {
-        borderColor: color.border.radio.error,
-        bg: color.background.radio.error,
-        borderWidth: borderWidth.radio.default,
-        _hover: {
-          borderColor: color.border.radio.error,
-          bg: color.background.radio.error,
-          borderWidth: borderWidth.radio.default
-        }
-      },
-      _focusVisible: {
-        ring: "2px",
-        ringColor: color.border.wcag,
-        ringOffset: "1px"
-      }
-    },
-    defaultProps: {
-      size: "md"
-    }
-  })
-};
-
-const Tabs = {
-  parts: ["tab"],
-  variants: {
-    "soft-rounded": ({ theme: { colors: color } }) => ({
-      tab: {
-        borderRadius: 999,
-        color: color.text.subdued,
-        _selected: {
-          bg: color.background.tabs["soft-rounded-active"],
-          color: color.text.tabs["soft-rounded-active"]
-        },
-        _focusVisible: {
-          ring: "2px",
-          ringColor: color.border.wcag,
-          ringOffset: "1px"
-        }
-      }
-    })
-  }
-};
-
-const Textarea = {
-  variants: {
-    outline: ({ theme: {
-      space: spacing,
-      colors: color,
-      borders: borderWidth,
-      radii: borderRadius
-    } }) => ({
-      paddingInlineStart: spacing["padding-inline"].textarea.default,
-      paddingInlineEnd: spacing["padding-inline"].textarea.default,
-      borderRadius: borderRadius.textarea.default,
-      borderWidth: borderWidth.textarea.default,
-      borderColor: color.border.textarea.default,
-      color: color.text.default,
-      bgColor: color.background.textarea.default,
-      _hover: {
-        borderColor: color.border.textarea["default-hover"],
-        bgColor: color.background.textarea.hover
-      },
-      _focusVisible: {
-        borderColor: color.border.textarea.focus,
-        boxShadow: `0 0 0 1px ${color.border.textarea.focus}`,
-        bgColor: color.background.textarea.active
-      },
-      _invalid: {
-        boxShadow: "none",
-        borderColor: color.border.textarea.error,
-        bgColor: color.background.textarea.error
-      },
-      _readOnly: {
-        _focusVisible: {
-          borderColor: color.border.textarea.readonly,
-          bgColor: color.background.textarea.default
-        },
-        _hover: {
-          borderColor: color.border.textarea.readonly
-        }
-      },
-      _disabled: {
-        bgColor: color.background.textarea.disabled,
-        _hover: {
-          borderColor: color.border.textarea.default
-        }
-      },
-      _placeholder: {
-        color: color.text.textarea.placeholder
-      }
-    })
-  }
-};
-
-const Link = {
-  baseStyle: ({ colorScheme }) => ({
-    _focus: {
-      ring: "2px",
-      ringColor: `${colorScheme}.100`,
-      ringOffset: "1px"
-    }
-  }),
-  defaultProps: {
-    colorScheme: "mediatoolBlue"
-  }
-};
-
-const Switch$1 = {
-  baseStyle: ({ theme: { colors: color, opacity } }) => ({
-    _disabled: {
-      opacity: opacity.switch.disabled
-    },
-    track: {
-      bgColor: color.background.switch.default,
-      _checked: {
-        bgColor: color.background.switch["default-checked"]
-      },
-      _focusVisible: {
-        ring: "2px",
-        ringColor: color.border.wcag,
-        ringOffset: "1px"
-      }
-    },
-    thumb: {
-      bgColor: color.background.switch.thumb
-    }
-  })
-};
-
-const Tag = {
-  parts: ["container"],
-  baseStyle: {
-    container: {
-      fontWeight: "semibold"
-    }
-  },
-  sizes: {
-    sm: {
-      container: {
-        borderRadius: "tag.default"
-      }
-    },
-    md: {
-      container: {
-        borderRadius: "tag.default"
-      }
-    },
-    lg: {
-      container: {
-        borderRadius: "tag.default"
-      }
-    }
-  },
-  variants: {
-    solid: ({ bgColor, colorScheme }) => ({
-      container: {
-        bgColor: bgColor ?? colorScheme,
-        color: getContrastColor(bgColor ?? useToken$1("colors", colorScheme))
-      }
-    }),
-    subtle: () => ({
-      container: {
-        bgColor: useToken$1("colors", "background.tag.subtle"),
-        color: "text.default"
-      }
-    })
-  },
-  defaultProps: {
-    size: "md",
-    colorScheme: "background.tag.default"
-  }
-};
-
-const Alert = {
-  parts: ["container", "title", "description"],
-  baseStyle: ({ theme: {
-    radii: borderRadius,
-    colors: color,
-    space: coreSpacing
-  } }) => ({
-    container: {
-      borderRadius: borderRadius.toast.default,
-      color: color.text.default,
-      paddingEnd: coreSpacing[8],
-      width: "auto",
-      display: "flex"
-    }
-  }),
-  variants: {
-    success: ({ theme: { colors: color } }) => ({
-      container: {
-        bgColor: color.background.toast.success
-      }
-    }),
-    warning: ({ theme: { colors: color } }) => ({
-      container: {
-        bgColor: color.background.toast.warning
-      }
-    }),
-    info: ({ theme: { colors: color } }) => ({
-      container: {
-        bgColor: color.background.toast.info
-      }
-    }),
-    error: ({ theme: { colors: color } }) => ({
-      container: {
-        bgColor: color.background.toast.error,
-        color: color.text.toast.error
-      }
-    })
-  }
-};
-
-const NumberInput = {
-  parts: ["root", "field", "stepper", "stepperGroup"],
-  sizes: {
-    sm: ({ theme: { radii: borderRadius, sizes: sizing } }) => ({
-      field: {
-        borderRadius: borderRadius.input.outline
-      },
-      stepperGroup: {
-        height: sizing["8"]
-      }
-    }),
-    md: ({ theme: { sizes: sizing } }) => ({
-      stepperGroup: {
-        height: sizing["10"]
-      }
-    }),
-    lg: ({ theme: { sizes: sizing } }) => ({
-      stepperGroup: {
-        height: sizing["12"]
-      }
-    })
-  },
-  baseStyle: ({ theme: {
-    sizes: sizing,
-    space: spacing,
-    colors: color,
-    radii: borderRadius,
-    borders: borderWidth,
-    opacity
-  }, isReadOnly }) => ({
-    root: {
-      borderRadius: borderRadius.input.outline
-    },
-    field: {
-      minWidth: sizing["44"],
-      paddingInlineStart: spacing["padding-inline"].input.default,
-      paddingInlineEnd: spacing["padding-inline"].input.default,
-      WebkitPaddingStart: spacing["padding-inline"].input.default,
-      WebkitPaddingEnd: spacing["padding-inline"].input.default,
-      color: color.text.default,
-      bg: color.background.input["outline-default"],
-      borderWidth: borderWidth.input.default,
-      borderColor: color.border.input.default,
-      paddingRight: spacing.paddingRight["number-input"].field,
-      _hover: {
-        bg: color.background.input["outline-hover"],
-        borderColor: color.border.input["default-hover"]
-      },
-      _focusVisible: {
-        bg: color.background.input["outline-focus"],
-        borderColor: color.border.input.focus,
-        boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
-      },
-      _invalid: {
-        bg: color.background.input["outline-error"],
-        borderColor: color.border.input.error,
-        boxShadow: `0 0 0 1px ${color.border.input.error}`
-      },
-      _disabled: {
-        bg: color.background.input["outline-disabled"],
-        opacity: opacity.input.disabled,
-        borderColor: color.border.input.disabled
-      },
-      _readOnly: {
-        _focusVisible: {
-          borderColor: color.border.input.readonly,
-          boxShadow: "none"
-        },
-        _hover: {
-          borderColor: color.border.input.readonly
-        }
-      }
-    },
-    stepperGroup: {
-      width: "auto",
-      paddingRight: spacing.paddingRight["number-input"].stepper
-    },
-    stepper: {
-      _first: {
-        border: "none",
-        borderTopRightRadius: borderRadius["input-stepper"].default,
-        borderRadius: borderRadius["input-stepper"].default,
-        bg: color.background["input-stepper"].default,
-        opacity: isReadOnly ? opacity.input.disabled : "auto",
-        _hover: {
-          bg: isReadOnly ? "none" : color.background["input-stepper"].hover
-        },
-        _active: {
-          bg: color.background["input-stepper"].active
-        },
-        _disabled: {
-          bg: color.background["input-stepper"].disabled,
-          color: color.icon["input-stepper"].disabled
-        }
-      },
-      _last: {
-        border: "none",
-        bg: color.background["input-stepper"].default,
-        borderBottomRightRadius: borderRadius["input-stepper"].default,
-        borderRadius: borderRadius["input-stepper"].default,
-        opacity: isReadOnly ? opacity.input.disabled : "auto",
-        _hover: {
-          bg: isReadOnly ? "none" : color.background["input-stepper"].hover
-        },
-        _active: {
-          bg: color.background["input-stepper"].active
-        },
-        _disabled: {
-          bg: color.background["input-stepper"].disabled,
-          color: color.icon["input-stepper"].disabled
-        }
-      }
-    }
-  })
-};
-
-const NotificationIconButton = {
-  parts: ["container", "notifier"],
-  sizes: {
-    xs: {
-      notifier: {
-        top: "0.5",
-        right: "0.5"
-      }
-    },
-    sm: {
-      notifier: {
-        top: "0.5",
-        right: "0.5"
-      }
-    },
-    md: {
-      notifier: {
-        top: "1",
-        right: "1"
-      }
-    },
-    lg: {
-      notifier: {
-        top: "2",
-        right: "2"
-      }
-    }
-  },
-  variants: {
-    link: {
-      notifier: {
-        position: "absolute",
-        top: "0",
-        right: "0",
-        zIndex: "base"
-      }
-    }
-  },
-  baseStyle: () => ({
-    container: {
-      position: "relative"
-    },
-    notifier: {
-      position: "absolute",
-      top: "1",
-      right: "1",
-      zIndex: "base"
-    }
-  })
-};
-
-const Calendar = {
-  parts: ["container", "dateSelect", "dayLabel", "rangeCalendarContainer"],
-  baseStyle: ({ theme: {
-    space: spacing,
-    sizes: sizing,
-    colors: color
-  } }) => ({
-    container: {
-      p: spacing[2],
-      w: sizing[64],
-      bgColor: "background.default",
-      border: "1px solid",
-      borderColor: "border.input.default",
-      borderRadius: "input.outline"
-    },
-    rangeCalendarContainer: {
-      p: "3",
-      w: "128",
-      bgColor: "background.default",
-      borderRadius: "input.outline"
-    },
-    dateSelect: {
-      fontWeight: "semibold",
-      border: "none",
-      padding: "0",
-      borderRadius: "md",
-      color: color.text.default,
-      bgColor: color.background.button.ghost,
-      _hover: {
-        cursor: "pointer",
-        bgColor: color.background.button["ghost-hover"]
-      },
-      _active: {
-        bgColor: color.background.button["ghost-active"]
-      },
-      ...ring
-    },
-    dayLabel: {
-      color: color.gray[600],
-      fontSize: "xs",
-      p: spacing[2]
-    }
-  })
-};
-
-const DragAndDrop = {
-  parts: ["dropZone"],
-  baseStyle: ({ sx }) => ({
-    dropZone: merge({
-      borderWidth: "st.border.width.sm",
-      borderStyle: "dashed",
-      borderColor: "border.default",
-      padding: "4",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: "4",
-      justifyContent: "center",
-      textAlign: "center",
-      minH: "56",
-      minW: "56",
-      bgColor: "bg.filled"
-    }, sx)
-  })
-};
-
-const DatePicker = {
-  parts: ["group", "styledField", "dateField", "dateSegment"],
-  baseStyle: ({ theme: { colors: color, opacity } }) => ({
-    group: {
-      position: "relative",
-      alignItems: "center",
-      flex: 1
-    },
-    styledField: {
-      bgColor: "background.default",
-      _focusWithin: {
-        bgColor: color.background.input["outline-focus"],
-        borderColor: color.border.textarea.focus,
-        boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
-      },
-      _invalid: {
-        boxShadow: `0 0 0 1px ${color.border.input.error}`,
-        borderColor: color.border.input.error
-      },
-      _disabled: {
-        bgColor: color.background.input["outline-disabled"],
-        borderColor: color.border.input.disabled,
-        opacity: opacity.input.disabled
-      }
-    },
-    dateField: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center"
-    },
-    dateSegment: {
-      caretColor: "transparent",
-      boxSizing: "content-box",
-      textAlign: "center",
-      outline: "none",
-      rounded: "md",
-      _focus: {
-        bgColor: "blue.500",
-        color: color.text.inverted
-      },
-      _placeholder: {
-        color: "red.500"
-      }
-    }
-  }),
-  variants: {
-    outline: ({
-      theme: { colors: color, radii: borderRadius, borders: borderWidth }
-    }) => ({
-      styledField: {
-        bgColor: color.background.input["outline-default"],
-        borderRadius: borderRadius.input.outline,
-        borderWidth: borderWidth.input.default,
-        borderColor: color.border.input.default
-      }
-    }),
-    filled: ({
-      theme: { colors: color, radii: borderRadius, borders: borderWidth }
-    }) => ({
-      styledField: {
-        bgColor: color.background.input["filled-default"],
-        borderRadius: borderRadius.input.filled,
-        borderWidth: borderWidth.input.default,
-        borderColor: color.background.input["filled-default"]
-      }
-    })
-  }
-};
-
-const FlipButton = {
-  parts: ["container", "button", "buttonIcon"],
-  sizes: {
-    xs: ({ theme: { sizes: sizing, space: spacing } }) => ({
-      button: {
-        height: sizing["flip-button"].xs,
-        minWidth: sizing["flip-button"].xs,
-        paddingInlineStart: spacing["padding-inline"]["flip-button"].xs,
-        paddingInlineEnd: spacing["padding-inline"]["flip-button"].xs,
-        fontSize: "xs"
-      },
-      buttonIcon: {
-        boxSize: sizing.icon.xs
-      }
-    }),
-    sm: ({ theme: { sizes: sizing, space: spacing } }) => ({
-      button: {
-        height: sizing["flip-button"].sm,
-        minWidth: sizing["flip-button"].sm,
-        paddingInlineStart: spacing["padding-inline"]["flip-button"].md,
-        paddingInlineEnd: spacing["padding-inline"]["flip-button"].md,
-        fontSize: "sm",
-        buttonIcon: {
-          boxSize: sizing.icon.sm
-        }
-      }
-    }),
-    md: ({ theme: { sizes: sizing, space: spacing } }) => ({
-      button: {
-        height: sizing["flip-button"].md,
-        minWidth: sizing["flip-button"].md,
-        paddingInlineStart: spacing["padding-inline"]["flip-button"].md,
-        paddingInlineEnd: spacing["padding-inline"]["flip-button"].md,
-        fontSize: "md",
-        buttonIcon: {
-          boxSize: sizing.icon.md
-        }
-      }
-    }),
-    lg: ({ theme: { sizes: sizing, space: spacing } }) => ({
-      button: {
-        height: sizing["flip-button"].lg,
-        minWidth: sizing["flip-button"].lg,
-        paddingInlineStart: spacing["padding-inline"]["flip-button"].lg,
-        paddingInlineEnd: spacing["padding-inline"]["flip-button"].lg,
-        fontSize: "lg",
-        buttonIcon: {
-          boxSize: sizing.icon.lg
-        }
-      }
-    })
-  },
-  baseStyle: ({ theme: {
-    space: spacing,
-    sizes: sizing,
-    colors: color,
-    opacity,
-    radii: borderRadius,
-    fontWeights: coreFontWeight
-  }, numberOfButtons }) => ({
-    container: {
-      borderRadius: borderRadius["flip-button"].default,
-      paddingInlineStart: spacing["padding-inline"]["flip-button-group"].default,
-      paddingInlineEnd: spacing["padding-inline"]["flip-button-group"].default,
-      paddingY: spacing.paddingY["flip-button-group"].default,
-      disply: "grid",
-      width: "100%",
-      gap: spacing["padding-inline"]["flip-button"].gap,
-      gridTemplateColumns: `repeat(${numberOfButtons}, minmax(${sizing[32]}, 1fr))`,
-      gridTemplateRows: "1fr",
-      overflowX: "auto"
-    },
-    button: {
-      width: "100%",
-      justifyContent: "center",
-      alignItems: "center",
-      color: color.text["flip-button"].default,
-      cursor: "pointer",
-      borderRadius: borderRadius["flip-button"].default,
-      fontWeight: coreFontWeight.semiBold,
-      _disabled: {
-        opacity: opacity["flip-button"].disabled
-      },
-      _checked: {
-        color: color.text["flip-button"].inverted
-      }
-    }
-  }),
-  variants: {
-    default: ({ theme: { colors: color }, sx }) => ({
-      container: merge({
-        bgColor: color.background["flip-button"]["default-deselected-blue"]
-      }, sx),
-      button: {
-        bgColor: color.background["flip-button"]["default-deselected-blue"],
-        _hover: {
-          bgColor: color.background["flip-button"]["hover-deselected-blue"]
-        },
-        _checked: {
-          bgColor: color.background["flip-button"]["default-selected-blue"],
-          _hover: {
-            bgColor: color.background["flip-button"]["default-selected-blue"]
-          }
-        }
-      }
-    }),
-    brand: ({ theme: { colors: color }, sx }) => ({
-      container: merge({
-        bgColor: color.background["flip-button"]["default-deselected-brand"]
-      }, sx),
-      button: {
-        bgColor: color.background["flip-button"]["default-deselected-brand"],
-        _hover: {
-          bgColor: color.background["flip-button"]["hover-deselected-brand"]
-        },
-        _checked: {
-          bgColor: color.background["flip-button"]["default-selected-brand"],
-          _hover: {
-            bgColor: color.background["flip-button"]["default-selected-brand"]
-          }
-        }
-      }
-    })
-  },
-  defaultProps: {
-    size: "md",
-    variant: "default"
-  }
-};
-
-const Spinner = {
-  baseStyle: ({ theme: { colors: color, borders: borderWidth } }) => ({
-    borderWidth: borderWidth.spinner.default,
-    color: color.background.spinner.thumb,
-    borderBottomColor: color.background.spinner.track,
-    borderLeftColor: color.background.spinner.track
-  })
-};
-
-const possibleBgColors = getShades(400, 600);
-const getAvatarBgColor = (image, name, color) => {
-  if (image)
-    return color.background.avatar.image;
-  if (name)
-    return randomColor({ string: name, colors: possibleBgColors });
-  return color.background.avatar.default;
-};
-
-const Avatar = {
-  parts: ["container", "text", "badge", "icon"],
-  sizes: {
-    "2xs": ({ theme: { sizes: sizing } }) => ({
-      container: {
-        width: sizing.avatar["2xs"],
-        height: sizing.avatar["2xs"]
-      },
-      text: {
-        lineHeight: sizing.avatar["2xs"]
-      }
-    }),
-    xs: ({ theme: { sizes: sizing } }) => ({
-      container: {
-        width: sizing.avatar.xs,
-        height: sizing.avatar.xs
-      },
-      text: {
-        lineHeight: sizing.avatar.xs
-      }
-    }),
-    sm: ({ theme: { sizes: sizing } }) => ({
-      container: {
-        width: sizing.avatar.sm,
-        height: sizing.avatar.sm
-      },
-      text: {
-        lineHeight: sizing.avatar.sm
-      },
-      icon: {
-        boxSize: sizing.avatar.sm
-      }
-    }),
-    md: ({ theme: { sizes: sizing } }) => ({
-      container: {
-        width: sizing.avatar.md,
-        height: sizing.avatar.md
-      },
-      text: {
-        lineHeight: sizing.avatar.md
-      },
-      icon: {
-        boxSize: sizing.avatar.md
-      }
-    }),
-    lg: ({ theme: { sizes: sizing } }) => ({
-      container: {
-        width: sizing.avatar.lg,
-        height: sizing.avatar.lg
-      },
-      text: {
-        lineHeight: sizing.avatar.lg
-      },
-      icon: {
-        boxSize: sizing.avatar.lg
-      }
-    }),
-    xl: ({ theme: { sizes: sizing } }) => ({
-      container: {
-        width: sizing.avatar.xl,
-        height: sizing.avatar.xl
-      },
-      text: {
-        lineHeight: sizing.avatar.xl
-      }
-    }),
-    "2xl": ({ theme: { sizes: sizing } }) => ({
-      container: {
-        width: sizing.avatar["2xl"],
-        height: sizing.avatar["2xl"]
-      },
-      text: {
-        lineHeight: sizing.avatar["2xl"]
-      }
-    })
-  },
-  baseStyle: ({ theme: {
-    colors: color,
-    sizes: sizing,
-    radii: borderRadius
-  }, image, name }) => {
-    const avatarBgColor = getAvatarBgColor(image, name, color);
-    return {
-      container: {
-        bgColor: avatarBgColor,
-        color: getContrastColor(avatarBgColor),
-        display: "grid",
-        placeItems: "center",
-        objectFit: "cover",
-        position: "relative"
-      },
-      userImage: {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover"
-      },
-      badge: {
-        position: "absolute",
-        bottom: `-${sizing["1"]}`,
-        right: `-${sizing["1"]}`,
-        minWidth: sizing["5"],
-        height: sizing["5"],
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        fontSize: "xs",
-        fontWeight: "semibold",
-        padding: sizing["0a"],
-        bgColor: color.red["500"],
-        color: color.text.inverted,
-        borderRadius: borderRadius.avatar.square,
-        border: "none"
-      }
-    };
-  },
-  variants: {
-    square: ({ theme: { radii: borderRadius } }) => ({
-      container: {
-        aspectRatio: "1 / 1",
-        borderRadius: borderRadius.avatar.square,
-        "> img": {
-          borderRadius: borderRadius.avatar.square,
-          aspectRatio: "1 / 1"
-        }
-      },
-      badge: {
-        borderRadius: borderRadius.avatar.square
-      }
-    }),
-    rounded: ({ theme: { radii: borderRadius } }) => ({
-      container: {
-        aspectRatio: "1 / 1",
-        borderRadius: borderRadius.avatar.rounded,
-        "> img": {
-          borderRadius: borderRadius.avatar.rounded,
-          aspectRatio: "1 / 1"
-        }
-      },
-      badge: {
-        borderRadius: borderRadius.avatar.rounded
-      }
-    })
-  }
-};
-
-const CloseButton = {
-  baseStyle: ({ theme: { colors: color } }) => ({
-    color: color.text.default,
-    bgColor: color.background.button.ghost,
-    _hover: {
-      bg: color.background.button["ghost-hover"],
-      _disabled: {
-        bgColor: color.background.button.ghost
-      }
-    },
-    _active: {
-      bgColor: color.background.button["ghost-active"]
-    },
-    _focusVisible: {
-      ring: "2px",
-      ringColor: color.border.wcag,
-      ringOffset: "1px"
-    }
-  }),
-  defaultProps: {
-    size: "md"
-  }
-};
-
-const Modal = {
-  parts: ["overlay", "closeButton", "dialog"],
-  sizes: {
-    huge: {
-      dialog: {
-        width: "90%",
-        maxW: "96rem",
-        aspectRatio: "16/9"
-      }
-    }
-  },
-  baseStyle: ({ theme }) => {
-    const {
-      typography: { headings: { h3 } }
-    } = theme;
-    return {
-      overlay: {
-        bgColor: "background.modal.overlay",
-        backdropFilter: "blur(8px)"
-      },
-      closeButton: {
-        top: 4,
-        right: 4
-      },
-      dialog: {
-        bgColor: "background.default",
-        borderRadius: "modal.dialog"
-      },
-      header: {
-        fontSize: h3.fontSize,
-        paddingTop: "paddingTop.modal.header",
-        paddingBottom: "paddingBottom.modal.header",
-        border: "modal.header",
-        borderBottomColor: "border.modal.header",
-        borderBottomStyle: "solid"
-      },
-      body: {
-        paddingTop: "paddingTop.modal.body",
-        paddingBottom: "paddingBottom.modal.body"
-      },
-      footer: {
-        paddingTop: "paddingTop.modal.footer",
-        paddingBottom: "paddingBottom.modal.footer"
-      }
-    };
-  }
-};
-
-const Tooltip = {
-  baseStyle: ({ theme: { colors: color, space: spacing, radii: borderRadius } }) => ({
-    backgroundColor: color.background.tooltip.default,
-    color: color.text.inverted,
-    paddingInline: spacing["padding-inline"].tooltip.default,
-    paddingY: spacing.paddingY.tooltip.default,
-    borderRadius: borderRadius.tooltip.default
-  })
-};
-
-const Icon = {
-  sizes: {
-    xs: {
-      boxSize: "icon.xs"
-    },
-    sm: {
-      boxSize: "icon.sm"
-    },
-    md: {
-      boxSize: "icon.md"
-    },
-    lg: {
-      boxSize: "icon.lg"
-    }
-  },
-  baseStyle: ({ boxSize, color }) => ({
-    boxSize: boxSize || "icon.default",
-    color: color || "inherit"
-  })
-};
-
-const ClipboardInput = {
-  parts: ["button", "icon", "tooltip"],
-  sizes: {
-    sm: ({ theme: { sizes: sizing, space: spacing } }) => ({
-      button: {
-        height: sizing.button.xs,
-        minWidth: sizing.button.xs
-      },
-      icon: {
-        boxSize: sizing.icon.xs
-      },
-      tooltip: {
-        paddingInline: spacing["padding-inline"].tooltip.sm,
-        paddingY: spacing.paddingY.tooltip.sm
-      }
-    }),
-    md: ({ theme: { sizes: sizing } }) => ({
-      button: {
-        height: sizing.button.sm,
-        minWidth: sizing.button.sm
-      },
-      icon: {
-        boxSize: sizing.icon.sm
-      }
-    }),
-    lg: ({ theme: { sizes: sizing } }) => ({
-      button: {
-        height: sizing.button.md,
-        minWidth: sizing.button.md
-      },
-      icon: {
-        boxSize: sizing.icon.md
-      }
-    })
-  }
-};
-
-const ColorPicker = {
-  parts: ["colorButton", "trigger", "heading"],
-  baseStyle: ({ theme, selectedColor }) => {
-    const { sizes: sizing, colors: color } = theme;
-    return {
-      heading: {
-        border: "none",
-        paddingInlineStart: sizing["4"],
-        paddingInlineEnd: sizing["2"],
-        paddingBottom: sizing["0"],
-        fontSize: "md",
-        fontWeight: "semibold"
-      },
-      trigger: {
-        bgColor: selectedColor ?? color.background.button.default,
-        color: selectedColor ? getContrastColor(selectedColor) : "unset",
-        _hover: {
-          bgColor: selectedColor ?? color.background.button["default-hover"]
-        },
-        _active: {
-          bgColor: selectedColor ?? color.background.button["default-active"]
-        }
-      },
-      colorButton: {
-        height: sizing.button.sm,
-        minWidth: sizing.button.sm,
-        _hover: {
-          ring: "2px",
-          ringOffset: "1px",
-          ringColor: `${color.border.input["default-hover"]}`
-        }
-      }
-    };
-  },
-  sizes: {
-    sm: ({ theme: { sizes: sizing } }) => ({
-      trigger: {
-        height: sizing.button.sm,
-        minWidth: sizing.button.sm
-      }
-    }),
-    md: ({ theme: { sizes: sizing } }) => ({
-      trigger: {
-        height: sizing.button.md,
-        minWidth: sizing.button.md
-      }
-    }),
-    lg: ({ theme: { sizes: sizing } }) => ({
-      trigger: {
-        height: sizing.button.lg,
-        minWidth: sizing.button.lg
-      }
-    })
-  }
-};
-
-const Step = {
-  parts: ["step", "label", "description"],
-  baseStyle: ({ theme: {
-    colors: color,
-    fontWeights,
-    space: spacing,
-    borders: borderWidth
-  } }) => ({
-    step: {
-      justifyContent: "start",
-      alignItems: "start",
-      bgColor: color.background.step.default,
-      borderTopWidth: borderWidth.step.default,
-      borderColor: color.border.step.default,
-      borderBottom: "none",
-      paddingInline: spacing["padding-inline"].step.default,
-      color: color.text.subdued,
-      _hover: {
-        bgColor: color.background.step.hover,
-        borderColor: color.border.step.hover
-      },
-      _active: {
-        bgColor: color.background.step.active
-      },
-      _selected: {
-        bgColor: color.background.step.selected,
-        borderColor: color.border.step.selected,
-        color: color.border.step.selected,
-        _hover: {
-          borderColor: color.border.step.selected,
-          color: color.border.step.selected
-        }
-      }
-    },
-    label: {
-      color: "inherit",
-      pt: spacing.paddingTop.step.label,
-      textAlign: "start",
-      fontWeight: fontWeights.bold
-    },
-    description: {
-      textAlign: "start",
-      fontWeight: fontWeights.semiBold,
-      color: color.text.default
-    }
-  })
-};
-
-const StepList = {
-  baseStyle: ({ theme: { sizes: sizing }, tabs }) => ({
-    display: "grid",
-    width: "100%",
-    gridTemplateColumns: `repeat(${tabs}, minmax(${sizing[32]}, 1fr))`,
-    gridTemplateRows: "1fr",
-    overflowX: "auto",
-    borderBottom: "none",
-    paddingBottom: sizing[2]
-  })
-};
-
-const H1 = {
-  baseStyle: ({ theme, sx }) => {
-    const {
-      colors: color,
-      typography: { headings: { h1 } }
-    } = theme;
-    return merge({
-      color: color.text.default,
-      fontFamily: h1.fontFamily,
-      fontWeight: h1.fontWeight,
-      lineHeight: h1.lineHeight,
-      fontSize: h1.fontSize,
-      letterSpacing: h1.letterSpacing,
-      textTransform: h1.textCase
-    }, sx);
-  }
-};
-
-const H2 = {
-  baseStyle: ({ theme, sx }) => {
-    const {
-      colors: color,
-      typography: { headings: { h2 } }
-    } = theme;
-    return merge({
-      color: color.text.default,
-      fontFamily: h2.fontFamily,
-      fontWeight: h2.fontWeight,
-      lineHeight: h2.lineHeight,
-      fontSize: h2.fontSize,
-      letterSpacing: h2.letterSpacing,
-      textTransform: h2.textCase
-    }, sx);
-  }
-};
-
-const H3 = {
-  baseStyle: ({ theme, sx }) => {
-    const {
-      colors: color,
-      typography: { headings: { h3 } }
-    } = theme;
-    return merge({
-      color: color.text.default,
-      fontFamily: h3.fontFamily,
-      fontWeight: h3.fontWeight,
-      lineHeight: h3.lineHeight,
-      fontSize: h3.fontSize,
-      letterSpacing: h3.letterSpacing,
-      textTransform: h3.textCase
-    }, sx);
-  }
-};
-
-const H4 = {
-  baseStyle: ({ theme, sx }) => {
-    const {
-      colors: color,
-      typography: { headings: { h4 } }
-    } = theme;
-    return merge({
-      color: color.text.default,
-      fontFamily: h4.fontFamily,
-      fontWeight: h4.fontWeight,
-      lineHeight: h4.lineHeight,
-      fontSize: h4.fontSize,
-      letterSpacing: h4.letterSpacing,
-      textTransform: h4.textCase
-    }, sx);
-  }
-};
-
-const H5 = {
-  baseStyle: ({ theme, sx }) => {
-    const {
-      colors: color,
-      typography: { headings: { h5 } }
-    } = theme;
-    return merge({
-      color: color.text.default,
-      fontFamily: h5.fontFamily,
-      fontWeight: h5.fontWeight,
-      lineHeight: h5.lineHeight,
-      fontSize: h5.fontSize,
-      letterSpacing: h5.letterSpacing,
-      textTransform: h5.textCase
-    }, sx);
-  }
-};
-
-const H6 = {
-  baseStyle: ({ theme, sx }) => {
-    const {
-      colors: color,
-      typography: { headings: { h6 } }
-    } = theme;
-    return merge({
-      color: color.text.default,
-      fontFamily: h6.fontFamily,
-      fontWeight: h6.fontWeight,
-      lineHeight: h6.lineHeight,
-      fontSize: h6.fontSize,
-      letterSpacing: h6.letterSpacing,
-      textTransform: h6.textCase
-    }, sx);
-  }
-};
-
-const Blockquote = {
-  baseStyle: ({ theme, sx }) => {
-    const { blockquote } = theme.typography.stylized;
-    return merge({
-      color: "text.default",
-      fontFamily: blockquote.fontFamily,
-      fontWeight: blockquote.fontWeight,
-      lineHeight: blockquote.lineHeight,
-      fontSize: blockquote.fontSize,
-      letterSpacing: blockquote.letterSpacing,
-      textTransform: blockquote.textCase
-    }, sx);
-  }
-};
-
-const Tiny = {
-  baseStyle: ({ theme, sx }) => {
-    const { tiny } = theme.typography.stylized;
-    return merge({
-      color: "text.default",
-      fontFamily: tiny.fontFamily,
-      fontWeight: tiny.fontWeight,
-      lineHeight: tiny.lineHeight,
-      fontSize: tiny.fontSize,
-      letterSpacing: tiny.letterSpacing,
-      textTransform: tiny.textCase
-    }, sx);
-  }
-};
-
-const Capitalized = {
-  baseStyle: ({ theme, sx }) => {
-    const { CAPITALIZED } = theme.typography.stylized;
-    return merge({
-      color: "text.default",
-      fontFamily: CAPITALIZED.fontFamily,
-      fontWeight: CAPITALIZED.fontWeight,
-      lineHeight: CAPITALIZED.lineHeight,
-      fontSize: CAPITALIZED.fontSize,
-      letterSpacing: CAPITALIZED.letterSpacing,
-      textTransform: CAPITALIZED.textCase
-    }, sx);
-  }
-};
-
-const Lead = {
-  baseStyle: ({ theme, sx }) => {
-    const { lead } = theme.typography.stylized;
-    return merge({
-      color: "text.default",
-      fontFamily: lead.fontFamily,
-      fontWeight: lead.fontWeight,
-      lineHeight: lead.lineHeight,
-      fontSize: lead.fontSize,
-      letterSpacing: lead.letterSpacing,
-      textTransform: lead.textCase
-    }, sx);
-  }
-};
-
-const Small = {
-  baseStyle: ({ theme, sx }) => {
-    const { small } = theme.typography.stylized;
-    return merge({
-      color: "text.default",
-      fontFamily: small.fontFamily,
-      fontWeight: small.fontWeight,
-      lineHeight: small.lineHeight,
-      fontSize: small.fontSize,
-      letterSpacing: small.letterSpacing,
-      textTransform: small.textCase
-    }, sx);
-  }
-};
-
-const P = {
-  variants: {
-    14: ({ theme, sx }) => {
-      const { body14 } = theme.typography.body;
-      return merge({
-        fontFamily: body14.fontFamily,
-        fontWeight: body14.fontWeight,
-        lineHeight: body14.lineHeight,
-        fontSize: body14.fontSize,
-        letterSpacing: body14.letterSpacing,
-        textTransform: body14.textCase
-      }, sx);
-    },
-    16: ({ theme, sx }) => {
-      const { body16 } = theme.typography.body;
-      return merge({
-        fontFamily: body16.fontFamily,
-        fontWeight: body16.fontWeight,
-        lineHeight: body16.lineHeight,
-        fontSize: body16.fontSize,
-        letterSpacing: body16.letterSpacing,
-        textTransform: body16.textCase
-      }, sx);
-    }
-  },
-  baseStyle: {
-    color: "text.default"
-  }
-};
-
-const Label = {
-  baseStyle: ({ theme: { sizes: sizing }, sx }) => merge({
-    color: "inherit",
-    width: "100%",
-    maxWidth: "100%",
-    marginBottom: sizing[0],
-    marginInlineStart: sizing[0],
-    marginEnd: sizing[0],
-    marginInlineEnd: sizing[0]
-  }, sx),
-  sizes: {
-    "2xs": ({ theme, sx }) => {
-      const { tinyLabel } = theme.typography.labels;
-      return merge({
-        fontFamily: tinyLabel.fontFamily,
-        fontWeight: tinyLabel.fontWeight,
-        lineHeight: tinyLabel.lineHeight,
-        fontSize: tinyLabel.fontSize,
-        letterSpacing: tinyLabel.letterSpacing,
-        textTransform: tinyLabel.textCase
-      }, sx);
-    },
-    xs: ({ theme, sx }) => {
-      const { xsLabel } = theme.typography.labels;
-      return merge({
-        fontFamily: xsLabel.fontFamily,
-        fontWeight: xsLabel.fontWeight,
-        lineHeight: xsLabel.lineHeight,
-        fontSize: xsLabel.fontSize,
-        letterSpacing: xsLabel.letterSpacing,
-        textTransform: xsLabel.textCase
-      }, sx);
-    },
-    sm: ({ theme, sx }) => {
-      const { smLabel } = theme.typography.labels;
-      return merge({
-        fontFamily: smLabel.fontFamily,
-        fontWeight: smLabel.fontWeight,
-        lineHeight: smLabel.lineHeight,
-        fontSize: smLabel.fontSize,
-        letterSpacing: smLabel.letterSpacing,
-        textTransform: smLabel.textCase
-      }, sx);
-    },
-    md: ({ theme, sx }) => {
-      const { mdLabel } = theme.typography.labels;
-      return merge({
-        fontFamily: mdLabel.fontFamily,
-        fontWeight: mdLabel.fontWeight,
-        lineHeight: mdLabel.lineHeight,
-        fontSize: mdLabel.fontSize,
-        letterSpacing: mdLabel.letterSpacing,
-        textTransform: mdLabel.textCase
-      }, sx);
-    },
-    lg: ({ theme, sx }) => {
-      const { lgLabel } = theme.typography.labels;
-      return merge({
-        fontFamily: lgLabel.fontFamily,
-        fontWeight: lgLabel.fontWeight,
-        lineHeight: lgLabel.lineHeight,
-        fontSize: lgLabel.fontSize,
-        letterSpacing: lgLabel.letterSpacing,
-        textTransform: lgLabel.textCase
-      }, sx);
-    }
-  }
-};
-
-const SplitPane = {
-  baseStyle: ({ minLeftWidth, minRightWidth, initialSplit, isOpen }) => ({
-    display: "grid",
-    overflow: "hidden",
-    gridTemplateColumns: !isOpen ? "1fr" : `minmax(${minLeftWidth}%, var(--split-pos, ${initialSplit}%)) auto minmax(${minRightWidth}%, 1fr)`,
-    alignItems: "stretch",
-    justifyItems: "stretch",
-    height: "100%",
-    width: "100%"
-  })
-};
-const PaneDivider = {
-  baseStyle: ({ theme: { colors: color, sizes: sizing } }) => ({
-    bgColor: color.background["pane-divider"].default,
-    zIndex: 300,
-    cursor: "col-resize",
-    height: "100%",
-    width: sizing[1],
-    _hover: {
-      outlineColor: color.border["pane-divider"].hover,
-      outlineWidth: sizing["0a"],
-      outlineStyle: "solid"
-    },
-    _active: {
-      outlineColor: color.border["pane-divider"].hover,
-      outlineWidth: sizing["0a"],
-      outlineStyle: "solid"
-    }
-  })
-};
-
-const Carousel = {
-  parts: ["container", "arrow", "radio"],
-  baseStyle: {
-    container: {
-      display: "grid",
-      placeItems: "center",
-      position: "relative",
-      overflow: "hidden",
-      width: "full",
-      height: "full"
-    },
-    radio: {
-      position: "absolute",
-      bottom: "1",
-      left: "50%",
-      transform: "translateX(-50%)",
-      overflowX: "scroll",
-      maxWidth: "90%",
-      padding: "2"
-    },
-    arrow: {
-      position: "absolute",
-      bottom: "0",
-      height: "100%",
-      cursor: "pointer"
-    }
-  }
-};
-
-const EditableText = {
-  parts: ["button", "icon", "controls", "preview", "input"],
-  sizes: {
-    sm: ({ isEditing, theme: { sizes: sizing } }) => ({
-      button: {
-        height: sizing.button.xs,
-        minWidth: sizing.button.xs
-      },
-      icon: {
-        boxSize: sizing.icon.xs
-      },
-      controls: {
-        width: !isEditing ? 6 : "3.25rem"
-      },
-      preview: {
-        pt: 1
-      },
-      input: {
-        paddingInlineEnd: 16,
-        paddingRight: 16
-      }
-    }),
-    md: ({ isEditing, theme: { sizes: sizing } }) => ({
-      button: {
-        height: sizing.button.sm,
-        minWidth: sizing.button.sm
-      },
-      icon: {
-        boxSize: sizing.icon.sm
-      },
-      controls: {
-        width: !isEditing ? 8 : "4.25rem"
-      },
-      preview: {
-        pt: "7px"
-      },
-      input: {
-        paddingInlineEnd: 20,
-        paddingRight: 20
-      }
-    }),
-    lg: ({ isEditing, theme: { sizes: sizing } }) => ({
-      button: {
-        height: sizing.button.md,
-        minWidth: sizing.button.md
-      },
-      icon: {
-        boxSize: sizing.icon.md
-      },
-      controls: {
-        width: !isEditing ? 10 : "5.25rem"
-      },
-      preview: {
-        pt: "8px"
-      },
-      input: {
-        paddingInlineEnd: 24,
-        paddingRight: 24
-      }
-    })
-  },
-  baseStyle: {
-    controls: {
-      mr: 1
-    },
-    preview: {
-      fontWeight: "semibold",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      paddingTop: 0,
-      paddingBottom: 0
-    },
-    input: {
-      fontWeight: "semibold"
-    }
-  }
-};
-
-const Toolbox = {
-  parts: ["container", "header", "body", "footer"],
-  baseStyle: ({ theme: { sizes: sizing } }) => ({
-    container: {
-      position: "relative",
-      flexDirection: "column",
-      bg: "text.inverted",
-      h: "100vh",
-      borderLeftWidth: "1px",
-      borderLeftStyle: "solid",
-      borderLeftColor: "gray.100"
-    },
-    header: {
-      alignItems: "center",
-      height: "16",
-      borderBottomWidth: "1px",
-      borderBottomStyle: "solid",
-      borderBottomColor: "gray.100",
-      pl: "4",
-      pr: "16"
-    },
-    footer: {
-      position: "absolute",
-      bottom: "0",
-      w: "full",
-      p: "4",
-      alignItems: "center",
-      height: "16",
-      borderTopWidth: "1px",
-      borderTopStyle: "solid",
-      borderTopColor: "gray.100"
-    },
-    body: {
-      p: sizing["4"],
-      flexDirection: "column",
-      w: "100%",
-      h: "100%",
-      maxH: `calc(100vh - ${sizing["16"]} * 2)`,
-      overflowY: "scroll"
-    }
-  }),
-  sizes: {
-    sm: {
-      container: {
-        w: "xs"
-      }
-    },
-    md: {
-      container: {
-        w: "md"
-      }
-    },
-    lg: {
-      container: {
-        w: "xl"
-      }
-    }
-  }
-};
-
-const shakeAnimation = keyframes`
-  0% { transform: translate(1px, 1px) rotate(0deg); }
-  10% { transform: translate(-1px, -2px) rotate(-1deg); }
-  20% { transform: translate(-3px, 0px) rotate(1deg); }
-  30% { transform: translate(3px, 2px) rotate(0deg); }
-  40% { transform: translate(1px, -1px) rotate(1deg); }
-  50% { transform: translate(-1px, 2px) rotate(-1deg); }
-  60% { transform: translate(-3px, 1px) rotate(0deg); }
-  70% { transform: translate(3px, 1px) rotate(-1deg); }
-  80% { transform: translate(-1px, -1px) rotate(1deg); }
-  90% { transform: translate(1px, 2px) rotate(0deg); }
-  100% { transform: translate(1px, -2px) rotate(-1deg); }
-`;
-const thickRing = {
-  _focusVisible: {
-    outline: "none",
-    ring: "3px",
-    ringColor: "border.wcag",
-    ringOffset: "1px"
-  }
-};
-const getBgColor$1 = (currentTheme) => {
-  switch (currentTheme) {
-    case "webappTheme":
-      return "blue.50";
-    case "tottTheme":
-      return "blue.900";
-    default:
-      return "bg.filled";
-  }
-};
-const getInvalidColorStyles = (isInvalid, isImage = true, currentTheme = "webappTheme") => ({
-  borderColor: isInvalid ? "red.500" : "gray.300",
-  bgColor: isInvalid && "red.50",
-  animation: isInvalid && `500ms ${shakeAnimation} ease`,
-  _hover: isImage && {
-    bgColor: isInvalid ? "red.50" : getBgColor$1(currentTheme),
-    borderColor: isInvalid ? "red.500" : "blue.500"
-  }
-});
-const FilePicker = {
-  parts: ["filePicker", "fileItem", "multiFilePicker"],
-  baseStyle: ({ theme: { sizes, colors }, hasLoaded, isImage, isInvalid, currentTheme }) => ({
-    filePicker: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      width: "44",
-      height: "40",
-      textAlign: "center",
-      position: "relative",
-      borderWidth: hasLoaded && isImage ? "0" : sizes["0a"],
-      borderStyle: "dashed",
-      borderRadius: "lg",
-      ...getInvalidColorStyles(isInvalid, isImage, currentTheme),
-      ...thickRing
-    },
-    multiFilePicker: {
-      width: "full",
-      maxWidth: "inherit",
-      height: "32",
-      position: "relative",
-      borderWidth: sizes["0a"],
-      borderStyle: "dashed",
-      borderRadius: "lg",
-      ...getInvalidColorStyles(isInvalid, void 0, currentTheme),
-      ...thickRing
-    },
-    fileItem: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      paddingX: "2",
-      paddingY: "1",
-      borderRadius: sizes["2"],
-      textAlign: "center",
-      position: "relative",
-      border: `2px solid ${colors.gray["100"]}`,
-      minHeight: "20"
-    }
-  })
-};
-
-var components = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Alert: Alert,
-  Avatar: Avatar,
-  Blinker: Blinker,
-  Blockquote: Blockquote,
-  Breadcrumb: Breadcrumb,
-  Button: Button,
-  Calendar: Calendar,
-  Capitalized: Capitalized,
-  Carousel: Carousel,
-  Checkbox: Checkbox,
-  ClipboardInput: ClipboardInput,
-  CloseButton: CloseButton,
-  ColorPicker: ColorPicker,
-  DatePicker: DatePicker,
-  DragAndDrop: DragAndDrop,
-  EditableText: EditableText,
-  FilePicker: FilePicker,
-  FlipButton: FlipButton,
-  H1: H1,
-  H2: H2,
-  H3: H3,
-  H4: H4,
-  H5: H5,
-  H6: H6,
-  Icon: Icon,
-  Input: Input,
-  Label: Label,
-  Lead: Lead,
-  Link: Link,
-  Modal: Modal,
-  NotificationIconButton: NotificationIconButton,
-  NumberInput: NumberInput,
-  P: P,
-  PaneDivider: PaneDivider,
-  PinInput: PinInput,
-  Radio: Radio,
-  Select: Select,
-  Small: Small,
-  Spinner: Spinner,
-  SplitPane: SplitPane,
-  Step: Step,
-  StepList: StepList,
-  Switch: Switch$1,
-  Tabs: Tabs,
-  Tag: Tag,
-  Textarea: Textarea,
-  Tiny: Tiny,
-  Toolbox: Toolbox,
-  Tooltip: Tooltip
-});
-
-const WebappSkin = {
-  colors: WebappSkin$1.color,
-  sizes: WebappSkin$1.sizing,
-  space: WebappSkin$1.spacing,
-  radii: WebappSkin$1.borderRadius,
-  borders: WebappSkin$1.borderWidth,
-  opacity: WebappSkin$1.opacity,
-  typography,
-  shadows: WebappSkin$1.boxShadow
-};
-
-const TottSkin = {
-  colors: TottSkin$1.color,
-  sizes: TottSkin$1.sizing,
-  space: TottSkin$1.spacing,
-  radii: TottSkin$1.borderRadius,
-  borders: TottSkin$1.borderWidth,
-  opacity: TottSkin$1.opacity,
-  shadows: TottSkin$1.boxShadow,
-  typography
-};
-
-const overrides = {
-  config: {
-    cssVarPrefix: ""
-  },
-  semanticTokens: {
-    colors: {
-      "chakra-body-text": {
-        _light: "text.default",
-        _dark: "text.inverted"
-      }
-    }
-  },
-  styles: {
-    global: {
-      html: {
-        "scroll-behavior": "smooth",
-        overflow: "scroll"
-      },
-      body: {
-        height: "100%"
-      },
-      "#app": {
-        height: "100%"
-      },
-      ...scrollbarStyles
-    }
-  },
-  fonts: {
-    heading: "Inter, sans-serif",
-    body: "Inter, sans-serif"
-  },
-  components: { ...components },
-  colors: palette,
-  zIndices: coreZIndex,
-  sizes: coreSizing,
-  space: coreSpacing,
-  fontWeights: coreFontWeight,
-  shadows: coreBoxShadow,
-  fontSizes: coreFontSize,
-  lineHeights: coreLineHeight,
-  radii: coreBorderRadius,
-  borderWidths: WebappSkin.borders
-};
-const theme = extendTheme(overrides, WebappSkin);
-const tottTheme = extendTheme(overrides, TottSkin);
-
-const MediatoolThemeProvider = ({
-  children,
-  theme: theme$1 = theme,
-  themeName = "webappTheme"
-}) => /* @__PURE__ */ React.createElement(ChakraProvider, { resetCSS: true, theme: theme$1 }, /* @__PURE__ */ React.createElement(CustomTheme.Provider, { value: themeName }, children));
-
-forwardRef$1(({
-  variant = "ghost",
-  icon,
-  "aria-label": ariaLabel,
-  hasNotification = false,
-  blinkerColor = "green.500",
-  size,
-  ...rest
-}, ref) => {
-  const [isBlinking, setIsBlinking] = useState(false);
-  const { container, notifier } = useMultiStyleConfig("NotificationIconButton", { size, variant });
-  return /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      onMouseEnter: () => setIsBlinking(true),
-      onMouseLeave: () => setIsBlinking(false),
-      sx: container
-    },
-    hasNotification && /* @__PURE__ */ React.createElement(Box, { sx: notifier }, /* @__PURE__ */ React.createElement(Blinker$1, { isBlinking, color: blinkerColor, size: "2xs" })),
-    /* @__PURE__ */ React.createElement(
-      IconButton,
-      {
-        variant,
-        icon,
-        "aria-label": ariaLabel,
-        ref,
-        size,
-        ...rest
-      }
-    )
-  );
-});
-
-const Switch = ({
-  value,
-  onChange,
-  name,
-  size = "md",
-  ...rest
-}) => /* @__PURE__ */ React.createElement(
-  Switch$3,
-  {
-    size,
-    id: name,
-    isChecked: value,
-    onChange,
-    ...rest
-  }
-);
-
-forwardRef((props, ref) => {
-  const style = useStyleConfig("PaneDivider");
-  return /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      ref,
-      sx: style,
-      ...props
-    }
-  );
-});
-
-const MenuItem = ({ path, Icon: IconComponent, title }) => /* @__PURE__ */ React.createElement(
-  HStack,
-  {
-    pl: 2,
-    to: path,
-    as: NavLink,
-    borderRadius: 6,
-    _hover: { bgColor: "background.button.default-hover" },
-    _activeLink: { bgColor: "background.button.brand", color: "text.inverted" }
-  },
-  /* @__PURE__ */ React.createElement(HStack, { p: 2 }, /* @__PURE__ */ React.createElement(Icon$1, { as: IconComponent, boxSize: 6 }), /* @__PURE__ */ React.createElement(Label$1, { size: "md", sx: { color: "inherit", cursor: "pointer" } }, title))
-);
-const MainMenu = ({ menuItems }) => /* @__PURE__ */ React.createElement(Stack, { spacing: 2, mb: 6, color: "text.default", bgColor: "bg.layer" }, menuItems.map((item) => /* @__PURE__ */ React.createElement(MenuItem, { key: item.path, ...item })));
-
-const getBgColor = (currentTheme) => {
-  switch (currentTheme) {
-    case "webappTheme":
-      return "blue.100";
-    case "tottTheme":
-      return "blue.800";
-    default:
-      return "bg.filled";
-  }
-};
-const NavSideLink = ({
-  linkName,
-  isActive,
-  onClick,
-  linkProps
-}) => {
-  const currentTheme = useCurrentTheme();
-  const bgColorHover = getBgColor(currentTheme);
-  const color = isActive ? "mono.white" : "text.default";
-  return /* @__PURE__ */ React.createElement(
-    Button$1,
-    {
-      p: "4",
-      _hover: { bgColor: isActive ? "bg.brand.default" : bgColorHover },
-      _active: { bgColor: "bg.brand.default" },
-      bgColor: isActive ? "bg.brand.default" : "transparent",
-      onClick,
-      display: "flex",
-      justifyContent: "start"
-    },
-    /* @__PURE__ */ React.createElement(LinkOverlay, { ...linkProps }, /* @__PURE__ */ React.createElement(P$1, { sx: { color, textAlign: "left" } }, linkName))
-  );
-};
-
-const SubMenuItem = ({ path, title }) => {
-  const location = useLocation();
-  const isActive = location.pathname === path;
-  return /* @__PURE__ */ React.createElement(
-    NavSideLink,
-    {
-      linkName: title,
-      isActive,
-      linkProps: { to: path, as: NavLink }
-    }
-  );
-};
-const SubMenu = ({ mainRoutes }) => /* @__PURE__ */ React.createElement(
-  Stack,
-  {
-    color: "text.default",
-    overflow: "auto",
-    h: "calc(100vh - 320px)",
-    pr: 2,
-    bgColor: "bg.layer",
-    sx: {
-      "::-webkit-scrollbar": { display: "none" },
-      "::-webkit-scrollbar-thumb": { background: "blue.500" },
-      _hover: { "::-webkit-scrollbar": { display: "block" } }
-    }
-  },
-  /* @__PURE__ */ React.createElement(Switch$2, null, mainRoutes.map(({ path: mainPath, subItems = [] }) => /* @__PURE__ */ React.createElement(
-    Route,
-    {
-      key: mainPath,
-      path: mainPath,
-      render: () => subItems.map(({ path, ...rest }) => {
-        const subPath = `${mainPath}${path}`;
-        return /* @__PURE__ */ React.createElement(SubMenuItem, { key: path, path: subPath, ...rest });
-      })
-    }
-  )))
-);
-
-const searchComponentsBarStyles = {
-  loadingIndicator: () => ({ display: "none" }),
-  control: (styles, { menuIsOpen, options }) => ({
-    ...styles,
-    _focusVisible: {},
-    border: "none",
-    p: "4",
-    width: "95%",
-    mx: "auto",
-    borderBottom: menuIsOpen && options.length > 0 ? `2px dashed ${palette.gray["100"]}` : "2px dashed transparent",
-    zIndex: "maxnus"
-  }),
-  menu: (styles) => ({
-    ...styles,
-    mb: "0",
-    mt: "-1"
-  }),
-  menuList: (styles) => ({
-    ...styles,
-    pt: "2",
-    pb: "16",
-    height: "auto",
-    maxHeight: "3xl",
-    borderTopLeftRadius: "0",
-    borderTopRightRadius: "0",
-    borderBottomLeftRadius: "md",
-    borderBottomRightRadius: "md",
-    border: "none",
-    bgColor: "background.default"
-  }),
-  option: (styles, { isFocused }) => {
-    const focusRing = isFocused && {
-      outline: "none",
-      ring: "2px",
-      ringColor: "border.wcag",
-      ringOffset: "1px"
-    };
-    const bgColor = isFocused ? "bg.brand.hover" : "bg.filled";
-    const color = getContrastColor(bgColor);
-    return {
-      ...styles,
-      mt: "4",
-      p: "4",
-      borderRadius: "md",
-      w: "90%",
-      mx: "auto",
-      transition: "none",
-      bgColor,
-      color,
-      fontWeight: "semibold",
-      ...focusRing
-    };
-  }
-};
-
-const ComponentPageLink = ({ label }) => /* @__PURE__ */ React.createElement(HStack, { justifyContent: "space-between", w: "full" }, /* @__PURE__ */ React.createElement(Text, null, label), /* @__PURE__ */ React.createElement(Icon$1, { as: ArrowCircleRightDuo, size: "lg" }));
-
-const SearchComponentsBar = ({
-  routes
-}) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const history = useHistory();
-  const ref = useRef(null);
-  const handleKeyboardShortcut = (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-      onOpen();
-    }
-  };
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyboardShortcut);
-    return () => {
-      window.removeEventListener("keydown", handleKeyboardShortcut);
-    };
-  }, []);
-  const options = chain(
-    (route) => defaultTo([], route.subItems).map((subRoute) => ({
-      value: `${route.path}${subRoute.path}`,
-      label: `${route.title} ${subRoute.title}`
-    })),
-    routes
-  );
-  const fuse = useMemo(
-    () => new Fuse(options, {
-      threshold: 0.2,
-      keys: ["label"]
-    }),
-    [options]
-  );
-  const handleChange = ({ value }) => {
-    history.push(`${value}`);
-    onClose();
-  };
-  const loadOptions = async (query) => map(prop("item"), fuse.search(query));
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape") {
-      onClose();
-    }
-  };
-  return /* @__PURE__ */ React.createElement(Stack, { w: "full" }, /* @__PURE__ */ React.createElement(Card, { w: "full" }, /* @__PURE__ */ React.createElement(SearchBar, { placeholder: "Search", onMenuOpen: onOpen, variant: "filled" })), /* @__PURE__ */ React.createElement(
-    Modal$2,
-    {
-      isOpen,
-      onClose,
-      size: "4xl",
-      autoFocus: true,
-      initialFocusRef: ref
-    },
-    /* @__PURE__ */ React.createElement(ModalOverlay, null),
-    /* @__PURE__ */ React.createElement(ModalContent, null, /* @__PURE__ */ React.createElement(
-      SearchBar,
-      {
-        loadOptions,
-        debouncedWaitTime: 0,
-        closeMenuOnSelect: true,
-        onChange: handleChange,
-        ref,
-        sx: searchComponentsBarStyles,
-        customOption: ComponentPageLink,
-        noOptionsMessage: () => null,
-        loadingMessage: () => null,
-        onKeyDown: handleKeyDown,
-        placeholder: "Search for components, icons, styles...\u2282(\u2580\xAF\u2580\u2282 )"
-      }
-    ))
-  ));
-};
-
-const users = {
-  "obi-wan": {
-    name: "Obi-Wan Kenobi",
-    country: "Germany",
-    image: `
-      https://www.gamereactor.se/media/08/redaxresonerar_3470803.jpg
-    `,
-    preferences: {
-      locale: "de-DE",
-      currency: "EUR",
-      firstDayOfWeek: "monday"
-    }
-  },
-  anakin: {
-    name: "Anakin Skywalker",
-    country: "US",
-    image: `
-      https://thenerdstash.com/wp-content/uploads/2021/10/Hayden-Christensen-Anakin-Skywalker.jpg
-    `,
-    preferences: {
-      locale: "en-US",
-      currency: "USD",
-      firstDayOfWeek: "sunday"
-    }
-  },
-  han: {
-    name: "Han Solo",
-    country: "Sweden",
-    image: `
-      https://fictionhorizon.com/wp-content/uploads/2021/09/Han-Solo.jpg
-    `,
-    preferences: {
-      locale: "sv-SE",
-      currency: "SEK",
-      firstDayOfWeek: "sunday"
-    }
-  },
-  yoda: {
-    name: "Yoda",
-    country: "England",
-    image: `
-      https://markerasomolast.files.wordpress.com/2013/08/yoda.jpg
-    `,
-    preferences: {
-      locale: "en-GB",
-      currency: "GBP",
-      firstDayOfWeek: "monday"
-    }
-  }
-};
-const UserContext = createContext(null);
-const UserProvider = ({ children }) => {
-  const [user, setUser] = useState(users["obi-wan"]);
-  const contextValue = useMemo(() => ({
-    user,
-    setUser
-  }), [user]);
-  return /* @__PURE__ */ React.createElement(UserContext.Provider, { value: contextValue }, children);
-};
-const useUser = () => {
-  const context = useContext(UserContext);
-  if (!context) {
-    throw new Error("Cannot find <UserProvider> anywhere in your React tree");
-  }
-  return context;
-};
-
-const I18nProvider = ({ children }) => {
-  const { user } = useUser();
-  const i18nManager = useMemo(() => {
-    const { preferences: { locale, currency } } = user;
-    return new I18nManager({
-      locale,
-      currency
-    });
-  }, [user]);
-  return /* @__PURE__ */ React.createElement(I18nContext.Provider, { value: i18nManager }, children);
-};
-
-const CalendarProvider = ({ children }) => {
-  const { user: { preferences: { firstDayOfWeek = "monday" } } } = useUser();
-  const calendarLocale = firstDayOfWeek === "monday" ? "en-GB" : "en-US";
-  return /* @__PURE__ */ React.createElement(I18nProvider$1, { locale: calendarLocale }, children);
-};
-
-const Sandbox = ({ routes }) => {
-  const [tott, setTott] = useState(false);
-  return /* @__PURE__ */ React.createElement(MediatoolThemeProvider, { theme: tott ? tottTheme : void 0, themeName: tott ? "tottTheme" : "webappTheme" }, /* @__PURE__ */ React.createElement(UserProvider, null, /* @__PURE__ */ React.createElement(CalendarProvider, null, /* @__PURE__ */ React.createElement(I18nProvider, null, /* @__PURE__ */ React.createElement(BrowserRouter, null, /* @__PURE__ */ React.createElement(
-    Grid,
-    {
-      height: "100vh",
-      minHeight: "100vh",
-      gridTemplateColumns: "280px auto",
-      color: "text.default",
-      bgColor: "background.default",
-      pl: 4
-    },
-    /* @__PURE__ */ React.createElement(
-      Flex,
-      {
-        direction: "column",
-        overflow: "auto"
-      },
-      /* @__PURE__ */ React.createElement(
-        Link$1,
-        {
-          as: Link$2,
-          to: "/components/",
-          sx: { _hover: { textDecoration: "none" }, _focus: { outline: "none" } }
-        },
-        /* @__PURE__ */ React.createElement(HStack, null, /* @__PURE__ */ React.createElement(Icon$1, { as: NorthlightLogoXs, mt: 4, ml: 2, boxSize: 16 }), /* @__PURE__ */ React.createElement(Capitalized$1, null, "Northlight"))
-      ),
-      /* @__PURE__ */ React.createElement(FormControl, { display: "flex", alignItems: "center", my: 2, pl: 2 }, /* @__PURE__ */ React.createElement(FormLabel, { htmlFor: "tott", mb: "0" }, "Dark theme"), /* @__PURE__ */ React.createElement(Switch, { id: "tott", onChange: () => setTott(!tott) })),
-      /* @__PURE__ */ React.createElement(MainMenu, { menuItems: routes }),
-      /* @__PURE__ */ React.createElement(SubMenu, { mainRoutes: routes })
-    ),
-    /* @__PURE__ */ React.createElement(Stack, { spacing: "5", pt: "4", height: "100vh" }, /* @__PURE__ */ React.createElement(Box, { ml: 10 }, /* @__PURE__ */ React.createElement(SearchComponentsBar, { routes })), /* @__PURE__ */ React.createElement(Routing, { fallback: head(routes)?.path, routes }))
-  ))))));
-};
-
-export { LazyPage, MainMenu, Routing, Sandbox, SearchComponentsBar, SubMenu };
-//# sourceMappingURL=sandbox.mjs.map