@redis-ui/components 42.0.0 → 42.7.0

package/dist/KeyValueList/KeyValueList.js

@@ -0,0 +1,96 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { DeleteIcon } from "@redislabsdev/redis-ui-icons";
+import AddButton from "./components/AddButton/AddButton.js";
+import { TableWrapper, TableScroller, Table, TableHead, HeaderRow, HeaderCell, SeparatorCell, BodyCell, DelimiterCell, ActionCellContent, EmptyStateContainer } from "./KeyValueList.style.js";
+import ActionIconButton from "../Button/ActionIconButton/ActionIconButton.js";
+import Input from "../Inputs/Input/Input.js";
+const KeyValueListBase = ({
+  data,
+  emptyStateMessage = "There are no tags associated with this database",
+  onDelete,
+  onKeyChange,
+  onValueChange,
+  renderKey,
+  renderValue,
+  maxHeight,
+  keyPlaceholder = "Enter key",
+  valuePlaceholder = "Enter value",
+  ...restProps
+}) => {
+  const renderKeyContent = (row) => {
+    if (renderKey) {
+      return renderKey(row);
+    }
+    return jsxRuntimeExports.jsx(Input, {
+      value: String(row.key),
+      onChange: (value) => onKeyChange == null ? void 0 : onKeyChange(row, value),
+      placeholder: keyPlaceholder
+    });
+  };
+  const renderValueContent = (row) => {
+    if (renderValue) {
+      return renderValue(row);
+    }
+    return jsxRuntimeExports.jsx(Input, {
+      value: String(row.value),
+      onChange: (value) => onValueChange == null ? void 0 : onValueChange(row, value),
+      placeholder: valuePlaceholder
+    });
+  };
+  const hasData = data.length > 0;
+  return jsxRuntimeExports.jsx(TableWrapper, {
+    ...restProps,
+    children: jsxRuntimeExports.jsx(TableScroller, {
+      "$maxHeight": maxHeight,
+      children: jsxRuntimeExports.jsxs(Table, {
+        children: [jsxRuntimeExports.jsx(TableHead, {
+          children: jsxRuntimeExports.jsxs(HeaderRow, {
+            children: [jsxRuntimeExports.jsx(HeaderCell, {
+              children: "Key"
+            }), jsxRuntimeExports.jsx(SeparatorCell, {}), jsxRuntimeExports.jsx(HeaderCell, {
+              children: "Value"
+            }), jsxRuntimeExports.jsx(HeaderCell, {
+              "$width": "4.8rem"
+            })]
+          })
+        }), jsxRuntimeExports.jsx("tbody", {
+          children: hasData ? data.map((row) => jsxRuntimeExports.jsxs("tr", {
+            children: [jsxRuntimeExports.jsx(BodyCell, {
+              children: renderKeyContent(row)
+            }), jsxRuntimeExports.jsx(DelimiterCell, {
+              children: ":"
+            }), jsxRuntimeExports.jsx(BodyCell, {
+              children: renderValueContent(row)
+            }), jsxRuntimeExports.jsx(BodyCell, {
+              children: jsxRuntimeExports.jsx(ActionCellContent, {
+                children: jsxRuntimeExports.jsx(ActionIconButton, {
+                  variant: "secondary",
+                  icon: DeleteIcon,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete == null ? void 0 : onDelete(row);
+                  },
+                  "aria-label": "Delete"
+                })
+              })
+            })]
+          }, row.id)) : jsxRuntimeExports.jsx("tr", {
+            children: jsxRuntimeExports.jsx(BodyCell, {
+              colSpan: 4,
+              "$align": "center",
+              children: jsxRuntimeExports.jsx(EmptyStateContainer, {
+                children: emptyStateMessage
+              })
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+const KeyValueList = Object.assign(KeyValueListBase, {
+  AddButton
+});
+export {
+  KeyValueList
+};

package/dist/KeyValueList/KeyValueList.style.cjs

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const TableWrapper = _styled__default.default.div.withConfig({
+  displayName: "KeyValueListstyle__TableWrapper",
+  componentId: "RedisUI__sc-hq603j-0"
+})(["border-radius:", ";box-shadow:", ";background-color:", ";overflow:hidden;width:100%;display:flex;flex-direction:column;"], ({
+  theme
+}) => theme.components.keyValueList.container.borderRadius, ({
+  theme
+}) => theme.components.keyValueList.container.boxShadow, ({
+  theme
+}) => theme.components.keyValueList.container.backgroundColor);
+const TableScroller = _styled__default.default.div.withConfig({
+  displayName: "KeyValueListstyle__TableScroller",
+  componentId: "RedisUI__sc-hq603j-1"
+})(["overflow:auto;position:relative;", ""], ({
+  $maxHeight
+}) => $maxHeight && `max-height: ${$maxHeight};`);
+const Table = _styled__default.default.table.withConfig({
+  displayName: "KeyValueListstyle__Table",
+  componentId: "RedisUI__sc-hq603j-2"
+})(["width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;"]);
+const TableHead = _styled__default.default.thead.withConfig({
+  displayName: "KeyValueListstyle__TableHead",
+  componentId: "RedisUI__sc-hq603j-3"
+})(["position:sticky;top:0;z-index:3;background-color:", ";"], ({
+  theme
+}) => theme.components.keyValueList.headerRow.bgColor);
+const HeaderRow = _styled__default.default.tr.withConfig({
+  displayName: "KeyValueListstyle__HeaderRow",
+  componentId: "RedisUI__sc-hq603j-4"
+})(["height:", ";"], ({
+  theme
+}) => theme.components.keyValueList.headerRow.minHeight);
+const HeaderCell = _styled__default.default.th.withConfig({
+  displayName: "KeyValueListstyle__HeaderCell",
+  componentId: "RedisUI__sc-hq603j-5"
+})(["padding:", ";color:", ";text-align:left;position:sticky;border-bottom:", " solid ", ";", " &:not(:last-child)::after{content:'';position:absolute;inset-inline-end:0;inset-block:", ";border-right:", " solid ", ";}"], ({
+  theme
+}) => theme.components.keyValueList.headerCell.padding, ({
+  theme
+}) => theme.components.keyValueList.headerCell.color, ({
+  theme
+}) => theme.components.keyValueList.headerRow.separator.width, ({
+  theme
+}) => theme.components.keyValueList.headerRow.separator.color, ({
+  $width
+}) => $width && `width: ${$width};`, ({
+  theme
+}) => theme.components.keyValueList.headerCell.separator.blockPadding, ({
+  theme
+}) => theme.components.keyValueList.headerCell.separator.width, ({
+  theme
+}) => theme.components.keyValueList.headerCell.separator.color);
+const SeparatorCell = _styled__default.default.th.withConfig({
+  displayName: "KeyValueListstyle__SeparatorCell",
+  componentId: "RedisUI__sc-hq603j-6"
+})(["width:5px;border-bottom:", " solid ", ";"], ({
+  theme
+}) => theme.components.keyValueList.headerRow.separator.width, ({
+  theme
+}) => theme.components.keyValueList.headerRow.separator.color);
+const BodyCell = _styled__default.default.td.withConfig({
+  displayName: "KeyValueListstyle__BodyCell",
+  componentId: "RedisUI__sc-hq603j-7"
+})(["color:", ";padding:", ";text-align:", ";vertical-align:middle;"], ({
+  theme
+}) => theme.components.keyValueList.bodyCell.color, ({
+  theme
+}) => theme.components.keyValueList.bodyCell.padding, ({
+  $align
+}) => $align || "left");
+const DelimiterCell = _styled__default.default.td.withConfig({
+  displayName: "KeyValueListstyle__DelimiterCell",
+  componentId: "RedisUI__sc-hq603j-8"
+})(["width:5px;color:", ";text-align:center;vertical-align:middle;"], ({
+  theme
+}) => theme.components.keyValueList.bodyCell.color);
+const ActionCellContent = _styled__default.default.div.withConfig({
+  displayName: "KeyValueListstyle__ActionCellContent",
+  componentId: "RedisUI__sc-hq603j-9"
+})(["display:flex;align-items:center;justify-content:flex-end;gap:0.4rem;height:4.8rem;"]);
+const EmptyStateContainer = _styled__default.default.div.withConfig({
+  displayName: "KeyValueListstyle__EmptyStateContainer",
+  componentId: "RedisUI__sc-hq603j-10"
+})(["display:flex;align-items:center;justify-content:center;height:4.8rem;color:", ";"], ({
+  theme
+}) => theme.components.keyValueList.bodyCell.color);
+exports.ActionCellContent = ActionCellContent;
+exports.BodyCell = BodyCell;
+exports.DelimiterCell = DelimiterCell;
+exports.EmptyStateContainer = EmptyStateContainer;
+exports.HeaderCell = HeaderCell;
+exports.HeaderRow = HeaderRow;
+exports.SeparatorCell = SeparatorCell;
+exports.Table = Table;
+exports.TableHead = TableHead;
+exports.TableScroller = TableScroller;
+exports.TableWrapper = TableWrapper;

package/dist/KeyValueList/KeyValueList.style.d.ts

@@ -0,0 +1,17 @@
+export declare const TableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableScroller: import("styled-components").StyledComponent<"div", any, {
+    $maxHeight?: string;
+}, never>;
+export declare const Table: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const TableHead: import("styled-components").StyledComponent<"thead", any, {}, never>;
+export declare const HeaderRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const HeaderCell: import("styled-components").StyledComponent<"th", any, {
+    $width?: string;
+}, never>;
+export declare const SeparatorCell: import("styled-components").StyledComponent<"th", any, {}, never>;
+export declare const BodyCell: import("styled-components").StyledComponent<"td", any, {
+    $align?: "left" | "center" | "right";
+}, never>;
+export declare const DelimiterCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const ActionCellContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EmptyStateContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/KeyValueList/KeyValueList.style.js

@@ -0,0 +1,100 @@
+import _styled from "styled-components";
+const TableWrapper = _styled.div.withConfig({
+  displayName: "KeyValueListstyle__TableWrapper",
+  componentId: "RedisUI__sc-hq603j-0"
+})(["border-radius:", ";box-shadow:", ";background-color:", ";overflow:hidden;width:100%;display:flex;flex-direction:column;"], ({
+  theme
+}) => theme.components.keyValueList.container.borderRadius, ({
+  theme
+}) => theme.components.keyValueList.container.boxShadow, ({
+  theme
+}) => theme.components.keyValueList.container.backgroundColor);
+const TableScroller = _styled.div.withConfig({
+  displayName: "KeyValueListstyle__TableScroller",
+  componentId: "RedisUI__sc-hq603j-1"
+})(["overflow:auto;position:relative;", ""], ({
+  $maxHeight
+}) => $maxHeight && `max-height: ${$maxHeight};`);
+const Table = _styled.table.withConfig({
+  displayName: "KeyValueListstyle__Table",
+  componentId: "RedisUI__sc-hq603j-2"
+})(["width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;"]);
+const TableHead = _styled.thead.withConfig({
+  displayName: "KeyValueListstyle__TableHead",
+  componentId: "RedisUI__sc-hq603j-3"
+})(["position:sticky;top:0;z-index:3;background-color:", ";"], ({
+  theme
+}) => theme.components.keyValueList.headerRow.bgColor);
+const HeaderRow = _styled.tr.withConfig({
+  displayName: "KeyValueListstyle__HeaderRow",
+  componentId: "RedisUI__sc-hq603j-4"
+})(["height:", ";"], ({
+  theme
+}) => theme.components.keyValueList.headerRow.minHeight);
+const HeaderCell = _styled.th.withConfig({
+  displayName: "KeyValueListstyle__HeaderCell",
+  componentId: "RedisUI__sc-hq603j-5"
+})(["padding:", ";color:", ";text-align:left;position:sticky;border-bottom:", " solid ", ";", " &:not(:last-child)::after{content:'';position:absolute;inset-inline-end:0;inset-block:", ";border-right:", " solid ", ";}"], ({
+  theme
+}) => theme.components.keyValueList.headerCell.padding, ({
+  theme
+}) => theme.components.keyValueList.headerCell.color, ({
+  theme
+}) => theme.components.keyValueList.headerRow.separator.width, ({
+  theme
+}) => theme.components.keyValueList.headerRow.separator.color, ({
+  $width
+}) => $width && `width: ${$width};`, ({
+  theme
+}) => theme.components.keyValueList.headerCell.separator.blockPadding, ({
+  theme
+}) => theme.components.keyValueList.headerCell.separator.width, ({
+  theme
+}) => theme.components.keyValueList.headerCell.separator.color);
+const SeparatorCell = _styled.th.withConfig({
+  displayName: "KeyValueListstyle__SeparatorCell",
+  componentId: "RedisUI__sc-hq603j-6"
+})(["width:5px;border-bottom:", " solid ", ";"], ({
+  theme
+}) => theme.components.keyValueList.headerRow.separator.width, ({
+  theme
+}) => theme.components.keyValueList.headerRow.separator.color);
+const BodyCell = _styled.td.withConfig({
+  displayName: "KeyValueListstyle__BodyCell",
+  componentId: "RedisUI__sc-hq603j-7"
+})(["color:", ";padding:", ";text-align:", ";vertical-align:middle;"], ({
+  theme
+}) => theme.components.keyValueList.bodyCell.color, ({
+  theme
+}) => theme.components.keyValueList.bodyCell.padding, ({
+  $align
+}) => $align || "left");
+const DelimiterCell = _styled.td.withConfig({
+  displayName: "KeyValueListstyle__DelimiterCell",
+  componentId: "RedisUI__sc-hq603j-8"
+})(["width:5px;color:", ";text-align:center;vertical-align:middle;"], ({
+  theme
+}) => theme.components.keyValueList.bodyCell.color);
+const ActionCellContent = _styled.div.withConfig({
+  displayName: "KeyValueListstyle__ActionCellContent",
+  componentId: "RedisUI__sc-hq603j-9"
+})(["display:flex;align-items:center;justify-content:flex-end;gap:0.4rem;height:4.8rem;"]);
+const EmptyStateContainer = _styled.div.withConfig({
+  displayName: "KeyValueListstyle__EmptyStateContainer",
+  componentId: "RedisUI__sc-hq603j-10"
+})(["display:flex;align-items:center;justify-content:center;height:4.8rem;color:", ";"], ({
+  theme
+}) => theme.components.keyValueList.bodyCell.color);
+export {
+  ActionCellContent,
+  BodyCell,
+  DelimiterCell,
+  EmptyStateContainer,
+  HeaderCell,
+  HeaderRow,
+  SeparatorCell,
+  Table,
+  TableHead,
+  TableScroller,
+  TableWrapper
+};

package/dist/KeyValueList/KeyValueList.types.d.ts

@@ -0,0 +1,17 @@
+export interface KeyValuePair<TKey = string, TValue = string> {
+    key: TKey;
+    value: TValue;
+    id: string;
+}
+export interface KeyValueListProps<TKey = string, TValue = string> extends React.HTMLAttributes<HTMLDivElement> {
+    data: KeyValuePair<TKey, TValue>[];
+    emptyStateMessage?: string;
+    onDelete?: (row: KeyValuePair<TKey, TValue>) => void;
+    onKeyChange?: (row: KeyValuePair<TKey, TValue>, newKey: TKey) => void;
+    onValueChange?: (row: KeyValuePair<TKey, TValue>, newValue: TValue) => void;
+    renderKey?: (row: KeyValuePair<TKey, TValue>) => React.ReactNode;
+    renderValue?: (row: KeyValuePair<TKey, TValue>) => React.ReactNode;
+    maxHeight?: string;
+    keyPlaceholder?: string;
+    valuePlaceholder?: string;
+}

package/dist/KeyValueList/components/AddButton/AddButton.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const AddButton_style = require("./AddButton.style.cjs");
+const TextButton = require("../../../Button/TextButton/TextButton.cjs");
+const Button = require("../../../Button/Button.cjs");
+const Tooltip = require("../../../Tooltip/Tooltip.cjs");
+const AddButton = React.forwardRef(({
+  children = "Add additional tag",
+  disabled,
+  onClick,
+  tooltip,
+  ...restProps
+}, ref) => {
+  const button = jsxRuntime.jsxRuntimeExports.jsxs(TextButton.default, {
+    ref,
+    variant: "primary",
+    disabled,
+    onClick,
+    ...restProps,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
+      icon: redisUiIcons.PlusIcon
+    }), children]
+  });
+  return jsxRuntime.jsxRuntimeExports.jsx(AddButton_style.AddButtonContainer, {
+    children: tooltip ? jsxRuntime.jsxRuntimeExports.jsx(Tooltip.default, {
+      content: tooltip,
+      children: button
+    }) : button
+  });
+});
+AddButton.displayName = "KeyValueList.AddButton";
+exports.default = AddButton;

package/dist/KeyValueList/components/AddButton/AddButton.d.ts

@@ -0,0 +1,3 @@
+import { KeyValueListAddButtonProps } from './AddButton.types';
+declare const AddButton: import("react").ForwardRefExoticComponent<KeyValueListAddButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default AddButton;

package/dist/KeyValueList/components/AddButton/AddButton.js

@@ -0,0 +1,35 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { forwardRef } from "react";
+import { PlusIcon } from "@redislabsdev/redis-ui-icons";
+import { AddButtonContainer } from "./AddButton.style.js";
+import TextButton from "../../../Button/TextButton/TextButton.js";
+import Button from "../../../Button/Button.js";
+import Tooltip from "../../../Tooltip/Tooltip.js";
+const AddButton = forwardRef(({
+  children = "Add additional tag",
+  disabled,
+  onClick,
+  tooltip,
+  ...restProps
+}, ref) => {
+  const button = jsxRuntimeExports.jsxs(TextButton, {
+    ref,
+    variant: "primary",
+    disabled,
+    onClick,
+    ...restProps,
+    children: [jsxRuntimeExports.jsx(Button.Icon, {
+      icon: PlusIcon
+    }), children]
+  });
+  return jsxRuntimeExports.jsx(AddButtonContainer, {
+    children: tooltip ? jsxRuntimeExports.jsx(Tooltip, {
+      content: tooltip,
+      children: button
+    }) : button
+  });
+});
+AddButton.displayName = "KeyValueList.AddButton";
+export {
+  AddButton as default
+};

package/dist/{SideBar/components/Split/Split.style.cjs → KeyValueList/components/AddButton/AddButton.style.cjs}

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const Split = _styled__default.default.div.withConfig({
-  displayName: "Splitstyle__Split",
-  componentId: "RedisUI__sc-1e341p8-0"
-})(["flex:1;"]);
-exports.Split = Split;
+const AddButtonContainer = _styled__default.default.div.withConfig({
+  displayName: "AddButtonstyle__AddButtonContainer",
+  componentId: "RedisUI__sc-1qx177k-0"
+})(["display:flex;align-items:center;gap:0.8rem;"]);
+exports.AddButtonContainer = AddButtonContainer;

package/dist/KeyValueList/components/AddButton/AddButton.style.d.ts

@@ -0,0 +1 @@
+export declare const AddButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/KeyValueList/components/AddButton/AddButton.style.js

@@ -0,0 +1,8 @@
+import _styled from "styled-components";
+const AddButtonContainer = _styled.div.withConfig({
+  displayName: "AddButtonstyle__AddButtonContainer",
+  componentId: "RedisUI__sc-1qx177k-0"
+})(["display:flex;align-items:center;gap:0.8rem;"]);
+export {
+  AddButtonContainer
+};

package/dist/KeyValueList/components/AddButton/AddButton.types.d.ts

@@ -0,0 +1,4 @@
+export interface KeyValueListAddButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    tooltip?: React.ReactNode;
+}

package/dist/KeyValueList/hooks/useKeyValueList.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+function useKeyValueList(initialData, initializers) {
+  const [data, setData] = React.useState(initialData);
+  const nextIdRef = React.useRef(initialData.length);
+  const initializersRef = React.useRef(initializers);
+  initializersRef.current = initializers;
+  const handleAdd = React.useCallback(() => {
+    const newRow = {
+      id: `row-${nextIdRef.current}`,
+      key: initializersRef.current.initializeKey(),
+      value: initializersRef.current.initializeValue()
+    };
+    nextIdRef.current += 1;
+    setData((prevData) => [...prevData, newRow]);
+  }, []);
+  const handleDelete = React.useCallback((row) => {
+    setData((prevData) => prevData.filter((item) => item.id !== row.id));
+  }, []);
+  const handleKeyChange = React.useCallback((row, newKey) => {
+    setData((prevData) => prevData.map((item) => item.id === row.id ? {
+      ...item,
+      key: newKey
+    } : item));
+  }, []);
+  const handleValueChange = React.useCallback((row, newValue) => {
+    setData((prevData) => prevData.map((item) => item.id === row.id ? {
+      ...item,
+      value: newValue
+    } : item));
+  }, []);
+  return {
+    data,
+    handleAdd,
+    handleDelete,
+    handleKeyChange,
+    handleValueChange,
+    setData
+  };
+}
+exports.useKeyValueList = useKeyValueList;

package/dist/KeyValueList/hooks/useKeyValueList.d.ts

@@ -0,0 +1,3 @@
+import { KeyValuePair } from '../KeyValueList.types';
+import { RowInitializers, UseKeyValueListReturn } from './useKeyValueList.types';
+export declare function useKeyValueList<TKey = string, TValue = string>(initialData: KeyValuePair<TKey, TValue>[], initializers: RowInitializers<TKey, TValue>): UseKeyValueListReturn<TKey, TValue>;

package/dist/KeyValueList/hooks/useKeyValueList.js

@@ -0,0 +1,42 @@
+import { useState, useRef, useCallback } from "react";
+function useKeyValueList(initialData, initializers) {
+  const [data, setData] = useState(initialData);
+  const nextIdRef = useRef(initialData.length);
+  const initializersRef = useRef(initializers);
+  initializersRef.current = initializers;
+  const handleAdd = useCallback(() => {
+    const newRow = {
+      id: `row-${nextIdRef.current}`,
+      key: initializersRef.current.initializeKey(),
+      value: initializersRef.current.initializeValue()
+    };
+    nextIdRef.current += 1;
+    setData((prevData) => [...prevData, newRow]);
+  }, []);
+  const handleDelete = useCallback((row) => {
+    setData((prevData) => prevData.filter((item) => item.id !== row.id));
+  }, []);
+  const handleKeyChange = useCallback((row, newKey) => {
+    setData((prevData) => prevData.map((item) => item.id === row.id ? {
+      ...item,
+      key: newKey
+    } : item));
+  }, []);
+  const handleValueChange = useCallback((row, newValue) => {
+    setData((prevData) => prevData.map((item) => item.id === row.id ? {
+      ...item,
+      value: newValue
+    } : item));
+  }, []);
+  return {
+    data,
+    handleAdd,
+    handleDelete,
+    handleKeyChange,
+    handleValueChange,
+    setData
+  };
+}
+export {
+  useKeyValueList
+};

package/dist/KeyValueList/hooks/useKeyValueList.types.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { KeyValuePair } from '../KeyValueList.types';
+export interface RowInitializers<TKey, TValue> {
+    initializeKey: () => TKey;
+    initializeValue: () => TValue;
+}
+export interface UseKeyValueListReturn<TKey = string, TValue = string> {
+    data: KeyValuePair<TKey, TValue>[];
+    handleAdd: () => void;
+    handleDelete: (row: KeyValuePair<TKey, TValue>) => void;
+    handleKeyChange: (row: KeyValuePair<TKey, TValue>, newKey: TKey) => void;
+    handleValueChange: (row: KeyValuePair<TKey, TValue>, newValue: TValue) => void;
+    setData: React.Dispatch<React.SetStateAction<KeyValuePair<TKey, TValue>[]>>;
+}

package/dist/KeyValueList/index.d.ts

@@ -0,0 +1,5 @@
+export { KeyValueList } from './KeyValueList';
+export type { KeyValueListProps, KeyValuePair } from './KeyValueList.types';
+export type { KeyValueListAddButtonProps } from './components/AddButton/AddButton.types';
+export { useKeyValueList } from './hooks/useKeyValueList';
+export type { UseKeyValueListReturn, RowInitializers } from './hooks/useKeyValueList.types';

package/dist/Label/Label.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LabelProps } from './Label.types';
 declare const Label: (({ label, infoIconProps, required, optional, readOnly, ...restProps }: LabelProps) => import("react/jsx-runtime").JSX.Element) & {
     Text: ({ children, readOnly, ...restProps }: import("./components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;
@@ -6,7 +5,7 @@ declare const Label: (({ label, infoIconProps, required, optional, readOnly, ...
     Required: ({ children, show, size, ...restProps }: import("./components/Required/Required.types").RequiredProps) => import("react/jsx-runtime").JSX.Element | null;
     Optional: ({ children, show, size, ...restProps }: import("./components/Optional/Optional.types").OptionalProps) => import("react/jsx-runtime").JSX.Element | null;
     Compose: ({ htmlFor, show, ...props }: import("react").LabelHTMLAttributes<HTMLLabelElement> & {
-        show?: boolean | undefined;
+        show?: boolean;
     }) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Label;

package/dist/Label/components/Compose/Compose.d.ts

@@ -1,5 +1,5 @@
 import { LabelHTMLAttributes } from 'react';
 declare const Compose: ({ htmlFor, show, ...props }: LabelHTMLAttributes<HTMLLabelElement> & {
-    show?: boolean | undefined;
+    show?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default Compose;

package/dist/Label/components/Optional/Optional.style.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Optional: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Label/components/Optional/Optional.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyBodyProps } from '../../../Typography';
 export interface OptionalProps extends Omit<TypographyBodyProps, 'children'> {
     children?: React.ReactNode;

package/dist/Label/components/Required/Required.style.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Required: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Label/components/Required/Required.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyBodyProps } from '../../../Typography';
 export interface RequiredProps extends Omit<TypographyBodyProps, 'children'> {
     children?: React.ReactNode;

package/dist/Label/components/Text/Text.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Text: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
-    $readonly?: boolean | undefined;
+    $readonly?: boolean;
 }, never>;

package/dist/Label/components/Text/Text.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyBodyProps } from '../../../Typography';
 export interface TextProps extends Omit<TypographyBodyProps, 'children'> {
     children?: React.ReactNode;

package/dist/Layouts/FlexGroup/FlexGroup.style.d.ts

@@ -3,7 +3,7 @@ import { FlexDirection, FlexGroupGapSize, FlexJustify } from './FlexGroup.types'
 export declare const FlexGroup: import("styled-components").StyledComponent<({ flex, selfAlign, component, ...restProps }: import("../FlexItem/FlexItem.types").FlexItemProps) => import("react/jsx-runtime").JSX.Element, any, {
     $gap: FlexGroupGapSize;
     $align: FlexAlign;
-    $justify?: FlexJustify | undefined;
-    $wrap?: boolean | undefined;
+    $justify?: FlexJustify;
+    $wrap?: boolean;
     'data-flex-direction': FlexDirection;
 }, never>;

package/dist/Layouts/FlexItem/FlexItem.style.d.ts

@@ -1,5 +1,5 @@
 import { FlexAlign, FlexFlex } from './FlexItem.types';
 export declare const FlexItem: import("styled-components").StyledComponent<"div", any, {
-    $selfAlign?: FlexAlign | undefined;
-    $flex?: FlexFlex | undefined;
+    $selfAlign?: FlexAlign;
+    $flex?: FlexFlex;
 }, never>;

package/dist/Layouts/FlexSplit/FlexSplit.style.d.ts

@@ -4,5 +4,5 @@
  * If $extraMinSpace specified, sets right margin of prev component to $extraMinSpace
  */
 export declare const FlexSplit: import("styled-components").StyledComponent<"div", any, {
-    $extraMinSpace?: string | undefined;
+    $extraMinSpace?: string;
 }, never>;