@ngrok/mantle 0.0.1-alpha.0 → 0.0.1-alpha.10

package/dist/back-to-top-button/index.d.ts

@@ -6,3 +6,4 @@ type Props = {
 };
 export declare const BackToTopButton: ({ className, showThresholdPx, style }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/back-to-top-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/back-to-top-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,aAAa,EAAa,MAAM,OAAO,CAAC;AAM9D,KAAK,KAAK,GAAG;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,eAAe,0CAAiD,KAAK,4CAuCjF,CAAC"}

package/dist/button/index.d.ts

@@ -5,7 +5,7 @@ declare const buttonVariants: (props?: ({
     priority?: "default" | "primary" | "secondary" | null | undefined;
     state?: "default" | "danger" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type ButtonVariants = VariantProps<typeof buttonVariants>;
 /**
  * The props for the `Button` component.
@@ -23,5 +23,6 @@ declare const Button: import("react").ForwardRefExoticComponent<WithAsChild & Bu
     priority?: "default" | "primary" | "secondary" | null | undefined;
     state?: "default" | "danger" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & import("react").RefAttributes<HTMLButtonElement>>;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>>> & import("react").RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };
+//# sourceMappingURL=index.d.ts.map

package/dist/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAK9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,QAAA,MAAM,cAAc;;;;mFA2CnB,CAAC;AAEF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,cAAc,CAAC;AAEjG;;;;;;;GAOG;AACH,QAAA,MAAM,MAAM;;;;0IAMX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/card/index.d.ts

@@ -23,3 +23,4 @@ export type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
  * The title of a card. Usually composed as a direct child of a `CardHeader` component.
  */
 export declare const CardTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & import("react").RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,IAAI,sGAIf,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,QAAQ,sGAInB,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,UAAU,sGAIrB,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,UAAU,sGAIrB,CAAC;AAGH,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,kBAAkB,CAAC,GAAG,WAAW,CAAC;AAE9E;;GAEG;AACH,eAAO,MAAM,SAAS,mJAGpB,CAAC"}

package/dist/{core → config}/tailwind.preset.d.ts

@@ -306,3 +306,4 @@ declare const _default: {
     }[];
 };
 export default _default;
+//# sourceMappingURL=tailwind.preset.d.ts.map

package/dist/config/tailwind.preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.preset.d.ts","sourceRoot":"","sources":["../../components/config/tailwind.preset.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAwSmB"}

package/dist/cx/index.d.ts

@@ -5,3 +5,4 @@ import { type ClassValue } from "clsx";
  * Allows for tailwind overrides in LTR-specificity-like order of applied classes.
  */
 export declare function cx(...inputs: ClassValue[]): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/cx/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/cx/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAG7C;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/dropdown-menu/index.d.ts

@@ -25,3 +25,4 @@ declare const DropdownMenuShortcut: {
     displayName: string;
 };
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };
+//# sourceMappingURL=index.d.ts.map

package/dist/dropdown-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/dropdown-menu/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAC;AAQvE,QAAA,MAAM,YAAY,6DAA6B,CAAC;AAEhD,QAAA,MAAM,mBAAmB,8IAAgC,CAAC;AAE1D,QAAA,MAAM,iBAAiB,yIAA8B,CAAC;AAEtD,QAAA,MAAM,kBAAkB,mEAA+B,CAAC;AAExD,QAAA,MAAM,eAAe,gEAA4B,CAAC;AAElD,QAAA,MAAM,sBAAsB,8IAAmC,CAAC;AAEhE,QAAA,MAAM,sBAAsB;;kDAkB1B,CAAC;AAGH,QAAA,MAAM,sBAAsB,2MAY1B,CAAC;AAGH,QAAA,MAAM,mBAAmB,wMAevB,CAAC;AAGH,QAAA,MAAM,gBAAgB;;kDAepB,CAAC;AAGH,QAAA,MAAM,wBAAwB,6MAoB5B,CAAC;AAGH,QAAA,MAAM,qBAAqB,0MAmBzB,CAAC;AAGH,QAAA,MAAM,iBAAiB;;kDAWrB,CAAC;AAGH,QAAA,MAAM,qBAAqB,0MAKzB,CAAC;AAGH,QAAA,MAAM,oBAAoB;8BAA6B,MAAM,cAAc,CAAC,eAAe,CAAC;;CAE3F,CAAC;AAGF,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,GACtB,CAAC"}

package/dist/hooks/use-matches-media-query.d.ts

@@ -1 +1,2 @@
 export declare function useMatchesMediaQuery(mediaQuery: MediaQueryList): boolean;
+//# sourceMappingURL=use-matches-media-query.d.ts.map

package/dist/hooks/use-matches-media-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-matches-media-query.d.ts","sourceRoot":"","sources":["../../components/hooks/use-matches-media-query.tsx"],"names":[],"mappings":"AAEA,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,cAAc,GAAG,OAAO,CAyBxE"}

package/dist/hooks/use-prefers-reduced-motion.d.ts

@@ -2,3 +2,4 @@
  * usePrefersReducedMotion returns true if the user has opted out of animations
  */
 export declare function usePrefersReducedMotion(): boolean;
+//# sourceMappingURL=use-prefers-reduced-motion.d.ts.map

package/dist/hooks/use-prefers-reduced-motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-prefers-reduced-motion.d.ts","sourceRoot":"","sources":["../../components/hooks/use-prefers-reduced-motion.tsx"],"names":[],"mappings":"AASA;;GAEG;AACH,wBAAgB,uBAAuB,YAuBtC"}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export { Button } from "./button";
+export { Card, CardBody, CardFooter, CardHeader, CardTitle } from "./card";
+export { cx } from "./cx";
+export { Input } from "./input";
+export { MediaObject, MediaObjectMedia, MediaObjectContent } from "./media-object";
+export { Select, SelectContent, SelectGroup, SelectIcon, SelectLabel, SelectOption, SelectSeparator, SelectTrigger, SelectValue, } from "./select";
+export { ThemeProvider, PreventWrongThemeFlash, isTheme, useTheme } from "./theme-provider";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip";
+export type { ButtonProps } from "./button";
+export type { CardProps, CardTitleProps } from "./card";
+export type { InputProps } from "./input";
+export type { AutoComplete, InputType } from "./input/types";
+export type { Theme, ThemeProviderProps } from "./theme-provider";
+export type { WithAsChild } from "./types/as-child";
+export type { WithStyleProps } from "./types/with-style-props";
+export type * from "./config/tailwind.preset";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../components/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACnF,OAAO,EACN,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,YAAY,EACZ,eAAe,EACf,aAAa,EACb,WAAW,GACX,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAGrF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC7D,YAAY,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,mBAAmB,0BAA0B,CAAC"}

package/dist/index.js

@@ -0,0 +1,547 @@
+/**
+ * @ngrok/mantle v0.0.1-alpha.10
+ *
+ * Copyright (c) ngrok.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, useMemo, useContext, createContext } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons';
+import { Trigger, Content, Label, Item, Separator, Root, Group, Value, Icon, Portal, Viewport, ItemIndicator, ItemText } from '@radix-ui/react-select';
+import invariant from 'tiny-invariant';
+import { Content as Content$1, Provider, Root as Root$1, Trigger as Trigger$1 } from '@radix-ui/react-tooltip';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+/**
+ * Conditionally add Tailwind (and other) CSS classes.
+ *
+ * Allows for tailwind overrides in LTR-specificity-like order of applied classes.
+ */
+function cx() {
+  for (var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++) {
+    inputs[_key] = arguments[_key];
+  }
+  return twMerge(clsx(inputs));
+}
+
+var _excluded$4 = ["className", "priority", "size", "state", "asChild"];
+var buttonVariants = cva("inline-flex items-center justify-center rounded-md font-medium border transition-colors focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50", {
+  variants: {
+    priority: {
+      default: "border-blue-500 text-blue-500 bg-white hover:bg-blue-50 active:bg-blue-100 focus-visible:ring-blue-600/25",
+      primary: "bg-blue-500 text-button hover:bg-blue-600 active:bg-blue-700 focus-visible:ring-blue-600/25",
+      secondary: "bg-blue-50 border-blue-200 text-blue-900 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-600/25"
+    },
+    state: {
+      default: "",
+      danger: ""
+    },
+    size: {
+      default: "h-10 px-4 py-2",
+      sm: "h-9 rounded-md px-3 text-sm",
+      lg: "h-12 rounded-md px-6 text-lg"
+    }
+  },
+  defaultVariants: {
+    priority: "default",
+    size: "default"
+  },
+  compoundVariants: [{
+    priority: "default",
+    state: "danger",
+    class: "border-red-500 text-red-500 hover:bg-red-50 active:bg-red-100 focus-visible:ring-red-600/25"
+  }, {
+    priority: "primary",
+    state: "danger",
+    class: "bg-red-500 hover:bg-red-600 active:bg-red-700 focus-visible:ring-red-600/25"
+  }, {
+    priority: "secondary",
+    state: "danger",
+    class: "bg-red-50 border-red-200 text-red-900 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-600/25"
+  }]
+});
+/**
+ * Renders a button or a component that looks like a button, an interactive
+ * element activated by a user with a mouse, keyboard, finger, voice command, or
+ * other assistive technology. Once activated, it then performs an action, such
+ * as submitting a form or opening a dialog.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ */
+var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$priority = _ref.priority,
+    priority = _ref$priority === void 0 ? "default" : _ref$priority,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? "default" : _ref$state,
+    _ref$asChild = _ref.asChild,
+    asChild = _ref$asChild === void 0 ? false : _ref$asChild,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  var Comp = asChild ? Slot : "button";
+  return jsx(Comp, _extends({
+    className: cx(buttonVariants({
+      priority: priority,
+      size: size,
+      state: state,
+      className: className
+    })),
+    ref: ref
+  }, props));
+});
+Button.displayName = "Button";
+
+var _excluded$3 = ["className", "children"],
+  _excluded2$1 = ["className", "children"],
+  _excluded3$1 = ["className", "children"],
+  _excluded4$1 = ["className", "children"],
+  _excluded5$1 = ["className", "asChild"];
+/**
+ * A container that can be used to display content in a box resembling a playing
+ * card.
+ */
+var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return jsx("div", _extends({
+    ref: ref,
+    className: cx("relative rounded border bg-white", className)
+  }, rest, {
+    children: children
+  }));
+});
+Card.displayName = "Card";
+/**
+ * The main content of a card. Usually composed as a direct child of a `Card` component.
+ */
+var CardBody = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    children = _ref2.children,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+  return jsx("div", _extends({
+    ref: ref,
+    className: cx("p-6", className)
+  }, rest, {
+    children: children
+  }));
+});
+CardBody.displayName = "CardBody";
+/**
+ * The footer container of a card. Usually composed as a direct child of a `Card` component.
+ */
+var CardFooter = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var className = _ref3.className,
+    children = _ref3.children,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
+  return jsx("div", _extends({
+    ref: ref,
+    className: cx("border-t px-6 py-3", className)
+  }, rest, {
+    children: children
+  }));
+});
+CardFooter.displayName = "CardFooter";
+/**
+ * The header container of a card. Usually composed as a direct child of a `Card` component.
+ */
+var CardHeader = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var className = _ref4.className,
+    children = _ref4.children,
+    rest = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
+  return jsx("div", _extends({
+    ref: ref,
+    className: cx("border-b px-6 py-3", className)
+  }, rest, {
+    children: children
+  }));
+});
+CardHeader.displayName = "CardHeader";
+/**
+ * The title of a card. Usually composed as a direct child of a `CardHeader` component.
+ */
+var CardTitle = /*#__PURE__*/forwardRef(function (_ref5, ref) {
+  var className = _ref5.className,
+    asChild = _ref5.asChild,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$1);
+  var Comp = asChild ? Slot : "h3";
+  return jsx(Comp, _extends({
+    ref: ref,
+    className: cx("font-semibold leading-none tracking-tight", className)
+  }, props));
+});
+CardTitle.displayName = "CardTitle";
+
+var _excluded$2 = ["className", "state", "type"];
+var inputVariants = cva("flex h-10 w-full rounded-md border bg-white px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-4 disabled:cursor-not-allowed disabled:opacity-50", {
+  variants: {
+    state: {
+      default: "text-gray-900 border-gray-300 placeholder:text-gray-400 focus:border-blue-500 focus-visible:ring-blue-600/25",
+      danger: "text-red-900 border-red-500 placeholder:text-red-400 focus:border-red-500 focus-visible:ring-red-600/25",
+      success: "text-green-900 border-green-500 placeholder:text-green-400 focus:border-green-500 focus-visible:ring-green-600/25"
+    }
+  },
+  defaultVariants: {
+    state: "default"
+  }
+});
+/**
+ * Used to create interactive controls for web-based forms in order to accept data from the user
+ */
+var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? "default" : _ref$state,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "text" : _ref$type,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return jsx("input", _extends({
+    className: cx(inputVariants({
+      state: state
+    }), className),
+    ref: ref,
+    type: type
+  }, props));
+});
+Input.displayName = "Input";
+
+/**
+ * The media object is an image/icon (media) to the left, with descriptive
+ * content (title and subtitle/description) to the right.
+ *
+ * Change the spacing between the media and content by passing a `gap-*` class.
+ * The default gap is `gap-4`.
+ *
+ * Use flexbox utilities to change the alignment of the media and content.
+ *
+ * Compose the media object with the `MediaObjectMedia` and `MediaObjectContent`
+ * components as direct children.
+ */
+var MediaObject = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    style = _ref.style;
+  return jsx("div", {
+    ref: ref,
+    className: cx("flex gap-4", className),
+    style: style,
+    children: children
+  });
+});
+MediaObject.displayName = "MediaObject";
+/**
+ * The container for an image or icon to display in the media slot of the media object.
+ */
+var MediaObjectMedia = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    children = _ref2.children,
+    style = _ref2.style;
+  return jsx("div", {
+    ref: ref,
+    className: cx("shrink-0 leading-none", className),
+    style: style,
+    children: children
+  });
+});
+MediaObjectMedia.displayName = "MediaObjectMedia";
+/**
+ * The container for the content slot of a media object.
+ */
+var MediaObjectContent = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var className = _ref3.className,
+    children = _ref3.children,
+    style = _ref3.style;
+  return jsx("div", {
+    ref: ref,
+    className: cx("min-w-0 flex-1", className),
+    style: style,
+    children: children
+  });
+});
+MediaObjectContent.displayName = "MediaObjectContent";
+
+var _excluded$1 = ["className", "children", "hideIcon"],
+  _excluded2 = ["className", "children", "position"],
+  _excluded3 = ["className"],
+  _excluded4 = ["className", "children"],
+  _excluded5 = ["className"];
+var Select = Root;
+var SelectGroup = Group;
+var SelectValue = Value;
+var SelectIcon = Icon;
+var SelectTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$hideIcon = _ref.hideIcon,
+    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return jsxs(Trigger, _extends({
+    ref: ref,
+    className: cx("flex h-10 w-full items-center justify-between rounded-md border border-gray-500 bg-white px-3 py-2 placeholder:text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-600/25 disabled:cursor-not-allowed disabled:opacity-50", className)
+  }, props, {
+    children: [children, !hideIcon && jsx(Icon, {
+      asChild: true,
+      children: jsx(CaretSortIcon, {
+        className: "h-4 w-4 opacity-50"
+      })
+    })]
+  }));
+});
+SelectTrigger.displayName = Trigger.displayName;
+var SelectContent = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    children = _ref2.children,
+    _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? "popper" : _ref2$position,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return jsx(Portal, {
+    children: jsx(Content, _extends({
+      ref: ref,
+      className: cx("relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-gray-900 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+      position: position
+    }, props, {
+      children: jsx(Viewport, {
+        className: cx("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+        children: children
+      })
+    }))
+  });
+});
+SelectContent.displayName = Content.displayName;
+var SelectLabel = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var className = _ref3.className,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  return jsx(Label, _extends({
+    ref: ref,
+    className: cx("px-2 py-1.5 text-sm font-semibold", className)
+  }, props));
+});
+SelectLabel.displayName = Label.displayName;
+var SelectOption = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var className = _ref4.className,
+    children = _ref4.children,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  return jsxs(Item, _extends({
+    ref: ref,
+    className: cx("relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-2 pr-2 text-sm outline-none focus:bg-blue-500 focus:text-button data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)
+  }, props, {
+    children: [jsx("span", {
+      className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center",
+      children: jsx(ItemIndicator, {
+        children: jsx(CheckIcon, {
+          className: "h-4 w-4"
+        })
+      })
+    }), jsx(ItemText, {
+      children: children
+    })]
+  }));
+});
+SelectOption.displayName = Item.displayName;
+var SelectSeparator = /*#__PURE__*/forwardRef(function (_ref5, ref) {
+  var className = _ref5.className,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+  return jsx(Separator, _extends({
+    ref: ref,
+    className: cx("-mx-1 my-1 h-px bg-muted", className)
+  }, props));
+});
+SelectSeparator.displayName = Separator.displayName;
+
+/**
+ * prefersDarkModeMediaQuery is the media query used to detect if the user prefers dark mode.
+ */
+var prefersDarkModeMediaQuery = "(prefers-color-scheme: dark)";
+/**
+ * prefersHighContrastMediaQuery is the media query used to detect if the user prefers high contrast mode.
+ */
+var prefersHighContrastMediaQuery = "(prefers-contrast: more)";
+/**
+ * themes is a tuple of valid themes.
+ */
+var themes = ["system", "light", "dark", "light-high-contrast", "dark-high-contrast"];
+/**
+ * Type predicate that checks if a value is a valid theme.
+ */
+function isTheme(value) {
+  if (typeof value !== "string") {
+    return false;
+  }
+  return themes.includes(value);
+}
+/**
+ * DEFAULT_STORAGE_KEY is the default key used to store the theme in localStorage.
+ */
+var DEFAULT_STORAGE_KEY = "mantle-ui-theme";
+/**
+ * Initial state for the ThemeProviderContext.
+ */
+var initialState = ["system", function () {
+  return null;
+}];
+/**
+ * ThemeProviderContext is a React Context that provides the current theme and a function to set the theme.
+ */
+var ThemeProviderContext = /*#__PURE__*/createContext(initialState);
+/**
+ * isBrowser returns true if the code is running in a browser environment.
+ */
+var isBrowser = function isBrowser() {
+  return typeof window !== "undefined";
+};
+/**
+ * determines the initial theme based on the default theme and the value stored in localStorage by the storageKey
+ */
+function determineInitialTheme(defaultTheme, storageKey) {
+  var fallback = defaultTheme != null ? defaultTheme : "system";
+  if (isBrowser()) {
+    var _window$localStorage$;
+    return (_window$localStorage$ = window.localStorage.getItem(storageKey)) != null ? _window$localStorage$ : fallback;
+  }
+  return fallback;
+}
+/**
+ * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.
+ */
+function ThemeProvider(_ref) {
+  var children = _ref.children,
+    _ref$defaultTheme = _ref.defaultTheme,
+    defaultTheme = _ref$defaultTheme === void 0 ? "system" : _ref$defaultTheme,
+    _ref$storageKey = _ref.storageKey,
+    storageKey = _ref$storageKey === void 0 ? DEFAULT_STORAGE_KEY : _ref$storageKey;
+  var _useState = useState(function () {
+      var initialTheme = determineInitialTheme(defaultTheme, storageKey);
+      applyTheme(initialTheme);
+      return initialTheme;
+    }),
+    theme = _useState[0],
+    setTheme = _useState[1];
+  useEffect(function () {
+    var storedTheme = window.localStorage.getItem(storageKey);
+    if (isTheme(storedTheme)) {
+      setTheme(storedTheme);
+      applyTheme(storedTheme);
+    }
+  }, [storageKey]);
+  var value = useMemo(function () {
+    return [theme, function (theme) {
+      window.localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+      applyTheme(theme);
+    }];
+  }, [theme, storageKey]);
+  return jsx(ThemeProviderContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+/**
+ * useTheme returns the current theme and a function to set the theme.
+ *
+ * @note This function will throw an error if used outside of a ThemeProvider context tree.
+ */
+function useTheme() {
+  var context = useContext(ThemeProviderContext);
+  !context ? process.env.NODE_ENV !== "production" ? invariant(false, "useTheme must be used within a ThemeProvider") : invariant(false) : void 0;
+  return context;
+}
+/**
+ * Applies the given theme to the <html> element.
+ */
+function applyTheme(theme) {
+  var _htmlElement$classLis;
+  if (!isBrowser()) {
+    return;
+  }
+  var htmlElement = window.document.documentElement;
+  (_htmlElement$classLis = htmlElement.classList).remove.apply(_htmlElement$classLis, themes);
+  var prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;
+  var prefersContrastMore = window.matchMedia(prefersHighContrastMediaQuery).matches;
+  var newTheme = theme === "system" ? determineThemeFromMediaQuery({
+    prefersDarkMode: prefersDarkMode,
+    prefersContrastMore: prefersContrastMore
+  }) : theme;
+  htmlElement.classList.add(newTheme);
+  htmlElement.dataset.theme = newTheme;
+}
+/**
+ * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.
+ */
+function determineThemeFromMediaQuery(_ref2) {
+  var prefersDarkMode = _ref2.prefersDarkMode,
+    prefersContrastMore = _ref2.prefersContrastMore;
+  if (prefersContrastMore) {
+    return prefersDarkMode ? "dark-high-contrast" : "light-high-contrast";
+  }
+  return prefersDarkMode ? "dark" : "light";
+}
+/**
+ * PreventWrongThemeFlash is a React component that prevents the wrong theme from flashing on initial page load.
+ * Render as high as possible in the DOM, preferably in the <head> element.
+ */
+var PreventWrongThemeFlash = function PreventWrongThemeFlash(_ref3) {
+  var _ref3$defaultTheme = _ref3.defaultTheme,
+    defaultTheme = _ref3$defaultTheme === void 0 ? "system" : _ref3$defaultTheme,
+    _ref3$storageKey = _ref3.storageKey,
+    storageKey = _ref3$storageKey === void 0 ? DEFAULT_STORAGE_KEY : _ref3$storageKey;
+  return jsx("script", {
+    dangerouslySetInnerHTML: {
+      __html: ("\n(function() {\n\tconst themes = " + JSON.stringify(themes) + ";\n\tconst isTheme = (value) => typeof value === \"string\" && themes.includes(value);\n\tconst fallbackTheme = \"" + defaultTheme + "\" ?? \"system\";\n\tconst maybeStoredTheme = window.localStorage.getItem(\"" + storageKey + "\");\n\tconst themePreference = isTheme(maybeStoredTheme) ? maybeStoredTheme : fallbackTheme;\n\tconst prefersDarkMode = window.matchMedia(\"" + prefersDarkModeMediaQuery + "\").matches;\n\tconst prefersContrastMore = window.matchMedia(\"" + prefersHighContrastMediaQuery + "\").matches;\n\tlet initialTheme = themePreference;\n\tif (initialTheme === \"system\") {\n\t\tif (prefersContrastMore) {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t} else {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark\" : \"light\";\n\t\t}\n\t}\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\thtmlElement.classList.add(initialTheme);\n\thtmlElement.dataset.theme = initialTheme;\n})();\n").trim()
+    }
+  });
+};
+
+var _excluded = ["className", "sideOffset"];
+var TooltipProvider = Provider;
+var Tooltip = Root$1;
+var TooltipTrigger = Trigger$1;
+var TooltipContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 4 : _ref$sideOffset,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return jsx(Content$1, _extends({
+    ref: ref,
+    sideOffset: sideOffset,
+    className: cx("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
+  }, props));
+});
+TooltipContent.displayName = Content$1.displayName;
+
+export { Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Input, MediaObject, MediaObjectContent, MediaObjectMedia, PreventWrongThemeFlash, Select, SelectContent, SelectGroup, SelectIcon, SelectLabel, SelectOption, SelectSeparator, SelectTrigger, SelectValue, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cx, isTheme, useTheme };
+//# sourceMappingURL=index.js.map