@algolia/satellite 1.0.0-beta.17 → 1.0.0-beta.170

package/esm/Tabs/components/LinkTab.js

@@ -0,0 +1,78 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import Badge from "../../Badge";
+import stl from "../../styles/helpers/satellitePrefixer";
+import useLinkProps from "../../utils/useLinkProps";
+import { ACTIVE_UNDERLINE_VARIANT_CLASSNAMES } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getNextNonDisabledSibling = function getNextNonDisabledSibling(el) {
+  var _ref;
+  if (!el) return null;
+  var next = el;
+  do {
+    var _next, _next$nextElementSibl, _next2, _next3;
+    next = (_next$nextElementSibl = (_next2 = next) === null || _next2 === void 0 ? void 0 : _next2.nextElementSibling) !== null && _next$nextElementSibl !== void 0 ? _next$nextElementSibl : (_next3 = next) === null || _next3 === void 0 || (_next3 = _next3.parentElement) === null || _next3 === void 0 ? void 0 : _next3.firstElementChild;
+  } while ((_next = next) !== null && _next !== void 0 && _next.getAttribute("aria-disabled"));
+  return (_ref = next) !== null && _ref !== void 0 ? _ref : null;
+};
+var getPreviousNonDisabledSibling = function getPreviousNonDisabledSibling(el) {
+  var _ref2;
+  if (!el) return null;
+  var next = el;
+  do {
+    var _next4, _next$previousElement, _next5, _next6;
+    next = (_next$previousElement = (_next5 = next) === null || _next5 === void 0 ? void 0 : _next5.previousElementSibling) !== null && _next$previousElement !== void 0 ? _next$previousElement : (_next6 = next) === null || _next6 === void 0 || (_next6 = _next6.parentElement) === null || _next6 === void 0 ? void 0 : _next6.lastElementChild;
+  } while ((_next4 = next) !== null && _next4 !== void 0 && _next4.getAttribute("aria-disabled"));
+  return (_ref2 = next) !== null && _ref2 !== void 0 ? _ref2 : null;
+};
+export var LinkTab = function LinkTab(_ref3) {
+  var tab = _ref3.tab,
+    _onClick = _ref3.onClick,
+    selected = _ref3.selected;
+  var variant = tab.variant || "accent";
+  var selectionProps = selected ? {
+    "aria-selected": true,
+    tabIndex: 0
+  } : {
+    "aria-selected": false,
+    tabIndex: -1
+  };
+  var linkProps = useLinkProps({
+    href: tab.to,
+    disabled: tab.disabled,
+    onClick: function onClick(evt) {
+      if (_onClick) {
+        _onClick(evt);
+      }
+    }
+  });
+  return /*#__PURE__*/_jsxs("a", _objectSpread(_objectSpread(_objectSpread({}, linkProps), selectionProps), {}, {
+    id: tab.id,
+    role: "tab",
+    className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
+    onKeyDown: function onKeyDown(evt) {
+      if (tab.disabled) return;
+      if (evt.key === "ArrowRight") {
+        var nextElement = getNextNonDisabledSibling(evt.currentTarget);
+        nextElement === null || nextElement === void 0 || nextElement.click();
+        nextElement === null || nextElement === void 0 || nextElement.focus();
+      } else if (evt.key === "ArrowLeft") {
+        var previousElement = getPreviousNonDisabledSibling(evt.currentTarget);
+        previousElement === null || previousElement === void 0 || previousElement.click();
+        previousElement === null || previousElement === void 0 || previousElement.focus();
+      }
+    },
+    children: [tab.label, !!tab.value && /*#__PURE__*/_jsx(Badge, {
+      size: "small",
+      variant: variant,
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["ml-2 text-grey-600"]))),
+      children: tab.value
+    })]
+  }));
+};
+export default LinkTab;

package/esm/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./LinkTabs";
+export * from "./ContentTabs";
+export * from "./types";
+export { default } from "./LinkTabs";

package/esm/Tabs/index.js

@@ -0,0 +1,4 @@
+export * from "./LinkTabs";
+export * from "./ContentTabs";
+export * from "./types";
+export { default } from "./LinkTabs";

package/esm/Tabs/types.d.ts

@@ -0,0 +1,34 @@
+import type { MouseEvent, ReactNode } from "react";
+import type { LocationSensorState } from "react-use/lib/useLocation";
+import type { ColorVariant } from "../types";
+export interface BaseTab {
+    id?: string;
+    label: ReactNode;
+    variant?: ColorVariant;
+    disabled?: boolean;
+    value?: string;
+    /** @ignore */
+    className?: string;
+}
+export declare type UrlMatcher = (tab: LinkTab, location: LocationSensorState) => boolean;
+export interface LinkTab extends BaseTab {
+    to: string;
+}
+export interface LinkTabsProps {
+    /** @ignore */
+    className?: string;
+    tabs: LinkTab[];
+    onTabClick?(event: MouseEvent<HTMLAnchorElement>, tab: LinkTab): void;
+    urlMatcher?: UrlMatcher;
+}
+export interface ContentTab extends BaseTab {
+    content: ReactNode;
+}
+export interface ContentTabsProps {
+    /** @ignore */
+    className?: string;
+    tabs: ContentTab[];
+    tabIndex?: number;
+    defaultIndex?: number;
+    onChange?: (tabIndex: number) => void;
+}

package/esm/Tabs/types.js

@@ -0,0 +1 @@
+export {};

package/esm/Tabs/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ColorVariant } from "../types";
+export declare const ACTIVE_UNDERLINE_VARIANT_CLASSNAMES: Record<ColorVariant, string>;

package/esm/Tabs/utils.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import stl from "../styles/helpers/satellitePrefixer";
+export var ACTIVE_UNDERLINE_VARIANT_CLASSNAMES = {
+  grey: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tab-grey"]))),
+  accent: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tab-accent"]))),
+  green: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tab-green"]))),
+  blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["tab-blue"]))),
+  orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["tab-orange"]))),
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["tab-red"])))
+};

package/esm/Tag/Tag.d.ts

@@ -0,0 +1,48 @@
+import type { DetailedHTMLProps, HTMLAttributes, MouseEventHandler } from "react";
+import type { ColorVariant } from "../types";
+export declare type TagVariants = ColorVariant | "pink";
+export declare type TagLocale = {
+    addButton?: string | ((title: string) => string);
+    removeButton?: string | ((title: string) => string);
+};
+export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    /** The "pink" variant should only be used for **Algolia admin** related things. */
+    variant?: TagVariants;
+    /** Handler function called when the "add" button is clicked. */
+    onAdd?: MouseEventHandler<HTMLElement>;
+    /** The tooltip text to display when hovering over the "add" button. */
+    addTooltip?: string;
+    /** Handler function called when the "remove" button is clicked. */
+    onRemove?: MouseEventHandler<HTMLElement>;
+    /** The tooltip text to display when hovering over the "remove" button. */
+    removeTooltip?: string;
+    /**
+     * Customize the text describing the "add" and "remove" buttons.
+     * If not provided, default values will be used.
+     */
+    locale?: TagLocale;
+}
+/**
+ * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
+ * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or removed from an object by users.
+ *
+ * - For status information, use badges instead
+ * - For tallies or counts, use badges
+ *
+ * ## Variations
+ * Consider the context and implied severity to choose from the following range:
+ *
+ * - **Accent**: `variant="accent"`
+ * - **Informational**: `variant="grey"` & `variant="blue"`
+ * - **Success**: `variant="green"`
+ * - **Warning**: `variant="orange"`
+ * - **Error**: `variant="red"`
+ * - **Admin**: `variant="pink"`
+ *
+ * ## Usability best practices
+ * - Present tags close to or within the input control to allow users to add and remove tags
+ * - When writing tags, avoid line-wrapping
+ * - Define the max width of text within a tag. Once the text reaches the max, truncate with ellipses
+ */
+export declare const Tag: import("react").ForwardRefExoticComponent<Pick<TagProps, "dir" | "slot" | "style" | "title" | "children" | "id" | "variant" | "locale" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "onAdd" | "addTooltip" | "onRemove" | "removeTooltip"> & import("react").RefAttributes<HTMLSpanElement>>;
+export default Tag;

package/esm/Tag/Tag.js

@@ -0,0 +1,133 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children", "variant", "className", "onAdd", "addTooltip", "onRemove", "removeTooltip", "locale"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { forwardRef } from "react";
+import { Plus, X } from "react-feather";
+import { useIsInsideAutocomplete } from "../AutoComplete";
+import { useLocale } from "../Satellite";
+import stl from "../styles/helpers/satellitePrefixer";
+import { TooltipWrapper } from "../Tooltip";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_TAG_LOCALE = {
+  addButton: function addButton(title) {
+    return "Add \"".concat(title, "\"");
+  },
+  removeButton: function removeButton(title) {
+    return "Remove \"".concat(title, "\"");
+  }
+};
+var VARIANT_CLASSNAMES = {
+  accent: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-accent-100 border-accent-200 text-accent-700"]))),
+  grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100 border-grey-200 text-grey-700"]))),
+  blue: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-100 border-blue-200 text-blue-800"]))),
+  green: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-100 border-green-300 text-green-900"]))),
+  orange: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-orange-100 border-orange-300 text-orange-800"]))),
+  red: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-100 border-red-200 text-red-700"]))),
+  pink: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-pink-100 border-pink-200 text-pink-700"])))
+};
+var BUTTON_VARIANT_CLASSNAMES = {
+  accent: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-accent-200 hover:bg-accent-200 focus:bg-accent-200"]))),
+  grey: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-grey-200 hover:bg-grey-200 focus:bg-grey-200"]))),
+  blue: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-blue-200 hover:bg-blue-200 focus:bg-blue-200"]))),
+  green: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-green-300 hover:bg-green-300 focus:bg-green-300"]))),
+  orange: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-orange-300 hover:bg-orange-300 focus:bg-orange-300"]))),
+  red: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["border-red-200 hover:bg-red-200 focus:bg-red-200"]))),
+  pink: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["border-pink-200 hover:bg-pink-200 focus:bg-pink-200"])))
+};
+
+/**
+ * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
+ * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or removed from an object by users.
+ *
+ * - For status information, use badges instead
+ * - For tallies or counts, use badges
+ *
+ * ## Variations
+ * Consider the context and implied severity to choose from the following range:
+ *
+ * - **Accent**: `variant="accent"`
+ * - **Informational**: `variant="grey"` & `variant="blue"`
+ * - **Success**: `variant="green"`
+ * - **Warning**: `variant="orange"`
+ * - **Error**: `variant="red"`
+ * - **Admin**: `variant="pink"`
+ *
+ * ## Usability best practices
+ * - Present tags close to or within the input control to allow users to add and remove tags
+ * - When writing tags, avoid line-wrapping
+ * - Define the max width of text within a tag. Once the text reaches the max, truncate with ellipses
+ */
+export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "grey" : _ref$variant,
+    className = _ref.className,
+    onAdd = _ref.onAdd,
+    addTooltip = _ref.addTooltip,
+    onRemove = _ref.onRemove,
+    removeTooltip = _ref.removeTooltip,
+    propsLocale = _ref.locale,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var title = typeof children === "string" ? children : "tag";
+  var contextLocale = useLocale("tag");
+  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
+  var tagClassName = cx(stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["tag"]))), VARIANT_CLASSNAMES[variant], className);
+  var isInsideAutocomplete = useIsInsideAutocomplete();
+  var tabIndexProps = isInsideAutocomplete ? {
+    tabIndex: -1
+  } : {};
+  var addable = Boolean(onAdd);
+  var removable = Boolean(onRemove);
+  var handleAdd = function handleAdd(evt) {
+    evt.stopPropagation();
+    onAdd === null || onAdd === void 0 || onAdd(evt);
+  };
+  var handleRemove = function handleRemove(evt) {
+    evt.stopPropagation();
+    onRemove === null || onRemove === void 0 || onRemove(evt);
+  };
+  var content = /*#__PURE__*/_jsx("span", {
+    className: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["truncate flex-1"]))),
+    children: children
+  });
+  return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
+    className: tagClassName,
+    ref: ref,
+    children: [addable ? /*#__PURE__*/_jsx(TooltipWrapper, {
+      content: addTooltip,
+      hideDelay: 0,
+      side: "bottom",
+      children: /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({}, tabIndexProps), {}, {
+        className: cx(stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["tag-add-button"]))), !removable && stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["-mr-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleAdd,
+        "aria-label": typeof locale.addButton === "function" ? locale.addButton(title) : locale.addButton,
+        children: [/*#__PURE__*/_jsx(Plus, {
+          size: "1em"
+        }), content]
+      }))
+    }) : content, removable && /*#__PURE__*/_jsx(TooltipWrapper, {
+      content: removeTooltip,
+      hideDelay: 0,
+      side: "bottom",
+      align: "start",
+      children: /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({}, tabIndexProps), {}, {
+        className: cx(stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["tag-close-button p-1"]))), !addable && stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["ml-2"]))), BUTTON_VARIANT_CLASSNAMES[variant]),
+        type: "button",
+        onClick: handleRemove,
+        "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,
+        children: /*#__PURE__*/_jsx(X, {
+          size: "1em"
+        })
+      }))
+    })]
+  }));
+});
+Tag.displayName = "Tag";
+export default Tag;

package/esm/Tag/Tag.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = tagPlugin;
+declare const tagPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/esm/Tag/Tag.tailwind.js

@@ -0,0 +1,53 @@
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var tagPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".tag": {
+      display: "inline-flex",
+      alignItems: "center",
+      borderRadius: theme("borderRadius.DEFAULT"),
+      border: "1px solid transparent",
+      overflow: "hidden",
+      height: theme("spacing.6"),
+      padding: "0 ".concat(theme("spacing.2")),
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.sm")
+    },
+    ".tag-add-button": {
+      display: "inline-flex",
+      alignItems: "center",
+      height: "100%",
+      paddingLeft: theme("spacing.2"),
+      paddingRight: theme("spacing.2"),
+      marginLeft: "-".concat(theme("spacing.2")),
+      columnGap: theme("spacing.2"),
+      "&, &:focus": {
+        outlineWidth: "0px"
+      },
+      "&:focus-visible": {
+        outlineOffset: "-2px",
+        outlineWidth: "3px",
+        outlineColor: theme("colors.accent.600")
+      }
+    },
+    ".tag-close-button": {
+      height: "100%",
+      paddingLeft: theme("spacing.1"),
+      paddingRight: theme("spacing.1"),
+      marginRight: "-".concat(theme("spacing.2")),
+      borderLeft: "1px solid transparent",
+      "&, &:focus": {
+        outlineWidth: "0px"
+      },
+      "&:focus-visible": {
+        outlineOffset: "-2px",
+        outlineWidth: "3px",
+        outlineColor: theme("colors.accent.600")
+      }
+    }
+  });
+});
+export default tagPlugin;

package/esm/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tag";
+export { default } from "./Tag";

package/esm/Tag/index.js

@@ -0,0 +1,2 @@
+export * from "./Tag";
+export { default } from "./Tag";

package/esm/TextArea/TextArea.d.ts

@@ -0,0 +1,5 @@
+import type { TextareaHTMLAttributes } from "react";
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/esm/TextArea/TextArea.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import cx from "clsx";
+import { forwardRef } from "react";
+import stl from "../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("textarea", _objectSpread(_objectSpread({}, otherProps), {}, {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["text-area"]))), className),
+    ref: ref
+  }));
+});
+TextArea.displayName = "TextArea";
+export default TextArea;

package/esm/TextArea/TextArea.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = textAreaPlugin;
+declare const textAreaPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/esm/TextArea/TextArea.tailwind.js

@@ -0,0 +1,43 @@
+import _rgba from "../styles/rgba";
+import _disabledColor from "../styles/disabledColor";
+import _plugin from "tailwindcss/plugin";
+// @ts-check
+var plugin = _plugin;
+var disabledColor = _disabledColor;
+var rgba = _rgba;
+var textAreaPlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".text-area": {
+      width: "100%",
+      padding: theme("spacing.4"),
+      backgroundColor: theme("colors.white"),
+      border: "1px solid ".concat(theme("colors.grey.500")),
+      borderRadius: theme("borderRadius.DEFAULT"),
+      boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
+      transition: "all 100ms ease-in-out",
+      fontSize: theme("fontSize.base"),
+      lineHeight: theme("lineHeight.base"),
+      "&::placeholder": {
+        color: theme("colors.grey.600")
+      },
+      "&:hover": {
+        borderColor: theme("colors.grey.600")
+      },
+      "&:focus": {
+        borderColor: theme("colors.accent.600"),
+        boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
+        outline: "none"
+      },
+      "&:disabled": {
+        cursor: "not-allowed",
+        color: theme("colors.grey.300"),
+        background: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+        borderColor: disabledColor(theme("colors.grey.200")),
+        boxShadow: "none"
+      }
+    }
+  });
+});
+export default textAreaPlugin;

package/esm/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TextArea";
+export { default } from "./TextArea";

package/esm/TextArea/index.js

@@ -0,0 +1,2 @@
+export * from "./TextArea";
+export { default } from "./TextArea";

package/esm/TextWrap/TextWrap.d.ts

@@ -0,0 +1,8 @@
+import type { VFC } from "react";
+export interface TextWrapProps extends Omit<JSX.IntrinsicElements["span"], "children"> {
+    /** The max number of lines before the text is cut with an ellipsis */
+    maxLines?: number;
+    children: string;
+}
+export declare const TextWrap: VFC<TextWrapProps>;
+export default TextWrap;

package/esm/TextWrap/TextWrap.js

@@ -0,0 +1,47 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children", "maxLines", "style"];
+var _templateObject;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import stl from "../styles/helpers/satellitePrefixer";
+import isCssPropertySupported from "../utils/isCssPropertySupported";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BASE_STYLES = isCssPropertySupported("overflowWrap", "anywhere") ? {
+  whiteSpace: "normal",
+  overflowWrap: "anywhere"
+} : {
+  wordBreak: "break-all"
+};
+var SEPARATOR_ELEMENT = /*#__PURE__*/_jsx("span", {
+  className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["invisible"]))),
+  "aria-hidden": "true",
+  children: "\u200B"
+});
+export var TextWrap = function TextWrap(_ref) {
+  var text = _ref.children,
+    maxLines = _ref.maxLines,
+    style = _ref.style,
+    spanProps = _objectWithoutProperties(_ref, _excluded);
+  var clampStyle = typeof maxLines !== "undefined" && maxLines >= 1 ? _objectSpread(_objectSpread({}, BASE_STYLES), {}, {
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: maxLines,
+    overflow: "hidden"
+  }) : BASE_STYLES;
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    style: _objectSpread(_objectSpread({}, clampStyle), style)
+  }, spanProps), {}, {
+    children: text.split(/([\W_]+)/).flatMap(function (part, idx) {
+      if (!part) {
+        return null;
+      }
+      return idx % 2 === 0 ? part : /*#__PURE__*/_jsxs("span", {
+        children: [part, SEPARATOR_ELEMENT]
+      }, "".concat(idx, "-").concat(part));
+    }).filter(Boolean)
+  }));
+};
+export default TextWrap;

package/esm/TextWrap/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TextWrap";
+export { default } from "./TextWrap";

package/esm/TextWrap/index.js

@@ -0,0 +1,2 @@
+export * from "./TextWrap";
+export { default } from "./TextWrap";

package/esm/Toggle/Toggle.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, InputHTMLAttributes } from "react";
+export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "onChange" | "required" | "autoFocus" | "disabled" | "checked" | "defaultChecked"> & {
+    decorative?: boolean;
+};
+/**
+ * Toggles are a quick way to view and switch between enabled or disabled states. Use toggles to turn something on or off instantly.
+ *
+ * - Toggles should not require a Save button to apply the changes
+ * - If a Save button is needed, try using Radio groups or Checkboxes instead
+ */
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange" | "autoFocus" | "disabled" | "checked" | "required"> & {
+    decorative?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Toggle;