@ultraviolet/ui 1.27.3 → 1.29.0

package/dist/src/components/Checkbox/index.js

@@ -3,7 +3,6 @@ import { useTheme } from '@emotion/react';
 import { Icon } from '@ultraviolet/icons';
 import { forwardRef, useState, useId, useEffect, useCallback } from 'react';
 import { Loader } from '../Loader/index.js';
-import { Row } from '../Row/index.js';
 import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
 import { Tooltip } from '../Tooltip/index.js';
@@ -12,32 +11,22 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const ErrorText = /*#__PURE__*/_styled(Text, {
   target: "eqr7bqq7"
-})("padding-top:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return `${theme.space['0.5']}`;
-}, ";");
+})("padding-top:", ({
+  theme
+}) => `${theme.space['0.5']}`, ";");
 const InnerCheckbox = /*#__PURE__*/_styled("rect", {
   target: "eqr7bqq6"
-})("fill:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.background;
-}, ";stroke:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.border;
-}, ";");
+})("fill:", ({
+  theme
+}) => theme.colors.neutral.background, ";stroke:", ({
+  theme
+}) => theme.colors.neutral.border, ";");
 const CheckMixedMark = /*#__PURE__*/_styled("rect", {
   target: "eqr7bqq5"
 })();
-const CheckboxIconContainer = _ref4 => {
-  let {
-    children
-  } = _ref4;
+const CheckboxIconContainer = ({
+  children
+}) => {
   const theme = useTheme();
   return jsxs("g", {
     children: [jsx(InnerCheckbox, {
@@ -52,312 +41,142 @@ const CheckboxIconContainer = _ref4 => {
 };
 const StyledIcon = /*#__PURE__*/_styled('svg', {
   target: "eqr7bqq4"
-})("border-radius:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.radii.default;
-}, ";height:", _ref6 => {
-  let {
-    size
-  } = _ref6;
-  return size;
-}, "px;width:", _ref7 => {
-  let {
-    size
-  } = _ref7;
-  return size;
-}, "px;min-width:", _ref8 => {
-  let {
-    size
-  } = _ref8;
-  return size;
-}, "px;min-height:", _ref9 => {
-  let {
-    size
-  } = _ref9;
-  return size;
-}, "px;& path{fill:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.neutral.background;
-}, ";transform:translate(2px, 2px);transform:scale(0);}");
+})("border-radius:", ({
+  theme
+}) => theme.radii.default, ";height:", ({
+  size
+}) => size, "px;width:", ({
+  size
+}) => size, "px;min-width:", ({
+  size
+}) => size, "px;min-height:", ({
+  size
+}) => size, "px;& path{fill:", ({
+  theme
+}) => theme.colors.neutral.background, ";transform:translate(2px, 2px);transform:scale(0);}");
 const StyledLabel = /*#__PURE__*/_styled('label', {
   target: "eqr7bqq3"
-})();
+})(process.env.NODE_ENV === "production" ? {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} : {
+  name: "1d3w5wq",
+  styles: "width:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const CheckboxInput = /*#__PURE__*/_styled('input', {
   shouldForwardProp: prop => !['size'].includes(prop),
   target: "eqr7bqq2"
-})("position:absolute;white-space:nowrap;height:", _ref11 => {
-  let {
-    size
-  } = _ref11;
-  return size;
-}, "px;width:", _ref12 => {
-  let {
-    size
-  } = _ref12;
-  return size;
-}, "px;opacity:0;border-width:0;&:not(:disabled){cursor:pointer;}&:disabled{cursor:not-allowed;}&:not(:disabled){&:checked+", StyledIcon, ",&[aria-checked='mixed']+", StyledIcon, "{fill:", _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.colors.primary.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.colors.primary.borderStrong;
-}, ";}}&[aria-invalid='true']+", StyledIcon, ",&[aria-invalid='mixed']+", StyledIcon, "{fill:", _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.colors.danger.background;
-}, ";", InnerCheckbox, "{stroke:", _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.colors.danger.border;
-}, ";}}}&:focus+", StyledIcon, "{background-color:", _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.colors.primary.background;
-}, ";fill:", _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.colors.danger.background;
-}, ";outline:1px solid ", _ref19 => {
-  let {
-    theme
-  } = _ref19;
-  return theme.shadows.focusPrimary;
-}, ";", InnerCheckbox, "{stroke:", _ref20 => {
-  let {
-    theme
-  } = _ref20;
-  return theme.colors.primary.borderHover;
-}, ";fill:", _ref21 => {
-  let {
-    theme
-  } = _ref21;
-  return theme.colors.primary.backgroundHover;
-}, ";}}&[aria-invalid='true']:focus+", StyledIcon, "{background-color:", _ref22 => {
-  let {
-    theme
-  } = _ref22;
-  return theme.colors.danger.background;
-}, ";fill:", _ref23 => {
-  let {
-    theme
-  } = _ref23;
-  return theme.colors.danger.background;
-}, ";outline:1px solid ", _ref24 => {
-  let {
-    theme
-  } = _ref24;
-  return theme.shadows.focusDanger;
-}, ";", InnerCheckbox, "{stroke:", _ref25 => {
-  let {
-    theme
-  } = _ref25;
-  return theme.colors.danger.borderHover;
-}, ";fill:", _ref26 => {
-  let {
-    theme
-  } = _ref26;
-  return theme.colors.danger.backgroundHover;
-}, ";}}");
+})("position:absolute;white-space:nowrap;height:", ({
+  size
+}) => size, "px;width:", ({
+  size
+}) => size, "px;opacity:0;border-width:0;&:not(:disabled){cursor:pointer;}&:disabled{cursor:not-allowed;}&:not(:disabled){&:checked+", StyledIcon, ",&[aria-checked='mixed']+", StyledIcon, "{fill:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.primary.borderStrong, ";}}&[aria-invalid='true']+", StyledIcon, ",&[aria-invalid='mixed']+", StyledIcon, "{fill:", ({
+  theme
+}) => theme.colors.danger.background, ";", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.danger.border, ";}}}&:focus+", StyledIcon, "{background-color:", ({
+  theme
+}) => theme.colors.primary.background, ";fill:", ({
+  theme
+}) => theme.colors.danger.background, ";outline:1px solid ", ({
+  theme
+}) => theme.shadows.focusPrimary, ";", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.primary.borderHover, ";fill:", ({
+  theme
+}) => theme.colors.primary.backgroundHover, ";}}&[aria-invalid='true']:focus+", StyledIcon, "{background-color:", ({
+  theme
+}) => theme.colors.danger.background, ";fill:", ({
+  theme
+}) => theme.colors.danger.background, ";outline:1px solid ", ({
+  theme
+}) => theme.shadows.focusDanger, ";", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.danger.borderHover, ";fill:", ({
+  theme
+}) => theme.colors.danger.backgroundHover, ";}}");
 const CheckboxContainer = /*#__PURE__*/_styled("div", {
   target: "eqr7bqq1"
-})("position:relative;display:inline-flex;align-items:start;gap:", _ref27 => {
-  let {
-    theme
-  } = _ref27;
-  return theme.space['1'];
-}, ";", StyledLabel, "{cursor:pointer;}&[aria-disabled='true']{cursor:not-allowed;color:", _ref28 => {
-  let {
-    theme
-  } = _ref28;
-  return theme.colors.neutral.textDisabled;
-}, ";", StyledLabel, "{cursor:not-allowed;}", StyledIcon, "{fill:", _ref29 => {
-  let {
-    theme
-  } = _ref29;
-  return theme.colors.neutral.borderDisabled;
-}, ";", InnerCheckbox, "{stroke:", _ref30 => {
-  let {
-    theme
-  } = _ref30;
-  return theme.colors.neutral.borderStrongDisabled;
-}, ";fill:", _ref31 => {
-  let {
-    theme
-  } = _ref31;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";}}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, "{fill:", _ref32 => {
-  let {
-    theme
-  } = _ref32;
-  return theme.colors.danger.backgroundStrongDisabled;
-}, ";", InnerCheckbox, "{stroke:", _ref33 => {
-  let {
-    theme
-  } = _ref33;
-  return theme.colors.danger.borderStrongDisabled;
-}, ";fill:", _ref34 => {
-  let {
-    theme
-  } = _ref34;
-  return theme.colors.danger.backgroundStrongDisabled;
-}, ";}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref35 => {
-  let {
-    theme
-  } = _ref35;
-  return theme.colors.danger.background;
-}, ";", InnerCheckbox, "{stroke:", _ref36 => {
-  let {
-    theme
-  } = _ref36;
-  return theme.colors.danger.borderDisabled;
-}, ";fill:", _ref37 => {
-  let {
-    theme
-  } = _ref37;
-  return theme.colors.danger.background;
-}, ";}}", CheckboxInput, ":checked+", StyledIcon, "{fill:", _ref38 => {
-  let {
-    theme
-  } = _ref38;
-  return theme.colors.primary.backgroundStrongDisabled;
-}, ";", InnerCheckbox, "{stroke:", _ref39 => {
-  let {
-    theme
-  } = _ref39;
-  return theme.colors.primary.borderDisabled;
-}, ";fill:", _ref40 => {
-  let {
-    theme
-  } = _ref40;
-  return theme.colors.primary.borderDisabled;
-}, ";}}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{fill:", _ref41 => {
-  let {
-    theme
-  } = _ref41;
-  return theme.colors.primary.backgroundStrongDisabled;
-}, ";", InnerCheckbox, "{stroke:", _ref42 => {
-  let {
-    theme
-  } = _ref42;
-  return theme.colors.primary.borderStrongDisabled;
-}, ";fill:", _ref43 => {
-  let {
-    theme
-  } = _ref43;
-  return theme.colors.primary.backgroundStrongDisabled;
-}, ";}}}", CheckboxInput, ":checked+", StyledIcon, " path{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(1);transform:translate(2px, 2px);}", CheckboxInput, ":checked+", StyledIcon, " ", InnerCheckbox, "{fill:", _ref44 => {
-  let {
-    theme
-  } = _ref44;
-  return theme.colors.primary.backgroundStrong;
-}, ";stroke:", _ref45 => {
-  let {
-    theme
-  } = _ref45;
-  return theme.colors.primary.borderStrong;
-}, ";}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, " ", InnerCheckbox, "{fill:", _ref46 => {
-  let {
-    theme
-  } = _ref46;
-  return theme.colors.danger.backgroundStrong;
-}, ";stroke:", _ref47 => {
-  let {
-    theme
-  } = _ref47;
-  return theme.colors.danger.borderStrong;
-}, ";}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{", CheckMixedMark, "{fill:", _ref48 => {
-  let {
-    theme
-  } = _ref48;
-  return theme.colors.neutral.iconStronger;
-}, ";}", InnerCheckbox, "{fill:", _ref49 => {
-  let {
-    theme
-  } = _ref49;
-  return theme.colors.primary.backgroundStrong;
-}, ";stroke:", _ref50 => {
-  let {
-    theme
-  } = _ref50;
-  return theme.colors.primary.borderStrong;
-}, ";}}&:hover[aria-disabled='false']{", CheckboxInput, "[aria-invalid='false']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref51 => {
-  let {
-    theme
-  } = _ref51;
-  return theme.colors.primary.borderHover;
-}, ";fill:", _ref52 => {
-  let {
-    theme
-  } = _ref52;
-  return theme.colors.primary.backgroundHover;
-}, ";}&[aria-checked='true']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref53 => {
-  let {
-    theme
-  } = _ref53;
-  return theme.colors.primary.borderStrongHover;
-}, ";fill:", _ref54 => {
-  let {
-    theme
-  } = _ref54;
-  return theme.colors.primary.backgroundStrongHover;
-}, ";}&[aria-checked='mixed']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref55 => {
-  let {
-    theme
-  } = _ref55;
-  return theme.colors.primary.borderStrongHover;
-}, ";fill:", _ref56 => {
-  let {
-    theme
-  } = _ref56;
-  return theme.colors.primary.backgroundStrongHover;
-}, ";}}", CheckboxInput, "[aria-invalid='true']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref57 => {
-  let {
-    theme
-  } = _ref57;
-  return theme.colors.danger.borderHover;
-}, ";fill:", _ref58 => {
-  let {
-    theme
-  } = _ref58;
-  return theme.colors.danger.backgroundHover;
-}, ";}&[aria-checked='true']+", StyledIcon, " ", InnerCheckbox, "{stroke:", _ref59 => {
-  let {
-    theme
-  } = _ref59;
-  return theme.colors.danger.borderStrongHover;
-}, ";fill:", _ref60 => {
-  let {
-    theme
-  } = _ref60;
-  return theme.colors.danger.backgroundStrongHover;
-}, ";}}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", _ref61 => {
-  let {
-    theme
-  } = _ref61;
-  return theme.colors.danger.backgroundStrong;
-}, ";", InnerCheckbox, "{stroke:", _ref62 => {
-  let {
-    theme
-  } = _ref62;
-  return theme.colors.danger.backgroundStrong;
-}, ";fill:", _ref63 => {
-  let {
-    theme
-  } = _ref63;
-  return theme.colors.danger.background;
-}, ";}}");
+})("position:relative;display:inline-flex;align-items:start;gap:", ({
+  theme
+}) => theme.space['1'], ";width:100%;", StyledLabel, "{cursor:pointer;}&[aria-disabled='true']{cursor:not-allowed;color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";", StyledLabel, "{cursor:not-allowed;}", StyledIcon, "{fill:", ({
+  theme
+}) => theme.colors.neutral.borderDisabled, ";", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.neutral.borderStrongDisabled, ";fill:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";}}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, "{fill:", ({
+  theme
+}) => theme.colors.danger.backgroundStrongDisabled, ";", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.danger.borderStrongDisabled, ";fill:", ({
+  theme
+}) => theme.colors.danger.backgroundStrongDisabled, ";}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", ({
+  theme
+}) => theme.colors.danger.background, ";", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.danger.borderDisabled, ";fill:", ({
+  theme
+}) => theme.colors.danger.background, ";}}", CheckboxInput, ":checked+", StyledIcon, "{fill:", ({
+  theme
+}) => theme.colors.primary.backgroundStrongDisabled, ";", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.primary.borderDisabled, ";fill:", ({
+  theme
+}) => theme.colors.primary.borderDisabled, ";}}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{fill:", ({
+  theme
+}) => theme.colors.primary.backgroundStrongDisabled, ";", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.primary.borderStrongDisabled, ";fill:", ({
+  theme
+}) => theme.colors.primary.backgroundStrongDisabled, ";}}}", CheckboxInput, ":checked+", StyledIcon, " path{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(1);transform:translate(2px, 2px);}", CheckboxInput, ":checked+", StyledIcon, " ", InnerCheckbox, "{fill:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";stroke:", ({
+  theme
+}) => theme.colors.primary.borderStrong, ";}", CheckboxInput, "[aria-invalid=\"true\"]:checked+", StyledIcon, " ", InnerCheckbox, "{fill:", ({
+  theme
+}) => theme.colors.danger.backgroundStrong, ";stroke:", ({
+  theme
+}) => theme.colors.danger.borderStrong, ";}", CheckboxInput, "[aria-checked=\"mixed\"]+", StyledIcon, "{", CheckMixedMark, "{fill:", ({
+  theme
+}) => theme.colors.neutral.iconStronger, ";}", InnerCheckbox, "{fill:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";stroke:", ({
+  theme
+}) => theme.colors.primary.borderStrong, ";}}&:hover[aria-disabled='false']{", CheckboxInput, "[aria-invalid='false']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.primary.borderHover, ";fill:", ({
+  theme
+}) => theme.colors.primary.backgroundHover, ";}&[aria-checked='true']+", StyledIcon, " ", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.primary.borderStrongHover, ";fill:", ({
+  theme
+}) => theme.colors.primary.backgroundStrongHover, ";}&[aria-checked='mixed']+", StyledIcon, " ", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.primary.borderStrongHover, ";fill:", ({
+  theme
+}) => theme.colors.primary.backgroundStrongHover, ";}}", CheckboxInput, "[aria-invalid='true']{&[aria-checked='false']+", StyledIcon, " ", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.danger.borderHover, ";fill:", ({
+  theme
+}) => theme.colors.danger.backgroundHover, ";}&[aria-checked='true']+", StyledIcon, " ", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.danger.borderStrongHover, ";fill:", ({
+  theme
+}) => theme.colors.danger.backgroundStrongHover, ";}}}", CheckboxInput, "[aria-invalid=\"true\"]+", StyledIcon, "{fill:", ({
+  theme
+}) => theme.colors.danger.backgroundStrong, ";", InnerCheckbox, "{stroke:", ({
+  theme
+}) => theme.colors.danger.backgroundStrong, ";fill:", ({
+  theme
+}) => theme.colors.danger.background, ";}}");
 const StyledActivityContainer = /*#__PURE__*/_styled("div", {
   target: "eqr7bqq0"
 })(process.env.NODE_ENV === "production" ? {
@@ -371,28 +190,27 @@ const StyledActivityContainer = /*#__PURE__*/_styled("div", {
 /**
  * Checkbox is an input component used to select or deselect an option.
  */
-const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
-  let {
-    checked = false,
-    onChange,
-    onFocus,
-    onBlur,
-    error,
-    name,
-    helper,
-    value,
-    size = 24,
-    children,
-    progress = false,
-    disabled = false,
-    autoFocus = false,
-    className,
-    'data-visibility': dataVisibility,
-    'aria-label': ariaLabel,
-    required,
-    'data-testid': dataTestId,
-    tooltip
-  } = _ref64;
+const Checkbox = /*#__PURE__*/forwardRef(({
+  checked = false,
+  onChange,
+  onFocus,
+  onBlur,
+  error,
+  name,
+  helper,
+  value,
+  size = 24,
+  children,
+  progress = false,
+  disabled = false,
+  autoFocus = false,
+  className,
+  'data-visibility': dataVisibility,
+  'aria-label': ariaLabel,
+  required,
+  'data-testid': dataTestId,
+  tooltip
+}, ref) => {
   const [state, setState] = useState(checked);
   const id = useId();
   const computedName = name ?? id;
@@ -459,9 +277,12 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref64, ref) => {
         })
       }) : null, jsxs(Stack, {
         gap: 0.25,
-        children: [jsxs(Row, {
-          templateColumns: "11fr 1fr",
+        flex: 1,
+        children: [jsxs(Stack, {
+          gap: 0.5,
+          direction: "row",
           alignItems: "center",
+          flex: 1,
           children: [children ? jsx(StyledLabel, {
             htmlFor: computedName,
             children: children

package/dist/src/components/CheckboxGroup/index.js

@@ -8,20 +8,19 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const CheckboxGroupContext = /*#__PURE__*/createContext(undefined);
-const CheckboxGroupCheckbox = _ref => {
-  let {
-    onFocus,
-    onBlur,
-    disabled,
-    error,
-    name,
-    value,
-    children,
-    helper,
-    className,
-    autoFocus,
-    'data-testid': dataTestId
-  } = _ref;
+const CheckboxGroupCheckbox = ({
+  onFocus,
+  onBlur,
+  disabled,
+  error,
+  name,
+  value,
+  children,
+  helper,
+  className,
+  autoFocus,
+  'data-testid': dataTestId
+}) => {
   const context = useContext(CheckboxGroupContext);
   if (!context) {
     throw new Error('CheckboxGroup.Checkbox can only be used inside a CheckboxGroup');
@@ -72,19 +71,18 @@ const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
 /**
  * CheckboxGroup is a component that groups a set of checkboxes together with a legend and helper/error text.
  */
-const CheckboxGroup = _ref2 => {
-  let {
-    legend,
-    value,
-    className,
-    helper,
-    error,
-    direction = 'column',
-    children,
-    onChange,
-    name,
-    required = false
-  } = _ref2;
+const CheckboxGroup = ({
+  legend,
+  value,
+  className,
+  helper,
+  error,
+  direction = 'column',
+  children,
+  onChange,
+  name,
+  required = false
+}) => {
   const contextValue = useMemo(() => ({
     groupName: name,
     groupValues: value ?? [],

package/dist/src/components/CopyButton/index.js

@@ -6,17 +6,17 @@ const COPY_DURATION = 2500;
 /**
  * CopyButton is a button that copies a given value to the clipboard.
  */
-const CopyButton = _ref => {
-  let {
-    size = 'small',
-    value,
-    copyText = 'Copy',
-    copiedText = 'Copied!',
-    sentiment = 'primary',
-    noBorder,
-    className,
-    'data-testid': dataTestId
-  } = _ref;
+const CopyButton = ({
+  size = 'small',
+  value,
+  copyText = 'Copy',
+  copiedText = 'Copied!',
+  sentiment = 'primary',
+  noBorder,
+  bordered,
+  className,
+  'data-testid': dataTestId
+}) => {
   const [isCopied, setCopied] = useClipboard(value, {
     successDuration: COPY_DURATION
   });
@@ -25,7 +25,7 @@ const CopyButton = _ref => {
     onClick: setCopied,
     size: size,
     sentiment: sentiment,
-    variant: noBorder ? 'ghost' : 'outlined',
+    variant: noBorder || !bordered ? 'ghost' : 'outlined',
     className: className,
     "data-testid": dataTestId,
     "aria-label": "Copy",