@ultraviolet/ui 1.51.0 → 1.51.2

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

@@ -1,69 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Bullet } from '../Bullet/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const Steps = /*#__PURE__*/_styled("ul", {
-  target: "ewuati22"
-})("list-style:none;padding-left:0;text-align:left;display:flex;flex-direction:column;gap:", ({
-  theme
-}) => theme.space['3'], ";font-size:16px;");
-const Step = /*#__PURE__*/_styled('li', {
-  shouldForwardProp: prop => !['disabled'].includes(prop),
-  target: "ewuati21"
-})("display:flex;align-items:flex-start;gap:1rem;justify-content:center;color:", ({
-  theme,
-  disabled
-}) => disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.textStrong, ";");
-const StyledDiv = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['size'].includes(prop),
-  target: "ewuati20"
-})("flex:1;margin:auto;line-height:", ({
-  size
-}) => size === 'medium' ? '32px' : '24px', ";font-size:", ({
-  size
-}) => size === 'medium' ? '24px' : '16px', ";");
-const Item = ({
-  bulletText,
-  bulletIcon,
-  sentiment,
-  prominence,
-  children,
-  onClick,
-  size = 'medium',
-  disabled = false,
-  className
-}) => jsxs(Step, {
-  disabled: disabled,
-  className: className,
-  onClick: onClick,
-  children: [bulletIcon ? jsx(Bullet, {
-    icon: bulletIcon,
-    size: size,
-    sentiment: disabled ? 'disabled' : sentiment,
-    prominence: prominence
-  }) : null, bulletText ? jsx(Bullet, {
-    text: bulletText,
-    size: size,
-    sentiment: disabled ? 'disabled' : sentiment,
-    prominence: prominence
-  }) : null, jsx(StyledDiv, {
-    size: size,
-    children: children
-  })]
-});
-/**
- * StepList component is used to display a list of steps.
- * @experimental This component is experimental and may be subject to breaking changes in the future.
- */
-const StepList = ({
-  children,
-  className,
-  'data-testid': dataTestId
-}) => jsx(Steps, {
-  className: className,
-  "data-testid": dataTestId,
-  children: children
-});
-StepList.Item = Item;
-
-export { StepList };

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

@@ -1,150 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { keyframes, css } from '@emotion/react';
-import { Children, Fragment } from 'react';
-import { Bullet } from '../Bullet/index.js';
-import { Text } from '../Text/index.js';
-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 LINE_HEIGHT_SIZES = {
-  small: 2,
-  medium: 4
-};
-const loadingAnimation = keyframes`
-  from {
-    width: 0;
-  }
-  to {
-    width: 100%;
-  }
-`;
-const StyledStepContainer = /*#__PURE__*/_styled("div", {
-  target: "e19ft7rb4"
-})(process.env.NODE_ENV === "production" ? {
-  name: "b8wmnj",
-  styles: "display:flex;flex-direction:column;align-items:center;justify-content:flex-start"
-} : {
-  name: "b8wmnj",
-  styles: "display:flex;flex-direction:column;align-items:center;justify-content:flex-start",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "e19ft7rb3"
-})("margin-top:", ({
-  theme
-}) => theme.space['1'], ";");
-const StyledBullet = /*#__PURE__*/_styled(Bullet, {
-  target: "e19ft7rb2"
-})("margin-top:", ({
-  theme,
-  size
-}) => size === 'small' ? theme.space['0.5'] : 0, ";");
-const loadingStyle = /*#__PURE__*/css("animation:", loadingAnimation, " 1s linear infinite;");
-const StyledLine = /*#__PURE__*/_styled("div", {
-  target: "e19ft7rb1"
-})("border-radius:", ({
-  theme
-}) => theme.radii.default, ";flex-grow:1;border-radius:", ({
-  theme
-}) => theme.radii.default, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundStrong, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", ({
-  theme
-}) => theme.radii.default, ";background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";", ({
-  temporal
-}) => temporal === 'previous' && `width: 100%;`, " ", ({
-  temporal,
-  animated
-}) => temporal === 'current' && animated && loadingStyle, ";}");
-const StyledContainer = /*#__PURE__*/_styled("div", {
-  target: "e19ft7rb0"
-})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", ({
-  theme
-}) => theme.space['1'], ";gap:", ({
-  theme,
-  labelPosition,
-  size
-}) => size === 'medium' && labelPosition === 'bottom' ? theme.space['0'] : theme.space['1'], ";", StyledStepContainer, "{display:flex;flex-direction:", ({
-  labelPosition
-}) => labelPosition === 'bottom' ? 'column' : 'row', ";align-items:", ({
-  labelPosition
-}) => labelPosition === 'bottom' ? 'center' : 'baseline', ";gap:", ({
-  theme,
-  labelPosition
-}) => labelPosition === 'bottom' ? theme.space['0.5'] : theme.space['1'], ";white-space:nowrap;}", StyledLine, "{height:", ({
-  size
-}) => LINE_HEIGHT_SIZES[size], "px;margin-top:", ({
-  theme
-}) => theme.space['2'], ";margin-bottom:", ({
-  theme
-}) => theme.space['2'], ";}");
-const StepperNumbers = ({
-  temporal,
-  children,
-  CurrentStep,
-  size = 'medium'
-}) => jsxs(StyledStepContainer, {
-  children: [jsx(StyledBullet, {
-    sentiment: temporal === 'next' ? 'neutral' : 'primary',
-    ...(temporal === 'previous' ? {
-      icon: 'check'
-    } : {
-      text: CurrentStep.toString()
-    }),
-    prominence: temporal !== 'current' ? 'default' : 'strong',
-    size: size
-  }), jsx(StyledText, {
-    as: "span",
-    variant: size === 'medium' ? 'body' : 'bodySmall',
-    prominence: temporal === 'next' ? 'weak' : 'default',
-    children: children
-  })]
-});
-/**
- * Stepper component to show the progress of a process in a linear way.
- */
-const Stepper = ({
-  children,
-  selected = 0,
-  animated = false,
-  className,
-  labelPosition = 'bottom',
-  size = 'medium',
-  'data-testid': dataTestId
-}) => {
-  const cleanChildren = Children.toArray(children);
-  const lastStep = Children.count(cleanChildren) - 1;
-  return jsx(StyledContainer, {
-    className: className,
-    "data-testid": dataTestId,
-    labelPosition: labelPosition,
-    size: size,
-    children: Children.map(cleanChildren, (child, index) => {
-      const getTemporal = () => {
-        if (selected > index) return 'previous';
-        if (selected === index) return 'current';
-        return 'next';
-      };
-      const isNotLast = index < lastStep;
-      const temporal = getTemporal();
-      return (
-        // eslint-disable-next-line react/no-array-index-key
-        jsxs(Fragment, {
-          children: [jsx(StepperNumbers, {
-            CurrentStep: index + 1,
-            temporal: temporal,
-            size: size,
-            children: child
-          }), isNotLast ? jsx(StyledLine, {
-            temporal: temporal,
-            animated: animated
-          }) : null]
-        }, `creation-progress-${index}`)
-      );
-    })
-  });
-};
-
-export { Stepper };

package/dist/src/components/SwitchButton/FocusOverlay.js

@@ -1,37 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useMemo } from 'react';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const FOCUS_OVERLAY_SCALE_RATIO = 6;
-const FOCUS_OVERLAY_PIXEL_RIGHT_OFFSET = 8;
-const StyledDiv = /*#__PURE__*/_styled("div", {
-  target: "etutiin0"
-})("position:absolute;height:calc(100% - ", ({
-  theme
-}) => theme.space['1'], ");border-radius:", ({
-  theme
-}) => theme.radii.default, ";background:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ";transform-origin:left center;transition:all 200ms ease-in-out;&[data-focusposition='right']{transform-origin:right center;}");
-const FocusOverlay = ({
-  focusPosition,
-  rightCardWidth,
-  leftCardWidth,
-  hasMouseDown
-}) => {
-  const translateXValue = useMemo(() => focusPosition === 'left' ? 0 : leftCardWidth + FOCUS_OVERLAY_PIXEL_RIGHT_OFFSET, [focusPosition, leftCardWidth]);
-  const getScaleXValue = () => {
-    if (!hasMouseDown || !leftCardWidth || !rightCardWidth) return 1;
-    const currentWidth = focusPosition === 'left' ? leftCardWidth : rightCardWidth;
-    return 1 + FOCUS_OVERLAY_SCALE_RATIO / currentWidth;
-  };
-  return jsx(StyledDiv, {
-    "data-focusposition": focusPosition,
-    style: {
-      transform: `translate3d(${translateXValue}px, 0, 0) scale3d(${getScaleXValue()}, 1, 1)`,
-      width: `${focusPosition === 'left' ? leftCardWidth : rightCardWidth}px`
-    }
-  });
-};
-
-export { FocusOverlay };

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

@@ -1,108 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useRef, useState, useEffect } from 'react';
-import { SelectableCard } from '../SelectableCard/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { FocusOverlay } from './FocusOverlay.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledBorderedBox = /*#__PURE__*/_styled("div", {
-  target: "e4ryteh1"
-})("border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";padding:", ({
-  theme
-}) => theme.space['0.5'], ";display:flex;gap:", ({
-  theme
-}) => theme.space['1'], ";position:relative;");
-const StyledSelectableCard = /*#__PURE__*/_styled(SelectableCard, {
-  target: "e4ryteh0"
-})("border:none;height:40px;padding:", ({
-  theme
-}) => theme.space['1'], " ", ({
-  theme
-}) => theme.space['2'], ";font-weight:", ({
-  theme
-}) => theme.typography.bodyStrong.weight, ";justify-content:center;align-items:center;transition:all 200ms ease-in-out;white-space:nowrap;&:hover,&:focus-within,&:active{box-shadow:none;border:none;&:not([data-error='true'][data-disabled='true']){border:none;}}&[data-checked='true']{border:none;}&[data-checked='true'] label{color:", ({
-  theme
-}) => theme.colors.primary.textStrong, ";}&:not([data-checked='true']) label{&:hover{color:", ({
-  theme
-}) => theme.colors.primary.text, ";}}");
-/**
- * SwitchButton is a component that allows the user to select between two options.
- */
-const SwitchButton = ({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  name,
-  leftButton,
-  rightButton,
-  tooltip,
-  className,
-  'data-testid': dataTestId
-}) => {
-  const leftButtonRef = useRef(null);
-  const rightButtonRef = useRef(null);
-  const [leftCardWidth, setLeftCardWidth] = useState();
-  const [rightCardWidth, setRightCardWidth] = useState();
-  const [hasMouseDown, setHasMouseDown] = useState(false);
-  const [localValue, setLocalValue] = useState(value === leftButton.value ? leftButton.value : rightButton.value);
-  const handleOnChange = event => {
-    onChange?.(event);
-    setLocalValue(event.target.value);
-  };
-  useEffect(() => {
-    if (!leftButtonRef.current || !rightButtonRef.current) return;
-    setLeftCardWidth(leftButtonRef.current.getBoundingClientRect().width);
-    setRightCardWidth(rightButtonRef.current.getBoundingClientRect().width);
-  }, [leftButton.value, leftButtonRef, localValue, rightButtonRef]);
-  const setMouseDown = isMouseDown => () => setHasMouseDown(isMouseDown);
-  return jsx(Tooltip, {
-    text: tooltip,
-    children: jsx("div", {
-      style: {
-        display: 'inline-flex'
-      },
-      className: className,
-      "data-testid": dataTestId,
-      children: jsxs(StyledBorderedBox, {
-        onMouseDown: setMouseDown(true),
-        onMouseUp: setMouseDown(false),
-        onMouseLeave: setMouseDown(false),
-        children: [rightCardWidth && leftCardWidth ? jsx(FocusOverlay, {
-          focusPosition: localValue === leftButton.value ? 'left' : 'right',
-          rightCardWidth: rightCardWidth,
-          leftCardWidth: leftCardWidth,
-          hasMouseDown: hasMouseDown
-        }) : null, jsx(StyledSelectableCard, {
-          ref: leftButtonRef,
-          name: name,
-          value: leftButton.value,
-          checked: localValue === leftButton.value,
-          onChange: handleOnChange,
-          onBlur: onBlur,
-          onFocus: onFocus,
-          "data-checked": localValue === leftButton.value,
-          label: leftButton.label,
-          "data-testid": dataTestId ? `${dataTestId}-left` : undefined
-        }), jsx(StyledSelectableCard, {
-          ref: rightButtonRef,
-          name: name,
-          value: rightButton.value,
-          checked: localValue === rightButton.value,
-          onChange: handleOnChange,
-          onBlur: onBlur,
-          onFocus: onFocus,
-          "data-checked": localValue === rightButton.value,
-          label: rightButton.label,
-          "data-testid": dataTestId ? `${dataTestId}-right` : undefined
-        })]
-      })
-    })
-  });
-};
-
-export { SwitchButton };

package/dist/src/components/Table/Body.js

@@ -1,9 +0,0 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const Body = ({
-  children
-}) => jsx("tbody", {
-  children: children
-});
-
-export { Body };

package/dist/src/components/Table/Cell.js

@@ -1,21 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const StyledCell = /*#__PURE__*/_styled('td', {
-  target: "e78o8ww0"
-})("padding:", ({
-  theme
-}) => theme.space['1'], ";font-size:14px;");
-const Cell = ({
-  children,
-  className,
-  colSpan,
-  rowSpan
-}) => jsx(StyledCell, {
-  className: className,
-  colSpan: colSpan,
-  rowSpan: rowSpan,
-  children: children
-});
-
-export { Cell };

package/dist/src/components/Table/Header.js

@@ -1,15 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const StyledHeader = /*#__PURE__*/_styled('thead', {
-  target: "ekxedod0"
-})("border-bottom:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";");
-const Header = ({
-  children
-}) => jsx(StyledHeader, {
-  children: children
-});
-
-export { Header };

package/dist/src/components/Table/HeaderCell.js

@@ -1,103 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledIconContainer = /*#__PURE__*/_styled(Stack, {
-  target: "ev6jkq82"
-})("color:", ({
-  theme
-}) => theme.colors.neutral.textWeak, ";&[aria-disabled='true']{cursor:not-allowed;}&[role*='button']{cursor:pointer;user-select:none;}");
-const SortIcon = ({
-  order
-}) => jsxs(StyledIconContainer, {
-  children: [jsx(Icon, {
-    name: "arrow-up",
-    size: 10,
-    color: order === 'ascending' ? 'primary' : 'neutral',
-    prominence: "weak"
-  }), jsx(Icon, {
-    name: "arrow-down",
-    size: 10,
-    color: order === 'descending' ? 'primary' : 'neutral',
-    prominence: "weak"
-  })]
-});
-const StyledHeaderCell = /*#__PURE__*/_styled('th', {
-  shouldForwardProp: prop => !['width', 'maxWidth', 'minWidth'].includes(prop),
-  target: "ev6jkq81"
-})(({
-  width,
-  maxWidth,
-  minWidth
-}) => `
-    ${width ? `width: ${width};` : ''}
-    ${maxWidth ? `max-width: ${maxWidth};` : ''}
-    ${minWidth ? `min-width: ${minWidth};` : ''}
-  `, " padding:", ({
-  theme
-}) => theme.space['1'], ";&[role*='button']{cursor:pointer;user-select:none;}");
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "ev6jkq80"
-})("display:flex;flex-direction:row;align-items:center;gap:", ({
-  theme
-}) => theme.space['1'], ";");
-const HeaderCell = ({
-  children,
-  className,
-  isOrdered,
-  onOrder,
-  orderDirection,
-  width,
-  maxWidth,
-  minWidth,
-  info
-}) => {
-  let order;
-  if (isOrdered && orderDirection === 'asc') {
-    order = 'ascending';
-  } else if (isOrdered && orderDirection === 'desc') {
-    order = 'descending';
-  }
-  const handleOrder = onOrder ? () => onOrder(order === 'ascending' ? 'desc' : 'asc') : undefined;
-  return jsx(StyledHeaderCell, {
-    className: className,
-    onClick: handleOrder,
-    onKeyDown: handleOrder ? event => {
-      if (event.key === ' ' || event.key === 'Enter') {
-        handleOrder();
-        if (event.key === ' ') {
-          // @note: it avoid scroll when pressing Space
-          event.preventDefault();
-        }
-      }
-    } : undefined,
-    role: onOrder ? 'button columnheader' : undefined,
-    width: width,
-    maxWidth: maxWidth,
-    minWidth: minWidth,
-    tabIndex: handleOrder ? 0 : -1,
-    "aria-sort": order,
-    children: jsxs(StyledText, {
-      as: "div",
-      variant: "bodySmall",
-      color: order !== undefined ? 'primary' : 'neutral',
-      children: [children, info ? jsx(Tooltip, {
-        text: info,
-        children: jsx(Icon, {
-          name: "information-outline",
-          size: 20,
-          prominence: "weak",
-          color: "neutral"
-        })
-      }) : null, orderDirection !== undefined && isOrdered !== undefined ? jsx(SortIcon, {
-        "aria-disabled": !onOrder,
-        order: order
-      }) : null]
-    })
-  });
-};
-
-export { HeaderCell };

package/dist/src/components/Table/HeaderRow.js

@@ -1,32 +0,0 @@
-import { Checkbox } from '../Checkbox/index.js';
-import { HeaderCell } from './HeaderCell.js';
-import { useTableContext } from './TableContext.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-const HeaderRow = ({
-  children,
-  hasSelectAllColumn
-}) => {
-  const {
-    allRowSelectValue,
-    selectAll,
-    unselectAll,
-    selectedRowIds
-  } = useTableContext();
-  const selectableRowCount = Object.keys(selectedRowIds).length;
-  return jsxs("tr", {
-    children: [hasSelectAllColumn ? jsx(HeaderCell, {
-      width: "24px",
-      children: jsx(Checkbox, {
-        name: "table-select-all-checkbox",
-        value: "all",
-        "aria-label": "select all",
-        checked: allRowSelectValue,
-        onChange: allRowSelectValue === false ? selectAll : unselectAll,
-        disabled: selectableRowCount === 0
-      })
-    }) : null, children]
-  });
-};
-
-export { HeaderRow };

package/dist/src/components/Table/Row.js

@@ -1,89 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { keyframes } from '@emotion/react';
-import { useEffect } from 'react';
-import { Checkbox } from '../Checkbox/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { Cell } from './Cell.js';
-import { useTableContext } from './TableContext.js';
-import { jsxs, jsx } 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 StyledCheckboxContainer = /*#__PURE__*/_styled("div", {
-  target: "e1qvrbgq1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-// We start at 5% and finish at 80% to leave the original background color
-// as we can't know if the table will be stripped or not
-const colorChange = theme => keyframes`
-  5% {
-    background-color: ${theme.colors.primary.background};
-  }
-  80% {
-    background-color: ${theme.colors.primary.background};
-  }
-`;
-const StyledTr = /*#__PURE__*/_styled('tr', {
-  shouldForwardProp: prop => !['highlightAnimation'].includes(prop),
-  target: "e1qvrbgq0"
-})("animation:", ({
-  highlightAnimation,
-  theme
-}) => highlightAnimation ? colorChange(theme) : undefined, " 3s linear;");
-const Row = ({
-  children,
-  className,
-  id,
-  selectDisabled,
-  highlightAnimation,
-  'data-testid': dataTestid
-}) => {
-  const {
-    selectable,
-    registerSelectableRow,
-    selectedRowIds,
-    selectRow,
-    unselectRow
-  } = useTableContext();
-  useEffect(() => {
-    if (!selectDisabled) {
-      const unregisterCallback = registerSelectableRow(id);
-      return unregisterCallback;
-    }
-    return undefined;
-  }, [id, registerSelectableRow, selectDisabled]);
-  return jsxs(StyledTr, {
-    className: className,
-    "data-testid": dataTestid,
-    highlightAnimation: highlightAnimation,
-    children: [selectable ? jsx(Cell, {
-      children: jsx(StyledCheckboxContainer, {
-        children: jsx(Tooltip, {
-          text: typeof selectDisabled === 'string' ? selectDisabled : undefined,
-          children: jsx(Checkbox, {
-            name: "table-select-checkbox",
-            "aria-label": "select",
-            checked: selectedRowIds[id],
-            value: id,
-            onChange: () => {
-              if (selectedRowIds[id]) {
-                unselectRow(id);
-              } else {
-                selectRow(id);
-              }
-            },
-            disabled: selectDisabled !== undefined
-          })
-        })
-      })
-    }) : null, children]
-  });
-};
-
-export { Row };

package/dist/src/components/Table/SelectBar.js

@@ -1,48 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useMemo } from 'react';
-import { ActionBar } from '../ActionBar/index.js';
-import { useTableContext } from './TableContext.js';
-import { jsx } 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 StyledActionBar = /*#__PURE__*/_styled(ActionBar, {
-  target: "esnuyll1"
-})("display:flex;align-items:center;padding:0 ", ({
-  theme
-}) => theme.space['1'], ";");
-const FlexDiv = /*#__PURE__*/_styled("div", {
-  target: "esnuyll0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "82a6rk",
-  styles: "flex:1"
-} : {
-  name: "82a6rk",
-  styles: "flex:1",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-function SelectBar({
-  children,
-  data,
-  idKey,
-  className
-}) {
-  const {
-    selectedRowIds,
-    unselectAll
-  } = useTableContext();
-  const selectedItems = useMemo(() => data.filter(item => selectedRowIds[item[idKey]]), [data, idKey, selectedRowIds]);
-  if (selectedItems.length === 0) {
-    return null;
-  }
-  return jsx(StyledActionBar, {
-    className: className,
-    children: jsx(FlexDiv, {
-      children: children({
-        selectedItems,
-        unselectAll
-      })
-    })
-  });
-}
-
-export { SelectBar };