@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/skeleton-loader/SkeletonLoader.cjs

@@ -1,270 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var SkeletonLoaderItem = require('./skeleton-loader-item/SkeletonLoaderItem');
-
-function SkeletonLoader({
-  type,
-  rows = 3,
-  columns = 3,
-  variant = "default",
-  speedSec = 3
-}) {
-  const line = (width, height = 14, radius = 6) => /* @__PURE__ */ jsxRuntime.jsx(
-    SkeletonLoaderItem.SkeletonLoaderItem,
-    {
-      width,
-      height,
-      radius,
-      variant,
-      speedSec
-    },
-    `${String(width)}-${height}-${String(radius)}-${Math.random()}`
-  );
-  const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    SkeletonLoaderItem.SkeletonLoaderItem,
-    {
-      width: 80 + i % 3 * 30,
-      height: 30,
-      radius: 6,
-      variant,
-      speedSec,
-      ariaLabel: "Loading filter"
-    },
-    `pill-${i}`
-  ));
-  const textBlock = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    SkeletonLoaderItem.SkeletonLoaderItem,
-    {
-      width: i === count - 1 ? "60%" : `${90 - i % 3 * 10}%`,
-      height: 12,
-      radius: 4,
-      variant,
-      speedSec,
-      ariaLabel: "Loading text line"
-    },
-    `text-${i}`
-  ));
-  const tableHeaderRow = () => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-        gap: 12,
-        alignItems: "center",
-        width: "100%"
-      },
-      children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-        SkeletonLoaderItem.SkeletonLoaderItem,
-        {
-          height: 20,
-          width: "90%",
-          radius: 6,
-          variant,
-          speedSec,
-          ariaLabel: "Loading table header"
-        },
-        `thead-${i}`
-      ))
-    }
-  );
-  const tableBodyRow = (rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-        gap: 12,
-        alignItems: "center",
-        width: "100%"
-      },
-      children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-        SkeletonLoaderItem.SkeletonLoaderItem,
-        {
-          height: 20,
-          width: colIndex % 3 === 0 ? "93%" : colIndex % 3 === 1 ? "98%" : "90%",
-          radius: 4,
-          variant,
-          speedSec,
-          ariaLabel: "Loading table cell"
-        },
-        `tcell-${rowIndex}-${colIndex}`
-      ))
-    },
-    `trow-${rowIndex}`
-  );
-  const getSkeletonItems = () => {
-    switch (type) {
-      case "button": {
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 12,
-              alignItems: "center",
-              justifyContent: "flex-start",
-              width: "100%",
-              flexWrap: "wrap"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 120,
-                  height: 40,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading button"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 96,
-                  height: 40,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading button"
-                }
-              )
-            ]
-          }
-        );
-      }
-      case "card": {
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: 12,
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: "100%",
-                  height: 160,
-                  radius: 12,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading card media"
-                }
-              ),
-              line("60%", 16, 6),
-              textBlock(3),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-start" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SkeletonLoaderItem.SkeletonLoaderItem,
-                  {
-                    width: 100,
-                    height: 30,
-                    variant,
-                    speedSec,
-                    ariaLabel: "Loading action"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SkeletonLoaderItem.SkeletonLoaderItem,
-                  {
-                    width: 72,
-                    height: 30,
-                    variant,
-                    speedSec,
-                    ariaLabel: "Loading action"
-                  }
-                )
-              ] })
-            ]
-          }
-        );
-      }
-      case "avatar": {
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 12,
-              alignItems: "center",
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 48,
-                  height: 48,
-                  radius: "50%",
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading avatar"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, flex: 1 }, children: [
-                line("40%", 14),
-                line("25%", 12)
-              ] })
-            ]
-          }
-        );
-      }
-      case "text": {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10, width: "100%" }, children: textBlock(rows) });
-      }
-      case "table": {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
-          tableHeaderRow(),
-          Array.from({ length: rows }).map((_, r) => tableBodyRow(r))
-        ] });
-      }
-      case "filterbar": {
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 12,
-              flexWrap: "wrap",
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: pills(columns) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 240,
-                  height: 30,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading"
-                }
-              )
-            ]
-          }
-        );
-      }
-      default:
-        return null;
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "status",
-      "aria-label": "Loading content",
-      style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" },
-      children: getSkeletonItems()
-    }
-  );
-}
-
-exports.SkeletonLoader = SkeletonLoader;

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.cjs

@@ -1,42 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./SkeletonLoaderItem.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function SkeletonLoaderItem({
-  height = 14,
-  width = "100%",
-  radius = 6,
-  speedSec = 3,
-  ariaLabel = "Loading",
-  variant = "default"
-}) {
-  const h = typeof height === "number" ? `${height}px` : height;
-  const w = typeof width === "number" ? `${width}px` : width;
-  const r = typeof radius === "number" ? `${radius}px` : radius;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `${styles__default.default.skeletonLoader} ${styles__default.default[variant]}`,
-      role: "status",
-      "aria-label": ariaLabel,
-      "aria-live": "polite",
-      style: {
-        ["--h"]: h,
-        ["--r"]: r,
-        ["--speed"]: `${speedSec}s`,
-        ["--width"]: w
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bar, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.srOnly, children: "Loading\u2026" })
-      ]
-    }
-  );
-}
-
-exports.SkeletonLoaderItem = SkeletonLoaderItem;

package/dist/components/split-button/SplitButton.cjs

@@ -1,37 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Button = require('../button/Button');
-var Menu = require('../menu/Menu');
-var Popover = require('../popover/Popover');
-var styles = require('./SplitButton.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function SplitButton({
-  children,
-  options,
-  onClick,
-  icon
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, style: { display: "inline-flex", alignItems: "center" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { onClick, children: [
-      icon,
-      children
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Popover.Popover,
-      {
-        trigger: (onClick2, icon2) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.triggerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick: onClick2, children: icon2 }) }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: option.active, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: option.onClick, children: [
-          option.icon,
-          option.label
-        ] }) }, option.label)) })
-      }
-    )
-  ] });
-}
-
-exports.SplitButton = SplitButton;

package/dist/components/table/Table.cjs

@@ -1,181 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var Checkbox = require('../checkbox/Checkbox');
-var react = require('react');
-var styles = require('./Table.module.css');
-var useViewportFill = require('../../hooks/useViewportFill');
-var Pagination = require('../pagination/Pagination');
-var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Table({
-  data,
-  columns,
-  selectedRows,
-  onRowSelect,
-  onSortChange,
-  onRowClick,
-  sortBy,
-  sortDirection,
-  dataKey,
-  headerExtras,
-  columnStyles,
-  headerBelowRow,
-  striped,
-  fillViewport = false,
-  viewportBottomOffset = 0,
-  viewportMin = 120,
-  viewportIncludeMarginTop = false,
-  take,
-  skip,
-  totalItemsCount,
-  onPageChange,
-  loading,
-  variant = "filled",
-  size = "md"
-}) {
-  const filteredColumns = react.useMemo(() => columns.filter((c) => !c.hidden), [columns]);
-  const handlePageChange = react.useCallback(
-    (e) => {
-      onPageChange == null ? void 0 : onPageChange(e);
-    },
-    [onPageChange]
-  );
-  const getColStyle = (accessor, alignment) => {
-    const baseStyle = accessor ? columnStyles == null ? void 0 : columnStyles[String(accessor)] : void 0;
-    return {
-      textAlign: alignment != null ? alignment : "left",
-      ...baseStyle != null ? baseStyle : {}
-    };
-  };
-  const scrollRef = react.useRef(null);
-  const { style: viewportStyle } = useViewportFill.useViewportFill(scrollRef, {
-    bottomOffset: viewportBottomOffset + 60,
-    min: viewportMin,
-    includeMarginTop: viewportIncludeMarginTop
-  });
-  const tableEl = /* @__PURE__ */ jsxRuntime.jsxs("table", { className: `${styles__default.default.table} ${styles__default.default[variant]} ${styles__default.default[size]}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        selectedRows && dataKey && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "fitContent" }),
-        filteredColumns.map((column, index) => {
-          var _a;
-          const accessorKey = String((_a = column.accessor) != null ? _a : "");
-          const isActiveSort = sortBy === column.accessor;
-          const ariaSort = column.sortable && isActiveSort ? sortDirection === "asc" ? "ascending" : "descending" : "none";
-          const toggleSort = () => {
-            if (!onSortChange || !column.sortable) return;
-            const nextDir = !isActiveSort ? "asc" : sortDirection === "asc" ? "desc" : null;
-            onSortChange(column, nextDir);
-          };
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "th",
-            {
-              style: getColStyle(column.accessor, column.align),
-              "aria-sort": ariaSort,
-              className: `${styles__default.default.th} ${column.sortable ? styles__default.default.sortable : ""}`,
-              onClick: (e) => {
-                if (!column.sortable) return;
-                if (e.target instanceof HTMLElement && e.target.closest(".resizer")) return;
-                toggleSort();
-              },
-              role: column.sortable ? "button" : void 0,
-              tabIndex: column.sortable ? 0 : void 0,
-              onKeyDown: (e) => {
-                if (!column.sortable) return;
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  toggleSort();
-                }
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thInner, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.thLabel, children: column.header }),
-                column.sortable && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sortIndicator, "aria-hidden": "true", children: [
-                  isActiveSort && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, {}),
-                  isActiveSort && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.descending }),
-                  !isActiveSort && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.descending })
-                ] }),
-                headerExtras == null ? void 0 : headerExtras({ column, index })
-              ] }) })
-            },
-            `${accessorKey}-${index}`
-          );
-        })
-      ] }),
-      headerBelowRow ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: styles__default.default.headerBelowRow, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) }) : null
-    ] }),
-    loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `${styles__default.default.tBody} ${striped ? styles__default.default.striped : ""}`, children: Array.from({ length: take != null ? take : 5 }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: filteredColumns.map((column, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-      "td",
-      {
-        style: getColStyle(column.accessor, column.align),
-        className: `${styles__default.default.tableCell}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" })
-      },
-      `loading-cell-${colIndex}`
-    )) }, `loading-row-${rowIndex}`)) }) : /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `${styles__default.default.tBody} ${striped ? styles__default.default.striped : ""}`, children: data == null ? void 0 : data.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "tr",
-      {
-        onClick: () => onRowClick == null ? void 0 : onRowClick(row),
-        className: `${onRowClick ? styles__default.default.clickableRow : ""} ${(selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) ? styles__default.default.selectedRow : ""}`,
-        children: [
-          selectedRows && dataKey && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "fitContent", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Checkbox.Checkbox,
-            {
-              checked: selectedRows.has(row[dataKey]),
-              size: "sm",
-              onChange: () => onRowSelect == null ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey]))
-            }
-          ) }),
-          filteredColumns.map((column) => {
-            var _a;
-            const accessorKey = String((_a = column.accessor) != null ? _a : "");
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "td",
-              {
-                style: getColStyle(column.accessor, column.align),
-                className: `${styles__default.default.tableCell} `,
-                children: column.render ? column.render(row) : row[accessorKey]
-              },
-              accessorKey
-            );
-          })
-        ]
-      },
-      `tableRow-${String(row[dataKey])}-${rowIndex} `
-    )) })
-  ] });
-  if (fillViewport) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, style: viewportStyle, className: styles__default.default.tableScroll, children: tableEl }),
-      onPageChange && /* @__PURE__ */ jsxRuntime.jsx(
-        Pagination.Pagination,
-        {
-          itemsCount: totalItemsCount,
-          take,
-          skip,
-          onPageChange: handlePageChange
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
-    tableEl,
-    " ",
-    onPageChange && /* @__PURE__ */ jsxRuntime.jsx(
-      Pagination.Pagination,
-      {
-        itemsCount: totalItemsCount,
-        take,
-        skip,
-        onPageChange: handlePageChange
-      }
-    )
-  ] });
-}
-
-exports.Table = Table;

package/dist/components/table/components/column-resizer/ColumnResizer.cjs

@@ -1,22 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./ColumnResizer.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const ColumnResizer = ({ id, handler }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "span",
-  {
-    className: styles__default.default.resizer,
-    onMouseDown: handler,
-    onTouchStart: handler,
-    role: "separator",
-    "aria-label": `Resize ${id}`
-  }
-);
-var ColumnResizer_default = ColumnResizer;
-
-module.exports = ColumnResizer_default;

package/dist/components/tabs/Tabs.cjs

@@ -1,74 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./Tabs.module.css');
-var Headline = require('../headline/Headline');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Tabs({
-  variant,
-  header,
-  tabs,
-  activeIndex = 0,
-  onTabChange,
-  addition,
-  panelStyle
-}) {
-  const [currentIndex, setCurrentIndex] = react.useState(activeIndex);
-  react.useEffect(() => {
-    if (activeIndex !== void 0) {
-      setCurrentIndex(activeIndex);
-    }
-  }, [activeIndex]);
-  const setActiveTab = react.useCallback(
-    (index) => {
-      setCurrentIndex(index);
-    },
-    [setCurrentIndex]
-  );
-  const handleTabChange = react.useCallback(
-    (index) => {
-      if (!onTabChange) {
-        setActiveTab(index);
-      }
-      onTabChange == null ? void 0 : onTabChange(index);
-    },
-    [onTabChange]
-  );
-  const filteredTabs = react.useMemo(() => tabs.filter((tab) => !tab.hidden), [tabs]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grow-container", children: [
-    header && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, children: header }),
-      addition
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tabs} ${styles__default.default[variant]} ${panelStyle ? styles__default.default.panelStyle : ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabList, children: filteredTabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "data-index": index,
-          className: `${styles__default.default.tab} ${currentIndex === index ? styles__default.default.active : ""}`,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              className: `${styles__default.default.tabButton}`,
-              onClick: () => handleTabChange(index),
-              disabled: tab.disabled,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.header, children: tab.header })
-              ]
-            }
-          )
-        },
-        index
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.tabContent} scrollable`, children: tabs[currentIndex].content })
-    ] })
-  ] });
-}
-
-exports.Tabs = Tabs;

package/dist/components/text-area/Textarea.cjs

@@ -1,62 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./Textarea.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Textarea({
-  value,
-  inputChanged,
-  disabled,
-  loading,
-  rows = 3,
-  showCount,
-  tooltip,
-  showTooltip,
-  placeholder,
-  adjustHeight,
-  ...props
-}) {
-  const onInput = react.useCallback(
-    (e) => {
-      const textarea = e.currentTarget;
-      const currentTextValue = textarea.value;
-      if (adjustHeight && textarea) {
-        textarea.style.height = "auto";
-        textarea.style.height = `${textarea.scrollHeight}px`;
-      }
-      inputChanged(currentTextValue);
-    },
-    [inputChanged, adjustHeight]
-  );
-  const inputField = react.useMemo(
-    () => /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        placeholder,
-        rows,
-        value,
-        onInput,
-        disabled,
-        ...props
-      }
-    ),
-    [value, disabled, placeholder, rows, onInput]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
-    showTooltip ? /* @__PURE__ */ jsxRuntime.jsx("span", { title: tooltip, children: inputField }) : inputField,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
-      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { children: loading }),
-      showCount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.internalCount, children: [
-        value == null ? void 0 : value.length,
-        " tegn i denne boks"
-      ] })
-    ] })
-  ] });
-}
-
-exports.Textarea = Textarea;