@redis-ui/components 42.7.0 → 43.0.2

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/Button.style.cjs

@@ -31,7 +31,10 @@ const Button = _styled__default.default.button.withConfig({
   componentId: "RedisUI__sc-6zckac-0"
 })(["", ";gap:", ";", ";", ";", ";"], baseButtonStyle, () => redisUiStyles.useTheme().components.button.gap, ({
   size
-}) => css_utils.styleFromTokens(sizeTokenMaps, redisUiStyles.useTheme().components.button.sizes[size]), ({
+}) => css_utils.styleFromTokens({
+  tokenMaps: sizeTokenMaps,
+  tokens: redisUiStyles.useTheme().components.button.sizes[size]
+}), ({
   size
 }) => Body_style.useBodyStyles(size === "small" ? {
   $size: "S"

package/dist/Button/Button.style.js

@@ -27,7 +27,10 @@ const Button = _styled.button.withConfig({
   componentId: "RedisUI__sc-6zckac-0"
 })(["", ";gap:", ";", ";", ";", ";"], baseButtonStyle, () => useTheme().components.button.gap, ({
   size
-}) => styleFromTokens(sizeTokenMaps, useTheme().components.button.sizes[size]), ({
+}) => styleFromTokens({
+  tokenMaps: sizeTokenMaps,
+  tokens: useTheme().components.button.sizes[size]
+}), ({
   size
 }) => useBodyStyles(size === "small" ? {
   $size: "S"

package/dist/Button/Button.style.utils.cjs

@@ -6,7 +6,22 @@ const bgColorMap = css_utils.tokenMaps.bgColor;
 const textColorMap = css_utils.tokenMaps.textColor;
 const shadowBorderMap = css_utils.tokenMaps.shadowBorder;
 const borderColorMap = css_utils.tokenMaps.borderColor;
-const getButtonStatesStyle = (theme, maps) => theme ? _styled.css(["&{", "}&:hover{", "}&:active{", "}&[disabled],&:disabled{", "}"], css_utils.styleFromTokens(maps, theme.normal), css_utils.styleFromTokens(maps, theme.hover, theme.normal), css_utils.styleFromTokens(maps, theme.active, theme.normal), css_utils.styleFromTokens(maps, theme.disabled, theme.normal)) : null;
+const getButtonStatesStyle = (theme, maps) => theme ? _styled.css(["&{", "}&:hover{", "}&:active{", "}&[disabled],&:disabled{", "}"], css_utils.styleFromTokens({
+  tokenMaps: maps,
+  tokens: theme.normal
+}), css_utils.styleFromTokens({
+  tokenMaps: maps,
+  tokens: theme.hover,
+  fallbackTokens: theme.normal
+}), css_utils.styleFromTokens({
+  tokenMaps: maps,
+  tokens: theme.active,
+  fallbackTokens: theme.normal
+}), css_utils.styleFromTokens({
+  tokenMaps: maps,
+  tokens: theme.disabled,
+  fallbackTokens: theme.normal
+})) : null;
 exports.bgColorMap = bgColorMap;
 exports.borderColorMap = borderColorMap;
 exports.getButtonStatesStyle = getButtonStatesStyle;

package/dist/Button/Button.style.utils.js

@@ -4,7 +4,22 @@ const bgColorMap = tokenMaps.bgColor;
 const textColorMap = tokenMaps.textColor;
 const shadowBorderMap = tokenMaps.shadowBorder;
 const borderColorMap = tokenMaps.borderColor;
-const getButtonStatesStyle = (theme, maps) => theme ? css(["&{", "}&:hover{", "}&:active{", "}&[disabled],&:disabled{", "}"], styleFromTokens(maps, theme.normal), styleFromTokens(maps, theme.hover, theme.normal), styleFromTokens(maps, theme.active, theme.normal), styleFromTokens(maps, theme.disabled, theme.normal)) : null;
+const getButtonStatesStyle = (theme, maps) => theme ? css(["&{", "}&:hover{", "}&:active{", "}&[disabled],&:disabled{", "}"], styleFromTokens({
+  tokenMaps: maps,
+  tokens: theme.normal
+}), styleFromTokens({
+  tokenMaps: maps,
+  tokens: theme.hover,
+  fallbackTokens: theme.normal
+}), styleFromTokens({
+  tokenMaps: maps,
+  tokens: theme.active,
+  fallbackTokens: theme.normal
+}), styleFromTokens({
+  tokenMaps: maps,
+  tokens: theme.disabled,
+  fallbackTokens: theme.normal
+})) : null;
 export {
   bgColorMap,
   borderColorMap,

package/dist/Button/Button.types.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const buttonSizes = ["large", "medium", "small"];
-const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell"];
+const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell", "upsell-invert", "upsell-ghost"];
 exports.buttonSizes = buttonSizes;
 exports.buttonVariants = buttonVariants;

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

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { Theme } from '@redislabsdev/redis-ui-styles';
 export declare const buttonSizes: readonly ["large", "medium", "small"];
-export declare const buttonVariants: readonly ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell"];
+export declare const buttonVariants: readonly ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell", "upsell-invert", "upsell-ghost"];
 export type ButtonSizes = (typeof buttonSizes)[number];
 export type ButtonVariants = (typeof buttonVariants)[number];
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/Button/Button.types.js

@@ -1,5 +1,5 @@
 const buttonSizes = ["large", "medium", "small"];
-const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell"];
+const buttonVariants = ["primary", "destructive", "secondary-fill", "secondary-invert", "secondary-ghost", "upsell", "upsell-invert", "upsell-ghost"];
 export {
   buttonSizes,
   buttonVariants

package/dist/Button/CopyToClipboardButton/CopyToClipboardButton.cjs

@@ -0,0 +1,59 @@
+"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 CopyToClipboardButton_style = require("./CopyToClipboardButton.style.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const React__default = /* @__PURE__ */ _interopDefault(React);
+const COPIED_STATE_DURATION = 1500;
+const CopyToClipboardButton = React__default.default.forwardRef(({
+  textToCopy,
+  copiedLabel,
+  ...restProps
+}, ref) => {
+  const [isCopied, setIsCopied] = React.useState(false);
+  const timeoutRef = React.useRef();
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const handleClick = React.useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(textToCopy);
+      setIsCopied(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        setIsCopied(false);
+      }, COPIED_STATE_DURATION);
+    } catch {
+    }
+  }, [textToCopy]);
+  const ariaLabel = isCopied && copiedLabel ? copiedLabel : restProps["aria-label"] || "Copy";
+  return jsxRuntime.jsxRuntimeExports.jsxs(CopyToClipboardButton_style.CopyToClipboardWrapper, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(CopyToClipboardButton_style.CopyToClipboardButton, {
+      type: "button",
+      ref,
+      onClick: handleClick,
+      "$isCopied": isCopied,
+      ...restProps,
+      "aria-label": ariaLabel,
+      children: isCopied ? jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ToastCheckIcon, {
+        size: "L",
+        "aria-hidden": true
+      }) : jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.CopyIcon, {
+        size: "L",
+        "aria-hidden": true
+      })
+    }), isCopied && copiedLabel && jsxRuntime.jsxRuntimeExports.jsx(CopyToClipboardButton_style.CopiedLabel, {
+      children: copiedLabel
+    })]
+  });
+});
+const CopyToClipboardButton$1 = CopyToClipboardButton;
+exports.default = CopyToClipboardButton$1;

package/dist/Button/CopyToClipboardButton/CopyToClipboardButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CopyToClipboardButtonProps } from './CopyToClipboardButton.types';
+declare const CopyToClipboardButton: React.ForwardRefExoticComponent<CopyToClipboardButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default CopyToClipboardButton;

package/dist/Button/CopyToClipboardButton/CopyToClipboardButton.js

@@ -0,0 +1,57 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import React__default, { useState, useRef, useEffect, useCallback } from "react";
+import { ToastCheckIcon, CopyIcon } from "@redislabsdev/redis-ui-icons";
+import { CopyToClipboardWrapper, CopyToClipboardButton as CopyToClipboardButton$2, CopiedLabel } from "./CopyToClipboardButton.style.js";
+const COPIED_STATE_DURATION = 1500;
+const CopyToClipboardButton = React__default.forwardRef(({
+  textToCopy,
+  copiedLabel,
+  ...restProps
+}, ref) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef();
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const handleClick = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(textToCopy);
+      setIsCopied(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        setIsCopied(false);
+      }, COPIED_STATE_DURATION);
+    } catch {
+    }
+  }, [textToCopy]);
+  const ariaLabel = isCopied && copiedLabel ? copiedLabel : restProps["aria-label"] || "Copy";
+  return jsxRuntimeExports.jsxs(CopyToClipboardWrapper, {
+    children: [jsxRuntimeExports.jsx(CopyToClipboardButton$2, {
+      type: "button",
+      ref,
+      onClick: handleClick,
+      "$isCopied": isCopied,
+      ...restProps,
+      "aria-label": ariaLabel,
+      children: isCopied ? jsxRuntimeExports.jsx(ToastCheckIcon, {
+        size: "L",
+        "aria-hidden": true
+      }) : jsxRuntimeExports.jsx(CopyIcon, {
+        size: "L",
+        "aria-hidden": true
+      })
+    }), isCopied && copiedLabel && jsxRuntimeExports.jsx(CopiedLabel, {
+      children: copiedLabel
+    })]
+  });
+});
+const CopyToClipboardButton$1 = CopyToClipboardButton;
+export {
+  CopyToClipboardButton$1 as default
+};

package/dist/Button/CopyToClipboardButton/CopyToClipboardButton.style.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Typography = require("../../Typography/Typography.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const CopyToClipboardWrapper = _styled__default.default.div.withConfig({
+  displayName: "CopyToClipboardButtonstyle__CopyToClipboardWrapper",
+  componentId: "RedisUI__sc-1qz6i4k-0"
+})(["display:inline-flex;align-items:center;gap:", ";"], () => redisUiStyles.useTheme().core.space.space050);
+const CopyToClipboardButton = _styled__default.default.button.withConfig({
+  displayName: "CopyToClipboardButtonstyle__CopyToClipboardButton",
+  componentId: "RedisUI__sc-1qz6i4k-1"
+})(["display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;border-radius:", ";color:", ";&:hover:not(:disabled){background-color:", ";}&:active:not(:disabled){background-color:", ";}&:disabled{cursor:not-allowed;color:", ";}", ""], () => redisUiStyles.useTheme().components.iconButton.borderRadius, ({
+  $isCopied
+}) => {
+  var _a, _b;
+  const theme = redisUiStyles.useTheme();
+  return $isCopied ? theme.semantic.color.icon.success500 : (_b = (_a = theme.components.iconButton.states) == null ? void 0 : _a.normal) == null ? void 0 : _b.textColor;
+}, () => {
+  var _a, _b;
+  return (_b = (_a = redisUiStyles.useTheme().components.iconButton.states) == null ? void 0 : _a.hover) == null ? void 0 : _b.bgColor;
+}, () => {
+  var _a, _b;
+  return (_b = (_a = redisUiStyles.useTheme().components.iconButton.states) == null ? void 0 : _a.active) == null ? void 0 : _b.bgColor;
+}, () => {
+  var _a, _b;
+  return (_b = (_a = redisUiStyles.useTheme().components.iconButton.states) == null ? void 0 : _a.disabled) == null ? void 0 : _b.textColor;
+}, redisUiStyles.getFocusStyle());
+const CopiedLabel = _styled__default.default(Typography.default.Body).attrs({
+  component: "span",
+  size: "S"
+}).withConfig({
+  displayName: "CopyToClipboardButtonstyle__CopiedLabel",
+  componentId: "RedisUI__sc-1qz6i4k-2"
+})(["color:", ";"], () => redisUiStyles.useTheme().semantic.color.text.success500);
+exports.CopiedLabel = CopiedLabel;
+exports.CopyToClipboardButton = CopyToClipboardButton;
+exports.CopyToClipboardWrapper = CopyToClipboardWrapper;

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

@@ -0,0 +1,8 @@
+export declare const CopyToClipboardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CopyToClipboardButton: import("styled-components").StyledComponent<"button", any, {
+    $isCopied?: boolean;
+}, never>;
+export declare const CopiedLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
+    component: "span";
+    size: "S";
+}, "size" | "component">;

package/dist/Button/CopyToClipboardButton/CopyToClipboardButton.style.js

@@ -0,0 +1,38 @@
+import _styled from "styled-components";
+import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
+import Typography from "../../Typography/Typography.js";
+const CopyToClipboardWrapper = _styled.div.withConfig({
+  displayName: "CopyToClipboardButtonstyle__CopyToClipboardWrapper",
+  componentId: "RedisUI__sc-1qz6i4k-0"
+})(["display:inline-flex;align-items:center;gap:", ";"], () => useTheme().core.space.space050);
+const CopyToClipboardButton = _styled.button.withConfig({
+  displayName: "CopyToClipboardButtonstyle__CopyToClipboardButton",
+  componentId: "RedisUI__sc-1qz6i4k-1"
+})(["display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;border-radius:", ";color:", ";&:hover:not(:disabled){background-color:", ";}&:active:not(:disabled){background-color:", ";}&:disabled{cursor:not-allowed;color:", ";}", ""], () => useTheme().components.iconButton.borderRadius, ({
+  $isCopied
+}) => {
+  var _a, _b;
+  const theme = useTheme();
+  return $isCopied ? theme.semantic.color.icon.success500 : (_b = (_a = theme.components.iconButton.states) == null ? void 0 : _a.normal) == null ? void 0 : _b.textColor;
+}, () => {
+  var _a, _b;
+  return (_b = (_a = useTheme().components.iconButton.states) == null ? void 0 : _a.hover) == null ? void 0 : _b.bgColor;
+}, () => {
+  var _a, _b;
+  return (_b = (_a = useTheme().components.iconButton.states) == null ? void 0 : _a.active) == null ? void 0 : _b.bgColor;
+}, () => {
+  var _a, _b;
+  return (_b = (_a = useTheme().components.iconButton.states) == null ? void 0 : _a.disabled) == null ? void 0 : _b.textColor;
+}, getFocusStyle());
+const CopiedLabel = _styled(Typography.Body).attrs({
+  component: "span",
+  size: "S"
+}).withConfig({
+  displayName: "CopyToClipboardButtonstyle__CopiedLabel",
+  componentId: "RedisUI__sc-1qz6i4k-2"
+})(["color:", ";"], () => useTheme().semantic.color.text.success500);
+export {
+  CopiedLabel,
+  CopyToClipboardButton,
+  CopyToClipboardWrapper
+};

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

@@ -0,0 +1,5 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface CopyToClipboardButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    textToCopy: string;
+    copiedLabel?: string;
+}

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

@@ -25,7 +25,10 @@ const TextButton = _styled__default.default.button.withConfig({
   variant
 }) => {
   const layout = variant.includes("inline") ? "inline" : "block";
-  return css_utils.styleFromTokens(sizeTokenMaps, redisUiStyles.useTheme().components.textButton.layouts[layout].sizes[size]);
+  return css_utils.styleFromTokens({
+    tokenMaps: sizeTokenMaps,
+    tokens: redisUiStyles.useTheme().components.textButton.layouts[layout].sizes[size]
+  });
 }, ({
   size
 }) => Body_style.useBodyStyles({

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

@@ -21,7 +21,10 @@ const TextButton = _styled.button.withConfig({
   variant
 }) => {
   const layout = variant.includes("inline") ? "inline" : "block";
-  return styleFromTokens(sizeTokenMaps, useTheme().components.textButton.layouts[layout].sizes[size]);
+  return styleFromTokens({
+    tokenMaps: sizeTokenMaps,
+    tokens: useTheme().components.textButton.layouts[layout].sizes[size]
+  });
 }, ({
   size
 }) => useBodyStyles({

package/dist/Button/TextButton/TextButton.types.cjs

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const textButtonVariants = ["primary", "destructive", "primary-inline", "destructive-inline"];
+const textButtonVariants = ["primary", "destructive", "secondary", "upsell", "primary-inline", "destructive-inline", "secondary-inline", "upsell-inline"];
 exports.textButtonVariants = textButtonVariants;

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

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

package/dist/Button/TextButton/TextButton.types.js

@@ -1,4 +1,4 @@
-const textButtonVariants = ["primary", "destructive", "primary-inline", "destructive-inline"];
+const textButtonVariants = ["primary", "destructive", "secondary", "upsell", "primary-inline", "destructive-inline", "secondary-inline", "upsell-inline"];
 export {
   textButtonVariants
 };

package/dist/Button/index.d.ts

@@ -13,3 +13,5 @@ export * as ActionButtonWithIconStyles from './ActionIconButton/ActionIconButton
 export { default as ToggleButton } from './ToggleButton/ToggleButton';
 export * from './ToggleButton/ToggleButton.types';
 export * as ToggleButtonStyles from './ToggleButton/ToggleButton.style';
+export { default as CopyToClipboardButton } from './CopyToClipboardButton/CopyToClipboardButton';
+export * from './CopyToClipboardButton/CopyToClipboardButton.types';