@redis-ui/components 41.11.0 → 42.7.0

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>;

package/dist/Link/Link.cjs

@@ -32,6 +32,7 @@ const Link = React.forwardRef(({
     } : null,
     ...onClick ? {
       role: href ? void 0 : "button",
+      // for test compatibility
       onClick,
       onKeyDown: (e) => {
         var _a;

package/dist/Link/Link.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Link: import("react").ForwardRefExoticComponent<import("./Link.types").RestLinkProps & import("./Link.types").OwnLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/dist/Link/Link.js

@@ -30,6 +30,7 @@ const Link = forwardRef(({
     } : null,
     ...onClick ? {
       role: href ? void 0 : "button",
+      // for test compatibility
       onClick,
       onKeyDown: (e) => {
         var _a;

package/dist/Link/Link.style.d.ts

@@ -1,15 +1,14 @@
-/// <reference types="react" />
 import { LinkButtonVariants, LinkSize } from './Link.types';
 export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {
     $variant: LinkButtonVariants;
     $size: LinkSize;
-    $allowWrap?: boolean | undefined;
-    disabled?: boolean | undefined;
+    $allowWrap?: boolean;
+    disabled?: boolean;
 }, never>;
 export declare const LinkStyler: import("styled-components").StyledComponent<"span", any, {
     $variant: LinkButtonVariants;
     $size: LinkSize;
-    $allowWrap?: boolean | undefined;
+    $allowWrap?: boolean;
 }, never>;
 export declare const StyledLinkText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const ExternalArrow: import("styled-components").StyledComponent<({ size, customSize, color, customColor, title: titleProp, ...rest }: import("@redislabsdev/redis-ui-icons").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Link/LinkStyler/LinkStyler.cjs

@@ -12,11 +12,9 @@ const LinkStyler = Object.assign(({
 }) => jsxRuntime.jsxRuntimeExports.jsx(LinkStyler_context.LinkSizeProvider, {
   value: size,
   children: jsxRuntime.jsxRuntimeExports.jsx(Link_style.LinkStyler, {
-    ...{
-      $variant: variant,
-      $size: size,
-      $allowWrap: allowWrap
-    },
+    $variant: variant,
+    $size: size,
+    $allowWrap: allowWrap,
     ...restProps
   })
 }), {

package/dist/Link/LinkStyler/LinkStyler.context.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { LinkSize } from '../Link.types';
 export declare const useLinkSize: (value?: LinkSize | undefined) => LinkSize | undefined, LinkSizeProvider: ({ value, children }: Partial<import("react").ProviderProps<LinkSize>>) => import("react/jsx-runtime").JSX.Element;

package/dist/Link/LinkStyler/LinkStyler.js

@@ -10,11 +10,9 @@ const LinkStyler = Object.assign(({
 }) => jsxRuntimeExports.jsx(LinkSizeProvider, {
   value: size,
   children: jsxRuntimeExports.jsx(LinkStyler$1, {
-    ...{
-      $variant: variant,
-      $size: size,
-      $allowWrap: allowWrap
-    },
+    $variant: variant,
+    $size: size,
+    $allowWrap: allowWrap,
     ...restProps
   })
 }), {

package/dist/Loader/Loader.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type LoaderVariants = 'regular' | 'pending' | 'inverse';
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: string;

package/dist/Menu/Menu.context.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
 export declare const MenuProvider: ({ children, disabled }: {
     children: ReactNode;
-    disabled?: boolean | undefined;
+    disabled?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Menu/Menu.d.ts

@@ -1,23 +1,22 @@
-/// <reference types="react" />
 import { MenuProps } from './Menu.types';
 declare const Menu: (({ disabled, ...restProps }: MenuProps) => import("react/jsx-runtime").JSX.Element) & {
-    Trigger: (({ withButton, ...restProps }: import("./components/Trigger/Trigger.types").MenuTriggerProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element) & {
-        Arrow: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: (({ withButton, ...restProps }: import("./components/Trigger/Trigger.types").MenuTriggerProps & import("..").ComposeElementProps<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element) & {
+        Arrow: (props: import("./components/Trigger/components/Arrow/Arrow.types").TriggerArrowProps) => import("react/jsx-runtime").JSX.Element;
     };
     Content: import("react").ForwardRefExoticComponent<import("./components/Content/Content.types").MenuContentProps & import("react").RefAttributes<HTMLDivElement>> & {
         Item: (({ text, icon, subHead, description, isSelected, selected, ...restProps }: import(".").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
-            Text: ({ tooltipOnEllipsis, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+            Text: ({ tooltipOnEllipsis, ...restProps }: import("./components/Content/components/Item/Components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;
             Icon: ({ icon, ...props }: import("./components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-            SubHead: (props: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+            SubHead: (props: import("./components/Content/components/Item/Components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;
             Compose: ({ isSelected, selected, onClick, ...restProps }: import("./components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
             Check: ({ icon, ...restProps }: import("./components/Content/components/Item/Components/Check/Check.types").CheckProps) => import("react/jsx-runtime").JSX.Element;
             Split: ({ minWidth, ...props }: import("./components/Content/components/Item/Components/Split/Split.types").SplitProps) => import("react/jsx-runtime").JSX.Element;
         };
         DropdownArrow: (props: import("./components/Content/components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
         Label: (({ children, text, icon, ...restProps }: import(".").MenuLabelProps & import(".").RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
-            Text: ({ tooltipOnEllipsis, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+            Text: ({ tooltipOnEllipsis, ...restProps }: import("./components/Content/components/Label/components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;
             Icon: ({ icon, ...props }: import("./components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-            Compose: (props: import("./components/Content/components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+            Compose: (props: import("./components/Content/components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("./components/Content/components/Label/components/Compose/Compose.types").RestMenuLabelComposeProps) => import("react/jsx-runtime").JSX.Element;
         };
         Separator: (props: import("./components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
     };

package/dist/Menu/components/Content/Content.d.ts

@@ -1,19 +1,18 @@
-/// <reference types="react" />
 import { MenuContentProps } from './Content.types';
 declare const Content: import("react").ForwardRefExoticComponent<MenuContentProps & import("react").RefAttributes<HTMLDivElement>> & {
     Item: (({ text, icon, subHead, description, isSelected, selected, ...restProps }: import("../..").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
-        Text: ({ tooltipOnEllipsis, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Text: ({ tooltipOnEllipsis, ...restProps }: import("./components/Item/Components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, ...props }: import("./components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-        SubHead: (props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+        SubHead: (props: import("./components/Item/Components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;
         Compose: ({ isSelected, selected, onClick, ...restProps }: import("./components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
         Check: ({ icon, ...restProps }: import("./components/Item/Components/Check/Check.types").CheckProps) => import("react/jsx-runtime").JSX.Element;
         Split: ({ minWidth, ...props }: import("./components/Item/Components/Split/Split.types").SplitProps) => import("react/jsx-runtime").JSX.Element;
     };
     DropdownArrow: (props: import("./components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
     Label: (({ children, text, icon, ...restProps }: import("../..").MenuLabelProps & import("../..").RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
-        Text: ({ tooltipOnEllipsis, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Text: ({ tooltipOnEllipsis, ...restProps }: import("./components/Label/components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, ...props }: import("./components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-        Compose: (props: import("./components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("../../../Helpers").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: import("./components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("./components/Label/components/Compose/Compose.types").RestMenuLabelComposeProps) => import("react/jsx-runtime").JSX.Element;
     };
     Separator: (props: import("./components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/Menu/components/Content/Content.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 export declare const Container: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Menu/components/Content/components/DropdownArrow/DropdownArrow.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 export declare const Arrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixMenu.DropdownMenuArrowProps & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;

package/dist/Menu/components/Content/components/Item/Components/Check/Check.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MonochromeIconProps } from '@redislabsdev/redis-ui-icons';
 export declare const CheckIconContainer: import("styled-components").StyledComponent<({ Component, ...componentProps }: {
     Component: import("react").ElementType<MonochromeIconProps, keyof import("react").JSX.IntrinsicElements>;