@redis-ui/components 42.0.0 → 42.8.0

package/dist/Breadcrumbs/components/Current/Current.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { BreadcrumbsCurrent } from "./Current.style.js";
+const Current = ({
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsx(BreadcrumbsCurrent, {
+  "aria-current": "page",
+  ...restProps,
+  children
+});
+export {
+  Current as default
+};

package/dist/Breadcrumbs/components/Current/Current.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsCurrent = _styled__default.default.span.withConfig({
+  displayName: "Currentstyle__BreadcrumbsCurrent",
+  componentId: "RedisUI__sc-50sq3s-0"
+})(["color:", ";font-family:", ";font-size:", ";font-weight:", ";"], () => redisUiStyles.useTheme().components.breadcrumbs.current.textColor, () => redisUiStyles.useTheme().components.typography.body.fontFamily, () => redisUiStyles.useTheme().components.typography.body.fontSizes.M, () => redisUiStyles.useTheme().components.breadcrumbs.current.fontWeight);
+exports.BreadcrumbsCurrent = BreadcrumbsCurrent;

package/dist/Breadcrumbs/components/Current/Current.style.d.ts

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

package/dist/Breadcrumbs/components/Current/Current.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const BreadcrumbsCurrent = _styled.span.withConfig({
+  displayName: "Currentstyle__BreadcrumbsCurrent",
+  componentId: "RedisUI__sc-50sq3s-0"
+})(["color:", ";font-family:", ";font-size:", ";font-weight:", ";"], () => useTheme().components.breadcrumbs.current.textColor, () => useTheme().components.typography.body.fontFamily, () => useTheme().components.typography.body.fontSizes.M, () => useTheme().components.breadcrumbs.current.fontWeight);
+export {
+  BreadcrumbsCurrent
+};

package/dist/Breadcrumbs/components/Current/Current.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbsCurrentProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}

package/dist/Breadcrumbs/components/Item/Item.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Item_style = require("./Item.style.cjs");
+const Item = ({
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Item_style.BreadcrumbsItem, {
+  ...restProps,
+  children
+});
+exports.default = Item;

package/dist/Breadcrumbs/components/Item/Item.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsItemProps } from './Item.types';
+declare const Item: ({ children, ...restProps }: BreadcrumbsItemProps) => import("react/jsx-runtime").JSX.Element;
+export default Item;

package/dist/Breadcrumbs/components/Item/Item.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { BreadcrumbsItem } from "./Item.style.js";
+const Item = ({
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsx(BreadcrumbsItem, {
+  ...restProps,
+  children
+});
+export {
+  Item as default
+};

package/dist/Breadcrumbs/components/Item/Item.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsItem = _styled__default.default.li.withConfig({
+  displayName: "Itemstyle__BreadcrumbsItem",
+  componentId: "RedisUI__sc-1ivwbux-0"
+})(["display:flex;align-items:center;gap:", ";"], () => redisUiStyles.useTheme().components.breadcrumbs.gap);
+exports.BreadcrumbsItem = BreadcrumbsItem;

package/dist/Breadcrumbs/components/Item/Item.style.d.ts

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

package/dist/Breadcrumbs/components/Item/Item.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const BreadcrumbsItem = _styled.li.withConfig({
+  displayName: "Itemstyle__BreadcrumbsItem",
+  componentId: "RedisUI__sc-1ivwbux-0"
+})(["display:flex;align-items:center;gap:", ";"], () => useTheme().components.breadcrumbs.gap);
+export {
+  BreadcrumbsItem
+};

package/dist/Breadcrumbs/components/Item/Item.types.d.ts

@@ -0,0 +1,2 @@
+import { ComposeElementProps } from '../../../Helpers/common.types';
+export type BreadcrumbsItemProps = ComposeElementProps<HTMLLIElement>;

package/dist/Breadcrumbs/components/Link/Link.cjs

@@ -0,0 +1,52 @@
+"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 Link_style = require("./Link.style.cjs");
+const getFalse = () => false;
+const Link = React.forwardRef(({
+  children,
+  href,
+  onClick,
+  disabled,
+  ...restProps
+}, ref) => {
+  const commonProps = {
+    ref,
+    tabIndex: disabled ? -1 : 0
+  };
+  const hrefProps = {
+    ...href ? {
+      href
+    } : null,
+    ...onClick ? {
+      role: href ? void 0 : "button",
+      onClick,
+      onKeyDown: (e) => {
+        var _a;
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          (_a = e.currentTarget) == null ? void 0 : _a.click();
+        }
+      }
+    } : null
+  };
+  const disabledProps = disabled ? {
+    disabled: true,
+    tabIndex: -1,
+    href: void 0,
+    onClick: getFalse,
+    onKeyDown: getFalse,
+    "aria-disabled": true
+  } : null;
+  return jsxRuntime.jsxRuntimeExports.jsx(Link_style.BreadcrumbsLink, {
+    ...commonProps,
+    ...hrefProps,
+    ...restProps,
+    ...disabledProps,
+    children
+  });
+});
+Link.displayName = "Breadcrumbs.Link";
+exports.default = Link;

package/dist/Breadcrumbs/components/Link/Link.d.ts

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

package/dist/Breadcrumbs/components/Link/Link.js

@@ -0,0 +1,52 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { forwardRef } from "react";
+import { BreadcrumbsLink } from "./Link.style.js";
+const getFalse = () => false;
+const Link = forwardRef(({
+  children,
+  href,
+  onClick,
+  disabled,
+  ...restProps
+}, ref) => {
+  const commonProps = {
+    ref,
+    tabIndex: disabled ? -1 : 0
+  };
+  const hrefProps = {
+    ...href ? {
+      href
+    } : null,
+    ...onClick ? {
+      role: href ? void 0 : "button",
+      onClick,
+      onKeyDown: (e) => {
+        var _a;
+        if (e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          (_a = e.currentTarget) == null ? void 0 : _a.click();
+        }
+      }
+    } : null
+  };
+  const disabledProps = disabled ? {
+    disabled: true,
+    tabIndex: -1,
+    href: void 0,
+    onClick: getFalse,
+    onKeyDown: getFalse,
+    "aria-disabled": true
+  } : null;
+  return jsxRuntimeExports.jsx(BreadcrumbsLink, {
+    ...commonProps,
+    ...hrefProps,
+    ...restProps,
+    ...disabledProps,
+    children
+  });
+});
+Link.displayName = "Breadcrumbs.Link";
+export {
+  Link as default
+};

package/dist/Breadcrumbs/components/Link/Link.style.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Button_style_utils = require("../../../Button/Button.style.utils.cjs");
+const css_utils = require("../../../Helpers/css.utils.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsLink = _styled__default.default.a.withConfig({
+  displayName: "Linkstyle__BreadcrumbsLink",
+  componentId: "RedisUI__sc-19droq4-0"
+})(["text-decoration:none;font-family:", ";font-size:", ";font-weight:inherit;cursor:pointer;", ";&:hover{text-decoration:underline;}&[aria-disabled='true']{cursor:not-allowed;text-decoration:none;}", ""], () => redisUiStyles.useTheme().components.typography.body.fontFamily, () => redisUiStyles.useTheme().components.typography.body.fontSizes.M, () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.breadcrumbs.link.states, [css_utils.tokenMaps.textColor]), redisUiStyles.getFocusStyle());
+exports.BreadcrumbsLink = BreadcrumbsLink;

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

@@ -0,0 +1 @@
+export declare const BreadcrumbsLink: import("styled-components").StyledComponent<"a", any, import("styled-components").ThemeProps<import("@redislabsdev/redis-ui-styles").Theme>, never>;

package/dist/Breadcrumbs/components/Link/Link.style.js

@@ -0,0 +1,11 @@
+import _styled from "styled-components";
+import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
+import { getButtonStatesStyle } from "../../../Button/Button.style.utils.js";
+import { tokenMaps } from "../../../Helpers/css.utils.js";
+const BreadcrumbsLink = _styled.a.withConfig({
+  displayName: "Linkstyle__BreadcrumbsLink",
+  componentId: "RedisUI__sc-19droq4-0"
+})(["text-decoration:none;font-family:", ";font-size:", ";font-weight:inherit;cursor:pointer;", ";&:hover{text-decoration:underline;}&[aria-disabled='true']{cursor:not-allowed;text-decoration:none;}", ""], () => useTheme().components.typography.body.fontFamily, () => useTheme().components.typography.body.fontSizes.M, () => getButtonStatesStyle(useTheme().components.breadcrumbs.link.states, [tokenMaps.textColor]), getFocusStyle());
+export {
+  BreadcrumbsLink
+};

package/dist/Breadcrumbs/components/Link/Link.types.d.ts

@@ -0,0 +1,5 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbsLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onKeyDown'> {
+    children: ReactNode;
+    disabled?: boolean;
+}

package/dist/Breadcrumbs/components/List/List.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const List_style = require("./List.style.cjs");
+const List = ({
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(List_style.BreadcrumbsList, {
+  ...restProps,
+  children
+});
+exports.default = List;

package/dist/Breadcrumbs/components/List/List.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsListProps } from './List.types';
+declare const List: ({ children, ...restProps }: BreadcrumbsListProps) => import("react/jsx-runtime").JSX.Element;
+export default List;

package/dist/Breadcrumbs/components/List/List.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { BreadcrumbsList } from "./List.style.js";
+const List = ({
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsx(BreadcrumbsList, {
+  ...restProps,
+  children
+});
+export {
+  List as default
+};

package/dist/Breadcrumbs/components/List/List.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsList = _styled__default.default.ol.withConfig({
+  displayName: "Liststyle__BreadcrumbsList",
+  componentId: "RedisUI__sc-11wutho-0"
+})(["display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:", ";"], () => redisUiStyles.useTheme().components.breadcrumbs.gap);
+exports.BreadcrumbsList = BreadcrumbsList;

package/dist/Breadcrumbs/components/List/List.style.d.ts

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

package/dist/Breadcrumbs/components/List/List.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const BreadcrumbsList = _styled.ol.withConfig({
+  displayName: "Liststyle__BreadcrumbsList",
+  componentId: "RedisUI__sc-11wutho-0"
+})(["display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:", ";"], () => useTheme().components.breadcrumbs.gap);
+export {
+  BreadcrumbsList
+};

package/dist/Breadcrumbs/components/List/List.types.d.ts

@@ -0,0 +1,2 @@
+import { ComposeElementProps } from '../../../Helpers/common.types';
+export type BreadcrumbsListProps = ComposeElementProps<HTMLOListElement>;

package/dist/Breadcrumbs/components/Separator/Separator.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Separator_style = require("./Separator.style.cjs");
+const Separator = ({
+  children = "/",
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Separator_style.BreadcrumbsSeparator, {
+  "aria-hidden": "true",
+  ...restProps,
+  children
+});
+exports.default = Separator;

package/dist/Breadcrumbs/components/Separator/Separator.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsSeparatorProps } from './Separator.types';
+declare const Separator: ({ children, ...restProps }: BreadcrumbsSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+export default Separator;

package/dist/Breadcrumbs/components/Separator/Separator.js

@@ -0,0 +1,13 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { BreadcrumbsSeparator } from "./Separator.style.js";
+const Separator = ({
+  children = "/",
+  ...restProps
+}) => jsxRuntimeExports.jsx(BreadcrumbsSeparator, {
+  "aria-hidden": "true",
+  ...restProps,
+  children
+});
+export {
+  Separator as default
+};

package/dist/Breadcrumbs/components/Separator/Separator.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const BreadcrumbsSeparator = _styled__default.default.span.withConfig({
+  displayName: "Separatorstyle__BreadcrumbsSeparator",
+  componentId: "RedisUI__sc-1ltx191-0"
+})(["display:flex;align-items:center;color:", ";font-family:", ";font-size:", ";user-select:none;"], () => redisUiStyles.useTheme().components.breadcrumbs.separator.textColor, () => redisUiStyles.useTheme().components.typography.body.fontFamily, () => redisUiStyles.useTheme().components.typography.body.fontSizes.M);
+exports.BreadcrumbsSeparator = BreadcrumbsSeparator;

package/dist/Breadcrumbs/components/Separator/Separator.style.d.ts

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

package/dist/Breadcrumbs/components/Separator/Separator.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const BreadcrumbsSeparator = _styled.span.withConfig({
+  displayName: "Separatorstyle__BreadcrumbsSeparator",
+  componentId: "RedisUI__sc-1ltx191-0"
+})(["display:flex;align-items:center;color:", ";font-family:", ";font-size:", ";user-select:none;"], () => useTheme().components.breadcrumbs.separator.textColor, () => useTheme().components.typography.body.fontFamily, () => useTheme().components.typography.body.fontSizes.M);
+export {
+  BreadcrumbsSeparator
+};

package/dist/Breadcrumbs/components/Separator/Separator.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface BreadcrumbsSeparatorProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: ReactNode;
+}

package/dist/Breadcrumbs/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Breadcrumbs } from './Breadcrumbs';
+export * from './Breadcrumbs.types';
+export * from './components/Link/Link.types';
+export * from './components/Separator/Separator.types';
+export * from './components/Current/Current.types';

package/dist/Button/ActionIconButton/ActionIconButton.style.d.ts

@@ -1,2 +1,2 @@
 import { ActionIconButtonProps } from './ActionIconButton.types';
-export declare const ActionIconButton: import("styled-components").StyledComponent<"button", any, Required<Pick<ActionIconButtonProps, "variant" | "size">>, never>;
+export declare const ActionIconButton: import("styled-components").StyledComponent<"button", any, Required<Pick<ActionIconButtonProps, "size" | "variant">>, never>;

package/dist/Button/Button.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonContextType } from './Button.types';
 export declare const ButtonContext: import("react").Context<ButtonContextType | null>;
 export declare function useButtonContext(): ButtonContextType;

package/dist/Button/Button.style.d.ts

@@ -1,3 +1,3 @@
 import { ButtonProps } from './Button.types';
 export declare const baseButtonStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare const Button: import("styled-components").StyledComponent<"button", any, Required<Pick<ButtonProps, "theme" | "variant" | "size">>, never>;
+export declare const Button: import("styled-components").StyledComponent<"button", any, Required<Pick<ButtonProps, "theme" | "size" | "variant">>, never>;

package/dist/Button/Button.style.utils.d.ts

@@ -7,4 +7,4 @@ export declare const bgColorMap: TokenMap<string>;
 export declare const textColorMap: TokenMap<string>;
 export declare const shadowBorderMap: TokenMap<string>;
 export declare const borderColorMap: TokenMap<string>;
-export declare const getButtonStatesStyle: <T extends string>(theme: Partial<Record<ButtonState, Partial<Record<T, string>>>> | null | undefined, maps: TokenMap<T>[]) => FlattenInterpolation<ThemeProps<Theme>> | null;
+export declare const getButtonStatesStyle: <T extends string>(theme: ButtonStatesTheme<T> | undefined | null, maps: TokenMap<T>[]) => FlattenInterpolation<ThemeProps<Theme>> | null;

package/dist/Button/TextButton/TextButton.cjs

@@ -7,13 +7,13 @@ const Button_context = require("../Button.context.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const TextButton = React__default.default.forwardRef(({
-  size = "M",
+  size = "medium",
   variant = "primary",
   children,
   ...restProps
 }, ref) => {
   return jsxRuntime.jsxRuntimeExports.jsx(Button_context.ButtonContext.Provider, {
-    value: "text",
+    value: size,
     children: jsxRuntime.jsxRuntimeExports.jsx(TextButton_style.TextButton, {
       type: "button",
       variant,

package/dist/Button/TextButton/TextButton.js

@@ -3,13 +3,13 @@ import React__default from "react";
 import { TextButton as TextButton$2 } from "./TextButton.style.js";
 import { ButtonContext } from "../Button.context.js";
 const TextButton = React__default.forwardRef(({
-  size = "M",
+  size = "medium",
   variant = "primary",
   children,
   ...restProps
 }, ref) => {
   return jsxRuntimeExports.jsx(ButtonContext.Provider, {
-    value: "text",
+    value: size,
     children: jsxRuntimeExports.jsx(TextButton$2, {
       type: "button",
       variant,

package/dist/Button/TextButton/TextButton.style.cjs

@@ -26,7 +26,11 @@ const TextButton = _styled__default.default.button.withConfig({
 }) => {
   const layout = variant.includes("inline") ? "inline" : "block";
   return css_utils.styleFromTokens(sizeTokenMaps, redisUiStyles.useTheme().components.textButton.layouts[layout].sizes[size]);
-}, () => Body_style.useBodyStyles(), ({
+}, ({
+  size
+}) => Body_style.useBodyStyles({
+  $size: size === "small" ? "S" : "M"
+}), ({
   variant
 }) => getVariantStyle(variant)(redisUiStyles.useTheme()));
 exports.TextButton = TextButton;

package/dist/Button/TextButton/TextButton.style.d.ts

@@ -1,2 +1,2 @@
 import { TextButtonProps } from './TextButton.types';
-export declare const TextButton: import("styled-components").StyledComponent<"button", any, Required<Pick<TextButtonProps, "variant" | "size">>, never>;
+export declare const TextButton: import("styled-components").StyledComponent<"button", any, Required<Pick<TextButtonProps, "size" | "variant">>, never>;

package/dist/Button/TextButton/TextButton.style.js

@@ -22,7 +22,11 @@ const TextButton = _styled.button.withConfig({
 }) => {
   const layout = variant.includes("inline") ? "inline" : "block";
   return styleFromTokens(sizeTokenMaps, useTheme().components.textButton.layouts[layout].sizes[size]);
-}, () => useBodyStyles(), ({
+}, ({
+  size
+}) => useBodyStyles({
+  $size: size === "small" ? "S" : "M"
+}), ({
   variant
 }) => getVariantStyle(variant)(useTheme()));
 export {

package/dist/Button/TextButton/TextButton.types.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-export type TextButtonSizes = 'M';
+export type TextButtonSizes = 'medium' | 'small';
 export declare const textButtonVariants: readonly ["primary", "destructive", "primary-inline", "destructive-inline"];
 export type TextButtonVariants = (typeof textButtonVariants)[number];
 export interface TextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/Button/ToggleButton/ToggleButton.style.cjs

@@ -8,8 +8,14 @@ const Button_style_utils = require("../Button.style.utils.cjs");
 const IndicatorCount_style = require("./components/IndicatorCount/IndicatorCount.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const ToggleButton = _styled__default.default.button.withConfig({
+const ToggleButton = _styled__default.default.button.attrs(({
+  "aria-pressed": pressed,
+  role
+}) => ({
+  "data-pressed": pressed,
+  "aria-pressed": role && role !== "button" ? void 0 : pressed
+})).withConfig({
   displayName: "ToggleButtonstyle__ToggleButton",
   componentId: "RedisUI__sc-1o8wm2j-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([aria-pressed='true'])){", "}&:where([aria-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], Button_style.baseButtonStyle, () => redisUiStyles.useTheme().components.toggleButton.height, () => redisUiStyles.useTheme().components.toggleButton.lineHeight, () => redisUiStyles.useTheme().components.toggleButton.gap, () => Body_style.useBodyStyles(), () => redisUiStyles.useTheme().components.toggleButton.padding, () => redisUiStyles.useTheme().components.toggleButton.borderRadius, () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.off, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.on, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), IndicatorCount_style.IndicatorCount, () => redisUiStyles.useTheme().components.toggleButton.counter.disabledOpacity);
+})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([data-pressed='true'])){", "}&:where([data-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], Button_style.baseButtonStyle, () => redisUiStyles.useTheme().components.toggleButton.height, () => redisUiStyles.useTheme().components.toggleButton.lineHeight, () => redisUiStyles.useTheme().components.toggleButton.gap, () => Body_style.useBodyStyles(), () => redisUiStyles.useTheme().components.toggleButton.padding, () => redisUiStyles.useTheme().components.toggleButton.borderRadius, () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.off, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.on, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), IndicatorCount_style.IndicatorCount, () => redisUiStyles.useTheme().components.toggleButton.counter.disabledOpacity);
 exports.ToggleButton = ToggleButton;

package/dist/Button/ToggleButton/ToggleButton.style.d.ts

@@ -1 +1,4 @@
-export declare const ToggleButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const ToggleButton: import("styled-components").StyledComponent<"button", any, {
+    'data-pressed': boolean | "true" | "false" | "mixed" | undefined;
+    'aria-pressed': boolean | "true" | "false" | "mixed" | undefined;
+} & import("styled-components").ThemeProps<import("@redislabsdev/redis-ui-styles").Theme>, "aria-pressed" | "data-pressed">;

package/dist/Button/ToggleButton/ToggleButton.style.js

@@ -4,10 +4,16 @@ import { baseButtonStyle } from "../Button.style.js";
 import { useBodyStyles } from "../../Typography/components/Body/Body.style.js";
 import { getButtonStatesStyle, bgColorMap, textColorMap, borderColorMap } from "../Button.style.utils.js";
 import { IndicatorCount } from "./components/IndicatorCount/IndicatorCount.style.js";
-const ToggleButton = _styled.button.withConfig({
+const ToggleButton = _styled.button.attrs(({
+  "aria-pressed": pressed,
+  role
+}) => ({
+  "data-pressed": pressed,
+  "aria-pressed": role && role !== "button" ? void 0 : pressed
+})).withConfig({
   displayName: "ToggleButtonstyle__ToggleButton",
   componentId: "RedisUI__sc-1o8wm2j-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([aria-pressed='true'])){", "}&:where([aria-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], baseButtonStyle, () => useTheme().components.toggleButton.height, () => useTheme().components.toggleButton.lineHeight, () => useTheme().components.toggleButton.gap, () => useBodyStyles(), () => useTheme().components.toggleButton.padding, () => useTheme().components.toggleButton.borderRadius, () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.off, [bgColorMap, textColorMap, borderColorMap]), () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.on, [bgColorMap, textColorMap, borderColorMap]), IndicatorCount, () => useTheme().components.toggleButton.counter.disabledOpacity);
+})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([data-pressed='true'])){", "}&:where([data-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], baseButtonStyle, () => useTheme().components.toggleButton.height, () => useTheme().components.toggleButton.lineHeight, () => useTheme().components.toggleButton.gap, () => useBodyStyles(), () => useTheme().components.toggleButton.padding, () => useTheme().components.toggleButton.borderRadius, () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.off, [bgColorMap, textColorMap, borderColorMap]), () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.on, [bgColorMap, textColorMap, borderColorMap]), IndicatorCount, () => useTheme().components.toggleButton.counter.disabledOpacity);
 export {
   ToggleButton
 };

package/dist/ButtonGroup/ButtonGroup.types.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement>;

package/dist/ButtonGroup/components/Button/Button.style.d.ts

@@ -1,3 +1,3 @@
 export declare const Button: import("styled-components").StyledComponent<"button", any, {
-    isSelected?: boolean | undefined;
+    isSelected?: boolean;
 }, never>;

package/dist/Card/Card.style.d.ts

@@ -1,4 +1,4 @@
 export declare const Card: import("styled-components").StyledComponent<"div", any, {
-    width?: string | number | undefined;
-    height?: string | number | undefined;
+    width?: string | number;
+    height?: string | number;
 }, never>;

package/dist/Card/Card.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     width?: number | string;
     height?: number | string;

package/dist/Checkbox/Checkbox.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CheckboxContextType } from './components/Compose/Compose.types';
 export declare const CheckboxContext: import("react").Context<CheckboxContextType | null>;
 export declare function useCheckboxContext(): CheckboxContextType;

package/dist/Checkbox/components/Indicator/Indicator.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import { CheckboxContextType } from '../Compose/Compose.types';
 export declare const CheckboxIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixCheckbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>, any, CheckboxContextType, never>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CheckboxVariants, CheckedType } from '../Compose/Compose.types';
 export declare const CheckboxLabel: import("styled-components").StyledComponent<"label", any, {
     $checked: CheckedType;

package/dist/Chip/Chip.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ChipContextType } from './Chip.types';
 export declare const ChipContext: import("react").Context<ChipContextType | null>;
 export declare function useChipContext(): ChipContextType;