@navikt/ds-react 8.6.0 → 8.8.0

package/cjs/alert/base-alert/root/BaseAlertRoot.js

@@ -57,8 +57,7 @@ const BaseAlert = (0, react_1.forwardRef)((_a, forwardedRef) => {
     const translate = (0, i18n_hooks_1.useI18n)("global");
     const alertColor = status ? (0, BaseAlertRoot_utils_1.baseAlertStatusToDataColor)(status) : dataColor;
     return (react_1.default.createElement(BaseAlertRoot_context_1.BaseAlertProvider, { size: size, status: status, color: alertColor, statusId: type === "strong" ? statusId : undefined },
-        react_1.default.createElement(Component, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (!status || Component === "div" ? undefined : translate(status)), ref: forwardedRef }, restProps, { className: (0, helpers_1.cl)(className, "aksel-base-alert"), "data-size": size, "data-color": alertColor, "data-variant": type, "data-global": global }),
-            react_1.default.createElement("div", { role: role }, children))));
+        react_1.default.createElement(Component, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (!status || Component === "div" ? undefined : translate(status)), ref: forwardedRef }, restProps, { className: (0, helpers_1.cl)(className, "aksel-base-alert"), "data-size": size, "data-color": alertColor, "data-variant": type, "data-global": global }), role ? react_1.default.createElement("div", { role: role }, children) : children)));
 });
 exports.BaseAlert = BaseAlert;
 //# sourceMappingURL=BaseAlertRoot.js.map

package/cjs/alert/base-alert/root/BaseAlertRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAlertRoot.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/root/BaseAlertRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,4DAAgD;AAChD,oDAA4C;AAC5C,+DAAyD;AACzD,mEAGiC;AACjC,+DAAmE;AA0CnE,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CACE,EAYiB,EACjB,YAAY,EACZ,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,YAAY,EAAE,SAAS,EACvB,IAAI,EACJ,MAAM,GAAG,KAAK,EACd,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,SAAS,EACzB,YAAY,EAAE,SAAS,EACvB,IAAI,OAEW,EADZ,SAAS,cAXd,uGAYC,CADa;IAId,MAAM,QAAQ,GAAG,IAAA,sBAAK,GAAE,CAAC;IACzB,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,IAAA,gDAA0B,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3E,OAAO,CACL,8BAAC,yCAAiB,IAChB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QAElD,8BAAC,SAAS,gCAEN,SAAS,aAAT,SAAS,cAAT,SAAS,GACT,CAAC,CAAC,MAAM,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAElE,GAAG,EAAE,YAAY,IACb,SAAS,IACb,SAAS,EAAE,IAAA,YAAE,EAAC,SAAS,EAAE,kBAAkB,CAAC,eACjC,IAAI,gBACH,UAAU,kBACR,IAAI,iBACL,MAAM;YAEnB,uCAAK,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAO,CACvB,CACM,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,8BAAS"}
+{"version":3,"file":"BaseAlertRoot.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/root/BaseAlertRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,4DAAgD;AAChD,oDAA4C;AAC5C,+DAAyD;AACzD,mEAGiC;AACjC,+DAAmE;AA0CnE,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CACE,EAYiB,EACjB,YAAY,EACZ,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,YAAY,EAAE,SAAS,EACvB,IAAI,EACJ,MAAM,GAAG,KAAK,EACd,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,SAAS,EACzB,YAAY,EAAE,SAAS,EACvB,IAAI,OAEW,EADZ,SAAS,cAXd,uGAYC,CADa;IAId,MAAM,QAAQ,GAAG,IAAA,sBAAK,GAAE,CAAC;IACzB,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,IAAA,gDAA0B,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3E,OAAO,CACL,8BAAC,yCAAiB,IAChB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QAElD,8BAAC,SAAS,gCAEN,SAAS,aAAT,SAAS,cAAT,SAAS,GACT,CAAC,CAAC,MAAM,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAElE,GAAG,EAAE,YAAY,IACb,SAAS,IACb,SAAS,EAAE,IAAA,YAAE,EAAC,SAAS,EAAE,kBAAkB,CAAC,eACjC,IAAI,gBACH,UAAU,kBACR,IAAI,iBACL,MAAM,KAElB,IAAI,CAAC,CAAC,CAAC,uCAAK,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAO,CAAC,CAAC,CAAC,QAAQ,CAC1C,CACM,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,8BAAS"}

package/cjs/alert/info-card/index.d.ts

@@ -1,2 +1,2 @@
-export { InfoCard, InfoCardHeader, InfoCardTitle, InfoCardContent, } from "./root/InfoCardRoot";
-export type { InfoCardProps, InfoCardHeaderProps, InfoCardTitleProps, InfoCardContentProps, } from "./root/InfoCardRoot";
+export { InfoCard, InfoCardHeader, InfoCardTitle, InfoCardContent, InfoCardMessage, } from "./root/InfoCardRoot";
+export type { InfoCardProps, InfoCardHeaderProps, InfoCardTitleProps, InfoCardContentProps, InfoCardMessageProps, } from "./root/InfoCardRoot";

package/cjs/alert/info-card/index.js

@@ -1,10 +1,11 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoCardContent = exports.InfoCardTitle = exports.InfoCardHeader = exports.InfoCard = void 0;
+exports.InfoCardMessage = exports.InfoCardContent = exports.InfoCardTitle = exports.InfoCardHeader = exports.InfoCard = void 0;
 var InfoCardRoot_1 = require("./root/InfoCardRoot");
 Object.defineProperty(exports, "InfoCard", { enumerable: true, get: function () { return InfoCardRoot_1.InfoCard; } });
 Object.defineProperty(exports, "InfoCardHeader", { enumerable: true, get: function () { return InfoCardRoot_1.InfoCardHeader; } });
 Object.defineProperty(exports, "InfoCardTitle", { enumerable: true, get: function () { return InfoCardRoot_1.InfoCardTitle; } });
 Object.defineProperty(exports, "InfoCardContent", { enumerable: true, get: function () { return InfoCardRoot_1.InfoCardContent; } });
+Object.defineProperty(exports, "InfoCardMessage", { enumerable: true, get: function () { return InfoCardRoot_1.InfoCardMessage; } });
 //# sourceMappingURL=index.js.map

package/cjs/alert/info-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/info-card/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,oDAK6B;AAJ3B,wGAAA,QAAQ,OAAA;AACR,8GAAA,cAAc,OAAA;AACd,6GAAA,aAAa,OAAA;AACb,+GAAA,eAAe,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/info-card/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,oDAM6B;AAL3B,wGAAA,QAAQ,OAAA;AACR,8GAAA,cAAc,OAAA;AACd,6GAAA,aAAa,OAAA;AACb,+GAAA,eAAe,OAAA;AACf,+GAAA,eAAe,OAAA"}

package/cjs/alert/info-card/message/InfoCardMessage.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+interface InfoCardMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Icon to display in message.
+     */
+    icon: React.ReactNode;
+}
+/**
+ * A component for displaying informational messages.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/infocard)
+ * @see 🏷️ {@link InfoCardMessageProps}
+ * @example
+ * ```jsx
+ * <InfoCard data-color="info">
+ *   <InfoCard.Message icon={<InformationSquareIcon aria-hidden />}>
+ *     Message contents
+ *   </InfoCard.Message>
+ * </InfoCard>
+ * ```
+ */
+declare const InfoCardMessage: React.ForwardRefExoticComponent<InfoCardMessageProps & React.RefAttributes<HTMLDivElement>>;
+export { InfoCardMessage };
+export type { InfoCardMessageProps };

package/cjs/alert/info-card/message/InfoCardMessage.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoCardMessage = void 0;
+const react_1 = __importStar(require("react"));
+const typography_1 = require("../../../typography");
+const helpers_1 = require("../../../utils/helpers");
+const BaseAlertRoot_context_1 = require("../../base-alert/root/BaseAlertRoot.context");
+/**
+ * A component for displaying informational messages.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/infocard)
+ * @see 🏷️ {@link InfoCardMessageProps}
+ * @example
+ * ```jsx
+ * <InfoCard data-color="info">
+ *   <InfoCard.Message icon={<InformationSquareIcon aria-hidden />}>
+ *     Message contents
+ *   </InfoCard.Message>
+ * </InfoCard>
+ * ```
+ */
+const InfoCardMessage = (0, react_1.forwardRef)((_a, forwardedRef) => {
+    var { children, className, icon } = _a, restProps = __rest(_a, ["children", "className", "icon"]);
+    const context = (0, BaseAlertRoot_context_1.useBaseAlert)();
+    return (react_1.default.createElement("div", Object.assign({ ref: forwardedRef, className: (0, helpers_1.cl)(className, "aksel-base-alert__message") }, restProps),
+        react_1.default.createElement("div", { className: "aksel-base-alert__icon" }, icon),
+        react_1.default.createElement(typography_1.BodyLong, { size: context.size, as: "div", textColor: "default" }, children)));
+});
+exports.InfoCardMessage = InfoCardMessage;
+//# sourceMappingURL=InfoCardMessage.js.map

package/cjs/alert/info-card/message/InfoCardMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCardMessage.js","sourceRoot":"","sources":["../../../../src/alert/info-card/message/InfoCardMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA+C;AAC/C,oDAA4C;AAC5C,uFAA2E;AAS3E;;;;;;;;;;;;GAYG;AACH,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CACE,EAAiE,EACjE,YAAY,EACZ,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,OAAsC,EAAjC,SAAS,cAAzC,iCAA2C,CAAF;IAGzC,MAAM,OAAO,GAAG,IAAA,oCAAY,GAAE,CAAC;IAC/B,OAAO,CACL,qDACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,SAAS,EAAE,2BAA2B,CAAC,IACjD,SAAS;QAEb,uCAAK,SAAS,EAAC,wBAAwB,IAAE,IAAI,CAAO;QACpD,8BAAC,qBAAQ,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,SAAS,IACvD,QAAQ,CACA,CACP,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,0CAAe"}

package/cjs/alert/info-card/root/InfoCardRoot.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { BaseAlert } from "../../base-alert";
 import { InfoCardContent, type InfoCardContentProps } from "../content/InfoCardContent";
 import { InfoCardHeader, type InfoCardHeaderProps } from "../header/InfoCardHeader";
+import { InfoCardMessage, type InfoCardMessageProps } from "../message/InfoCardMessage";
 import { InfoCardTitle, type InfoCardTitleProps } from "../title/InfoCardTitle";
 type InfoCardProps = Omit<BaseAlert.RootProps, "type" | "global" | "status" | "as"> & {
     /**
@@ -55,6 +56,18 @@ interface InfoCardComponent extends React.ForwardRefExoticComponent<InfoCardProp
      * ```
      */
     Content: typeof InfoCardContent;
+    /**
+     * @see 🏷️ {@link InfoCardMessageProps}
+     * @example
+     * ```jsx
+     * <InfoCard data-color="info">
+     *   <InfoCard.Message icon={<InformationSquareIcon aria-hidden />}>
+     *     Message contents
+     *   </InfoCard.Message>
+     * </InfoCard>
+     * ```
+     */
+    Message: typeof InfoCardMessage;
 }
 /**
  * A component for displaying informational content in a card format.
@@ -72,5 +85,5 @@ interface InfoCardComponent extends React.ForwardRefExoticComponent<InfoCardProp
  */
 export declare const InfoCard: InfoCardComponent;
 export default InfoCard;
-export { InfoCardContent, InfoCardHeader, InfoCardTitle };
-export type { InfoCardProps, InfoCardHeaderProps, InfoCardTitleProps, InfoCardContentProps, };
+export { InfoCardContent, InfoCardHeader, InfoCardTitle, InfoCardMessage };
+export type { InfoCardProps, InfoCardHeaderProps, InfoCardTitleProps, InfoCardContentProps, InfoCardMessageProps, };

package/cjs/alert/info-card/root/InfoCardRoot.js

@@ -44,13 +44,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoCardTitle = exports.InfoCardHeader = exports.InfoCardContent = exports.InfoCard = void 0;
+exports.InfoCardMessage = exports.InfoCardTitle = exports.InfoCardHeader = exports.InfoCardContent = exports.InfoCard = void 0;
 const react_1 = __importStar(require("react"));
 const base_alert_1 = require("../../base-alert");
 const InfoCardContent_1 = require("../content/InfoCardContent");
 Object.defineProperty(exports, "InfoCardContent", { enumerable: true, get: function () { return InfoCardContent_1.InfoCardContent; } });
 const InfoCardHeader_1 = require("../header/InfoCardHeader");
 Object.defineProperty(exports, "InfoCardHeader", { enumerable: true, get: function () { return InfoCardHeader_1.InfoCardHeader; } });
+const InfoCardMessage_1 = require("../message/InfoCardMessage");
+Object.defineProperty(exports, "InfoCardMessage", { enumerable: true, get: function () { return InfoCardMessage_1.InfoCardMessage; } });
 const InfoCardTitle_1 = require("../title/InfoCardTitle");
 Object.defineProperty(exports, "InfoCardTitle", { enumerable: true, get: function () { return InfoCardTitle_1.InfoCardTitle; } });
 /**
@@ -74,5 +76,6 @@ exports.InfoCard = (0, react_1.forwardRef)((_a, forwardedRef) => {
 exports.InfoCard.Header = InfoCardHeader_1.InfoCardHeader;
 exports.InfoCard.Title = InfoCardTitle_1.InfoCardTitle;
 exports.InfoCard.Content = InfoCardContent_1.InfoCardContent;
+exports.InfoCard.Message = InfoCardMessage_1.InfoCardMessage;
 exports.default = exports.InfoCard;
 //# sourceMappingURL=InfoCardRoot.js.map

package/cjs/alert/info-card/root/InfoCardRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCardRoot.js","sourceRoot":"","sources":["../../../../src/alert/info-card/root/InfoCardRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,iDAA6C;AAC7C,gEAGoC;AA8G3B,gGAhHP,iCAAe,OAgHO;AA7GxB,6DAGkC;AA0GR,+FA5GxB,+BAAc,OA4GwB;AAzGxC,0DAAgF;AAyGtC,8FAzGjC,6BAAa,OAyGiC;AAzCvD;;;;;;;;;;;;;GAaG;AACU,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EAIgB,EAChB,YAAY,EACZ,EAAE;QANF,EACE,YAAY,EAAE,SAAS,GAAG,MAAM,EAChC,EAAE,GAAG,KAAK,OAEI,EADX,SAAS,cAHd,oBAIC,CADa;IAId,OAAO,CACL,8BAAC,sBAAS,CAAC,IAAI,kBACb,GAAG,EAAE,YAAY,gBACL,SAAS,IACjB,SAAS,IACb,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,KAAK,EACb,EAAE,EAAE,EAAE,IACN,CACH,CAAC;AACJ,CAAC,CACmB,CAAC;AAEvB,gBAAQ,CAAC,MAAM,GAAG,+BAAc,CAAC;AACjC,gBAAQ,CAAC,KAAK,GAAG,6BAAa,CAAC;AAC/B,gBAAQ,CAAC,OAAO,GAAG,iCAAe,CAAC;AAEnC,kBAAe,gBAAQ,CAAC"}
+{"version":3,"file":"InfoCardRoot.js","sourceRoot":"","sources":["../../../../src/alert/info-card/root/InfoCardRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,iDAA6C;AAC7C,gEAGoC;AAgI3B,gGAlIP,iCAAe,OAkIO;AA/HxB,6DAGkC;AA4HR,+FA9HxB,+BAAc,OA8HwB;AA3HxC,gEAGoC;AAwHqB,gGA1HvD,iCAAe,OA0HuD;AAvHxE,0DAAgF;AAuHtC,8FAvHjC,6BAAa,OAuHiC;AA1CvD;;;;;;;;;;;;;GAaG;AACU,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAChC,CACE,EAIgB,EAChB,YAAY,EACZ,EAAE;QANF,EACE,YAAY,EAAE,SAAS,GAAG,MAAM,EAChC,EAAE,GAAG,KAAK,OAEI,EADX,SAAS,cAHd,oBAIC,CADa;IAId,OAAO,CACL,8BAAC,sBAAS,CAAC,IAAI,kBACb,GAAG,EAAE,YAAY,gBACL,SAAS,IACjB,SAAS,IACb,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,KAAK,EACb,EAAE,EAAE,EAAE,IACN,CACH,CAAC;AACJ,CAAC,CACmB,CAAC;AAEvB,gBAAQ,CAAC,MAAM,GAAG,+BAAc,CAAC;AACjC,gBAAQ,CAAC,KAAK,GAAG,6BAAa,CAAC;AAC/B,gBAAQ,CAAC,OAAO,GAAG,iCAAe,CAAC;AACnC,gBAAQ,CAAC,OAAO,GAAG,iCAAe,CAAC;AAEnC,kBAAe,gBAAQ,CAAC"}

package/cjs/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface DataDragAndDropDragHandlerProps {
+    /**
+     * Whether the drag handler is disabled
+     */
+    /**
+     * Wether dragging is done by keyboard. Used to conditionally render drag indicators.
+     */
+    keyboardDragging?: boolean;
+    /**
+     * Handle ref is forwarded to the button element serving as drag handle.
+     */
+    handleRef: React.Ref<HTMLDivElement>;
+}
+/**
+ * DataDragAndDropDragHandler
+ *
+ * A button component that serves as a drag handle for drag and drop operations.
+ * Can be used to initiate dragging of elements in a data table or list.
+ */
+export declare const DataDragAndDropDragHandler: React.ForwardRefExoticComponent<DataDragAndDropDragHandlerProps & React.RefAttributes<HTMLButtonElement>>;

package/cjs/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataDragAndDropDragHandler = void 0;
+const react_1 = __importDefault(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
+/**
+ * DataDragAndDropDragHandler
+ *
+ * A button component that serves as a drag handle for drag and drop operations.
+ * Can be used to initiate dragging of elements in a data table or list.
+ */
+exports.DataDragAndDropDragHandler = react_1.default.forwardRef(({ keyboardDragging, handleRef }) => {
+    return (react_1.default.createElement("div", { className: "aksel-data-drag-and-drop__drag-handler__alt" },
+        keyboardDragging && (react_1.default.createElement("span", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "up" },
+            react_1.default.createElement(aksel_icons_1.CaretUpCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" }))),
+        react_1.default.createElement("div", { ref: handleRef, className: "aksel-data-drag-and-drop__drag-handler__button" },
+            react_1.default.createElement(aksel_icons_1.DragVerticalIcon, { "aria-hidden": true, title: "Dra for \u00E5 flytte", fontSize: "1.5rem" })),
+        keyboardDragging && (react_1.default.createElement("span", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "down" },
+            react_1.default.createElement(aksel_icons_1.CaretDownCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" })))));
+});
+//# sourceMappingURL=DataDragAndDropDragHandler.js.map

package/cjs/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataDragAndDropDragHandler.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAI6B;AAiB7B;;;;;GAKG;AACU,QAAA,0BAA0B,GAAG,eAAK,CAAC,UAAU,CAGxD,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE;IACpC,OAAO,CACL,uCAAK,SAAS,EAAC,6CAA6C;QACzD,gBAAgB,IAAI,CACnB,wCACE,SAAS,EAAC,+CAA+C,oBAC1C,IAAI;YAEnB,8BAAC,mCAAqB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CAClD,CACR;QACD,uCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAC,gDAAgD;YAE1D,8BAAC,8BAAgB,yBAEf,KAAK,EAAC,uBAAkB,EACxB,QAAQ,EAAC,QAAQ,GACjB,CACE;QACL,gBAAgB,IAAI,CACnB,wCACE,SAAS,EAAC,+CAA+C,oBAC1C,MAAM;YAErB,8BAAC,qCAAuB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACpD,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/cjs/data/drag-and-drop/item/DataDragAndDropItem.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+interface DataDragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Unique id
+     */
+    id: string;
+    /**
+     * Index of the item being dragged
+     */
+    index: number;
+}
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DataDragAndDropItemProps}
+ * @example
+ * ```tsx
+ * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DragAndDrop.Item>
+ * ```
+ */
+declare const DataDragAndDropItem: React.ForwardRefExoticComponent<DataDragAndDropItemProps & React.RefAttributes<HTMLDivElement>>;
+export default DataDragAndDropItem;
+export { DataDragAndDropItem };
+export type { DataDragAndDropItemProps };

package/cjs/data/drag-and-drop/item/DataDragAndDropItem.js

@@ -0,0 +1,41 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataDragAndDropItem = void 0;
+const react_1 = __importDefault(require("react"));
+const stack_1 = require("../../../primitives/stack");
+const helpers_1 = require("../../../utils/helpers");
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DataDragAndDropItemProps}
+ * @example
+ * ```tsx
+ * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DragAndDrop.Item>
+ * ```
+ */
+const DataDragAndDropItem = react_1.default.forwardRef((_a, forwardedRef) => {
+    // const context = useDataDragAndDropContext();
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    return (react_1.default.createElement(stack_1.HStack, { gap: "space-8", align: "center", wrap: false, asChild: true },
+        react_1.default.createElement("div", Object.assign({ ref: forwardedRef }, rest, { className: (0, helpers_1.cl)("aksel-data-table__drag-and-drop-item", className) }),
+            react_1.default.createElement("div", null, children))));
+});
+exports.DataDragAndDropItem = DataDragAndDropItem;
+exports.default = DataDragAndDropItem;
+//# sourceMappingURL=DataDragAndDropItem.js.map

package/cjs/data/drag-and-drop/item/DataDragAndDropItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataDragAndDropItem.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/item/DataDragAndDropItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,qDAAmD;AACnD,oDAA4C;AAc5C;;;;;;;;;;GAUG;AACH,MAAM,mBAAmB,GAAG,eAAK,CAAC,UAAU,CAG1C,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;IACnD,+CAA+C;QAD9C,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAG/B,OAAO,CACL,8BAAC,cAAM,IAAC,GAAG,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,EAAE,OAAO;QAEvD,qDACE,GAAG,EAAE,YAAY,IACb,IAAI,IACR,SAAS,EAAE,IAAA,YAAE,EAAC,sCAAsC,EAAE,SAAS,CAAC;YAMhE,2CAAM,QAAQ,CAAO,CACjB,CACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAGM,kDAAmB;AAD5B,kBAAe,mBAAmB,CAAC"}

package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.d.ts

@@ -0,0 +1,8 @@
+interface DataDragAndDropContextType {
+    inputMethod: "mouse" | "keyboard" | null;
+}
+export declare const DataDragAndDropProvider: import("react").FC<DataDragAndDropContextType & {
+    children: React.ReactNode;
+    ref?: never;
+}>, useDataDragAndDropContext: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DataDragAndDropContextType | undefined : DataDragAndDropContextType | undefined;
+export {};

package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.js

@@ -0,0 +1,10 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataDragAndDropContext = exports.DataDragAndDropProvider = void 0;
+const helpers_1 = require("../../../utils/helpers");
+_a = (0, helpers_1.createStrictContext)({
+    errorMessage: "useDataDragAndDropContext must be used within a DataDragAndDropProvider",
+    name: "DataDragAndDropContext",
+}), exports.DataDragAndDropProvider = _a.Provider, exports.useDataDragAndDropContext = _a.useContext;
+//# sourceMappingURL=DataDragAndDrop.context.js.map

package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataDragAndDrop.context.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DataDragAndDrop.context.tsx"],"names":[],"mappings":";;;;AAAA,oDAA6D;AAMhD,KAGT,IAAA,6BAAmB,EAAyC;IAC9D,YAAY,EACV,yEAAyE;IAC3E,IAAI,EAAE,wBAAwB;CAC/B,CAAC,EANU,+BAAuB,gBACrB,iCAAyB,iBAKpC"}

package/cjs/data/drag-and-drop/root/DataDragAndDropRoot.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import DataDragAndDropItem, { DataDragAndDropItemProps } from "../item/DataDragAndDropItem";
+interface DataDragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: any[];
+    setItems: React.Dispatch<React.SetStateAction<any[]>>;
+}
+interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<DataDragAndDropProps & React.RefAttributes<HTMLDivElement>> {
+    /**
+     * @see 🏷️ {@link DataDragAndDropItemProps}
+     * * @example
+     * ```jsx
+     * <DragAndDrop>
+     *   <DragAndDrop.Item id="1" index={0}>
+     *     ...
+     *   </DragAndDrop.Item>
+     * </DragAndDrop>
+     * ```
+     */
+    Item: typeof DataDragAndDropItem;
+}
+/**
+ * TODO
+ * setItems on root
+ * state : active element
+ * pointer over listener / state, onPointerEnter, onPointerLeave
+ * Overlay - Use floating component
+ * Keyboard navigation
+ * Handle - button, arrows also button
+ * UU - announce on drag start, item moved, drag end
+ */
+declare const DataDragAndDrop: DataDragAndDropRootComponent;
+export { DataDragAndDrop, DataDragAndDropItem };
+export default DataDragAndDrop;
+export type { DataDragAndDropItemProps, DataDragAndDropProps };

package/cjs/data/drag-and-drop/root/DataDragAndDropRoot.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataDragAndDropItem = exports.DataDragAndDrop = void 0;
+const react_1 = __importStar(require("react"));
+const DataDragAndDropItem_1 = __importDefault(require("../item/DataDragAndDropItem"));
+exports.DataDragAndDropItem = DataDragAndDropItem_1.default;
+const DataDragAndDrop_context_1 = require("./DataDragAndDrop.context");
+/**
+ * TODO
+ * setItems on root
+ * state : active element
+ * pointer over listener / state, onPointerEnter, onPointerLeave
+ * Overlay - Use floating component
+ * Keyboard navigation
+ * Handle - button, arrows also button
+ * UU - announce on drag start, item moved, drag end
+ */
+const DataDragAndDrop = (0, react_1.forwardRef)(({ children }, forwardedRef) => {
+    return (react_1.default.createElement(DataDragAndDrop_context_1.DataDragAndDropProvider, { inputMethod: null },
+        react_1.default.createElement("div", { ref: forwardedRef }, children)));
+});
+exports.DataDragAndDrop = DataDragAndDrop;
+DataDragAndDrop.Item = DataDragAndDropItem_1.default;
+exports.default = DataDragAndDrop;
+//# sourceMappingURL=DataDragAndDropRoot.js.map

package/cjs/data/drag-and-drop/root/DataDragAndDropRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataDragAndDropRoot.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DataDragAndDropRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,sFAEqC;AAgDX,8BAlDnB,6BAAmB,CAkDmB;AA/C7C,uEAAoE;AAwBpE;;;;;;;;;GASG;AAEH,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAE,EAAE;IAC7B,OAAO,CACL,8BAAC,iDAAuB,IAAC,WAAW,EAAE,IAAI;QACxC,uCAAK,GAAG,EAAE,YAAY,IAAG,QAAQ,CAAO,CAChB,CAC3B,CAAC;AACJ,CAAC,CAC8B,CAAC;AAIzB,0CAAe;AAFxB,eAAe,CAAC,IAAI,GAAG,6BAAmB,CAAC;AAG3C,kBAAe,eAAe,CAAC"}

package/cjs/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export interface DataDragAndDropDragHandlerProps {
+    /**
+     * Whether the drag handler is disabled
+     */
+    /**
+     * Wether dragging is done by keyboard. Used to conditionally render drag indicators.
+     */
+    keyboardDragging?: boolean;
+    /**
+     * Handle ref is forwarded to the button element serving as drag handle.
+     */
+    handleRef: React.Ref<HTMLDivElement>;
+    alt?: boolean;
+}
+/**
+ * DataDragAndDropDragHandler
+ *
+ * A button component that serves as a drag handle for drag and drop operations.
+ * Can be used to initiate dragging of elements in a data table or list.
+ */
+export declare const DataDragAndDropDragHandler: React.ForwardRefExoticComponent<DataDragAndDropDragHandlerProps & React.RefAttributes<HTMLButtonElement>>;

package/cjs/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataDragAndDropDragHandler = void 0;
+const react_1 = __importDefault(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const Floating_1 = require("../../../utils/components/floating/Floating");
+/**
+ * DataDragAndDropDragHandler
+ *
+ * A button component that serves as a drag handle for drag and drop operations.
+ * Can be used to initiate dragging of elements in a data table or list.
+ */
+exports.DataDragAndDropDragHandler = react_1.default.forwardRef(({ keyboardDragging, handleRef, alt }) => {
+    if (alt) {
+        return (react_1.default.createElement("div", { className: "aksel-data-drag-and-drop__drag-handler__alt" },
+            keyboardDragging && (react_1.default.createElement("span", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "up" },
+                react_1.default.createElement(aksel_icons_1.CaretUpCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" }))),
+            react_1.default.createElement("div", { ref: handleRef, className: "aksel-data-drag-and-drop__drag-handler__button" },
+                react_1.default.createElement(aksel_icons_1.DragVerticalIcon, { "aria-hidden": true, title: "Dra for \u00E5 flytte", fontSize: "1.5rem" })),
+            keyboardDragging && (react_1.default.createElement("span", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "down" },
+                react_1.default.createElement(aksel_icons_1.CaretDownCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" })))));
+    }
+    return (react_1.default.createElement(Floating_1.Floating, null,
+        keyboardDragging && (react_1.default.createElement(Floating_1.Floating.Content, { side: "top", avoidCollisions: false, updatePositionStrategy: "always", className: "aksel-data-drag-and-drop__drag-handler__arrow" },
+            react_1.default.createElement(aksel_icons_1.CaretUpCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" }))),
+        react_1.default.createElement(Floating_1.Floating.Anchor, { asChild: true },
+            react_1.default.createElement("div", { ref: handleRef, className: "aksel-data-drag-and-drop__drag-handler__button" },
+                react_1.default.createElement(aksel_icons_1.DragVerticalIcon, { "aria-hidden": true, title: "Dra for \u00E5 flytte", fontSize: "1.5rem" }))),
+        keyboardDragging && (react_1.default.createElement(Floating_1.Floating.Content, { avoidCollisions: false, updatePositionStrategy: "always", className: "aksel-data-drag-and-drop__drag-handler__arrow" },
+            react_1.default.createElement(aksel_icons_1.CaretDownCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" })))));
+});
+//# sourceMappingURL=DataDragAndDropDragHandler.js.map

package/cjs/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataDragAndDropDragHandler.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop-old/drag-handler/DataDragAndDropDragHandler.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAI6B;AAC7B,0EAAuE;AAmBvE;;;;;GAKG;AACU,QAAA,0BAA0B,GAAG,eAAK,CAAC,UAAU,CAGxD,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,EAAE;IACzC,IAAI,GAAG,EAAE,CAAC;QACR,OAAO,CACL,uCAAK,SAAS,EAAC,6CAA6C;YACzD,gBAAgB,IAAI,CACnB,wCACE,SAAS,EAAC,+CAA+C,oBAC1C,IAAI;gBAEnB,8BAAC,mCAAqB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CAClD,CACR;YACD,uCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAC,gDAAgD;gBAE1D,8BAAC,8BAAgB,yBAEf,KAAK,EAAC,uBAAkB,EACxB,QAAQ,EAAC,QAAQ,GACjB,CACE;YACL,gBAAgB,IAAI,CACnB,wCACE,SAAS,EAAC,+CAA+C,oBAC1C,MAAM;gBAErB,8BAAC,qCAAuB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACpD,CACR,CACG,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BAAC,mBAAQ;QACN,gBAAgB,IAAI,CACnB,8BAAC,mBAAQ,CAAC,OAAO,IACf,IAAI,EAAC,KAAK,EACV,eAAe,EAAE,KAAK,EACtB,sBAAsB,EAAC,QAAQ,EAC/B,SAAS,EAAC,+CAA+C;YAEzD,8BAAC,mCAAqB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACtC,CACpB;QACD,8BAAC,mBAAQ,CAAC,MAAM,IAAC,OAAO;YACtB,uCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAC,gDAAgD;gBAE1D,8BAAC,8BAAgB,yBAEf,KAAK,EAAC,uBAAkB,EACxB,QAAQ,EAAC,QAAQ,GACjB,CACE,CACU;QACjB,gBAAgB,IAAI,CACnB,8BAAC,mBAAQ,CAAC,OAAO,IACf,eAAe,EAAE,KAAK,EACtB,sBAAsB,EAAC,QAAQ,EAC/B,SAAS,EAAC,+CAA+C;YAEzD,8BAAC,qCAAuB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACxC,CACpB,CACQ,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/cjs/data/drag-and-drop-old/item/DataDragAndDropItem.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+interface DataDragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Unique id
+     */
+    id: string;
+    /**
+     * Index of the item being dragged
+     */
+    index: number;
+}
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DataDragAndDropItemProps}
+ * @example
+ * ```tsx
+ * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DragAndDrop.Item>
+ * ```
+ */
+declare const DataDragAndDropItem: React.ForwardRefExoticComponent<DataDragAndDropItemProps & React.RefAttributes<HTMLDivElement>>;
+export default DataDragAndDropItem;
+export { DataDragAndDropItem };
+export type { DataDragAndDropItemProps };