@dxc-technology/halstack-react 0.0.0-b41d935 → 0.0.0-b4fde6b

package/progress-bar/ProgressBar.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar.tsx"));
 
 describe("ProgressBar component tests", function () {
   test("ProgressBar renders with label and helperText", function () {

package/progress-bar/types.d.ts

@@ -1,11 +1,11 @@
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Size = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Size = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-export declare type Props = {
+declare type Props = {
     /**
      * Text to be placed above the progress bar.
      */
@@ -34,3 +34,4 @@ export declare type Props = {
      */
     margin?: Space | Size;
 };
+export default Props;

package/quick-nav/QuickNav.stories.tsx

@@ -5,12 +5,20 @@ import DxcHeading from "../heading/Heading";
 import DxcParagraph from "../paragraph/Paragraph";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "QuickNav",
   component: DxcQuickNav,
 };
 
+const opinionatedTheme = {
+  quickNav: {
+    fontColor: "#666666",
+    accentColor: "#9a6bb2",
+  },
+};
+
 const defaultLinks = [
   {
     label: "Overview",
@@ -315,6 +323,12 @@ export const Chromatic = () => (
         </QuickNavContainer>
       </Container>
     </ExampleContainer>
+    <Title title="Opinionated theme" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcQuickNav links={defaultLinks} />
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 

package/radio-group/Radio.js

@@ -21,7 +21,9 @@ var _uuid = require("uuid");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -56,7 +58,7 @@ var DxcRadio = function DxcRadio(_ref) {
       firstUpdate = _useState4[0],
       setFirstUpdate = _useState4[1];
 
-  (0, _react.useLayoutEffect)(function () {
+  (0, _react.useEffect)(function () {
     var _ref$current2;
 
     // Don't apply in the first render
@@ -69,7 +71,7 @@ var DxcRadio = function DxcRadio(_ref) {
   }, [focused]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.radioGroup
-  }, /*#__PURE__*/_react["default"].createElement(RadioMainContainer, null, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
+  }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
     error: error,
     disabled: disabled,
     readonly: readonly,
@@ -107,11 +109,9 @@ var getRadioInputStateColor = function getRadioInputStateColor(props, state) {
   }
 };
 
-var RadioMainContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"])));
-
-var RadioInputContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n"])));
+var RadioInputContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n"])));
 
-var RadioInput = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border: 2px solid ", ";\n  border-radius: 50%;\n\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n  ", "\n"])), function (props) {
+var RadioInput = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border: 2px solid ", ";\n  border-radius: 50%;\n\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n  ", "\n"])), function (props) {
   return getRadioInputStateColor(props, "enabled");
 }, function (props) {
   return props.theme.focusBorderColor;
@@ -119,11 +119,11 @@ var RadioInput = _styledComponents["default"].span(_templateObject3 || (_templat
   return props.disabled && "pointer-events: none;";
 });
 
-var Dot = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (props) {
+var Dot = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (props) {
   return getRadioInputStateColor(props, "enabled");
 });
 
-var Label = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
+var Label = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
   return props.theme.radioInputLabelMargin;
 }, function (props) {
   return props.theme.fontFamily;
@@ -139,7 +139,7 @@ var Label = _styledComponents["default"].span(_templateObject5 || (_templateObje
   return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, ";") : "color: ".concat(props.theme.radioInputLabelFontColor);
 });
 
-var RadioContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  cursor: ", ";\n\n  &:hover {\n    ", " {\n      border-color: ", ";\n    }\n    ", " {\n      background-color: ", ";\n    }\n  }\n  &:active {\n    ", " {\n      border-color: ", ";\n    }\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
+var RadioContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  cursor: ", ";\n\n  &:hover {\n    ", " {\n      border-color: ", ";\n    }\n    ", " {\n      background-color: ", ";\n    }\n  }\n  &:active {\n    ", " {\n      border-color: ", ";\n    }\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
   return props.disabled ? "not-allowed" : props.readonly ? "default" : "pointer";
 }, RadioInput, function (props) {
   return !props.disabled && getRadioInputStateColor(props, "hover");

package/radio-group/RadioGroup.js

@@ -83,14 +83,13 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
 
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
-  var optionalItem = {
-    label: optionalItemLabel || translatedLabels.radioGroup.optionalItemLabelDefault,
-    value: "",
-    disabled: disabled
-  };
   var innerOptions = (0, _react.useMemo)(function () {
-    return optional ? [].concat((0, _toConsumableArray2["default"])(options), [optionalItem]) : options;
-  }, [optional, options]);
+    return optional ? [].concat((0, _toConsumableArray2["default"])(options), [{
+      label: optionalItemLabel !== null && optionalItemLabel !== void 0 ? optionalItemLabel : translatedLabels.radioGroup.optionalItemLabelDefault,
+      value: "",
+      disabled: disabled
+    }]) : options;
+  }, [optional, options, optionalItemLabel, translatedLabels]);
 
   var _useState7 = (0, _react.useState)(getInitialFocusIndex(innerOptions, value !== null && value !== void 0 ? value : innerValue)),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
@@ -202,8 +201,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     name: name,
     disabled: disabled,
     value: (_ref2 = value !== null && value !== void 0 ? value : innerValue) !== null && _ref2 !== void 0 ? _ref2 : "",
-    readOnly: true,
-    "aria-hidden": "true"
+    readOnly: true
   }), innerOptions.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       key: "radio-".concat(index),
@@ -225,7 +223,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
   }, error)));
 });
 
-var RadioGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+var RadioGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-direction: column;\n"])));
 
 var Label = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
   return props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor;

package/radio-group/RadioGroup.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
 import DxcRadioGroup from "./RadioGroup";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Radio Group",
@@ -19,83 +20,195 @@ const options = [
 
 const single_disabled_options = [{ label: "Option A", value: "A", disabled: true }];
 
+const opinionatedTheme = {
+  radioGroup: {
+    baseColor: "#0086e6",
+    fontColor: "#000000",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <Title title="Radio input states" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
-      <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
+      <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
+      <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Active" theme="light" level={4} />
-      <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
+      <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
-      <DxcRadioGroup label="Example" defaultValue="A" options={single_option} />
+      <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_disabled_options} defaultValue="A" />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_disabled_options} defaultValue="A" />
     </ExampleContainer>
     <Title title="Readonly radio input sub-states" theme="light" level={3} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readonly />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readonly />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Active" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={single_option} defaultValue="A" readonly />
     </ExampleContainer>
     <Title title="Error radio input sub-states" theme="light" level={3} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" error="Error message" />
+      <DxcRadioGroup
+        label="Label"
+        helperText="Helper text"
+        options={single_option}
+        defaultValue="A"
+        error="Error message"
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly error="Error message" />
+      <DxcRadioGroup
+        label="Label"
+        helperText="Helper text"
+        options={single_option}
+        defaultValue="A"
+        readonly
+        error="Error message"
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Active" theme="light" level={4} />
-      <DxcRadioGroup label="Example" options={single_option} defaultValue="A" readonly error="Error message" />
+      <DxcRadioGroup
+        label="Label"
+        helperText="Helper text"
+        options={single_option}
+        defaultValue="A"
+        readonly
+        error="Error message"
+      />
     </ExampleContainer>
     <Title title="Variants" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Column" theme="light" level={4} />
-      <DxcRadioGroup label="Example" helperText="Helper text" options={options} />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Row" theme="light" level={4} />
-      <DxcRadioGroup label="Example" helperText="Helper text" options={options} stacking="row" />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={options} stacking="row" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Optional" theme="light" level={4} />
-      <DxcRadioGroup label="Example" optional helperText="Helper text" options={options} stacking="row" />
+      <DxcRadioGroup label="Label" optional helperText="Helper text" options={options} stacking="row" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcRadioGroup label="Example" helperText="Helper text" options={options} disabled />
+      <DxcRadioGroup label="Label" helperText="Helper text" options={options} disabled />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Readonly" theme="light" level={4} />
-      <DxcRadioGroup label="Example" readonly helperText="Helper text" options={options} />
+      <DxcRadioGroup label="Label" readonly helperText="Helper text" options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Error space reserved" theme="light" level={4} />
-      <DxcRadioGroup label="Example" error="" helperText="Helper text" options={options} />
+      <DxcRadioGroup label="Label" error="" helperText="Helper text" options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Error" theme="light" level={4} />
-      <DxcRadioGroup label="Example" error="Error message" helperText="Helper text" options={options} />
+      <DxcRadioGroup label="Label" error="Error message" helperText="Helper text" options={options} />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Enabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" defaultValue="A" options={single_option} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" options={single_disabled_options} defaultValue="A" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Readonly enabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Readonly hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Readonly active" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Readonly focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" readonly />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Enabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" error="Error message" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" error="Error message" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" error="Error message" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" options={single_option} defaultValue="A" error="Error message" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcRadioGroup label="Label" helperText="Helper text" options={options} disabled defaultValue="A" />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/radio-group/RadioGroup.test.js

@@ -73,7 +73,7 @@ describe("Radio Group component tests", function () {
     expect(error.getAttribute("aria-live")).toBe("off");
     radios.forEach(function (radio, index) {
       // if no option was previously selected, first option is the focusable one
-      index === 0 ? expect(radio.tabIndex).toBe(0) : expect(radio.tabIndex).toBe(-1);
+      if (index === 0) expect(radio.tabIndex).toBe(0);else expect(radio.tabIndex).toBe(-1);
       expect(radio.getAttribute("aria-checked")).toBe("false");
       expect(radio.getAttribute("aria-disabled")).toBe("false");
       expect(radio.getAttribute("aria-labelledby")).toBe(getByText("Option 0".concat(index + 1)).id);

package/resultsetTable/Icons.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const icons: {
+    arrowUp: JSX.Element;
+    arrowDown: JSX.Element;
+    bothArrows: JSX.Element;
+};
+export default icons;

package/resultsetTable/Icons.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var icons = {
+  arrowUp: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+  })),
+  arrowDown: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+  })),
+  bothArrows: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"
+  }))
+};
+var _default = icons;
+exports["default"] = _default;