@teamturing/react-kit 2.13.0 → 2.14.1

package/dist/index.js

@@ -1217,7 +1217,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     return values;
 }
 
-const noop$1 = (any) => any;
+const noop$2 = (any) => any;
 
 class Queue {
     constructor() {
@@ -1379,7 +1379,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     return { schedule, cancel, state, steps };
 }
 
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop$1, true);
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop$2, true);
 
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
@@ -1629,9 +1629,9 @@ function fireSyntheticPointerEvent(name, handler) {
 class PressGesture extends Feature {
     constructor() {
         super(...arguments);
-        this.removeStartListeners = noop$1;
-        this.removeEndListeners = noop$1;
-        this.removeAccessibleListeners = noop$1;
+        this.removeStartListeners = noop$2;
+        this.removeEndListeners = noop$2;
+        this.removeAccessibleListeners = noop$2;
         this.startPointerPress = (startEvent, startInfo) => {
             this.removeEndListeners();
             if (this.isPressing)
@@ -1897,8 +1897,8 @@ function resolveVariant(visualElement, definition, custom) {
 const optimizedAppearDataId = "framerAppearId";
 const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 
-let warning = noop$1;
-let invariant = noop$1;
+let warning = noop$2;
+let invariant = noop$2;
 if (process.env.NODE_ENV !== "production") {
     warning = (check, message) => {
         if (!check && typeof console !== "undefined") {
@@ -2024,7 +2024,7 @@ function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
 function cubicBezier(mX1, mY1, mX2, mY2) {
     // If this is a linear gradient, return linear easing
     if (mX1 === mY1 && mX2 === mY2)
-        return noop$1;
+        return noop$2;
     const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
     // If animation is at start/end, return t without easing
     return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
@@ -2057,7 +2057,7 @@ const backInOut = mirrorEasing(backIn);
 const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
 const easingLookup = {
-    linear: noop$1,
+    linear: noop$2,
     easeIn,
     easeInOut,
     easeOut,
@@ -2305,7 +2305,7 @@ const cssVarTokeniser = {
     regex: cssVariableRegex,
     countKey: "Vars",
     token: "${v}",
-    parse: noop$1,
+    parse: noop$2,
 };
 const colorTokeniser = {
     regex: colorRegex,
@@ -2474,7 +2474,7 @@ function createMixers(output, ease, customMixer) {
     for (let i = 0; i < numMixers; i++) {
         let mixer = mixerFactory(output[i], output[i + 1]);
         if (ease) {
-            const easingFunction = Array.isArray(ease) ? ease[i] || noop$1 : ease;
+            const easingFunction = Array.isArray(ease) ? ease[i] || noop$2 : ease;
             mixer = pipe(easingFunction, mixer);
         }
         mixers.push(mixer);
@@ -3365,7 +3365,7 @@ function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ..
         attachTimeline(timeline) {
             animation.timeline = timeline;
             animation.onfinish = null;
-            return noop$1;
+            return noop$2;
         },
         get time() {
             return millisecondsToSeconds(animation.currentTime || 0);
@@ -3435,15 +3435,15 @@ function createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) {
             time: 0,
             speed: 1,
             duration: 0,
-            play: (noop$1),
-            pause: (noop$1),
-            stop: (noop$1),
+            play: (noop$2),
+            pause: (noop$2),
+            stop: (noop$2),
             then: (resolve) => {
                 resolve();
                 return Promise.resolve();
             },
-            cancel: (noop$1),
-            complete: (noop$1),
+            cancel: (noop$2),
+            complete: (noop$2),
         };
     };
     return delay
@@ -5721,8 +5721,8 @@ function getCurrentDirection(offset, lockThreshold = 10) {
 class DragGesture extends Feature {
     constructor(node) {
         super(node);
-        this.removeGroupControls = noop$1;
-        this.removeListeners = noop$1;
+        this.removeGroupControls = noop$2;
+        this.removeListeners = noop$2;
         this.controls = new VisualElementDragControls(node);
     }
     mount() {
@@ -5732,7 +5732,7 @@ class DragGesture extends Feature {
         if (dragControls) {
             this.removeGroupControls = dragControls.subscribe(this.controls);
         }
-        this.removeListeners = this.controls.addListeners() || noop$1;
+        this.removeListeners = this.controls.addListeners() || noop$2;
     }
     unmount() {
         this.removeGroupControls();
@@ -5748,7 +5748,7 @@ const asyncHandler = (handler) => (event, info) => {
 class PanGesture extends Feature {
     constructor() {
         super(...arguments);
-        this.removePointerDownListener = noop$1;
+        this.removePointerDownListener = noop$2;
     }
     onPointerDown(pointerDownEvent) {
         this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { transformPagePoint: this.node.getTransformPagePoint() });
@@ -6096,7 +6096,7 @@ function getRadius(values, radiusName) {
 //     )(p)
 // }
 const easeCrossfadeIn = compress(0, 0.5, circOut);
-const easeCrossfadeOut = compress(0.5, 0.95, noop$1);
+const easeCrossfadeOut = compress(0.5, 0.95, noop$2);
 function compress(min, max, easing) {
     return (p) => {
         // Could replace ifs with clamp
@@ -7853,7 +7853,7 @@ const userAgentContains = (string) => typeof navigator !== "undefined" &&
  */
 const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/")
     ? Math.round
-    : noop$1;
+    : noop$2;
 function roundAxis(axis) {
     // Round to the nearest .5 pixels to support subpixel layouts
     axis.min = roundPoint(axis.min);
@@ -11864,7 +11864,7 @@ const BreadcrumbsItemWrapper = styled__default.default.span`
     }
   }
 `;
-var index$4 = Object.assign(Breadcrumbs, {
+var index$6 = Object.assign(Breadcrumbs, {
   Item: BreadcrumbsItem
 });
 
@@ -13647,6 +13647,19 @@ const SvgFire = props => /*#__PURE__*/React__namespace.createElement("svg", _ext
   d: "M10.373 2.847c-.021.287-.22 2.173-1.773 3.754-.144.145-.3.279-.465.4-.227.169-.616.462-1.021.787-.537.431-2.966 2.7-3.104 5.86 0 0-.586 7.212 7.136 8.276 0 0 2.5.531 5.223-1.214.061-.04.123-.078.187-.115.438-.257 2.76-1.767 3.368-5.192 0 0 .433-2.773-.768-4.942-.034-.06-.072-.117-.104-.177-.144-.273-.65-1.176-1.366-1.86a.699.699 0 0 0-.377-.191.565.565 0 0 0-.569.253c-.127.19-.761 1.139-1.045 1.49 0 0-.159.194-.12-.08 0 0 .515-2.576-1.264-5.153 0 0-1.107-1.719-2.807-2.578 0 0-.434-.273-.79-.117 0 0-.248.105-.325.66a1.583 1.583 0 0 0-.016.14Z"
 }));
 
+const SvgFolder = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 24 24"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M10.061 3.181a2.108 2.108 0 0 0-1.489-.617H4.106A2.106 2.106 0 0 0 2 4.67v.977h10.527l-2.466-2.466Zm9.834 3.466H2v12.684c0 1.163.943 2.105 2.106 2.105h15.789A2.103 2.103 0 0 0 22 19.331V8.752a2.104 2.104 0 0 0-2.105-2.105Z",
+  clipRule: "evenodd"
+}));
+
 const SvgFrame = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -15682,6 +15695,7 @@ var icons = /*#__PURE__*/Object.freeze({
     FacebookIcon: SvgFacebook,
     FilterIcon: SvgFilter,
     FireIcon: SvgFire,
+    FolderIcon: SvgFolder,
     FrameIcon: SvgFrame,
     GlassesIcon: SvgGlasses,
     GraphIcon: SvgGraph,
@@ -16610,7 +16624,7 @@ function isTabbable(elem, strict = false) {
 }
 
 let signalSupported = false;
-function noop() {}
+function noop$1() {}
 try {
   const options = Object.create({}, {
     signal: {
@@ -16619,8 +16633,8 @@ try {
       }
     }
   });
-  window.addEventListener('test', noop, options);
-  window.removeEventListener('test', noop, options);
+  window.addEventListener('test', noop$1, options);
+  window.removeEventListener('test', noop$1, options);
 } catch (e) {}
 function featureSupported() {
   return signalSupported;
@@ -17376,7 +17390,7 @@ const BaseDialog = styled__default.default.div(() => ({
   overflow: 'hidden',
   margin: 'auto'
 }), sx);
-var index$3 = /*#__PURE__*/React.forwardRef(Dialog);
+var index$5 = /*#__PURE__*/React.forwardRef(Dialog);
 
 const useDialogHandler = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -19095,7 +19109,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-var index$2 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var index$4 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 // Fork of `fast-deep-equal` that only does the comparisons we need and compares
 // functions
@@ -19160,7 +19174,7 @@ function roundByDPR(element, value) {
 
 function useLatestRef(value) {
   const ref = React__namespace.useRef(value);
-  index$2(() => {
+  index$4(() => {
     ref.current = value;
   });
   return ref;
@@ -19245,7 +19259,7 @@ function useFloating(options) {
       }
     });
   }, [latestMiddleware, placement, strategy, platformRef]);
-  index$2(() => {
+  index$4(() => {
     if (open === false && dataRef.current.isPositioned) {
       dataRef.current.isPositioned = false;
       setData(data => ({
@@ -19255,13 +19269,13 @@ function useFloating(options) {
     }
   }, [open]);
   const isMountedRef = React__namespace.useRef(false);
-  index$2(() => {
+  index$4(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  index$2(() => {
+  index$4(() => {
     if (referenceEl) referenceRef.current = referenceEl;
     if (floatingEl) floatingRef.current = floatingEl;
     if (referenceEl && floatingEl) {
@@ -19423,393 +19437,1115 @@ const OverlayPopper = ({
   });
 };
 
-const Space = styled__default.default.div`
-  width: inherit;
-  ${space$1};
+/**
+ * 아무 행위도 하지 않는 함수입니다.
+ */
+function noop() {}
+
+const Pagination = ({
+  pages: propPages,
+  currentPageIndex,
+  aroundPageCount = 1,
+  edgePageCount = 1,
+  type = 'default',
+  sx,
+  onPageClick = noop,
+  onPreviousClick = noop,
+  onNextClick = noop,
+  renderPage = (page, i) => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationPage, {
+    onClick: () => onPageClick(page, i),
+    selected: i === currentPageIndex,
+    children: page.label
+  }),
+  renderPageWrapper = (children, {
+    label
+  }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
+    children: children
+  }, [label, i].join('-')),
+  renderPreviousPageDirection = ({
+    previousPageDirectionProps
+  }) => /*#__PURE__*/jsxRuntimeExports.jsxs(PaginationPageDirection, {
+    ...previousPageDirectionProps,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(SvgChevronLeft, {}), "\uC774\uC804"]
+  }),
+  renderNextPageDirection = ({
+    nextPageDirectionProps
+  }) => /*#__PURE__*/jsxRuntimeExports.jsxs(PaginationPageDirection, {
+    ...nextPageDirectionProps,
+    children: ["\uB2E4\uC74C", /*#__PURE__*/jsxRuntimeExports.jsx(SvgChevronRight, {})]
+  }),
+  renderTruncationIndicator = () => /*#__PURE__*/jsxRuntimeExports.jsx(PaginationTruncationIndicator, {
+    children: "\u2026"
+  })
+}) => {
+  const CURRENT_PAGE_COUNT = 1;
+  const totalVisiblePageCount = CURRENT_PAGE_COUNT + 2 * aroundPageCount + 2 * edgePageCount;
+  const pages = propPages.map((page, i) => ({
+    page,
+    originalIndex: i
+  }));
+  const totalPageCount = propPages.length;
+  const isCurrentPageCloseToBeginEdge = currentPageIndex < edgePageCount + aroundPageCount + CURRENT_PAGE_COUNT;
+  const isCurrentPageCloseToEndEdge = totalPageCount - (edgePageCount + aroundPageCount + CURRENT_PAGE_COUNT) < currentPageIndex + 1;
+  const isTruncationNeeded = totalVisiblePageCount < totalPageCount;
+  const renderPaginationPage = React.useCallback((page, i) => renderPageWrapper(renderPage(page, i), page, i), [currentPageIndex]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BasePagination, {
+    type: type,
+    sx: sx,
+    children: [renderPreviousPageDirection({
+      previousPageDirectionProps: {
+        onClick: () => onPreviousClick(currentPageIndex),
+        disabled: currentPageIndex === 0
+      }
+    }), !isTruncationNeeded ? pages.map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)) : isTruncationNeeded && isCurrentPageCloseToBeginEdge ? [pages.slice(0, edgePageCount + aroundPageCount * 2 + CURRENT_PAGE_COUNT).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
+      children: renderTruncationIndicator()
+    }, 'end_truncation_indicator'), pages.slice(edgePageCount * -1).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))] : isTruncationNeeded && isCurrentPageCloseToEndEdge ? [pages.slice(0, edgePageCount).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
+      children: renderTruncationIndicator()
+    }, 'begin_truncation_indicator'), pages.slice(totalPageCount - (edgePageCount + aroundPageCount * 2 + CURRENT_PAGE_COUNT)).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))] : [pages.slice(0, edgePageCount).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
+      children: renderTruncationIndicator()
+    }, 'begin_truncation_indicator'), pages.slice(currentPageIndex - aroundPageCount, currentPageIndex + aroundPageCount + CURRENT_PAGE_COUNT).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex)), /*#__PURE__*/jsxRuntimeExports.jsx(React.Fragment, {
+      children: renderTruncationIndicator()
+    }, 'end_truncation_indicator'), pages.slice(edgePageCount * -1).map(({
+      page,
+      originalIndex
+    }) => renderPaginationPage(page, originalIndex))], renderNextPageDirection({
+      nextPageDirectionProps: {
+        onClick: () => onNextClick(currentPageIndex),
+        disabled: currentPageIndex === totalPageCount - 1
+      }
+    })]
+  });
+};
+const BasePagination = styled__default.default.nav`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
+
+  ${variant({
+  prop: 'type',
+  variants: {
+    default: {},
+    simple: {
+      '& > *:not(:first-child):not(:last-child)': {
+        display: 'none !important'
+      }
+    }
+  }
+})}
   ${sx}
 `;
+const PaginationPage = styled__default.default(UnstyledButton)`
+  transition: background-color 100ms;
 
-const Stack = /*#__PURE__*/React.forwardRef(({
-  gapX = 0,
-  gapY = 0,
-  children,
-  alignItems = 'center',
-  ...props
-}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseStack, {
-  ref: ref,
-  alignItems: alignItems,
-  gapX: gapX,
-  gapY: gapY,
-  ...props,
-  children: children
-}));
-const BaseStack = styled__default.default(View)({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap'
-}, variant({
-  prop: 'gapX',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
-    const styleValue = {
-      '& > *': {
-        px: forcePixelValue(value / 2)
-      },
-      'mx': forcePixelValue(-value / 2)
-    };
-    return [key, styleValue];
-  }))
-}), variant({
-  prop: 'gapY',
-  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
-    const styleValue = {
-      '& > *': {
-        mt: forcePixelValue(value)
-      },
-      'mt': forcePixelValue(-value)
-    };
-    return [key, styleValue];
-  }))
-}));
-const Item = ({
-  children,
-  ...props
-}) => /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-  ...props,
-  children: children
-});
-var Stack$1 = Object.assign(Stack, {
-  Item
-});
-
-const StyledIcon = ({
-  icon: Icon,
-  sx,
-  ...props
-}) => /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-  ...props,
-  color: props.color,
-  sx: {
-    '& svg': {
-      display: 'inline-flex',
-      width: '100%',
-      height: '100%'
-    },
-    ...sx
-  },
-  children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
-});
+  height: ${forcePixelValue(32)};
+  min-width: ${forcePixelValue(32)};
 
-/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
 
-/** Used as the `TypeError` message for "Functions" methods. */
-var FUNC_ERROR_TEXT$1 = 'Expected a function';
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
 
-/** Used as references for various `Number` constants. */
-var NAN$1 = 0 / 0;
+  ${({
+  selected
+}) => selected ? styled.css`
+          background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+          color: ${({
+  theme
+}) => theme.colors['text/inverse']};
+        ` : styled.css`
+          &:hover {
+            background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler/hovered']};
+          }
+        `}
+`;
+const PaginationPageDirection = styled__default.default(UnstyledButton)`
+  transition: background-color 100ms;
 
-/** `Object#toString` result references. */
-var symbolTag$1 = '[object Symbol]';
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  column-gap: ${({
+  theme
+}) => forcePixelValue(theme.space[1])};
 
-/** Used to match leading and trailing whitespace. */
-var reTrim$1 = /^\s+|\s+$/g;
+  height: ${forcePixelValue(32)};
+  min-width: ${forcePixelValue(32)};
 
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex$1 = /^[-+]0x[0-9a-f]+$/i;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
 
-/** Used to detect binary string values. */
-var reIsBinary$1 = /^0b[01]+$/i;
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
 
-/** Used to detect octal string values. */
-var reIsOctal$1 = /^0o[0-7]+$/i;
+  & svg {
+    color: ${({
+  theme
+}) => theme.colors['icon/accent/gray']};
+    width: ${forcePixelValue(16)};
+    height: ${forcePixelValue(16)};
+  }
 
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt$1 = parseInt;
+  &:hover:not(:disabled) {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler/hovered']};
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: ${({
+  theme
+}) => theme.colors['text/disabled']};
+    & > svg {
+      color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+    }
+  }
+`;
+const PaginationTruncationIndicator = styled__default.default.div`
+  min-width: ${forcePixelValue(32)};
 
-/** Detect free variable `global` from Node.js. */
-var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[0])} ${forcePixelValue(theme.space[3])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/subtler']};
 
-/** Detect free variable `self`. */
-var freeSelf$1 = typeof self == 'object' && self && self.Object === Object && self;
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.regular};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
 
-/** Used as a reference to the global object. */
-var root$1 = freeGlobal$1 || freeSelf$1 || Function('return this')();
+  pointer-events: none;
 
-/** Used for built-in method references. */
-var objectProto$1 = Object.prototype;
+  ${sx}
+`;
+var index$3 = Object.assign(Pagination, {
+  Page: PaginationPage,
+  PageDirection: PaginationPageDirection,
+  TruncationIndicator: PaginationTruncationIndicator
+});
 
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString$1 = objectProto$1.toString;
+var reactIs = {exports: {}};
 
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax$1 = Math.max,
-  nativeMin$1 = Math.min;
+var reactIs_production_min = {};
 
 /**
- * Gets the timestamp of the number of milliseconds that have elapsed since
- * the Unix epoch (1 January 1970 00:00:00 UTC).
+ * @license React
+ * react-is.production.min.js
  *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Date
- * @returns {number} Returns the timestamp.
- * @example
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
- * _.defer(function(stamp) {
- *   console.log(_.now() - stamp);
- * }, _.now());
- * // => Logs the number of milliseconds it took for the deferred invocation.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-var now$1 = function () {
-  return root$1.Date.now();
-};
+var hasRequiredReactIs_production_min;
+function requireReactIs_production_min() {
+  if (hasRequiredReactIs_production_min) return reactIs_production_min;
+  hasRequiredReactIs_production_min = 1;
+  var b = Symbol.for("react.element"),
+    c = Symbol.for("react.portal"),
+    d = Symbol.for("react.fragment"),
+    e = Symbol.for("react.strict_mode"),
+    f = Symbol.for("react.profiler"),
+    g = Symbol.for("react.provider"),
+    h = Symbol.for("react.context"),
+    k = Symbol.for("react.server_context"),
+    l = Symbol.for("react.forward_ref"),
+    m = Symbol.for("react.suspense"),
+    n = Symbol.for("react.suspense_list"),
+    p = Symbol.for("react.memo"),
+    q = Symbol.for("react.lazy"),
+    t = Symbol.for("react.offscreen"),
+    u;
+  u = Symbol.for("react.module.reference");
+  function v(a) {
+    if ("object" === typeof a && null !== a) {
+      var r = a.$$typeof;
+      switch (r) {
+        case b:
+          switch (a = a.type, a) {
+            case d:
+            case f:
+            case e:
+            case m:
+            case n:
+              return a;
+            default:
+              switch (a = a && a.$$typeof, a) {
+                case k:
+                case h:
+                case l:
+                case q:
+                case p:
+                case g:
+                  return a;
+                default:
+                  return r;
+              }
+          }
+        case c:
+          return r;
+      }
+    }
+  }
+  reactIs_production_min.ContextConsumer = h;
+  reactIs_production_min.ContextProvider = g;
+  reactIs_production_min.Element = b;
+  reactIs_production_min.ForwardRef = l;
+  reactIs_production_min.Fragment = d;
+  reactIs_production_min.Lazy = q;
+  reactIs_production_min.Memo = p;
+  reactIs_production_min.Portal = c;
+  reactIs_production_min.Profiler = f;
+  reactIs_production_min.StrictMode = e;
+  reactIs_production_min.Suspense = m;
+  reactIs_production_min.SuspenseList = n;
+  reactIs_production_min.isAsyncMode = function () {
+    return !1;
+  };
+  reactIs_production_min.isConcurrentMode = function () {
+    return !1;
+  };
+  reactIs_production_min.isContextConsumer = function (a) {
+    return v(a) === h;
+  };
+  reactIs_production_min.isContextProvider = function (a) {
+    return v(a) === g;
+  };
+  reactIs_production_min.isElement = function (a) {
+    return "object" === typeof a && null !== a && a.$$typeof === b;
+  };
+  reactIs_production_min.isForwardRef = function (a) {
+    return v(a) === l;
+  };
+  reactIs_production_min.isFragment = function (a) {
+    return v(a) === d;
+  };
+  reactIs_production_min.isLazy = function (a) {
+    return v(a) === q;
+  };
+  reactIs_production_min.isMemo = function (a) {
+    return v(a) === p;
+  };
+  reactIs_production_min.isPortal = function (a) {
+    return v(a) === c;
+  };
+  reactIs_production_min.isProfiler = function (a) {
+    return v(a) === f;
+  };
+  reactIs_production_min.isStrictMode = function (a) {
+    return v(a) === e;
+  };
+  reactIs_production_min.isSuspense = function (a) {
+    return v(a) === m;
+  };
+  reactIs_production_min.isSuspenseList = function (a) {
+    return v(a) === n;
+  };
+  reactIs_production_min.isValidElementType = function (a) {
+    return "string" === typeof a || "function" === typeof a || a === d || a === f || a === e || a === m || a === n || a === t || "object" === typeof a && null !== a && (a.$$typeof === q || a.$$typeof === p || a.$$typeof === g || a.$$typeof === h || a.$$typeof === l || a.$$typeof === u || void 0 !== a.getModuleId) ? !0 : !1;
+  };
+  reactIs_production_min.typeOf = v;
+  return reactIs_production_min;
+}
+
+var reactIs_development = {};
 
 /**
- * Creates a debounced function that delays invoking `func` until after `wait`
- * milliseconds have elapsed since the last time the debounced function was
- * invoked. The debounced function comes with a `cancel` method to cancel
- * delayed `func` invocations and a `flush` method to immediately invoke them.
- * Provide `options` to indicate whether `func` should be invoked on the
- * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
- * with the last arguments provided to the debounced function. Subsequent
- * calls to the debounced function return the result of the last `func`
- * invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the debounced function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.debounce` and `_.throttle`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to debounce.
- * @param {number} [wait=0] The number of milliseconds to delay.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=false]
- *  Specify invoking on the leading edge of the timeout.
- * @param {number} [options.maxWait]
- *  The maximum time `func` is allowed to be delayed before it's invoked.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new debounced function.
- * @example
- *
- * // Avoid costly calculations while the window size is in flux.
- * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
- *
- * // Invoke `sendMail` when clicked, debouncing subsequent calls.
- * jQuery(element).on('click', _.debounce(sendMail, 300, {
- *   'leading': true,
- *   'trailing': false
- * }));
+ * @license React
+ * react-is.development.js
  *
- * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
- * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
- * var source = new EventSource('/stream');
- * jQuery(source).on('message', debounced);
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
- * // Cancel the trailing debounced invocation.
- * jQuery(window).on('popstate', debounced.cancel);
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-function debounce$2(func, wait, options) {
-  var lastArgs,
-    lastThis,
-    maxWait,
-    result,
-    timerId,
-    lastCallTime,
-    lastInvokeTime = 0,
-    leading = false,
-    maxing = false,
-    trailing = true;
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT$1);
-  }
-  wait = toNumber$1(wait) || 0;
-  if (isObject$1(options)) {
-    leading = !!options.leading;
-    maxing = 'maxWait' in options;
-    maxWait = maxing ? nativeMax$1(toNumber$1(options.maxWait) || 0, wait) : maxWait;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-  function invokeFunc(time) {
-    var args = lastArgs,
-      thisArg = lastThis;
-    lastArgs = lastThis = undefined;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-  function leadingEdge(time) {
-    // Reset any `maxWait` timer.
-    lastInvokeTime = time;
-    // Start the timer for the trailing edge.
-    timerId = setTimeout(timerExpired, wait);
-    // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime,
-      timeSinceLastInvoke = time - lastInvokeTime,
-      result = wait - timeSinceLastCall;
-    return maxing ? nativeMin$1(result, maxWait - timeSinceLastInvoke) : result;
-  }
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime,
-      timeSinceLastInvoke = time - lastInvokeTime;
+var hasRequiredReactIs_development;
+function requireReactIs_development() {
+  if (hasRequiredReactIs_development) return reactIs_development;
+  hasRequiredReactIs_development = 1;
+  if (process.env.NODE_ENV !== "production") {
+    (function () {
 
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
-  }
-  function timerExpired() {
-    var time = now$1();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-  function trailingEdge(time) {
-    timerId = undefined;
+      // ATTENTION
+      // When adding new symbols to this file,
+      // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+      // The Symbol used to tag the ReactElement-like types.
+      var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+      var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+      var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+      var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+      var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+      var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+      var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+      var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+      var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+      var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+      var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+      var REACT_MEMO_TYPE = Symbol.for('react.memo');
+      var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+      var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
 
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = undefined;
-    return result;
-  }
-  function cancel() {
-    if (timerId !== undefined) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
+      // -----------------------------------------------------------------------------
+
+      var enableScopeAPI = false; // Experimental Create Event Handle API.
+      var enableCacheElement = false;
+      var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+      var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+      // stuff. Intended to enable React core members to more easily debug scheduling
+      // issues in DEV builds.
+
+      var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+      var REACT_MODULE_REFERENCE;
+      {
+        REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+      }
+      function isValidElementType(type) {
+        if (typeof type === 'string' || typeof type === 'function') {
+          return true;
+        } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+        if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
+          return true;
+        }
+        if (typeof type === 'object' && type !== null) {
+          if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE ||
+          // This needs to include all possible module reference object
+          // types supported by any Flight configuration anywhere since
+          // we don't know which Flight build this will end up being used
+          // with.
+          type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+            return true;
+          }
+        }
+        return false;
+      }
+      function typeOf(object) {
+        if (typeof object === 'object' && object !== null) {
+          var $$typeof = object.$$typeof;
+          switch ($$typeof) {
+            case REACT_ELEMENT_TYPE:
+              var type = object.type;
+              switch (type) {
+                case REACT_FRAGMENT_TYPE:
+                case REACT_PROFILER_TYPE:
+                case REACT_STRICT_MODE_TYPE:
+                case REACT_SUSPENSE_TYPE:
+                case REACT_SUSPENSE_LIST_TYPE:
+                  return type;
+                default:
+                  var $$typeofType = type && type.$$typeof;
+                  switch ($$typeofType) {
+                    case REACT_SERVER_CONTEXT_TYPE:
+                    case REACT_CONTEXT_TYPE:
+                    case REACT_FORWARD_REF_TYPE:
+                    case REACT_LAZY_TYPE:
+                    case REACT_MEMO_TYPE:
+                    case REACT_PROVIDER_TYPE:
+                      return $$typeofType;
+                    default:
+                      return $$typeof;
+                  }
+              }
+            case REACT_PORTAL_TYPE:
+              return $$typeof;
+          }
+        }
+        return undefined;
+      }
+      var ContextConsumer = REACT_CONTEXT_TYPE;
+      var ContextProvider = REACT_PROVIDER_TYPE;
+      var Element = REACT_ELEMENT_TYPE;
+      var ForwardRef = REACT_FORWARD_REF_TYPE;
+      var Fragment = REACT_FRAGMENT_TYPE;
+      var Lazy = REACT_LAZY_TYPE;
+      var Memo = REACT_MEMO_TYPE;
+      var Portal = REACT_PORTAL_TYPE;
+      var Profiler = REACT_PROFILER_TYPE;
+      var StrictMode = REACT_STRICT_MODE_TYPE;
+      var Suspense = REACT_SUSPENSE_TYPE;
+      var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+      var hasWarnedAboutDeprecatedIsAsyncMode = false;
+      var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
+
+      function isAsyncMode(object) {
+        {
+          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+            hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+          }
+        }
+        return false;
+      }
+      function isConcurrentMode(object) {
+        {
+          if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
+            hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
+
+            console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+          }
+        }
+        return false;
+      }
+      function isContextConsumer(object) {
+        return typeOf(object) === REACT_CONTEXT_TYPE;
+      }
+      function isContextProvider(object) {
+        return typeOf(object) === REACT_PROVIDER_TYPE;
+      }
+      function isElement(object) {
+        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+      }
+      function isForwardRef(object) {
+        return typeOf(object) === REACT_FORWARD_REF_TYPE;
+      }
+      function isFragment(object) {
+        return typeOf(object) === REACT_FRAGMENT_TYPE;
+      }
+      function isLazy(object) {
+        return typeOf(object) === REACT_LAZY_TYPE;
+      }
+      function isMemo(object) {
+        return typeOf(object) === REACT_MEMO_TYPE;
+      }
+      function isPortal(object) {
+        return typeOf(object) === REACT_PORTAL_TYPE;
+      }
+      function isProfiler(object) {
+        return typeOf(object) === REACT_PROFILER_TYPE;
+      }
+      function isStrictMode(object) {
+        return typeOf(object) === REACT_STRICT_MODE_TYPE;
+      }
+      function isSuspense(object) {
+        return typeOf(object) === REACT_SUSPENSE_TYPE;
+      }
+      function isSuspenseList(object) {
+        return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+      }
+      reactIs_development.ContextConsumer = ContextConsumer;
+      reactIs_development.ContextProvider = ContextProvider;
+      reactIs_development.Element = Element;
+      reactIs_development.ForwardRef = ForwardRef;
+      reactIs_development.Fragment = Fragment;
+      reactIs_development.Lazy = Lazy;
+      reactIs_development.Memo = Memo;
+      reactIs_development.Portal = Portal;
+      reactIs_development.Profiler = Profiler;
+      reactIs_development.StrictMode = StrictMode;
+      reactIs_development.Suspense = Suspense;
+      reactIs_development.SuspenseList = SuspenseList;
+      reactIs_development.isAsyncMode = isAsyncMode;
+      reactIs_development.isConcurrentMode = isConcurrentMode;
+      reactIs_development.isContextConsumer = isContextConsumer;
+      reactIs_development.isContextProvider = isContextProvider;
+      reactIs_development.isElement = isElement;
+      reactIs_development.isForwardRef = isForwardRef;
+      reactIs_development.isFragment = isFragment;
+      reactIs_development.isLazy = isLazy;
+      reactIs_development.isMemo = isMemo;
+      reactIs_development.isPortal = isPortal;
+      reactIs_development.isProfiler = isProfiler;
+      reactIs_development.isStrictMode = isStrictMode;
+      reactIs_development.isSuspense = isSuspense;
+      reactIs_development.isSuspenseList = isSuspenseList;
+      reactIs_development.isValidElementType = isValidElementType;
+      reactIs_development.typeOf = typeOf;
+    })();
   }
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(now$1());
+  return reactIs_development;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  reactIs.exports = requireReactIs_production_min();
+} else {
+  reactIs.exports = requireReactIs_development();
+}
+var reactIsExports = reactIs.exports;
+
+const Pill = ({
+  text,
+  size = 'm',
+  variant = 'secondary',
+  leadingVisual: LeadingVisual,
+  onRemove,
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsxs(BasePill, {
+  ref: ref,
+  size: size,
+  variant: variant,
+  hasLeadingVisual: !isNullable(LeadingVisual),
+  hasRemoveButton: !isNullable(onRemove),
+  ...props,
+  children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, text, onRemove ? /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledButton, {
+    type: 'button',
+    onClick: onRemove,
+    "aria-label": 'Remove Pill',
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(SvgClose, {})
+  }) : null]
+});
+const BasePill = styled__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xxs)};
+
+  & > button {
+    display: flex;
+    transition: background-color 100ms;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.full)};
   }
-  function debounced() {
-    var time = now$1(),
-      isInvoking = shouldInvoke(time);
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
+
+  ${({
+  theme,
+  hasLeadingVisual,
+  hasRemoveButton
+}) => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'pl': hasLeadingVisual || hasRemoveButton ? 2 : 3,
+      'pr': hasRemoveButton ? 0.5 : hasLeadingVisual ? 2 : 3,
+      'py': 1,
+      'fontSize': theme.fontSizes.s,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 1,
+      '& svg': {
+        width: 16,
+        height: 16,
+        color: theme.colors['icon/primary']
+      },
+      '& button': {
+        p: 1
       }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
+    },
+    m: {
+      'pl': hasLeadingVisual || hasRemoveButton ? 2 : 3,
+      'pr': hasRemoveButton ? 1 : hasLeadingVisual ? 2 : 3,
+      'py': 1,
+      'fontSize': theme.fontSizes.xs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 0.5,
+      '& svg': {
+        width: 16,
+        height: 16,
+        color: theme.colors['icon/primary']
+      },
+      '& button': {
+        p: 0.5
+      }
+    },
+    s: {
+      'pl': 2,
+      'pr': hasRemoveButton ? 1 : 2,
+      'py': 0.5,
+      'fontSize': theme.fontSizes.xxs,
+      'fontWeight': theme.fontWeights.medium,
+      'lineHeight': theme.lineHeights[2],
+      'columnGap': 0.5,
+      '& svg': {
+        width: 12,
+        height: 12,
+        color: theme.colors['icon/primary']
+      },
+      '& button': {
+        p: 0.5
       }
     }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
   }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
+})}
+  ${({
+  theme
+}) => variant({
+  prop: 'variant',
+  variants: {
+    secondary: {
+      'color': theme.colors['text/primary'],
+      'backgroundColor': theme.colors['bg/secondary'],
+      '& button': {
+        '&:hover': {
+          backgroundColor: theme.colors['bg/secondary/hovered']
+        }
+      }
+    }
+  }
+})}
+  ${sx}
+`;
+var index$2 = /*#__PURE__*/React.forwardRef(Pill);
+
+const Space = styled__default.default.div`
+  width: inherit;
+  ${space$1};
+  ${sx}
+`;
+
+const Stack = /*#__PURE__*/React.forwardRef(({
+  gapX = 0,
+  gapY = 0,
+  children,
+  alignItems = 'center',
+  ...props
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseStack, {
+  ref: ref,
+  alignItems: alignItems,
+  gapX: gapX,
+  gapY: gapY,
+  ...props,
+  children: children
+}));
+const BaseStack = styled__default.default(View)({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap'
+}, variant({
+  prop: 'gapX',
+  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        px: forcePixelValue(value / 2)
+      },
+      'mx': forcePixelValue(-value / 2)
+    };
+    return [key, styleValue];
+  }))
+}), variant({
+  prop: 'gapY',
+  variants: Object.fromEntries(Object.entries(space).map(([key, value]) => {
+    const styleValue = {
+      '& > *': {
+        mt: forcePixelValue(value)
+      },
+      'mt': forcePixelValue(-value)
+    };
+    return [key, styleValue];
+  }))
+}));
+const Item = ({
+  children,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+  ...props,
+  children: children
+});
+var Stack$1 = Object.assign(Stack, {
+  Item
+});
+
+const StyledIcon = ({
+  icon: Icon,
+  sx,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+  ...props,
+  color: props.color,
+  sx: {
+    '& svg': {
+      display: 'inline-flex',
+      width: '100%',
+      height: '100%'
+    },
+    ...sx
+  },
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
+});
 
 /**
- * Creates a throttled function that only invokes `func` at most once per
- * every `wait` milliseconds. The throttled function comes with a `cancel`
- * method to cancel delayed `func` invocations and a `flush` method to
- * immediately invoke them. Provide `options` to indicate whether `func`
- * should be invoked on the leading and/or trailing edge of the `wait`
- * timeout. The `func` is invoked with the last arguments provided to the
- * throttled function. Subsequent calls to the throttled function return the
- * result of the last `func` invocation.
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** Used as the `TypeError` message for "Functions" methods. */
+var FUNC_ERROR_TEXT$1 = 'Expected a function';
+
+/** Used as references for various `Number` constants. */
+var NAN$1 = 0 / 0;
+
+/** `Object#toString` result references. */
+var symbolTag$1 = '[object Symbol]';
+
+/** Used to match leading and trailing whitespace. */
+var reTrim$1 = /^\s+|\s+$/g;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex$1 = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary$1 = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal$1 = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt$1 = parseInt;
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf$1 = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$1 = freeGlobal$1 || freeSelf$1 || Function('return this')();
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString$1 = objectProto$1.toString;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax$1 = Math.max,
+  nativeMin$1 = Math.min;
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now$1 = function () {
+  return root$1.Date.now();
+};
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
  *
  * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the throttled function
+ * invoked on the trailing edge of the timeout only if the debounced function
  * is invoked more than once during the `wait` timeout.
  *
  * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
  * until to the next tick, similar to `setTimeout` with a timeout of `0`.
  *
  * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.throttle` and `_.debounce`.
+ * for details over the differences between `_.debounce` and `_.throttle`.
  *
  * @static
  * @memberOf _
  * @since 0.1.0
  * @category Function
- * @param {Function} func The function to throttle.
- * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
  * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=true]
+ * @param {boolean} [options.leading=false]
  *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
  * @param {boolean} [options.trailing=true]
  *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new throttled function.
+ * @returns {Function} Returns the new debounced function.
  * @example
  *
- * // Avoid excessively updating the position while scrolling.
- * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
  *
- * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
- * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
- * jQuery(element).on('click', throttled);
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
  *
- * // Cancel the trailing throttled invocation.
- * jQuery(window).on('popstate', throttled.cancel);
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
  */
-function throttle(func, wait, options) {
-  var leading = true,
+function debounce$2(func, wait, options) {
+  var lastArgs,
+    lastThis,
+    maxWait,
+    result,
+    timerId,
+    lastCallTime,
+    lastInvokeTime = 0,
+    leading = false,
+    maxing = false,
     trailing = true;
   if (typeof func != 'function') {
     throw new TypeError(FUNC_ERROR_TEXT$1);
   }
+  wait = toNumber$1(wait) || 0;
   if (isObject$1(options)) {
-    leading = 'leading' in options ? !!options.leading : leading;
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax$1(toNumber$1(options.maxWait) || 0, wait) : maxWait;
     trailing = 'trailing' in options ? !!options.trailing : trailing;
   }
-  return debounce$2(func, wait, {
-    'leading': leading,
-    'maxWait': wait,
-    'trailing': trailing
-  });
-}
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
+  function invokeFunc(time) {
+    var args = lastArgs,
+      thisArg = lastThis;
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+      timeSinceLastInvoke = time - lastInvokeTime,
+      result = wait - timeSinceLastCall;
+    return maxing ? nativeMin$1(result, maxWait - timeSinceLastInvoke) : result;
+  }
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+      timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+  }
+  function timerExpired() {
+    var time = now$1();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now$1());
+  }
+  function debounced() {
+    var time = now$1(),
+      isInvoking = shouldInvoke(time);
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+function throttle(func, wait, options) {
+  var leading = true,
+    trailing = true;
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT$1);
+  }
+  if (isObject$1(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce$2(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
  * _.isObject({});
  * // => true
  *
@@ -20085,1085 +20821,744 @@ function debounce(func, wait, options) {
     // Start the timer for the trailing edge.
     timerId = setTimeout(timerExpired, wait);
     // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime,
-      timeSinceLastInvoke = time - lastInvokeTime,
-      result = wait - timeSinceLastCall;
-    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
-  }
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime,
-      timeSinceLastInvoke = time - lastInvokeTime;
-
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
-  }
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-  function trailingEdge(time) {
-    timerId = undefined;
-
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = undefined;
-    return result;
-  }
-  function cancel() {
-    if (timerId !== undefined) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
-  }
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
-  }
-  function debounced() {
-    var time = now(),
-      isInvoking = shouldInvoke(time);
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return !!value && (type == 'object' || type == 'function');
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol(value) {
-  return typeof value == 'symbol' || isObjectLike(value) && objectToString.call(value) == symbolTag;
-}
-
-/**
- * Converts `value` to a number.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {number} Returns the number.
- * @example
- *
- * _.toNumber(3.2);
- * // => 3.2
- *
- * _.toNumber(Number.MIN_VALUE);
- * // => 5e-324
- *
- * _.toNumber(Infinity);
- * // => Infinity
- *
- * _.toNumber('3.2');
- * // => 3.2
- */
-function toNumber(value) {
-  if (typeof value == 'number') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject(value)) {
-    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject(other) ? other + '' : other;
-  }
-  if (typeof value != 'string') {
-    return value === 0 ? value : +value;
-  }
-  value = value.replace(reTrim, '');
-  var isBinary = reIsBinary.test(value);
-  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
-}
-var lodash_debounce = debounce;
-var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(lodash_debounce);
-
-const useResize = resizeCallback => {
-  const handleResize = React.useCallback(() => resizeCallback?.(), []);
-  React.useEffect(() => {
-    handleResize();
-  }, []);
-  React.useEffect(() => {
-    if (window) {
-      const debouncedHandleResize = debounce$1(handleResize, 150);
-      window.addEventListener('resize', debouncedHandleResize);
-      return () => window.removeEventListener('resize', debouncedHandleResize);
-    }
-  }, []);
-};
-
-const scrollIntoView = ({
-  childrenRef,
-  scrollContainerRef,
-  options = {
-    behavior: 'smooth',
-    direction: 'vertical',
-    offset: 0
-  }
-}) => {
-  if (!isNullable(scrollContainerRef)) {
-    const startSide = options.direction === 'vertical' ? 'top' : 'left';
-    const endSide = options.direction === 'vertical' ? 'bottom' : 'right';
-    const scrollSide = options.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
-    const {
-      [startSide]: childrenStart,
-      [endSide]: childrenEnd
-    } = childrenRef.getBoundingClientRect();
-    const {
-      [startSide]: scrollContainerStart,
-      [endSide]: scrollContainerEnd
-    } = scrollContainerRef.getBoundingClientRect();
-    const isChildrenStartAboveScrollContainer = childrenStart < scrollContainerStart;
-    const isChildrenBottomBelowScrollContainer = childrenEnd > scrollContainerEnd;
-    if (isChildrenStartAboveScrollContainer) {
-      const scrollDistance = childrenStart - scrollContainerStart + scrollContainerRef[scrollSide] - (options.offset || 0);
-      scrollContainerRef.scrollTo({
-        behavior: options.behavior,
-        [startSide]: scrollDistance
-      });
-    } else if (isChildrenBottomBelowScrollContainer) {
-      const scrollDistance = childrenEnd - scrollContainerEnd + scrollContainerRef[scrollSide] + (options.offset || 0);
-      scrollContainerRef.scrollTo({
-        behavior: options.behavior,
-        [startSide]: scrollDistance
-      });
-    }
-  } else {
-    childrenRef.scrollIntoView({
-      behavior: options.behavior
-    });
-  }
-};
-
-const TabItem = ({
-  children,
-  leadingIcon: LeadingIcon,
-  selected = false,
-  onClick,
-  size: propSize,
-  variant: propVariant
-}) => {
-  const ref = React.useRef(null);
-  const {
-    size: contextSize,
-    variant: contextVariant,
-    containerRef
-  } = React.useContext(TabContext);
-  const size = propSize ?? contextSize;
-  const variant = propVariant ?? contextVariant;
-  const handleClick = e => {
-    if (containerRef && containerRef.current && ref.current) {
-      scrollIntoView({
-        scrollContainerRef: containerRef.current,
-        childrenRef: ref.current,
-        options: {
-          behavior: 'smooth',
-          offset: 72
-        }
-      });
-    }
-    onClick?.(e);
-  };
-  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseTabItem, {
-    role: 'tab',
-    ref: ref,
-    variant: variant,
-    size: size,
-    leadingIcon: LeadingIcon,
-    selected: selected,
-    onClick: handleClick,
-    children: /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
-      sx: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        columnGap: 1
-      },
-      children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-        children: children
-      })]
-    })
-  });
-};
-const BaseTabItem = styled__default.default(UnstyledButton)(({
-  theme
-}) => ({
-  'width': 'initial',
-  'position': 'relative',
-  'transition': 'background-color 100ms, color 100ms',
-  'whiteSpace': 'nowrap',
-  '& svg': {
-    transition: 'color 100ms'
-  },
-  '&:focus-visible': {
-    outlineColor: theme.colors['border/focused'],
-    outlineStyle: 'solid',
-    outlineWidth: 2,
-    outlineOffset: 2
-  }
-}), () => variant({
-  prop: 'size',
-  variants: {
-    l: {
-      'px': 4,
-      'py': 2,
-      'fontSize': typography['s'].fontSize,
-      'fontWeight': typography['s'].fontWeight,
-      'lineHeight': typography['s'].lineHeight,
-      '& svg': {
-        width: 20,
-        height: 20
-      }
-    },
-    m: {
-      'px': 4,
-      'py': 2,
-      'fontSize': typography['xs'].fontSize,
-      'fontWeight': typography['xs'].fontWeight,
-      'lineHeight': typography['xs'].lineHeight,
-      '& svg': {
-        width: 20,
-        height: 20
-      }
-    },
-    s: {
-      'px': 3,
-      'py': 2,
-      'fontSize': typography['xxs'].fontSize,
-      'fontWeight': typography['xxs'].fontWeight,
-      'lineHeight': typography['xxs'].lineHeight,
-      '& svg': {
-        width: 16,
-        height: 16
-      }
-    }
-  }
-}), ({
-  theme,
-  selected
-}) => variant({
-  prop: 'variant',
-  variants: {
-    plain: {
-      borderRadius: theme.radii.full,
-      ...(selected ? {
-        'color': theme.colors['text/neutral'],
-        'backgroundColor': theme.colors['bg/selected/subtle'],
-        '& svg': {
-          color: theme.colors['icon/selected']
-        }
-      } : {
-        'color': theme.colors['text/neutral/subtler'],
-        'backgroundColor': theme.colors['bg/neutral/subtler'],
-        '& svg': {
-          color: theme.colors['icon/neutral']
-        },
-        '&:hover, &:active': {
-          'color': theme.colors['text/neutral/subtle'],
-          '& svg': {
-            color: theme.colors['icon/neutral/bolder']
-          }
-        }
-      })
-    },
-    outlined: {
-      borderRadius: theme.radii.full,
-      ...(selected ? {
-        'color': theme.colors['text/inverse'],
-        'backgroundColor': theme.colors['bg/selected'],
-        '& svg': {
-          color: theme.colors['icon/inverse']
-        }
-      } : {
-        'color': theme.colors['text/neutral/subtler'],
-        'backgroundColor': theme.colors['bg/neutral/subtler'],
-        '& svg': {
-          color: theme.colors['icon/neutral']
-        },
-        '&:after': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          borderWidth: 1,
-          borderStyle: 'solid',
-          borderColor: theme.colors['border/neutral/bolder'],
-          borderRadius: theme.radii.full,
-          boxSizing: 'border-box'
-        },
-        '&:hover': {
-          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
-        },
-        '&:active': {
-          backgroundColor: theme.colors['bg/neutral/subtler/pressed']
-        }
-      })
-    },
-    underline: {
-      borderRadius: theme.radii.xxs,
-      ...(selected ? {
-        'color': theme.colors['text/selected'],
-        'backgroundColor': theme.colors['bg/neutral/subtler'],
-        '& svg': {
-          color: theme.colors['icon/selected']
-        },
-        ':after': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          borderBottomWidth: 2,
-          borderBottomStyle: 'solid',
-          borderBottomColor: theme.colors['border/selected'],
-          borderRadius: theme.radii.none,
-          boxSizing: 'border-box'
-        }
-      } : {
-        'color': theme.colors['text/neutral/subtler'],
-        'backgroundColor': theme.colors['bg/neutral/subtler'],
-        '& svg': {
-          color: theme.colors['icon/neutral']
-        },
-        ':hover, :active': {
-          'color': theme.colors['text/neutral/subtle'],
-          '& svg': {
-            color: theme.colors['icon/neutral/bolder']
-          }
-        }
-      })
+    return leading ? invokeFunc(time) : result;
+  }
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+      timeSinceLastInvoke = time - lastInvokeTime,
+      result = wait - timeSinceLastCall;
+    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
+  }
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+      timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+  }
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
     }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
   }
-}));
+  function trailingEdge(time) {
+    timerId = undefined;
 
-const TabContext = /*#__PURE__*/React.createContext({});
-const Tab = ({
-  variant = 'plain',
-  size = 'm',
-  gap = 2,
-  children
-}) => {
-  const rootRef = React.useRef(null);
-  const [isLeftButtonVisible, setIsLeftButtonVisible] = React.useState(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
-  const [isRightButtonVisible, setIsRightButtonVisible] = React.useState(rootRef.current ? rootRef.current.clientWidth + rootRef.current.scrollLeft < rootRef.current.scrollWidth : false);
-  const handleScrollButtonVisibility = () => {
-    if (rootRef.current) {
-      setIsLeftButtonVisible(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
-      setIsRightButtonVisible(rootRef.current ? rootRef.current.clientWidth + Math.ceil(rootRef.current.scrollLeft) < rootRef.current.scrollWidth : false);
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
     }
-  };
-  const buttonWidth = 32;
-  const gradientWidth = 40;
-  const handleLeftButtonClick = () => {
-    if (rootRef.current) {
-      rootRef.current.scrollTo({
-        left: rootRef.current.scrollLeft - rootRef.current.clientWidth + buttonWidth + gradientWidth,
-        behavior: 'smooth'
-      });
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
     }
-  };
-  const handleRightButtonClick = () => {
-    if (rootRef.current) {
-      rootRef.current.scrollTo({
-        left: rootRef.current.scrollLeft + rootRef.current.clientWidth - (buttonWidth + gradientWidth),
-        behavior: 'smooth'
-      });
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+  function debounced() {
+    var time = now(),
+      isInvoking = shouldInvoke(time);
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
     }
-  };
-  React.useEffect(() => {
-    handleScrollButtonVisibility();
-  }, []);
-  useResize(handleScrollButtonVisibility);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(TabContext.Provider, {
-    value: {
-      variant,
-      size,
-      containerRef: rootRef
-    },
-    children: /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
-      position: 'relative',
-      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
-        ref: rootRef,
-        role: 'tablist',
-        sx: {
-          'width': 'auto',
-          'display': 'flex',
-          'flexDirection': 'row',
-          'alignItems': 'center',
-          'columnGap': gap,
-          'overflowX': 'auto',
-          'msOverflowStyle': 'none',
-          '::-webkit-scrollbar': {
-            display: 'none'
-          }
-        },
-        onScroll: throttle$1(handleScrollButtonVisibility, 150),
-        children: children
-      }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
-        display: ['none', 'initial', 'initial'],
-        children: [isLeftButtonVisible ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
-            sx: {
-              position: 'absolute',
-              top: 0,
-              left: forcePixelValue(buttonWidth),
-              bottom: 0,
-              width: forcePixelValue(gradientWidth),
-              height: '100%',
-              background: `linear-gradient(${gradient['overlay/floating/toright']})`,
-              pointerEvents: 'none'
-            }
-          }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-            sx: {
-              position: 'absolute',
-              display: 'flex',
-              alignItems: 'center',
-              top: 0,
-              left: 0,
-              bottom: 0,
-              backgroundColor: elevation.surface
-            },
-            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
-              size: 's',
-              variant: 'plain-bold',
-              icon: SvgChevronLeft,
-              onClick: handleLeftButtonClick
-            })
-          })]
-        }) : null, isRightButtonVisible ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
-            sx: {
-              position: 'absolute',
-              top: 0,
-              right: forcePixelValue(buttonWidth),
-              bottom: 0,
-              width: forcePixelValue(gradientWidth),
-              height: '100%',
-              background: `linear-gradient(${gradient['overlay/floating/toleft']})`,
-              pointerEvents: 'none'
-            }
-          }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-            sx: {
-              position: 'absolute',
-              display: 'flex',
-              alignItems: 'center',
-              top: 0,
-              right: 0,
-              bottom: 0,
-              backgroundColor: elevation.surface
-            },
-            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
-              size: 's',
-              variant: 'plain-bold',
-              icon: SvgChevronRight,
-              onClick: handleRightButtonClick
-            })
-          })]
-        }) : null]
-      })]
-    })
-  });
-};
-var index$1 = Object.assign(Tab, {
-  Item: TabItem
-});
-
-const Textarea = /*#__PURE__*/React.forwardRef(({
-  disabled,
-  ...props
-}, ref) => {
-  const inputRef = useProvidedOrCreatedRef(ref);
-  const focusInput = () => {
-    inputRef.current?.focus();
-  };
-  return /*#__PURE__*/jsxRuntimeExports.jsx(TextareaWrapper, {
-    disabled: disabled,
-    onClick: focusInput,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseTextarea, {
-      ref: e => {
-        isFunction(ref) ? ref(e) : null;
-        inputRef.current = e;
-      },
-      disabled: disabled,
-      ...props
-    })
-  });
-});
-const TextareaWrapper = styled__default.default.div`
-  position: relative;
-  width: ${forcePixelValue('100%')};
-  border-width: ${forcePixelValue(1)};
-  border-style: solid;
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.s)};
-  border-color: ${({
-  theme
-}) => theme.colors['border/input']};
-  background-color: ${({
-  theme
-}) => theme.colors['bg/input']};
-  cursor: text;
-  display: inline-flex;
-  align-items: center;
-
-  padding-top: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-  padding-right: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-  padding-bottom: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-  padding-left: ${({
-  theme
-}) => forcePixelValue(theme.space['5'])};
-
-  font-size: ${({
-  theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
-  theme
-}) => theme.fontWeights.medium};
-  line-height: ${({
-  theme
-}) => theme.lineHeights[2]};
-  color: ${({
-  theme
-}) => theme.colors['text/neutral']};
-  input::placeholder {
-    color: ${({
-  theme
-}) => theme.colors['text/neutral/subtlest']};
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
   }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
 
-  height: 74px;
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value;
+  return !!value && (type == 'object' || type == 'function');
+}
 
-  &:after {
-    content: '';
-    position: absolute;
-    top: ${forcePixelValue(-1)};
-    right: ${forcePixelValue(-1)};
-    bottom: ${forcePixelValue(-1)};
-    left: ${forcePixelValue(-1)};
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return !!value && typeof value == 'object';
+}
 
-    border: ${forcePixelValue(2)} solid transparent;
-    border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.s)};
-    pointer-events: none;
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' || isObjectLike(value) && objectToString.call(value) == symbolTag;
+}
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject(other) ? other + '' : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
   }
+  value = value.replace(reTrim, '');
+  var isBinary = reIsBinary.test(value);
+  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+}
+var lodash_debounce = debounce;
+var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(lodash_debounce);
 
-  ${props => props.validationStatus !== 'error' && !props.disabled && styled.css`
-      &:hover:not(:focus-within) {
-        &:after {
-          border-color: ${({
-  theme
-}) => theme.colors['border/hovered']};
-        }
-      }
-    `}
+const useResize = resizeCallback => {
+  const handleResize = React.useCallback(() => resizeCallback?.(), []);
+  React.useEffect(() => {
+    handleResize();
+  }, []);
+  React.useEffect(() => {
+    if (window) {
+      const debouncedHandleResize = debounce$1(handleResize, 150);
+      window.addEventListener('resize', debouncedHandleResize);
+      return () => window.removeEventListener('resize', debouncedHandleResize);
+    }
+  }, []);
+};
 
-  ${props => props.validationStatus === 'error' && styled.css`
-      &:after {
-        border-color: ${({
-  theme
-}) => theme.colors['border/danger']};
-      }
-    `}
+const scrollIntoView = ({
+  childrenRef,
+  scrollContainerRef,
+  options = {
+    behavior: 'smooth',
+    direction: 'vertical',
+    offset: 0
+  }
+}) => {
+  if (!isNullable(scrollContainerRef)) {
+    const startSide = options.direction === 'vertical' ? 'top' : 'left';
+    const endSide = options.direction === 'vertical' ? 'bottom' : 'right';
+    const scrollSide = options.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+    const {
+      [startSide]: childrenStart,
+      [endSide]: childrenEnd
+    } = childrenRef.getBoundingClientRect();
+    const {
+      [startSide]: scrollContainerStart,
+      [endSide]: scrollContainerEnd
+    } = scrollContainerRef.getBoundingClientRect();
+    const isChildrenStartAboveScrollContainer = childrenStart < scrollContainerStart;
+    const isChildrenBottomBelowScrollContainer = childrenEnd > scrollContainerEnd;
+    if (isChildrenStartAboveScrollContainer) {
+      const scrollDistance = childrenStart - scrollContainerStart + scrollContainerRef[scrollSide] - (options.offset || 0);
+      scrollContainerRef.scrollTo({
+        behavior: options.behavior,
+        [startSide]: scrollDistance
+      });
+    } else if (isChildrenBottomBelowScrollContainer) {
+      const scrollDistance = childrenEnd - scrollContainerEnd + scrollContainerRef[scrollSide] + (options.offset || 0);
+      scrollContainerRef.scrollTo({
+        behavior: options.behavior,
+        [startSide]: scrollDistance
+      });
+    }
+  } else {
+    childrenRef.scrollIntoView({
+      behavior: options.behavior
+    });
+  }
+};
 
-  ${props => props.validationStatus !== 'error' && styled.css`
-      &:focus-within {
-        &:after {
-          border-color: ${({
+const TabItem = ({
+  children,
+  leadingIcon: LeadingIcon,
+  selected = false,
+  onClick,
+  size: propSize,
+  variant: propVariant
+}) => {
+  const ref = React.useRef(null);
+  const {
+    size: contextSize,
+    variant: contextVariant,
+    containerRef
+  } = React.useContext(TabContext);
+  const size = propSize ?? contextSize;
+  const variant = propVariant ?? contextVariant;
+  const handleClick = e => {
+    if (containerRef && containerRef.current && ref.current) {
+      scrollIntoView({
+        scrollContainerRef: containerRef.current,
+        childrenRef: ref.current,
+        options: {
+          behavior: 'smooth',
+          offset: 72
+        }
+      });
+    }
+    onClick?.(e);
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseTabItem, {
+    role: 'tab',
+    ref: ref,
+    variant: variant,
+    size: size,
+    leadingIcon: LeadingIcon,
+    selected: selected,
+    onClick: handleClick,
+    children: /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        columnGap: 1
+      },
+      children: [LeadingIcon ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingIcon, {}) : null, /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        children: children
+      })]
+    })
+  });
+};
+const BaseTabItem = styled__default.default(UnstyledButton)(({
   theme
-}) => theme.colors['border/focused']};
-        }
+}) => ({
+  'width': 'initial',
+  'position': 'relative',
+  'transition': 'background-color 100ms, color 100ms',
+  'whiteSpace': 'nowrap',
+  '& svg': {
+    transition: 'color 100ms'
+  },
+  '&:focus-visible': {
+    outlineColor: theme.colors['border/focused'],
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    outlineOffset: 2
+  }
+}), () => variant({
+  prop: 'size',
+  variants: {
+    l: {
+      'px': 4,
+      'py': 2,
+      'fontSize': typography['s'].fontSize,
+      'fontWeight': typography['s'].fontWeight,
+      'lineHeight': typography['s'].lineHeight,
+      '& svg': {
+        width: 20,
+        height: 20
       }
-    `}
-
-  ${props => props.disabled && styled.css`
-      border-color: ${props.theme.colors['border/input']};
-      background-color: ${props.theme.colors['bg/disabled']};
-      color: ${props.theme.colors['text/disabled']};
-
-      textarea::placeholder {
-        color: ${props.theme.colors['text/disabled']};
+    },
+    m: {
+      'px': 4,
+      'py': 2,
+      'fontSize': typography['xs'].fontSize,
+      'fontWeight': typography['xs'].fontWeight,
+      'lineHeight': typography['xs'].lineHeight,
+      '& svg': {
+        width: 20,
+        height: 20
       }
-
-      &,
-      textarea {
-        cursor: not-allowed;
+    },
+    s: {
+      'px': 3,
+      'py': 2,
+      'fontSize': typography['xxs'].fontSize,
+      'fontWeight': typography['xxs'].fontWeight,
+      'lineHeight': typography['xxs'].lineHeight,
+      '& svg': {
+        width: 16,
+        height: 16
       }
-    `};
-`;
-const UnstyledTextarea = styled__default.default.textarea`
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  border-radius: inherit;
-  color: inherit;
-  transition: inherit;
-
-  border: 0;
-  background-color: transparent;
-  width: 100%;
-  &:focus {
-    outline: 0;
+    }
   }
-`;
-const BaseTextarea = styled__default.default(UnstyledTextarea)`
-  resize: none;
-`;
-
-var reactIs = {exports: {}};
-
-var reactIs_production_min = {};
-
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactIs_production_min;
-function requireReactIs_production_min() {
-  if (hasRequiredReactIs_production_min) return reactIs_production_min;
-  hasRequiredReactIs_production_min = 1;
-  var b = Symbol.for("react.element"),
-    c = Symbol.for("react.portal"),
-    d = Symbol.for("react.fragment"),
-    e = Symbol.for("react.strict_mode"),
-    f = Symbol.for("react.profiler"),
-    g = Symbol.for("react.provider"),
-    h = Symbol.for("react.context"),
-    k = Symbol.for("react.server_context"),
-    l = Symbol.for("react.forward_ref"),
-    m = Symbol.for("react.suspense"),
-    n = Symbol.for("react.suspense_list"),
-    p = Symbol.for("react.memo"),
-    q = Symbol.for("react.lazy"),
-    t = Symbol.for("react.offscreen"),
-    u;
-  u = Symbol.for("react.module.reference");
-  function v(a) {
-    if ("object" === typeof a && null !== a) {
-      var r = a.$$typeof;
-      switch (r) {
-        case b:
-          switch (a = a.type, a) {
-            case d:
-            case f:
-            case e:
-            case m:
-            case n:
-              return a;
-            default:
-              switch (a = a && a.$$typeof, a) {
-                case k:
-                case h:
-                case l:
-                case q:
-                case p:
-                case g:
-                  return a;
-                default:
-                  return r;
-              }
+}), ({
+  theme,
+  selected
+}) => variant({
+  prop: 'variant',
+  variants: {
+    plain: {
+      borderRadius: theme.radii.full,
+      ...(selected ? {
+        'color': theme.colors['text/neutral'],
+        'backgroundColor': theme.colors['bg/selected/subtle'],
+        '& svg': {
+          color: theme.colors['icon/selected']
+        }
+      } : {
+        'color': theme.colors['text/neutral/subtler'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/neutral']
+        },
+        '&:hover, &:active': {
+          'color': theme.colors['text/neutral/subtle'],
+          '& svg': {
+            color: theme.colors['icon/neutral/bolder']
           }
-        case c:
-          return r;
-      }
+        }
+      })
+    },
+    outlined: {
+      borderRadius: theme.radii.full,
+      ...(selected ? {
+        'color': theme.colors['text/inverse'],
+        'backgroundColor': theme.colors['bg/selected'],
+        '& svg': {
+          color: theme.colors['icon/inverse']
+        }
+      } : {
+        'color': theme.colors['text/neutral/subtler'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/neutral']
+        },
+        '&:after': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: theme.colors['border/neutral/bolder'],
+          borderRadius: theme.radii.full,
+          boxSizing: 'border-box'
+        },
+        '&:hover': {
+          backgroundColor: theme.colors['bg/neutral/subtler/hovered']
+        },
+        '&:active': {
+          backgroundColor: theme.colors['bg/neutral/subtler/pressed']
+        }
+      })
+    },
+    underline: {
+      borderRadius: theme.radii.xxs,
+      ...(selected ? {
+        'color': theme.colors['text/selected'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/selected']
+        },
+        ':after': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          borderBottomWidth: 2,
+          borderBottomStyle: 'solid',
+          borderBottomColor: theme.colors['border/selected'],
+          borderRadius: theme.radii.none,
+          boxSizing: 'border-box'
+        }
+      } : {
+        'color': theme.colors['text/neutral/subtler'],
+        'backgroundColor': theme.colors['bg/neutral/subtler'],
+        '& svg': {
+          color: theme.colors['icon/neutral']
+        },
+        ':hover, :active': {
+          'color': theme.colors['text/neutral/subtle'],
+          '& svg': {
+            color: theme.colors['icon/neutral/bolder']
+          }
+        }
+      })
+    }
+  }
+}));
+
+const TabContext = /*#__PURE__*/React.createContext({});
+const Tab = ({
+  variant = 'plain',
+  size = 'm',
+  gap = 2,
+  children
+}) => {
+  const rootRef = React.useRef(null);
+  const [isLeftButtonVisible, setIsLeftButtonVisible] = React.useState(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
+  const [isRightButtonVisible, setIsRightButtonVisible] = React.useState(rootRef.current ? rootRef.current.clientWidth + rootRef.current.scrollLeft < rootRef.current.scrollWidth : false);
+  const handleScrollButtonVisibility = () => {
+    if (rootRef.current) {
+      setIsLeftButtonVisible(rootRef.current ? rootRef.current.scrollLeft > 0 : false);
+      setIsRightButtonVisible(rootRef.current ? rootRef.current.clientWidth + Math.ceil(rootRef.current.scrollLeft) < rootRef.current.scrollWidth : false);
     }
-  }
-  reactIs_production_min.ContextConsumer = h;
-  reactIs_production_min.ContextProvider = g;
-  reactIs_production_min.Element = b;
-  reactIs_production_min.ForwardRef = l;
-  reactIs_production_min.Fragment = d;
-  reactIs_production_min.Lazy = q;
-  reactIs_production_min.Memo = p;
-  reactIs_production_min.Portal = c;
-  reactIs_production_min.Profiler = f;
-  reactIs_production_min.StrictMode = e;
-  reactIs_production_min.Suspense = m;
-  reactIs_production_min.SuspenseList = n;
-  reactIs_production_min.isAsyncMode = function () {
-    return !1;
-  };
-  reactIs_production_min.isConcurrentMode = function () {
-    return !1;
-  };
-  reactIs_production_min.isContextConsumer = function (a) {
-    return v(a) === h;
-  };
-  reactIs_production_min.isContextProvider = function (a) {
-    return v(a) === g;
-  };
-  reactIs_production_min.isElement = function (a) {
-    return "object" === typeof a && null !== a && a.$$typeof === b;
-  };
-  reactIs_production_min.isForwardRef = function (a) {
-    return v(a) === l;
-  };
-  reactIs_production_min.isFragment = function (a) {
-    return v(a) === d;
-  };
-  reactIs_production_min.isLazy = function (a) {
-    return v(a) === q;
-  };
-  reactIs_production_min.isMemo = function (a) {
-    return v(a) === p;
-  };
-  reactIs_production_min.isPortal = function (a) {
-    return v(a) === c;
-  };
-  reactIs_production_min.isProfiler = function (a) {
-    return v(a) === f;
-  };
-  reactIs_production_min.isStrictMode = function (a) {
-    return v(a) === e;
-  };
-  reactIs_production_min.isSuspense = function (a) {
-    return v(a) === m;
   };
-  reactIs_production_min.isSuspenseList = function (a) {
-    return v(a) === n;
+  const buttonWidth = 32;
+  const gradientWidth = 40;
+  const handleLeftButtonClick = () => {
+    if (rootRef.current) {
+      rootRef.current.scrollTo({
+        left: rootRef.current.scrollLeft - rootRef.current.clientWidth + buttonWidth + gradientWidth,
+        behavior: 'smooth'
+      });
+    }
   };
-  reactIs_production_min.isValidElementType = function (a) {
-    return "string" === typeof a || "function" === typeof a || a === d || a === f || a === e || a === m || a === n || a === t || "object" === typeof a && null !== a && (a.$$typeof === q || a.$$typeof === p || a.$$typeof === g || a.$$typeof === h || a.$$typeof === l || a.$$typeof === u || void 0 !== a.getModuleId) ? !0 : !1;
+  const handleRightButtonClick = () => {
+    if (rootRef.current) {
+      rootRef.current.scrollTo({
+        left: rootRef.current.scrollLeft + rootRef.current.clientWidth - (buttonWidth + gradientWidth),
+        behavior: 'smooth'
+      });
+    }
   };
-  reactIs_production_min.typeOf = v;
-  return reactIs_production_min;
-}
-
-var reactIs_development = {};
+  React.useEffect(() => {
+    handleScrollButtonVisibility();
+  }, []);
+  useResize(handleScrollButtonVisibility);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(TabContext.Provider, {
+    value: {
+      variant,
+      size,
+      containerRef: rootRef
+    },
+    children: /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+      position: 'relative',
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        ref: rootRef,
+        role: 'tablist',
+        sx: {
+          'width': 'auto',
+          'display': 'flex',
+          'flexDirection': 'row',
+          'alignItems': 'center',
+          'columnGap': gap,
+          'overflowX': 'auto',
+          'msOverflowStyle': 'none',
+          '::-webkit-scrollbar': {
+            display: 'none'
+          }
+        },
+        onScroll: throttle$1(handleScrollButtonVisibility, 150),
+        children: children
+      }), /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+        display: ['none', 'initial', 'initial'],
+        children: [isLeftButtonVisible ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              top: 0,
+              left: forcePixelValue(buttonWidth),
+              bottom: 0,
+              width: forcePixelValue(gradientWidth),
+              height: '100%',
+              background: `linear-gradient(${gradient['overlay/floating/toright']})`,
+              pointerEvents: 'none'
+            }
+          }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              top: 0,
+              left: 0,
+              bottom: 0,
+              backgroundColor: elevation.surface
+            },
+            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+              size: 's',
+              variant: 'plain-bold',
+              icon: SvgChevronLeft,
+              onClick: handleLeftButtonClick
+            })
+          })]
+        }) : null, isRightButtonVisible ? /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+          children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              top: 0,
+              right: forcePixelValue(buttonWidth),
+              bottom: 0,
+              width: forcePixelValue(gradientWidth),
+              height: '100%',
+              background: `linear-gradient(${gradient['overlay/floating/toleft']})`,
+              pointerEvents: 'none'
+            }
+          }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+            sx: {
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: elevation.surface
+            },
+            children: /*#__PURE__*/jsxRuntimeExports.jsx(IconButton, {
+              size: 's',
+              variant: 'plain-bold',
+              icon: SvgChevronRight,
+              onClick: handleRightButtonClick
+            })
+          })]
+        }) : null]
+      })]
+    })
+  });
+};
+var index$1 = Object.assign(Tab, {
+  Item: TabItem
+});
 
-/**
- * @license React
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactIs_development;
-function requireReactIs_development() {
-  if (hasRequiredReactIs_development) return reactIs_development;
-  hasRequiredReactIs_development = 1;
-  if (process.env.NODE_ENV !== "production") {
-    (function () {
+const Textarea = /*#__PURE__*/React.forwardRef(({
+  disabled,
+  ...props
+}, ref) => {
+  const inputRef = useProvidedOrCreatedRef(ref);
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  return /*#__PURE__*/jsxRuntimeExports.jsx(TextareaWrapper, {
+    disabled: disabled,
+    onClick: focusInput,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseTextarea, {
+      ref: e => {
+        isFunction(ref) ? ref(e) : null;
+        inputRef.current = e;
+      },
+      disabled: disabled,
+      ...props
+    })
+  });
+});
+const TextareaWrapper = styled__default.default.div`
+  position: relative;
+  width: ${forcePixelValue('100%')};
+  border-width: ${forcePixelValue(1)};
+  border-style: solid;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+  border-color: ${({
+  theme
+}) => theme.colors['border/input']};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/input']};
+  cursor: text;
+  display: inline-flex;
+  align-items: center;
 
-      // ATTENTION
-      // When adding new symbols to this file,
-      // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-      // The Symbol used to tag the ReactElement-like types.
-      var REACT_ELEMENT_TYPE = Symbol.for('react.element');
-      var REACT_PORTAL_TYPE = Symbol.for('react.portal');
-      var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-      var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
-      var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
-      var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-      var REACT_CONTEXT_TYPE = Symbol.for('react.context');
-      var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
-      var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-      var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-      var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-      var REACT_MEMO_TYPE = Symbol.for('react.memo');
-      var REACT_LAZY_TYPE = Symbol.for('react.lazy');
-      var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+  padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['5'])};
 
-      // -----------------------------------------------------------------------------
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+  input::placeholder {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
 
-      var enableScopeAPI = false; // Experimental Create Event Handle API.
-      var enableCacheElement = false;
-      var enableTransitionTracing = false; // No known bugs, but needs performance testing
+  height: 74px;
 
-      var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
-      // stuff. Intended to enable React core members to more easily debug scheduling
-      // issues in DEV builds.
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${forcePixelValue(-1)};
+    right: ${forcePixelValue(-1)};
+    bottom: ${forcePixelValue(-1)};
+    left: ${forcePixelValue(-1)};
 
-      var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+    border: ${forcePixelValue(2)} solid transparent;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+    pointer-events: none;
+  }
 
-      var REACT_MODULE_REFERENCE;
-      {
-        REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+  ${props => props.validationStatus !== 'error' && !props.disabled && styled.css`
+      &:hover:not(:focus-within) {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/hovered']};
+        }
       }
-      function isValidElementType(type) {
-        if (typeof type === 'string' || typeof type === 'function') {
-          return true;
-        } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+    `}
 
-        if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
-          return true;
-        }
-        if (typeof type === 'object' && type !== null) {
-          if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE ||
-          // This needs to include all possible module reference object
-          // types supported by any Flight configuration anywhere since
-          // we don't know which Flight build this will end up being used
-          // with.
-          type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
-            return true;
-          }
-        }
-        return false;
+  ${props => props.validationStatus === 'error' && styled.css`
+      &:after {
+        border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
       }
-      function typeOf(object) {
-        if (typeof object === 'object' && object !== null) {
-          var $$typeof = object.$$typeof;
-          switch ($$typeof) {
-            case REACT_ELEMENT_TYPE:
-              var type = object.type;
-              switch (type) {
-                case REACT_FRAGMENT_TYPE:
-                case REACT_PROFILER_TYPE:
-                case REACT_STRICT_MODE_TYPE:
-                case REACT_SUSPENSE_TYPE:
-                case REACT_SUSPENSE_LIST_TYPE:
-                  return type;
-                default:
-                  var $$typeofType = type && type.$$typeof;
-                  switch ($$typeofType) {
-                    case REACT_SERVER_CONTEXT_TYPE:
-                    case REACT_CONTEXT_TYPE:
-                    case REACT_FORWARD_REF_TYPE:
-                    case REACT_LAZY_TYPE:
-                    case REACT_MEMO_TYPE:
-                    case REACT_PROVIDER_TYPE:
-                      return $$typeofType;
-                    default:
-                      return $$typeof;
-                  }
-              }
-            case REACT_PORTAL_TYPE:
-              return $$typeof;
-          }
+    `}
+
+  ${props => props.validationStatus !== 'error' && styled.css`
+      &:focus-within {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/focused']};
         }
-        return undefined;
       }
-      var ContextConsumer = REACT_CONTEXT_TYPE;
-      var ContextProvider = REACT_PROVIDER_TYPE;
-      var Element = REACT_ELEMENT_TYPE;
-      var ForwardRef = REACT_FORWARD_REF_TYPE;
-      var Fragment = REACT_FRAGMENT_TYPE;
-      var Lazy = REACT_LAZY_TYPE;
-      var Memo = REACT_MEMO_TYPE;
-      var Portal = REACT_PORTAL_TYPE;
-      var Profiler = REACT_PROFILER_TYPE;
-      var StrictMode = REACT_STRICT_MODE_TYPE;
-      var Suspense = REACT_SUSPENSE_TYPE;
-      var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
-      var hasWarnedAboutDeprecatedIsAsyncMode = false;
-      var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
+    `}
 
-      function isAsyncMode(object) {
-        {
-          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-            hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+  ${props => props.disabled && styled.css`
+      border-color: ${props.theme.colors['border/input']};
+      background-color: ${props.theme.colors['bg/disabled']};
+      color: ${props.theme.colors['text/disabled']};
 
-            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
-          }
-        }
-        return false;
+      textarea::placeholder {
+        color: ${props.theme.colors['text/disabled']};
       }
-      function isConcurrentMode(object) {
-        {
-          if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
-            hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
 
-            console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
-          }
-        }
-        return false;
-      }
-      function isContextConsumer(object) {
-        return typeOf(object) === REACT_CONTEXT_TYPE;
-      }
-      function isContextProvider(object) {
-        return typeOf(object) === REACT_PROVIDER_TYPE;
-      }
-      function isElement(object) {
-        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-      }
-      function isForwardRef(object) {
-        return typeOf(object) === REACT_FORWARD_REF_TYPE;
-      }
-      function isFragment(object) {
-        return typeOf(object) === REACT_FRAGMENT_TYPE;
-      }
-      function isLazy(object) {
-        return typeOf(object) === REACT_LAZY_TYPE;
-      }
-      function isMemo(object) {
-        return typeOf(object) === REACT_MEMO_TYPE;
-      }
-      function isPortal(object) {
-        return typeOf(object) === REACT_PORTAL_TYPE;
-      }
-      function isProfiler(object) {
-        return typeOf(object) === REACT_PROFILER_TYPE;
-      }
-      function isStrictMode(object) {
-        return typeOf(object) === REACT_STRICT_MODE_TYPE;
-      }
-      function isSuspense(object) {
-        return typeOf(object) === REACT_SUSPENSE_TYPE;
-      }
-      function isSuspenseList(object) {
-        return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+      &,
+      textarea {
+        cursor: not-allowed;
       }
-      reactIs_development.ContextConsumer = ContextConsumer;
-      reactIs_development.ContextProvider = ContextProvider;
-      reactIs_development.Element = Element;
-      reactIs_development.ForwardRef = ForwardRef;
-      reactIs_development.Fragment = Fragment;
-      reactIs_development.Lazy = Lazy;
-      reactIs_development.Memo = Memo;
-      reactIs_development.Portal = Portal;
-      reactIs_development.Profiler = Profiler;
-      reactIs_development.StrictMode = StrictMode;
-      reactIs_development.Suspense = Suspense;
-      reactIs_development.SuspenseList = SuspenseList;
-      reactIs_development.isAsyncMode = isAsyncMode;
-      reactIs_development.isConcurrentMode = isConcurrentMode;
-      reactIs_development.isContextConsumer = isContextConsumer;
-      reactIs_development.isContextProvider = isContextProvider;
-      reactIs_development.isElement = isElement;
-      reactIs_development.isForwardRef = isForwardRef;
-      reactIs_development.isFragment = isFragment;
-      reactIs_development.isLazy = isLazy;
-      reactIs_development.isMemo = isMemo;
-      reactIs_development.isPortal = isPortal;
-      reactIs_development.isProfiler = isProfiler;
-      reactIs_development.isStrictMode = isStrictMode;
-      reactIs_development.isSuspense = isSuspense;
-      reactIs_development.isSuspenseList = isSuspenseList;
-      reactIs_development.isValidElementType = isValidElementType;
-      reactIs_development.typeOf = typeOf;
-    })();
-  }
-  return reactIs_development;
-}
+    `};
+`;
+const UnstyledTextarea = styled__default.default.textarea`
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  border-radius: inherit;
+  color: inherit;
+  transition: inherit;
 
-if (process.env.NODE_ENV === 'production') {
-  reactIs.exports = requireReactIs_production_min();
-} else {
-  reactIs.exports = requireReactIs_development();
-}
-var reactIsExports = reactIs.exports;
+  border: 0;
+  background-color: transparent;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+`;
+const BaseTextarea = styled__default.default(UnstyledTextarea)`
+  resize: none;
+`;
 
 const TextInput = /*#__PURE__*/React.forwardRef(({
   type = 'text',
@@ -21802,10 +22197,10 @@ const useOutsideClick = ({
 };
 
 exports.AnimatePresence = AnimatePresence;
-exports.Breadcrumbs = index$4;
+exports.Breadcrumbs = index$6;
 exports.Button = Button;
 exports.Chip = Chip;
-exports.Dialog = index$3;
+exports.Dialog = index$5;
 exports.DialogHandler = DialogHandler;
 exports.EnigmaUI = index;
 exports.GradientText = GradientText;
@@ -21818,6 +22213,8 @@ exports.ItemList = ItemList;
 exports.MotionView = MotionView;
 exports.Overlay = Overlay$1;
 exports.OverlayPopper = OverlayPopper;
+exports.Pagination = index$3;
+exports.Pill = index$2;
 exports.Space = Space;
 exports.Spinner = Spinner;
 exports.Stack = Stack$1;