@redis-ui/components 42.8.0 → 43.0.2

package/dist/AutoCompleteSelect/AutoCompleteSelect.cjs

@@ -32,7 +32,13 @@ const AutoCompleteSelect = React__default.default.forwardRef(({
     highlightedIndex,
     onClickOutside,
     onInputFocus
-  } = useAutoCompleteSelect.default(options, open, value, setOpen, onChange);
+  } = useAutoCompleteSelect.default({
+    options,
+    open,
+    value,
+    setOpen,
+    onChange
+  });
   React.useImperativeHandle(ref, () => inputElRef.current, [inputElRef]);
   const onInputClick = () => {
     if (options.length || value) {

package/dist/AutoCompleteSelect/AutoCompleteSelect.js

@@ -28,7 +28,13 @@ const AutoCompleteSelect = React__default.forwardRef(({
     highlightedIndex,
     onClickOutside,
     onInputFocus
-  } = useAutoCompleteSelect(options, open, value, setOpen, onChange);
+  } = useAutoCompleteSelect({
+    options,
+    open,
+    value,
+    setOpen,
+    onChange
+  });
   useImperativeHandle(ref, () => inputElRef.current, [inputElRef]);
   const onInputClick = () => {
     if (options.length || value) {

package/dist/AutoCompleteSelect/hooks/useAutoCompleteSelect.cjs

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const React = require("react");
-const useAutoCompleteSelect = (options, open, value, setOpen, onChange) => {
+const useAutoCompleteSelect = ({
+  options,
+  open,
+  value,
+  setOpen,
+  onChange
+}) => {
   const inputElRef = React.useRef(null);
   const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
   const suggestedOptions = React.useMemo(() => {

package/dist/AutoCompleteSelect/hooks/useAutoCompleteSelect.d.ts

@@ -1,6 +1,13 @@
 import React from 'react';
 import { AutoCompleteOnChange, AutoCompleteOption } from '../AutoCompleteSelect.types';
-declare const useAutoCompleteSelect: (options: AutoCompleteOption[], open: boolean, value: string, setOpen: React.Dispatch<React.SetStateAction<boolean>>, onChange: AutoCompleteOnChange) => {
+interface UseAutoCompleteSelectParams {
+    options: AutoCompleteOption[];
+    open: boolean;
+    value: string;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    onChange: AutoCompleteOnChange;
+}
+declare const useAutoCompleteSelect: ({ options, open, value, setOpen, onChange }: UseAutoCompleteSelectParams) => {
     handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     inputElRef: React.RefObject<HTMLInputElement>;
     onItemClick: (val: string) => void;

package/dist/AutoCompleteSelect/hooks/useAutoCompleteSelect.js

@@ -1,5 +1,11 @@
 import { useRef, useState, useMemo, useEffect, useCallback } from "react";
-const useAutoCompleteSelect = (options, open, value, setOpen, onChange) => {
+const useAutoCompleteSelect = ({
+  options,
+  open,
+  value,
+  setOpen,
+  onChange
+}) => {
   const inputElRef = useRef(null);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const suggestedOptions = useMemo(() => {

package/dist/BoxSelectionGroup/components/Item/components/BoxStateIndicator/BoxStateIndicator.cjs

@@ -15,10 +15,14 @@ const BoxStateIndicator = ({
     tabIndex: -1,
     disabled: isDisabled
   });
-  if (!indicator) return null;
-  if (noninteractive) return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
-    children: indicator
-  });
+  if (!indicator) {
+    return null;
+  }
+  if (noninteractive) {
+    return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
+      children: indicator
+    });
+  }
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     jsxRuntime.jsxRuntimeExports.jsx("div", {

package/dist/BoxSelectionGroup/components/Item/components/BoxStateIndicator/BoxStateIndicator.js

@@ -13,10 +13,14 @@ const BoxStateIndicator = ({
     tabIndex: -1,
     disabled: isDisabled
   });
-  if (!indicator) return null;
-  if (noninteractive) return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
-    children: indicator
-  });
+  if (!indicator) {
+    return null;
+  }
+  if (noninteractive) {
+    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+      children: indicator
+    });
+  }
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     jsxRuntimeExports.jsx("div", {

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.style.cjs

@@ -23,20 +23,34 @@ const getStateStyle = (theme, isChecked = false) => {
     ${Button_style_utils.getButtonStatesStyle(stateColors, maps)};
 
     & ${BottomActiveBorder} {
-      ${css_utils.styleFromTokens(markerMaps, stateColors.normal)}
+      ${css_utils.styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: stateColors.normal
+  })}
     }
 
     &:hover ${BottomActiveBorder} {
-      ${css_utils.styleFromTokens(markerMaps, stateColors.hover, stateColors.normal)}
+      ${css_utils.styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: stateColors.hover,
+    fallbackTokens: stateColors.normal
+  })}
     }
 
     &:disabled {
       > * {
-        ${css_utils.styleFromTokens([css_utils.tokenMaps.opacity], stateColors.disabled)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: [css_utils.tokenMaps.opacity],
+    tokens: stateColors.disabled
+  })}
       }
 
       ${BottomActiveBorder} {
-        ${css_utils.styleFromTokens(markerMaps, stateColors.disabled, stateColors.normal)}
+        ${css_utils.styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: stateColors.disabled,
+    fallbackTokens: stateColors.normal
+  })}
         opacity: 1;
       }
     }

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.style.js

@@ -19,20 +19,34 @@ const getStateStyle = (theme, isChecked = false) => {
     ${getButtonStatesStyle(stateColors, maps)};
 
     & ${BottomActiveBorder} {
-      ${styleFromTokens(markerMaps, stateColors.normal)}
+      ${styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: stateColors.normal
+  })}
     }
 
     &:hover ${BottomActiveBorder} {
-      ${styleFromTokens(markerMaps, stateColors.hover, stateColors.normal)}
+      ${styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: stateColors.hover,
+    fallbackTokens: stateColors.normal
+  })}
     }
 
     &:disabled {
       > * {
-        ${styleFromTokens([tokenMaps.opacity], stateColors.disabled)}
+        ${styleFromTokens({
+    tokenMaps: [tokenMaps.opacity],
+    tokens: stateColors.disabled
+  })}
       }
 
       ${BottomActiveBorder} {
-        ${styleFromTokens(markerMaps, stateColors.disabled, stateColors.normal)}
+        ${styleFromTokens({
+    tokenMaps: markerMaps,
+    tokens: stateColors.disabled,
+    fallbackTokens: stateColors.normal
+  })}
         opacity: 1;
       }
     }

package/dist/BoxSelectionGroup/hooks/useBoxSelectionGroup.cjs

@@ -24,7 +24,9 @@ const useBoxSelectionGroup = ({
       newValue: newBox.value,
       singleSelect
     });
-    if (newSelection !== selection) setSelection(newSelection);
+    if (newSelection !== selection) {
+      setSelection(newSelection);
+    }
   }, [selection, setSelection, singleSelect]);
   const isSelected = React.useCallback((val) => (selection == null ? void 0 : selection.some((sel) => sel === val)) || false, [selection]);
   return React.useMemo(() => ({

package/dist/BoxSelectionGroup/hooks/useBoxSelectionGroup.js

@@ -22,7 +22,9 @@ const useBoxSelectionGroup = ({
       newValue: newBox.value,
       singleSelect
     });
-    if (newSelection !== selection) setSelection(newSelection);
+    if (newSelection !== selection) {
+      setSelection(newSelection);
+    }
   }, [selection, setSelection, singleSelect]);
   const isSelected = useCallback((val) => (selection == null ? void 0 : selection.some((sel) => sel === val)) || false, [selection]);
   return useMemo(() => ({

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

package/dist/Checkbox/components/Label/Label.style.cjs

@@ -11,8 +11,16 @@ const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const maps = [Button_style_utils.textColorMap];
 const getStateStyles = (tokens) => {
-  const getLabelStateSelector = (state, stateTokens, fallbackTokens) => `${css_utils.getRelatedStateSelector(Indicator_style.CheckboxIndicator, state, Compose_style.CheckboxCompose)} {
-    ${css_utils.styleFromTokens(maps, stateTokens, fallbackTokens)};
+  const getLabelStateSelector = (state, stateTokens, fallbackTokens) => `${css_utils.getRelatedStateSelector({
+    inputSelector: Indicator_style.CheckboxIndicator,
+    inputStateSelector: state,
+    commonContainer: Compose_style.CheckboxCompose
+  })} {
+    ${css_utils.styleFromTokens({
+    tokenMaps: maps,
+    tokens: stateTokens,
+    fallbackTokens
+  })};
   }`;
   return _styled.css`
     ${getLabelStateSelector("", tokens.normal)};
@@ -20,7 +28,11 @@ const getStateStyles = (tokens) => {
     ${getLabelStateSelector(":active", tokens.active, tokens.normal)};
     ${getLabelStateSelector(":disabled", tokens.disabled)};
 
-    ${css_utils.getRelatedStateSelector(Indicator_style.CheckboxIndicator, ":disabled", Compose_style.CheckboxCompose)} {
+    ${css_utils.getRelatedStateSelector({
+    inputSelector: Indicator_style.CheckboxIndicator,
+    inputStateSelector: ":disabled",
+    commonContainer: Compose_style.CheckboxCompose
+  })} {
       pointer-events: none;
     }
   `;