@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/LineChart/Tooltip.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Text } from "../Text/index.js";
+const LineTooltipContainer = styled.div`
+  display: flex;
+  background: ${({ theme }) => theme.colors.neutral.backgroundStronger};
+  border-radius: ${({ theme }) => theme.radii.small};
+  box-shadow: ${({ theme }) => theme.shadows.tooltip};
+  padding: 5px 9px;
+  align-items: center;
+`;
+const LineColorSquare = styled.span`
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: ${({ color }) => color};
+  margin-right: 12px;
+`;
+const LineChartTooltip = ({ point }) => /* @__PURE__ */ jsxs(LineTooltipContainer, { children: [
+  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(LineColorSquare, { color: point.serieColor }) }),
+  /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "bodyStronger",
+        sentiment: "neutral",
+        prominence: "stronger",
+        as: "div",
+        children: point.data.yFormatted
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "bodySmall",
+        sentiment: "neutral",
+        prominence: "stronger",
+        as: "div",
+        children: point.data.xFormatted
+      }
+    )
+  ] })
+] });
+export {
+  LineChartTooltip
+};

package/dist/components/LineChart/helpers.d.ts

@@ -0,0 +1,8 @@
+import type { DatumValue, Serie } from '@nivo/line';
+export declare const getMin: (values?: DatumValue[]) => number;
+export declare const getMax: (values?: DatumValue[]) => number;
+export declare const getAverage: (values?: DatumValue[]) => number;
+export declare const getMaxChartValue: (preppedData?: Serie[]) => number;
+export declare const getMinChartValue: (preppedData?: Serie[]) => number;
+export declare const getCurrent: (values?: number[]) => number;
+export declare const getSelected: (label: string, index: number, selected?: string[]) => string[];

package/dist/components/LineChart/helpers.js

@@ -0,0 +1,50 @@
+const parse = (data) => {
+  if (typeof data === "number")
+    return data || 0;
+  if (typeof data === "string")
+    return parseFloat(data) || 0;
+  if (data instanceof Date)
+    return data.getTime();
+  return 0;
+};
+const getMin = (values = []) => values.length ? Math.min(...values.map(parse)) : 0;
+const getMax = (values = []) => values.length ? Math.max(...values.map(parse)) : 0;
+const getAverage = (values = []) => values.length ? Math.round(
+  values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100
+) / 100 : 0;
+const getMaxChartValue = (preppedData) => {
+  if (!preppedData?.length)
+    return 0;
+  const maximum = Math.max(
+    ...preppedData.map(({ data }) => getMax(data.map(({ y }) => y || 0)))
+  );
+  return Math.ceil(maximum + maximum * 0.1);
+};
+const getMinChartValue = (preppedData) => {
+  if (!preppedData?.length)
+    return 0;
+  const minimum = Math.min(
+    ...preppedData.map(({ data }) => getMin(data.map(({ y }) => y || 0)))
+  );
+  return Math.floor(minimum - minimum * 0.1);
+};
+const getCurrent = (values = []) => values.length ? values[values.length - 1] : 0;
+const getSelected = (label, index, selected = []) => {
+  const labelIndexed = label + index.toString();
+  const found = selected.indexOf(labelIndexed);
+  if (found > -1) {
+    selected.splice(found, 1);
+  } else {
+    selected.push(labelIndexed);
+  }
+  return selected;
+};
+export {
+  getAverage,
+  getCurrent,
+  getMax,
+  getMaxChartValue,
+  getMin,
+  getMinChartValue,
+  getSelected
+};

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

@@ -0,0 +1,25 @@
+import type { DatumValue, Box as NivoBox, ValueFormat } from '@nivo/core';
+import type { LineSvgProps, Serie } from '@nivo/line';
+import type { ScaleSpec } from '@nivo/scales';
+import type { ComponentProps } from 'react';
+import { CustomLegend } from './CustomLegend';
+type LineChartProps = {
+    height?: string | number;
+    margin?: NivoBox;
+    xScale?: ScaleSpec;
+    yScale?: ScaleSpec;
+    data?: Serie[];
+    withLegend?: boolean;
+    axisFormatters?: Partial<Record<'bottom' | 'left' | 'right' | 'top', ComponentProps<typeof CustomLegend>['axisTransformer']>>;
+    pointFormatters?: Partial<Record<'x' | 'y', ValueFormat<DatumValue>>>;
+    tickValues?: Partial<Record<'bottom' | 'left' | 'right' | 'top', number | string>>;
+    chartProps?: Partial<LineSvgProps>;
+    'data-testid'?: string;
+};
+/**
+ * LineChart component is a wrapper around Nivo's ResponsiveLine component used to display data in a line chart.
+ * See https://nivo.rocks/line/ for more information.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+export declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, "data-testid": dataTestId, }: LineChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LineChart/index.js

@@ -0,0 +1,118 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import { ResponsiveLine } from "@nivo/line";
+import { useState, useEffect } from "react";
+import { getLegendColor } from "../../helpers/legend.js";
+import { CustomLegend } from "./CustomLegend.js";
+import { LineChartTooltip } from "./Tooltip.js";
+import { getMaxChartValue, getMinChartValue } from "./helpers.js";
+const DEFAULT_MARGIN = { bottom: 50, left: 60, right: 25, top: 50 };
+const DEFAULT_XSCALE = {
+  format: "%Y-%m-%dT%H:%M:%S%Z",
+  // 2021-08-30T02:56:07Z
+  precision: "minute",
+  type: "time",
+  useUTC: false
+};
+const DEFAULT_YSCALE = { type: "linear" };
+const DEFAULT_CHARTPROPS = {};
+const LineChart = ({
+  height = "537px",
+  // to maintain aspect ratio based on our standard 1074px width
+  margin = DEFAULT_MARGIN,
+  xScale = DEFAULT_XSCALE,
+  yScale = DEFAULT_YSCALE,
+  data,
+  withLegend = false,
+  axisFormatters,
+  pointFormatters,
+  tickValues,
+  chartProps = DEFAULT_CHARTPROPS,
+  "data-testid": dataTestId
+}) => {
+  const theme = useTheme();
+  const dataset = {
+    datasets: data?.map((d) => ({
+      data: d.data,
+      id: d.id,
+      label: d?.["label"]
+    }))
+  };
+  const chartTheme = {
+    axis: {
+      ticks: {
+        line: {
+          stroke: theme.colors.neutral.backgroundStrong,
+          strokeWidth: 1
+        }
+      }
+    },
+    fontFamily: theme.typography.body.fontFamily,
+    fontSize: 12,
+    textColor: theme.colors.neutral.textWeak
+  };
+  const [selected, setSelected] = useState(
+    dataset.datasets?.map(({ id }, index) => `${id}${index}`)
+  );
+  const finalData = dataset.datasets?.filter(
+    ({ id }, index) => selected ? selected.includes(`${id}${index}`) : false
+  );
+  useEffect(() => {
+    if (selected !== void 0) {
+      return;
+    }
+    setSelected(dataset.datasets?.map(({ id }, index) => `${id}${index}`));
+  }, [dataset.datasets, selected]);
+  const localColors = getLegendColor(theme);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: { height }, children: /* @__PURE__ */ jsx(
+      ResponsiveLine,
+      {
+        colors: localColors,
+        data: finalData ?? [],
+        margin,
+        xScale,
+        yScale: {
+          max: getMaxChartValue(finalData),
+          min: getMinChartValue(finalData),
+          ...yScale
+        },
+        xFormat: pointFormatters?.x,
+        yFormat: pointFormatters?.y,
+        axisBottom: {
+          format: axisFormatters?.bottom,
+          tickPadding: 5,
+          tickRotation: 0,
+          tickSize: 5,
+          tickValues: tickValues?.bottom
+        },
+        axisLeft: {
+          format: axisFormatters?.left,
+          tickPadding: 5,
+          tickRotation: 0,
+          tickSize: 5,
+          tickValues: tickValues?.left
+        },
+        pointSize: 10,
+        useMesh: true,
+        theme: chartTheme,
+        curve: "monotoneX",
+        tooltip: LineChartTooltip,
+        "data-testid": dataTestId,
+        ...chartProps
+      }
+    ) }),
+    withLegend && /* @__PURE__ */ jsx(
+      CustomLegend,
+      {
+        data: dataset.datasets,
+        selected: selected ?? [],
+        setSelected,
+        axisTransformer: axisFormatters?.left
+      }
+    )
+  ] });
+};
+export {
+  LineChart
+};

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

@@ -0,0 +1,33 @@
+import type { AnchorHTMLAttributes, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from 'react';
+import type { Color } from '../../theme';
+export declare const PROMINENCES: {
+    default: string;
+    weak: string;
+    strong: string;
+    stronger: string;
+};
+export type ProminenceProps = keyof typeof PROMINENCES;
+type LinkSizes = 'large' | 'small';
+type LinkIconPosition = 'left' | 'right';
+type LinkProps = {
+    children: ReactNode;
+    target?: HTMLAttributeAnchorTarget;
+    download?: string | boolean;
+    sentiment?: Color;
+    prominence?: ProminenceProps;
+    size?: LinkSizes;
+    iconPosition?: LinkIconPosition;
+    rel?: AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
+    className?: string;
+    href: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    'aria-label'?: string;
+    oneLine?: boolean;
+    'data-testid'?: string;
+    variant?: 'inline' | 'standalone';
+};
+/**
+ * Link is a component used to navigate between pages or to external websites.
+ */
+export declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/Link/index.js

@@ -0,0 +1,167 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import recursivelyGetChildrenString from "../../helpers/recursivelyGetChildrenString.js";
+import capitalize from "../../utils/capitalize.js";
+import { Tooltip } from "../Tooltip/index.js";
+const StyledIcon = styled(Icon)``;
+const PROMINENCES = {
+  default: "",
+  weak: "weak",
+  strong: "strong",
+  stronger: "stronger"
+};
+const ICON_SIZE = 16;
+const BLANK_TARGET_ICON_SIZE = 14;
+const TRANSITION_DURATION = 250;
+const StyledExternalIconContainer = styled.span`
+  display: inline-flex;
+  padding-bottom: ${({ theme }) => theme.space["0.5"]};
+`;
+const StyledLink = styled("a", {
+  shouldForwardProp: (prop) => !["sentiment", "iconPosition", "as", "oneLine"].includes(prop)
+})`
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  color: ${({ theme, sentiment, prominence }) => {
+  const definedProminence = capitalize(PROMINENCES[prominence ?? "default"]);
+  theme.colors[sentiment];
+  const text = `text${definedProminence}`;
+  return theme.colors[sentiment]?.[text] ?? theme.colors.neutral.text;
+}};
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  text-decoration-color: transparent;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  transition: text-decoration-color ${TRANSITION_DURATION}ms ease-out;
+
+  ${StyledIcon} {
+    transition: transform ${TRANSITION_DURATION}ms ease-out;
+  }
+
+  gap: ${({ theme }) => theme.space["1"]};
+  position: relative;
+  cursor: pointer;
+
+  > * {
+    // Safari issue when something is inside an anchor
+    pointer-events: none;
+  }
+
+  ${({ oneLine }) => oneLine ? `white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;` : "width: fit-content;"}
+
+  ${({ size, theme }) => {
+  const variant = size === "small" ? "bodySmallStrong" : "bodyStrong";
+  return `
+      font-size: ${theme.typography[variant].fontSize};
+      font-family: ${theme.typography[variant].fontFamily};
+      font-weight: ${theme.typography[variant].weight};
+      letter-spacing: ${theme.typography[variant].letterSpacing};
+      line-height: ${theme.typography[variant].lineHeight};
+      paragraph-spacing: ${theme.typography[variant].paragraphSpacing};
+      text-case: ${theme.typography[variant].textCase};
+    `;
+}}
+  &:hover,
+  &:focus {
+    ${StyledIcon} {
+      transform: ${({ theme, iconPosition }) => iconPosition === "left" ? `translate(${theme.space["0.5"]}, 0)` : `translate(-${theme.space["0.5"]}, 0)`};
+    }
+
+    outline: none;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    ${({ theme, sentiment, prominence }) => {
+  const definedProminence = capitalize(PROMINENCES[prominence ?? "default"]);
+  theme.colors[sentiment];
+  const text = `text${definedProminence}Hover`;
+  return `
+        color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.textHover};
+        text-decoration-color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.textHover};`;
+}}
+  }
+
+  &[data-variant='inline'] {
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+  }
+
+  &:hover::after,
+  &:focus::after {
+    background-color: ${({ theme, sentiment }) => theme.colors[sentiment]?.text ?? theme.colors.neutral.text};
+  }
+
+  &:active {
+    text-decoration-thickness: 2px;
+  }
+`;
+const Link = forwardRef(
+  ({
+    children,
+    href,
+    target,
+    download,
+    sentiment = "info",
+    prominence,
+    size = "large",
+    iconPosition,
+    rel,
+    className,
+    onClick,
+    "aria-label": ariaLabel,
+    oneLine = false,
+    "data-testid": dataTestId,
+    variant = "standalone"
+  }, ref) => {
+    const isBlank = target === "_blank";
+    const computedRel = rel || (isBlank ? "noopener noreferrer" : void 0);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const elementRef = useRef(null);
+    const usedRef = ref ?? elementRef;
+    const finalStringChildren = recursivelyGetChildrenString(children);
+    useEffect(() => {
+      if (oneLine && usedRef?.current) {
+        const { offsetWidth, scrollWidth } = usedRef.current;
+        setIsTruncated(offsetWidth < scrollWidth);
+      }
+    }, [oneLine, ref, usedRef]);
+    return /* @__PURE__ */ jsx(Tooltip, { text: oneLine && isTruncated ? finalStringChildren : "", children: /* @__PURE__ */ jsxs(
+      StyledLink,
+      {
+        href,
+        target,
+        download,
+        ref: usedRef,
+        sentiment,
+        prominence,
+        rel: computedRel,
+        className,
+        size,
+        onClick,
+        iconPosition,
+        "aria-label": ariaLabel,
+        oneLine,
+        "data-testid": dataTestId,
+        "data-variant": variant,
+        children: [
+          !isBlank && iconPosition === "left" ? /* @__PURE__ */ jsx(StyledIcon, { name: "arrow-left", size: ICON_SIZE }) : null,
+          children,
+          isBlank ? /* @__PURE__ */ jsx(StyledExternalIconContainer, { children: /* @__PURE__ */ jsx(StyledIcon, { name: "open-in-new", size: BLANK_TARGET_ICON_SIZE }) }) : null,
+          !isBlank && iconPosition === "right" ? /* @__PURE__ */ jsx(StyledIcon, { name: "arrow-right", size: ICON_SIZE }) : null
+        ]
+      }
+    ) });
+  }
+);
+export {
+  Link,
+  PROMINENCES
+};

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+type BodyProps = {
+    children: ReactNode;
+};
+export declare const Body: ({ children }: BodyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/List/Body.js

@@ -0,0 +1,11 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+const StyledBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space["2"]};
+`;
+const Body = ({ children }) => /* @__PURE__ */ jsx(StyledBody, { role: "rowgroup", children });
+export {
+  Body
+};

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+type CellProps = {
+    children?: ReactNode;
+    className?: string;
+    /**
+     *  Use this if you want to prevent onClick to be handled by parents (Like when you have an expandable content)
+     * */
+    preventClick?: boolean;
+    'data-testid'?: string;
+};
+export declare const Cell: import("react").ForwardRefExoticComponent<CellProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/List/Cell.js

@@ -0,0 +1,38 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { forwardRef } from "react";
+const StyledCell = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  min-height: 60px;
+`;
+const Cell = forwardRef(
+  ({ children, className, preventClick, "data-testid": dataTestid }, ref) => {
+    const handleClick = (event) => {
+      if (preventClick) {
+        event.stopPropagation();
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (preventClick) {
+        event.stopPropagation();
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      StyledCell,
+      {
+        ref,
+        role: "cell",
+        className,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        "data-testid": dataTestid,
+        children
+      }
+    );
+  }
+);
+export {
+  Cell
+};

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+type HeaderCellProps = {
+    children: ReactNode;
+    className?: string;
+    isOrdered?: boolean;
+    orderDirection?: 'asc' | 'desc' | 'none';
+    onOrder?: (newOrder: 'asc' | 'desc') => void;
+    info?: string;
+};
+export declare const HeaderCell: ({ children, isOrdered, orderDirection, onOrder, className, info, }: HeaderCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/List/HeaderCell.js

@@ -0,0 +1,96 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Icon } from "@ultraviolet/icons";
+import { Stack } from "../Stack/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+const ArrowDownIcon = styled(Icon)``;
+const ArrowUpIcon = styled(Icon)``;
+const StyledIconContainer = styled(Stack)`
+  color: ${({ theme }) => theme.colors.neutral.text};
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+`;
+const SortIcon = () => /* @__PURE__ */ jsxs(StyledIconContainer, { children: [
+  /* @__PURE__ */ jsx(ArrowUpIcon, { name: "arrow-up", size: 10 }),
+  /* @__PURE__ */ jsx(ArrowDownIcon, { name: "arrow-down", size: 10 })
+] });
+const StyledHeaderCell = styled.div`
+  display: flex;
+  text-align: left;
+  flex-direction: row;
+  align-items: center;
+  font-size: ${({ theme }) => theme.typography.bodySmall.fontSize};
+  font-weight: ${({ theme }) => theme.typography.bodySmall.weight};
+  font-family: ${({ theme }) => theme.typography.bodySmall.fontFamily};
+  color: ${({ theme }) => theme.colors.neutral.text};
+  gap: ${({ theme }) => theme.space["1"]};
+
+  &[role*='button'] {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &[aria-sort] {
+    color: ${({ theme }) => theme.colors.primary.text};
+  }
+
+  &[aria-sort='ascending'] ${ArrowUpIcon} {
+    color: ${({ theme }) => theme.colors.primary.text};
+  }
+
+  &[aria-sort='descending'] ${ArrowDownIcon} {
+    color: ${({ theme }) => theme.colors.primary.text};
+  }
+`;
+const HeaderCell = ({
+  children,
+  isOrdered,
+  orderDirection,
+  onOrder,
+  className,
+  info
+}) => {
+  let order;
+  if (isOrdered && orderDirection === "asc") {
+    order = "ascending";
+  } else if (isOrdered && orderDirection === "desc") {
+    order = "descending";
+  }
+  const handleOrder = onOrder ? () => onOrder(order === "ascending" ? "desc" : "asc") : void 0;
+  return /* @__PURE__ */ jsxs(
+    StyledHeaderCell,
+    {
+      "aria-sort": order,
+      className,
+      onClick: handleOrder,
+      onKeyDown: handleOrder ? (event) => {
+        if (event.key === " " || event.key === "Enter") {
+          handleOrder();
+          if (event.key === " ") {
+            event.preventDefault();
+          }
+        }
+      } : void 0,
+      role: onOrder ? "button columnheader" : void 0,
+      tabIndex: handleOrder ? 0 : -1,
+      children: [
+        children,
+        info ? /* @__PURE__ */ jsx(Tooltip, { text: info, children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "information-outline",
+            size: 20,
+            prominence: "weak",
+            color: "neutral"
+          }
+        ) }) : null,
+        orderDirection !== void 0 && isOrdered !== void 0 ? /* @__PURE__ */ jsx(SortIcon, { "data-sorted": order !== void 0 }) : null
+      ]
+    }
+  );
+};
+export {
+  HeaderCell
+};

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type RowProps = {
+    hasSelectAllColumn: boolean;
+    children: ReactNode;
+};
+export declare const HeaderRow: ({ children, hasSelectAllColumn }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/List/HeaderRow.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Checkbox } from "../Checkbox/index.js";
+import { HeaderCell } from "./HeaderCell.js";
+import { useListContext } from "./ListContext.js";
+const StyledHeaderRow = styled.div`
+  /* List itself also apply style about common templating between HeaderRow and other Rows */
+  column-gap: ${({ theme }) => theme.space["2"]};
+  padding: 0 ${({ theme }) => theme.space["2"]};
+`;
+const HeaderRow = ({ children, hasSelectAllColumn }) => {
+  const {
+    allRowSelectValue,
+    selectAll,
+    unselectAll,
+    selectedRowIds,
+    expandButton
+  } = useListContext();
+  const selectableRowCount = Object.keys(selectedRowIds).length;
+  return /* @__PURE__ */ jsxs(StyledHeaderRow, { role: "row", children: [
+    hasSelectAllColumn ? /* @__PURE__ */ jsx(HeaderCell, { children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        name: "list-select-checkbox",
+        value: "all",
+        "aria-label": "select all",
+        checked: allRowSelectValue,
+        onChange: allRowSelectValue === false ? selectAll : unselectAll,
+        disabled: selectableRowCount === 0
+      }
+    ) }) : null,
+    expandButton ? /* @__PURE__ */ jsx(HeaderCell, { children: null }) : null,
+    children
+  ] });
+};
+export {
+  HeaderRow
+};