@ariakit/react-core 0.4.3 → 0.4.5

package/cjs/tag/tag-remove.d.cts

@@ -0,0 +1,67 @@
+import type { ElementType, MouseEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { Options, Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+/**
+ * Returns props to create a `TagRemove` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagRemove();
+ * <Role.button {...props} />
+ * ```
+ */
+export declare const useTagRemove: import("../utils/types.js").Hook<"button", TagRemoveOptions<"button">>;
+/**
+ * Renders a `Backspace` icon inside a
+ * [`Tag`](https://ariakit.org/reference/tag) component that removes the tag
+ * when clicked with a mouse.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {9}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare const TagRemove: (props: TagRemoveProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagRemoveOptions<_T extends ElementType = TagName> extends Options {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store) hook. If not
+     * provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider) component's
+     * context will be used.
+     */
+    store?: TagStore;
+    /**
+     * The value of the tag to remove. If not provided, the value will be inferred
+     * from the parent [`Tag`](https://ariakit.org/reference/tag) component.
+     */
+    value?: string;
+    /**
+     * Determines if the tag should be removed when clicked with a mouse. If a
+     * function is provided, it will be called with the click event and should
+     * return a boolean.
+     * @default true
+     */
+    removeOnClick?: BooleanOrCallback<MouseEvent<HTMLType>>;
+}
+export type TagRemoveProps<T extends ElementType = TagName> = Props<T, TagRemoveOptions<T>>;
+export {};

package/cjs/tag/tag-remove.d.ts

@@ -0,0 +1,67 @@
+import type { ElementType, MouseEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { Options, Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+/**
+ * Returns props to create a `TagRemove` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagRemove();
+ * <Role.button {...props} />
+ * ```
+ */
+export declare const useTagRemove: import("../utils/types.js").Hook<"button", TagRemoveOptions<"button">>;
+/**
+ * Renders a `Backspace` icon inside a
+ * [`Tag`](https://ariakit.org/reference/tag) component that removes the tag
+ * when clicked with a mouse.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {9}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare const TagRemove: (props: TagRemoveProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagRemoveOptions<_T extends ElementType = TagName> extends Options {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store) hook. If not
+     * provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider) component's
+     * context will be used.
+     */
+    store?: TagStore;
+    /**
+     * The value of the tag to remove. If not provided, the value will be inferred
+     * from the parent [`Tag`](https://ariakit.org/reference/tag) component.
+     */
+    value?: string;
+    /**
+     * Determines if the tag should be removed when clicked with a mouse. If a
+     * function is provided, it will be called with the click event and should
+     * return a boolean.
+     * @default true
+     */
+    removeOnClick?: BooleanOrCallback<MouseEvent<HTMLType>>;
+}
+export type TagRemoveProps<T extends ElementType = TagName> = Props<T, TagRemoveOptions<T>>;
+export {};

package/cjs/tag/tag-store.cjs

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+var _YWAHOWYEcjs = require('../__chunks/YWAHOWYE.cjs');
+require('../__chunks/4H5ZMMOI.cjs');
+require('../__chunks/Q7DU7FP7.cjs');
+require('../__chunks/GXMZA6DT.cjs');
+require('../__chunks/TW3SFX4C.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
+
+
+
+exports.useTagStore = _YWAHOWYEcjs.useTagStore; exports.useTagStoreProps = _YWAHOWYEcjs.useTagStoreProps;

package/cjs/tag/tag-store.d.cts

@@ -0,0 +1,49 @@
+import * as Core from "@ariakit/core/tag/tag-store";
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { Store } from "../utils/store.js";
+export declare function useTagStoreProps<T extends Core.TagStore>(store: T, update: () => void, props: TagStoreProps): T;
+/**
+ * Creates a tag store to control the state of
+ * [Tag](https://ariakit.org/components/tag) components.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const tag = useTagStore({ defaultValues: ["Apple", "Banana"]});
+ * const values = tag.useState("values");
+ *
+ * <TagList store={tag}>
+ *   {values.map((value) => (
+ *     <Tag key={value} value={value}>
+ *       {value}
+ *       <TagRemove />
+ *     </Tag>
+ *   ))}
+ *   <TagInput />
+ * </TagList>
+ * ```
+ */
+export declare function useTagStore(props?: TagStoreProps): TagStore;
+export interface TagStoreItem extends Core.TagStoreItem {
+}
+export interface TagStoreState extends Core.TagStoreState, CompositeStoreState<TagStoreItem> {
+}
+export interface TagStoreFunctions extends Core.TagStoreFunctions, CompositeStoreFunctions<TagStoreItem> {
+}
+export interface TagStoreOptions extends Core.TagStoreOptions, CompositeStoreOptions<TagStoreItem> {
+    /**
+     * A callback that gets called when the
+     * [`value`](https://ariakit.org/reference/tag-provider#value) state
+     * changes.
+     */
+    setValue?: (value: TagStoreState["value"]) => void;
+    /**
+     * A callback that gets called when the
+     * [`values`](https://ariakit.org/reference/tag-provider#values) state
+     * changes.
+     */
+    setValues?: (values: TagStoreState["values"]) => void;
+}
+export interface TagStoreProps extends TagStoreOptions, Core.TagStoreProps {
+}
+export interface TagStore extends TagStoreFunctions, Store<Core.TagStore> {
+}

package/cjs/tag/tag-store.d.ts

@@ -0,0 +1,49 @@
+import * as Core from "@ariakit/core/tag/tag-store";
+import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { Store } from "../utils/store.js";
+export declare function useTagStoreProps<T extends Core.TagStore>(store: T, update: () => void, props: TagStoreProps): T;
+/**
+ * Creates a tag store to control the state of
+ * [Tag](https://ariakit.org/components/tag) components.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const tag = useTagStore({ defaultValues: ["Apple", "Banana"]});
+ * const values = tag.useState("values");
+ *
+ * <TagList store={tag}>
+ *   {values.map((value) => (
+ *     <Tag key={value} value={value}>
+ *       {value}
+ *       <TagRemove />
+ *     </Tag>
+ *   ))}
+ *   <TagInput />
+ * </TagList>
+ * ```
+ */
+export declare function useTagStore(props?: TagStoreProps): TagStore;
+export interface TagStoreItem extends Core.TagStoreItem {
+}
+export interface TagStoreState extends Core.TagStoreState, CompositeStoreState<TagStoreItem> {
+}
+export interface TagStoreFunctions extends Core.TagStoreFunctions, CompositeStoreFunctions<TagStoreItem> {
+}
+export interface TagStoreOptions extends Core.TagStoreOptions, CompositeStoreOptions<TagStoreItem> {
+    /**
+     * A callback that gets called when the
+     * [`value`](https://ariakit.org/reference/tag-provider#value) state
+     * changes.
+     */
+    setValue?: (value: TagStoreState["value"]) => void;
+    /**
+     * A callback that gets called when the
+     * [`values`](https://ariakit.org/reference/tag-provider#values) state
+     * changes.
+     */
+    setValues?: (values: TagStoreState["values"]) => void;
+}
+export interface TagStoreProps extends TagStoreOptions, Core.TagStoreProps {
+}
+export interface TagStore extends TagStoreFunctions, Store<Core.TagStore> {
+}

package/cjs/tag/tag-value.cjs

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _PVLZGFP6cjs = require('../__chunks/PVLZGFP6.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/NGD3IQDB.cjs');
+require('../__chunks/TW3SFX4C.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
+
+// src/tag/tag-value.tsx
+var _misc = require('@ariakit/core/utils/misc');
+function TagValue({ store, children } = {}) {
+  const context = _PVLZGFP6cjs.useTagContext.call(void 0, );
+  store = store || context;
+  _misc.invariant.call(void 0, 
+    store,
+    process.env.NODE_ENV !== "production" && "TagValue must receive a `store` prop or be wrapped in a TagProvider component."
+  );
+  const value = store.useState("value");
+  if (children) {
+    return children(value);
+  }
+  return value;
+}
+
+
+exports.TagValue = TagValue;

package/cjs/tag/tag-value.d.cts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import type { TagStore, TagStoreState } from "./tag-store.js";
+/**
+ * Renders the current
+ * [`value`](https://ariakit.org/reference/use-tag-store#value) state in
+ * the [tag store](https://ariakit.org/reference/use-tag-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props.
+ *
+ * It takes a
+ * [`children`](https://ariakit.org/reference/tag-value#children) function
+ * that gets called with the current value as an argument. This can be used as
+ * an uncontrolled API to render the tag value in a custom way.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {3-5}
+ * <TagProvider>
+ *   <TagInput />
+ *   <TagValue>
+ *     {(value) => `Current value: ${value}`}
+ *   </TagValue>
+ * </TagProvider>
+ * ```
+ */
+export declare function TagValue({ store, children }?: TagValueProps): ReactNode;
+export interface TagValueProps {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store)
+     * hook. If not provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider)
+     * component's context will be used.
+     */
+    store?: TagStore;
+    /**
+     * A function that gets called with the current value as an argument. It can
+     * be used to render the tag value in a custom way.
+     */
+    children?: (value: TagStoreState["value"]) => ReactNode;
+}

package/cjs/tag/tag-value.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import type { TagStore, TagStoreState } from "./tag-store.js";
+/**
+ * Renders the current
+ * [`value`](https://ariakit.org/reference/use-tag-store#value) state in
+ * the [tag store](https://ariakit.org/reference/use-tag-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props.
+ *
+ * It takes a
+ * [`children`](https://ariakit.org/reference/tag-value#children) function
+ * that gets called with the current value as an argument. This can be used as
+ * an uncontrolled API to render the tag value in a custom way.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {3-5}
+ * <TagProvider>
+ *   <TagInput />
+ *   <TagValue>
+ *     {(value) => `Current value: ${value}`}
+ *   </TagValue>
+ * </TagProvider>
+ * ```
+ */
+export declare function TagValue({ store, children }?: TagValueProps): ReactNode;
+export interface TagValueProps {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store)
+     * hook. If not provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider)
+     * component's context will be used.
+     */
+    store?: TagStore;
+    /**
+     * A function that gets called with the current value as an argument. It can
+     * be used to render the tag value in a custom way.
+     */
+    children?: (value: TagStoreState["value"]) => ReactNode;
+}

package/cjs/tag/tag-values.cjs

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _PVLZGFP6cjs = require('../__chunks/PVLZGFP6.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/NGD3IQDB.cjs');
+require('../__chunks/TW3SFX4C.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
+
+// src/tag/tag-values.tsx
+var _misc = require('@ariakit/core/utils/misc');
+function TagValues({ store, children } = {}) {
+  const context = _PVLZGFP6cjs.useTagContext.call(void 0, );
+  store = store || context;
+  _misc.invariant.call(void 0, 
+    store,
+    process.env.NODE_ENV !== "production" && "TagValues must receive a `store` prop or be wrapped in a TagProvider component."
+  );
+  const values = store.useState("values");
+  if (children) {
+    return children(values);
+  }
+  return values;
+}
+
+
+exports.TagValues = TagValues;

package/cjs/tag/tag-values.d.cts

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import type { TagStore, TagStoreState } from "./tag-store.js";
+/**
+ * Renders the current
+ * [`values`](https://ariakit.org/reference/use-tag-store#values) state in the
+ * [tag store](https://ariakit.org/reference/use-tag-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props.
+ *
+ * It takes a [`children`](https://ariakit.org/reference/tag-values#children)
+ * function that gets called with the current values as an argument. This can be
+ * used as an uncontrolled API to render
+ * [`Tag`](https://ariakit.org/reference/tag) components.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {4-13}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare function TagValues({ store, children }?: TagValuesProps): ReactNode;
+export interface TagValuesProps {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store) hook. If not
+     * provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider) component's
+     * context will be used.
+     */
+    store?: TagStore;
+    /**
+     * A function that gets called with the current values as an argument. This
+     * can be used as an uncontrolled API to render
+     * [`Tag`](https://ariakit.org/reference/tag) components.
+     */
+    children?: (values: TagStoreState["values"]) => ReactNode;
+}

package/cjs/tag/tag-values.d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import type { TagStore, TagStoreState } from "./tag-store.js";
+/**
+ * Renders the current
+ * [`values`](https://ariakit.org/reference/use-tag-store#values) state in the
+ * [tag store](https://ariakit.org/reference/use-tag-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props.
+ *
+ * It takes a [`children`](https://ariakit.org/reference/tag-values#children)
+ * function that gets called with the current values as an argument. This can be
+ * used as an uncontrolled API to render
+ * [`Tag`](https://ariakit.org/reference/tag) components.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {4-13}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare function TagValues({ store, children }?: TagValuesProps): ReactNode;
+export interface TagValuesProps {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store) hook. If not
+     * provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider) component's
+     * context will be used.
+     */
+    store?: TagStore;
+    /**
+     * A function that gets called with the current values as an argument. This
+     * can be used as an uncontrolled API to render
+     * [`Tag`](https://ariakit.org/reference/tag) components.
+     */
+    children?: (values: TagStoreState["values"]) => ReactNode;
+}

package/cjs/tag/tag.cjs

@@ -0,0 +1,130 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _3HMQOCLFcjs = require('../__chunks/3HMQOCLF.cjs');
+require('../__chunks/HD5AHCRI.cjs');
+require('../__chunks/U4NXCMZ3.cjs');
+
+
+var _ISJGSS4Scjs = require('../__chunks/ISJGSS4S.cjs');
+
+
+
+
+var _PVLZGFP6cjs = require('../__chunks/PVLZGFP6.cjs');
+require('../__chunks/6ZZYUFPW.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/FHRIPOYF.cjs');
+require('../__chunks/75KXQZJX.cjs');
+
+
+
+
+
+var _NGD3IQDBcjs = require('../__chunks/NGD3IQDB.cjs');
+require('../__chunks/GXMZA6DT.cjs');
+
+
+
+
+
+var _TW3SFX4Ccjs = require('../__chunks/TW3SFX4C.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+
+
+
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
+
+// src/tag/tag.tsx
+var _react = require('react');
+var _misc = require('@ariakit/core/utils/misc');
+var _platform = require('@ariakit/core/utils/platform');
+var _jsxruntime = require('react/jsx-runtime');
+var TagName = "div";
+var useTag = _NGD3IQDBcjs.createHook.call(void 0, function useTag2(_a) {
+  var _b = _a, {
+    store,
+    value,
+    getItem: getItemProp,
+    removeOnKeyPress = true
+  } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
+    "store",
+    "value",
+    "getItem",
+    "removeOnKeyPress"
+  ]);
+  const context = _PVLZGFP6cjs.useTagContext.call(void 0, );
+  store = store || context;
+  _misc.invariant.call(void 0, 
+    store,
+    process.env.NODE_ENV !== "production" && "Tag must be wrapped in a TagList component."
+  );
+  const id = _TW3SFX4Ccjs.useId.call(void 0, props.id);
+  const touchDevice = _ISJGSS4Scjs.useTouchDevice.call(void 0, );
+  const getItem = _react.useCallback.call(void 0, 
+    (item) => {
+      const nextItem = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, item), { value });
+      if (getItemProp) {
+        return getItemProp(nextItem);
+      }
+      return nextItem;
+    },
+    [value, getItemProp]
+  );
+  const onKeyDownProp = props.onKeyDown;
+  const removeOnKeyPressProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, removeOnKeyPress);
+  const onKeyDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+    onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+    if (event.defaultPrevented)
+      return;
+    const { inputElement } = store.getState();
+    const isBackspace = event.key === "Backspace";
+    const isRemoveKey = isBackspace || event.key === "Delete";
+    if (isRemoveKey && removeOnKeyPressProp(event)) {
+      event.preventDefault();
+      store.removeValue(value);
+      const nextId = isBackspace ? store.previous() || store.next() : store.next();
+      store.move(nextId);
+    }
+    const isPrintableKey = !event.ctrlKey && !event.metaKey && event.key.length === 1;
+    const pc = !_platform.isApple.call(void 0, );
+    const v = event.key === "v" || event.key === "V";
+    const mod = pc ? event.ctrlKey : event.metaKey;
+    const isPaste = mod && v;
+    if (isPrintableKey || isPaste) {
+      inputElement == null ? void 0 : inputElement.focus();
+    }
+  });
+  const [removeId, setRemoveId] = _react.useState.call(void 0, );
+  props = _TW3SFX4Ccjs.useWrapElement.call(void 0, 
+    props,
+    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PVLZGFP6cjs.TagValueContext.Provider, { value, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PVLZGFP6cjs.TagRemoveIdContext.Provider, { value: setRemoveId, children: element }) }),
+    [value]
+  );
+  props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    id,
+    role: !touchDevice ? "option" : "listitem",
+    children: value,
+    "aria-describedby": removeId
+  }, props), {
+    onKeyDown
+  });
+  props = _3HMQOCLFcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    store
+  }, props), {
+    getItem
+  }));
+  return props;
+});
+var Tag = _NGD3IQDBcjs.memo.call(void 0, 
+  _NGD3IQDBcjs.forwardRef.call(void 0, function Tag2(props) {
+    const htmlProps = useTag(props);
+    return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);
+  })
+);
+
+
+
+exports.Tag = Tag; exports.useTag = useTag;