@northlight/ui 1.0.0

package/dist/es/sandbox.mjs

@@ -0,0 +1,3562 @@
+import React, { forwardRef as forwardRef$1, useRef, cloneElement, createContext, memo, useState, useEffect, useMemo, useContext, Suspense } from 'react';
+import { Switch as Switch$3, Route, Redirect, NavLink, useLocation, useHistory, BrowserRouter } from 'react-router-dom';
+import { last, map, prop, difference, times, merge, is, identity, filter, test, toLower, head } from 'ramda';
+import { forwardRef, useStyleConfig, Icon as Icon$2, Box, Button as Button$2, FormLabel as FormLabel$1, VisuallyHidden, 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$2, Text, useDisclosure, Card, Grid, Flex, FormControl } from '@chakra-ui/react';
+import { CheckDuo, SearchDuo, DotsMatrixSolid, XCloseSolid, EditDuo, ZoomInDuo, ArrowCircleRightDuo } from '@mediatool/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 '@mediatool/tokens';
+import '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 debounce from 'lodash.debounce';
+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 'react-input-mask';
+import { I18nManager, I18nContext } from '@shopify/react-i18n';
+import Fuse from 'fuse.js';
+
+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 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 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);
+};
+
+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) {
+      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, ...rest }, ref) => {
+    const { styledField } = useMultiStyleConfig("DatePicker");
+    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,
+    rounded: "full",
+    boxSize: 8,
+    hidden: isOutsideMonth,
+    size: "sm",
+    fontWeight: "medium",
+    variant: isSelected ? "brand" : "ghost",
+    borderWidth: isToday ? "1px" : "none"
+  }, 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"
+  }),
+  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 = 300,
+    debouncedOptions = {},
+    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 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 = async (query, callback) => {
+      const newOptions = await getOptions(query);
+      callback(newOptions);
+      return [];
+    };
+    const debouncedLoadOptions = debounce(
+      loadOptions,
+      debouncedWaitTime,
+      debouncedOptions
+    );
+    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: debouncedLoadOptions,
+      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: ({ theme: { colors: palette, space: spacing, sizes: sizing }, sx }) => ({
+    dropZone: merge({
+      border: `2px dashed ${palette.mono.black}`,
+      padding: spacing["4"],
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: spacing["4"],
+      justifyContent: "center",
+      textAlign: "center",
+      minH: sizing["56"],
+      minW: sizing["56"],
+      bgColor: palette.blue["50"],
+      _hover: {
+        bgColor: palette.blue["100"]
+      }
+    }, sx)
+  })
+};
+
+const DatePicker = {
+  parts: ["group", "styledField", "dateField", "dateSegment"],
+  baseStyle: ({ theme: {
+    colors: color,
+    borders: borderWidth,
+    radii: borderRadius,
+    opacity
+  } }) => ({
+    group: {
+      position: "relative",
+      alignItems: "center",
+      flex: 1
+    },
+    styledField: {
+      bgColor: "text.inverted",
+      borderWidth: borderWidth.input.default,
+      borderColor: color.border.input.default,
+      borderRadius: borderRadius.input.outline,
+      _hover: {
+        borderColor: color.border.input["default-hover"]
+      },
+      _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",
+      paddingInlineStart: "0.375rem"
+    },
+    dateSegment: {
+      caretColor: "transparent",
+      boxSizing: "content-box",
+      textAlign: "center",
+      outline: "none",
+      rounded: "md",
+      _focus: {
+        bgColor: "blue.500",
+        color: color.text.inverted
+      },
+      _placeholder: {
+        color: "red.500"
+      }
+    }
+  })
+};
+
+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 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 }) => ({
+    container: {
+      bgColor: image ? color.background.avatar.image : color.background.avatar.default,
+      color: color.text.inverted,
+      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 getInvalidColorStyles = (isInvalid, isImage = true) => ({
+  borderColor: isInvalid ? "red.500" : "gray.300",
+  bgColor: isInvalid && "red.50",
+  animation: isInvalid && `500ms ${shakeAnimation} ease`,
+  _hover: isImage && {
+    bgColor: isInvalid ? "red.50" : "blue.50",
+    borderColor: isInvalid ? "red.500" : "blue.500"
+  }
+});
+const FilePicker = {
+  parts: ["filePicker", "fileItem", "multiFilePicker"],
+  baseStyle: ({ theme: { sizes, colors }, hasLoaded, isImage, isInvalid }) => ({
+    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),
+      ...thickRing
+    },
+    multiFilePicker: {
+      width: "full",
+      maxWidth: "inherit",
+      height: "32",
+      position: "relative",
+      borderWidth: sizes["0a"],
+      borderStyle: "dashed",
+      borderRadius: "lg",
+      ...getInvalidColorStyles(isInvalid),
+      ...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,
+  Breadcrumb: Breadcrumb,
+  Button: Button,
+  Blinker: Blinker,
+  Checkbox: Checkbox,
+  Input: Input,
+  PinInput: PinInput,
+  Select: Select,
+  Radio: Radio,
+  Tabs: Tabs,
+  Textarea: Textarea,
+  Link: Link,
+  Switch: Switch$1,
+  Tag: Tag,
+  Alert: Alert,
+  NumberInput: NumberInput,
+  NotificationIconButton: NotificationIconButton,
+  Calendar: Calendar,
+  DragAndDrop: DragAndDrop,
+  DatePicker: DatePicker,
+  FlipButton: FlipButton,
+  Spinner: Spinner,
+  Avatar: Avatar,
+  CloseButton: CloseButton,
+  Modal: Modal,
+  Tooltip: Tooltip,
+  Icon: Icon,
+  ClipboardInput: ClipboardInput,
+  ColorPicker: ColorPicker,
+  Step: Step,
+  StepList: StepList,
+  H1: H1,
+  H2: H2,
+  H3: H3,
+  H4: H4,
+  H5: H5,
+  H6: H6,
+  Blockquote: Blockquote,
+  Tiny: Tiny,
+  Capitalized: Capitalized,
+  Lead: Lead,
+  Small: Small,
+  P: P,
+  Label: Label,
+  SplitPane: SplitPane,
+  PaneDivider: PaneDivider,
+  Carousel: Carousel,
+  EditableText: EditableText,
+  Toolbox: Toolbox,
+  FilePicker: FilePicker
+});
+
+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
+};
+
+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,
+  typography
+};
+
+const overrides = {
+  config: {
+    cssVarPrefix: ""
+  },
+  semanticTokens: {
+    colors: {
+      "chakra-body-text": {
+        _light: "text.default",
+        _dark: "text.inverted"
+      }
+    }
+  },
+  styles: {
+    global: {
+      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
+};
+const theme = extendTheme(overrides, WebappSkin);
+const tottTheme = extendTheme(overrides, TottSkin);
+
+const MediatoolThemeProvider = ({
+  children,
+  theme: theme$1 = theme
+}) => /* @__PURE__ */ React.createElement(ChakraProvider, {
+  resetCSS: true,
+  theme: theme$1
+}, 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$2, {
+  size,
+  id: name,
+  isChecked: value,
+  onChange,
+  ...rest
+});
+
+forwardRef((props, ref) => {
+  const style = useStyleConfig("PaneDivider");
+  return /* @__PURE__ */ React.createElement(Box, {
+    ref,
+    sx: style,
+    ...props
+  });
+});
+
+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 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$3, 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 }) => {
+    const fullPath = `${path}${subPath}`;
+    return /* @__PURE__ */ React.createElement(Route, {
+      key: fullPath,
+      path: fullPath,
+      render: (props) => /* @__PURE__ */ React.createElement(LazyPage, {
+        ...props,
+        loader: subComponent
+      })
+    });
+  });
+  return [mainRoute, ...subRoutes];
+}), fallback && /* @__PURE__ */ React.createElement(Redirect, {
+  to: fallback
+}));
+
+const MenuItem = ({ path, Icon: IconComponent, title }) => /* @__PURE__ */ React.createElement(HStack, {
+  p: 2,
+  to: path,
+  as: NavLink,
+  borderRadius: 6,
+  _hover: { bgColor: "background.button.default-hover" },
+  _activeLink: { bgColor: "background.button.brand", color: "text.inverted" }
+}, /* @__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: "background.default"
+}, menuItems.map((item) => /* @__PURE__ */ React.createElement(MenuItem, {
+  key: item.path,
+  ...item
+})));
+
+const SubMenuItem = ({ path, title }) => /* @__PURE__ */ React.createElement(HStack, {
+  as: NavLink,
+  to: path,
+  borderRadius: 6,
+  p: 2,
+  _hover: { bgColor: "background.button.default-hover" },
+  _activeLink: { bgColor: "background.button.default-hover" }
+}, /* @__PURE__ */ React.createElement(Label$1, {
+  size: "md",
+  sx: { color: "inherit", cursor: "pointer" }
+}, title));
+const SubMenu = ({ mainRoutes }) => /* @__PURE__ */ React.createElement(Stack, {
+  color: "text.default",
+  overflow: "auto",
+  pr: 2,
+  bgColor: "background.default"
+}, /* @__PURE__ */ React.createElement(Switch$3, 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: "text.inverted"
+  }),
+  option: (styles, { isFocused }) => {
+    const focusRing = isFocused && {
+      outline: "none",
+      ring: "2px",
+      ringColor: "border.wcag",
+      ringOffset: "1px"
+    };
+    return {
+      ...styles,
+      mt: "4",
+      p: "4",
+      borderRadius: "md",
+      w: "90%",
+      mx: "auto",
+      transition: "none",
+      bgColor: isFocused ? "blue.500" : "gray.50",
+      color: isFocused ? "text.inverted" : "text.default",
+      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 location = useLocation();
+  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 = map(
+    (route) => ({
+      value: route.path,
+      label: route.title
+    }),
+    routes
+  );
+  const fuse = useMemo(() => new Fuse(options, {
+    threshold: 0.2,
+    keys: ["label"]
+  }), [options]);
+  const handleChange = ({ value }) => {
+    history.push(`/components${value}`);
+    onClose();
+  };
+  const loadOptions = async (query) => map(prop("item"), fuse.search(query));
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      onClose();
+    }
+  };
+  const currentPage = location.pathname.split("/")[1];
+  if (currentPage !== "components")
+    return null;
+  return /* @__PURE__ */ React.createElement(Stack, {
+    p: "4"
+  }, /* @__PURE__ */ React.createElement(Card, {
+    w: "lg"
+  }, /* @__PURE__ */ React.createElement(SearchBar, {
+    placeholder: "Ctrl + k...",
+    onMenuOpen: onOpen
+  })), /* @__PURE__ */ React.createElement(Modal$2, {
+    isOpen,
+    onClose,
+    size: "3xl",
+    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
+  }))));
+};
+
+const Sandbox = ({ routes }) => {
+  const [tott, setTott] = useState(false);
+  return /* @__PURE__ */ React.createElement(MediatoolThemeProvider, {
+    theme: tott ? tottTheme : void 0
+  }, /* @__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",
+    gridTemplateColumns: "280px auto",
+    color: "text.default",
+    bgColor: "background.default"
+  }, /* @__PURE__ */ React.createElement(Flex, {
+    direction: "column",
+    overflow: "auto",
+    p: 2
+  }, /* @__PURE__ */ React.createElement(FormControl, {
+    display: "flex",
+    alignItems: "center",
+    my: 2,
+    pl: 2
+  }, /* @__PURE__ */ React.createElement(FormLabel, {
+    htmlFor: "tott",
+    mb: "0"
+  }, "TOTT theme, uhm?"), /* @__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: "4",
+    pt: "4"
+  }, /* @__PURE__ */ React.createElement(SearchComponentsBar, {
+    routes: head(routes)?.subItems || []
+  }), /* @__PURE__ */ React.createElement(Routing, {
+    fallback: head(routes)?.path,
+    routes
+  }))))))));
+};
+
+export { Sandbox };
+//# sourceMappingURL=sandbox.mjs.map