@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/Carousel/index.js

@@ -0,0 +1,147 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useRef, useEffect, useState } from "react";
+const StyledWrapper = styled.div`
+  position: relative;
+  margin-left: -100px;
+  margin-right: -100px;
+`;
+const StyledBeforeScroll = styled.span`
+  position: absolute;
+  width: 100px;
+  height: 100%;
+  content: '';
+  background: linear-gradient(
+    -90deg,
+    ${({ theme }) => theme.colors.neutral.background}ff,
+    ${({ theme }) => theme.colors.neutral.background}
+  );
+  cursor: w-resize;
+  z-index: auto;
+`;
+const StyledScrollableWrapper = styled.div`
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  display: flex;
+  padding: 0 100px;
+  gap: ${({ theme }) => theme.space["2"]};
+`;
+const StyledAfterScroll = styled.span`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  content: '';
+  cursor: e-resize;
+  z-index: auto;
+  background: linear-gradient(
+    -90deg,
+    ${({ theme }) => theme.colors.neutral.background},
+    ${({ theme }) => theme.colors.neutral.background}ff
+  );
+`;
+const StyledBorderWrapper = styled("div", {
+  shouldForwardProp: (prop) => !["width"].includes(prop)
+})`
+  display: flex;
+  align-items: stretch;
+  width: ${({ width }) => width};
+  max-width: ${({ width }) => width};
+  overflow-wrap: break-word;
+  white-space: normal;
+  height: auto;
+  cursor: grab;
+  flex-shrink: 0;
+`;
+const CarouselItem = ({
+  children,
+  width = "240px"
+}) => /* @__PURE__ */ jsx(StyledBorderWrapper, { width, draggable: "true", children });
+const Carousel = ({
+  children,
+  className,
+  "data-testid": dataTestId = "scrollbar"
+}) => {
+  const scrollRef = useRef(null);
+  let intervalLeft;
+  let intervalRight;
+  const handleScrollRight = () => {
+    intervalRight = setInterval(() => {
+      if (scrollRef.current?.scrollTo && scrollRef.current?.scrollLeft) {
+        scrollRef.current.scrollTo?.(scrollRef.current.scrollLeft - 25, 0);
+      }
+    }, 30);
+  };
+  const handleScrollLeft = () => {
+    intervalLeft = setInterval(() => {
+      if (scrollRef.current?.scrollTo && scrollRef.current?.scrollLeft) {
+        scrollRef.current.scrollTo(scrollRef.current.scrollLeft + 25, 0);
+      }
+    }, 30);
+  };
+  const handleScrollX = (scrollX = 25) => {
+    if (scrollRef.current?.scrollTo && scrollRef.current?.scrollLeft) {
+      scrollRef.current.scrollTo?.(scrollRef.current.scrollLeft + scrollX, 0);
+    }
+  };
+  const cleanUp = () => {
+    clearInterval(intervalLeft);
+    clearInterval(intervalRight);
+  };
+  useEffect(() => cleanUp);
+  const [dragStartX, setDragStartX] = useState(0);
+  const [deltaX, setDeltaX] = useState(0);
+  return /* @__PURE__ */ jsxs(StyledWrapper, { className, "data-testid": dataTestId, children: [
+    /* @__PURE__ */ jsx(
+      StyledBeforeScroll,
+      {
+        "data-testid": `${dataTestId}-before`,
+        onMouseOver: handleScrollRight,
+        onMouseLeave: () => clearInterval(intervalRight)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StyledScrollableWrapper,
+      {
+        ref: scrollRef,
+        onDragOver: (e) => {
+          setDeltaX(dragStartX - e.pageX);
+          setDragStartX(e.pageX);
+        },
+        onDragStart: (e) => {
+          const blankImg = new Image();
+          blankImg.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+          e.dataTransfer.setDragImage(blankImg, 0, 0);
+          setDragStartX(e.clientX);
+        },
+        onDrag: () => handleScrollX(deltaX),
+        onDragEnd: () => {
+          setDeltaX(0);
+          setDragStartX(0);
+        },
+        onMouseUp: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        className,
+        "data-testid": `${dataTestId}-wrapper`,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StyledAfterScroll,
+      {
+        "data-testid": `${dataTestId}-after`,
+        onMouseOver: handleScrollLeft,
+        onMouseLeave: () => clearInterval(intervalLeft)
+      }
+    )
+  ] });
+};
+Carousel.Item = CarouselItem;
+export {
+  Carousel,
+  CarouselItem
+};

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,36 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { XOR } from '../../types';
+type CheckboxProps = {
+    error?: string | ReactNode;
+    /**
+     * @deprecated Size prop is deprecated and will be removed in next major update.
+     */
+    size?: number;
+    /**
+     * @deprecated Progress prop is deprecated and will be removed in next major update.
+     */
+    progress?: boolean;
+    helper?: ReactNode;
+    disabled?: boolean;
+    checked?: boolean | 'indeterminate';
+    className?: string;
+    ['data-visibility']?: string;
+    required?: boolean;
+    'data-testid'?: string;
+    tooltip?: string;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'onFocus' | 'onBlur' | 'name' | 'value' | 'autoFocus' | 'id' | 'onChange' | 'tabIndex'> & XOR<[
+    {
+        /**
+         * **`children` or `aria-label` property is required**
+         */
+        'aria-label': string;
+    },
+    {
+        children: ReactNode;
+    }
+]>;
+/**
+ * Checkbox is an input component used to select or deselect an option.
+ */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/Checkbox/index.js

@@ -0,0 +1,359 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { forwardRef, useState, useId, useEffect, useCallback } from "react";
+import { Loader } from "../Loader/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const ErrorText = styled(Text)`
+  padding-top: ${({ theme }) => `${theme.space["0.5"]}`};
+`;
+const InnerCheckbox = styled.rect`
+  fill: ${({ theme }) => theme.colors.neutral.background};
+  stroke: ${({ theme }) => theme.colors.neutral.border};
+`;
+const CheckMixedMark = styled.rect``;
+const CheckboxIconContainer = ({ children }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      InnerCheckbox,
+      {
+        x: "4",
+        y: "4",
+        width: "16",
+        height: "16",
+        rx: theme.radii.small,
+        strokeWidth: "2"
+      }
+    ),
+    children
+  ] });
+};
+const StyledIcon = styled("svg")`
+  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 = styled("label")`
+  width: 100%;
+`;
+const CheckboxInput = styled("input", {
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
+  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 = styled.div`
+  position: relative;
+  display: inline-flex;
+  align-items: start;
+  gap: ${({ theme }) => theme.space["1"]};
+
+  ${StyledLabel} {
+    cursor: pointer;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    ${StyledLabel} {
+      cursor: not-allowed;
+    }
+
+    color: ${({ theme }) => theme.colors.neutral.textDisabled};
+
+    ${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 = styled.div`
+  display: flex;
+`;
+const Checkbox = forwardRef(
+  ({
+    id,
+    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,
+    tabIndex
+  }, ref) => {
+    const [state, setState] = useState(checked);
+    const uniqId = useId();
+    const localId = id ?? uniqId;
+    useEffect(() => {
+      setState(checked);
+    }, [checked]);
+    const onLocalChange = useCallback(
+      (event) => {
+        if (!progress)
+          onChange?.(event);
+        setState(
+          (current) => current === "indeterminate" ? false : event.target.checked
+        );
+      },
+      [onChange, progress, setState]
+    );
+    return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(
+      CheckboxContainer,
+      {
+        className,
+        "aria-disabled": disabled,
+        "data-visibility": dataVisibility,
+        "data-checked": state,
+        "data-error": !!error,
+        "data-testid": dataTestId,
+        children: [
+          progress ? /* @__PURE__ */ jsx(StyledActivityContainer, { children: /* @__PURE__ */ jsx(Loader, { active: true, size }) }) : null,
+          /* @__PURE__ */ jsx(
+            CheckboxInput,
+            {
+              id: localId,
+              type: "checkbox",
+              "aria-invalid": !!error,
+              "aria-describedby": error ? `${localId}-hint` : void 0,
+              "aria-checked": state === "indeterminate" ? "mixed" : state,
+              "aria-label": ariaLabel,
+              checked: state === "indeterminate" ? false : state,
+              size,
+              onChange: onLocalChange,
+              onFocus,
+              onBlur,
+              disabled,
+              value,
+              name,
+              autoFocus,
+              ref,
+              required,
+              tabIndex
+            }
+          ),
+          !progress ? /* @__PURE__ */ jsx(StyledIcon, { size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(CheckboxIconContainer, { children: state !== "indeterminate" ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              width: 12,
+              height: 9,
+              x: "5",
+              y: "4",
+              d: "M15.6678 5.26709C16.0849 5.6463 16.113 6.28907 15.7307 6.70276L9.29172 13.6705C9.10291 13.8748 8.83818 13.9937 8.55884 13.9998C8.2795 14.0058 8.0098 13.8984 7.81223 13.7024L4.30004 10.2185C3.89999 9.82169 3.89999 9.17831 4.30004 8.78149C4.70009 8.38467 5.34869 8.38467 5.74874 8.78149L8.50441 11.5149L14.2205 5.32951C14.6028 4.91583 15.2508 4.88788 15.6678 5.26709Z",
+              fill: "white"
+            }
+          ) : /* @__PURE__ */ jsx(CheckMixedMark, { x: "6", y: "11", rx: "1", width: "12", height: "2" }) }) }) : null,
+          /* @__PURE__ */ jsxs(Stack, { gap: 0.25, flex: 1, children: [
+            /* @__PURE__ */ jsxs(Stack, { gap: 0.5, direction: "row", alignItems: "center", flex: 1, children: [
+              children ? /* @__PURE__ */ jsx(StyledLabel, { htmlFor: localId, children }) : null,
+              required ? /* @__PURE__ */ jsx("sup", { children: /* @__PURE__ */ jsx(Icon, { name: "asterisk", size: 10, color: "danger" }) }) : null
+            ] }),
+            helper ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                variant: "caption",
+                as: "span",
+                prominence: "weak",
+                sentiment: "neutral",
+                children: helper
+              }
+            ) : null,
+            error ? /* @__PURE__ */ jsx(ErrorText, { variant: "caption", as: "span", sentiment: "danger", children: error }) : null
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+export {
+  Checkbox
+};

package/dist/components/CheckboxGroup/index.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps, type InputHTMLAttributes, type ReactNode } from 'react';
+import { Checkbox } from '../Checkbox';
+type CheckboxGroupCheckboxProps = Omit<ComponentProps<typeof Checkbox>, 'onChange' | 'checked'> & {
+    value: string;
+};
+export declare const CheckboxGroupCheckbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: CheckboxGroupCheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+type CheckboxGroupProps = {
+    legend: string;
+    value?: string[];
+    className?: string;
+    helper?: ReactNode;
+    error?: ReactNode;
+    direction?: 'row' | 'column';
+    children: ReactNode;
+    required?: boolean;
+} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+/**
+ * CheckboxGroup is a component that groups a set of checkboxes together with a legend and helper/error text.
+ */
+export declare const CheckboxGroup: {
+    ({ legend, value, className, helper, error, direction, children, onChange, name, required, }: CheckboxGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: CheckboxGroupCheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/CheckboxGroup/index.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { createContext, useContext, useMemo } from "react";
+import { Checkbox } from "../Checkbox/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const CheckboxGroupContext = createContext(void 0);
+const StyledCheckbox = styled(Checkbox)`
+  label {
+    width: fit-content;
+  }
+`;
+const CheckboxGroupCheckbox = ({
+  onFocus,
+  onBlur,
+  disabled,
+  error,
+  name,
+  value,
+  children,
+  helper,
+  className,
+  autoFocus,
+  "data-testid": dataTestId,
+  required
+}) => {
+  const context = useContext(CheckboxGroupContext);
+  if (!context) {
+    throw new Error(
+      "CheckboxGroup.Checkbox can only be used inside a CheckboxGroup"
+    );
+  }
+  const { groupName, onChange, groupValues } = context;
+  const checkboxName = `${groupName}.${name ?? ""}`;
+  const checkboxValue = `${value}`;
+  return /* @__PURE__ */ jsx(
+    StyledCheckbox,
+    {
+      onChange,
+      checked: groupValues?.includes(checkboxValue),
+      onFocus,
+      onBlur,
+      disabled,
+      error,
+      name: checkboxName,
+      value: checkboxValue,
+      helper,
+      className,
+      autoFocus,
+      "data-testid": dataTestId,
+      required,
+      children
+    }
+  );
+};
+const FieldSet = styled.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+`;
+const StyledRequiredIcon = styled(Icon)`
+  vertical-align: super;
+`;
+const CheckboxGroup = ({
+  legend,
+  value,
+  className,
+  helper,
+  error,
+  direction = "column",
+  children,
+  onChange,
+  name,
+  required = false
+}) => {
+  const contextValue = useMemo(
+    () => ({
+      groupName: name,
+      groupValues: value ?? [],
+      onChange,
+      required
+    }),
+    [name, value, onChange, required]
+  );
+  return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+    /* @__PURE__ */ jsx(FieldSet, { className, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+      /* @__PURE__ */ jsxs(Text, { as: "legend", variant: "bodyStrong", children: [
+        legend,
+        " ",
+        required ? /* @__PURE__ */ jsx(StyledRequiredIcon, { name: "asterisk", color: "danger", size: 8 }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Stack, { gap: direction === "column" ? 1 : 2, direction, children })
+    ] }) }),
+    helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        variant: "caption",
+        prominence: "weak",
+        sentiment: "neutral",
+        children: helper
+      }
+    ) : null,
+    error ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "caption", sentiment: "danger", children: error }) : null
+  ] }) });
+};
+CheckboxGroup.Checkbox = CheckboxGroupCheckbox;
+export {
+  CheckboxGroup,
+  CheckboxGroupCheckbox
+};

package/dist/components/CopyButton/index.d.ts

@@ -0,0 +1,19 @@
+type CopyButtonProps = {
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    value: string;
+    copyText?: string;
+    copiedText?: string;
+    sentiment?: 'primary' | 'neutral';
+    /**
+     * @deprecated Use `bordered` instead
+     */
+    noBorder?: boolean;
+    bordered?: boolean;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * CopyButton is a button that copies a given value to the clipboard.
+ */
+export declare const CopyButton: ({ size, value, copyText, copiedText, sentiment, noBorder, bordered, className, "data-testid": dataTestId, }: CopyButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};