diginet-core-ui 1.3.24 → 1.3.29

package/components/form-control/radio/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -8,6 +6,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useState, useEffect, useRef } from 'react';
 import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
+import { typography } from '../../../styles/typography';
 const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   disabled,
@@ -44,10 +43,6 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: none;
         position: absolute;
         box-sizing: border-box;
-        padding-left: 2.19rem;
-        height: 1.57rem;
-        line-height: 1.57rem;
-        font-size: 16px;
         &:disabled + label {
             pointer-events: none;
         }
@@ -103,11 +98,7 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         cursor: pointer;
         position: relative;
         padding-left: 2.19rem;
-        line-height: 1.57rem;
-        font-size: 1rem;
-        font-size: 16px;
-        font-weight: 500;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph1};
         margin-bottom: 0;
         transition: .28s ease;
         -o-transition: .28s ease;
@@ -191,12 +182,13 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [checked]);
-  return jsx("div", _extends({
+  return jsx("div", {
     id: 'DGN-Core-Radio-' + (id || unique),
     css: formCheck,
     className: ['DGN-UI-Radio', disabled ? 'disabled' : '', className].join(' ').trim(),
-    ref: ref
-  }, props), jsx("input", _extends({}, inputProps, {
+    ref: ref,
+    ...props
+  }, jsx("input", { ...inputProps,
     disabled: disabled,
     ref: inputRef,
     name: name,
@@ -206,7 +198,7 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: formCheckInput,
     id: id || unique,
     onChange: !!onChange ? handleChange : null
-  })), jsx("label", {
+  }), jsx("label", {
     css: formCheckLabel,
     htmlFor: id || unique
   }, " ", label || value));

package/components/form-control/text-input/index.js

@@ -1,13 +1,10 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
-import Icon from '../../../icons';
+import { ButtonIcon, CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
 import { renderIcon, onValidate } from '../../../utils';
 const icons = {
   default: `<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -307,46 +304,39 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   })) : /^(quick)?Edit/i.test(type) ? jsx("div", {
     ref: iconRef,
     css: TextInputIcon
-  }, jsx(Icon, {
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'Edit',
     className: 'edit-icon-pen',
-    width: 20,
-    height: 20,
-    style: {
-      padding: 0
-    },
     onClick: onClickQuickEdit
-  }), jsx(Icon, {
+  }), jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'Approval',
     className: 'edit-icon-confirm',
-    width: 20,
-    height: 20,
-    style: {
-      padding: 0
-    },
     onClick: onConfirmEdit
   }), jsx("span", {
     className: 'circular'
   }, jsx(Circular, {
     width: 24,
     strokeWidth: 2
-  })), jsx(Icon, {
+  })), jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'Close',
     className: 'edit-icon-clear',
-    width: 16,
-    height: 16,
     onClick: onClear,
     onMouseDown: onMouseDownHandler
   })) : endIcon;
-  return jsx("div", _extends({
+  return jsx("div", {
     ref: ref,
     css: TextInputRoot,
     className: ['DGN-UI-TextInput', className].join(' ').trim(),
-    style: style
-  }, props), !!label && jsx(Label, _extends({
+    style: style,
+    ...props
+  }, !!label && jsx(Label, {
     required: required,
-    disabled: disabled
-  }, labelProps), label), jsx(InputBase, {
+    disabled: disabled,
+    ...labelProps
+  }, label), jsx(InputBase, {
     type: /text|number|password/.test(type) ? type : 'text',
     autoComplete: autoComplete,
     inputRef: inputRef,

package/components/form-control/time-picker/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -10,6 +8,7 @@ import { Cancel as CancelIcon, Clock as ClockIcon } from '../../../icons';
 import { randomString, useOnClickOutside } from '../../../utils';
 import theme from '../../../theme/settings';
 import Swiper from './swiper';
+import { typography } from '../../../styles/typography';
 
 const formatDimension = x => {
   const regexPercent = /^\d+%$/;
@@ -140,7 +139,6 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       outlined: css`
 				* {
 					box-sizing: border-box;
-					font-family: ${theme.typography.fontFamily};
 				}
 				margin: 0;
 				padding: 0;
@@ -210,16 +208,14 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 				margin-bottom: 4px;
 				label {
 					color: ${theme.colors.label};
-					font-size: 12px;
-					font-weight: 700;
+					${typography.heading6};
 					pointer-events: initial;
 					user-select: initial;
 				}
 			`,
       required: css`
 				color: ${theme.colors.danger};
-				font-size: 12px;
-				font-weight: bold;
+				${typography.heading6};
 			`
     },
     main: {
@@ -360,7 +356,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       outlined: css`
 				background-color: transparent;
 				border: 0;
-				font-size: 16px;
+				${typography.paragraph1};
 				margin: 0;
 				outline: none;
 				padding: 10px 16px;
@@ -375,8 +371,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       underlined: css`
 				background-color: white;
 				border: 0;
-				font-size: 16px;
-				line-height: 20px;
+				${typography.paragraph1};
 				margin: auto 0;
 				outline: none;
 				padding: 0;
@@ -395,15 +390,14 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 				color: ${theme.colors.border};
 				cursor: pointer;
 				display: flex;
-				font-size: 20px;
-				height: 20px;
+				height: 24px;
 				justify-content: center;
 				position: absolute;
 				top: 50%;
 				right: 20px;
 				transform: translateY(-50%);
 				transition: opacity 0.2s ease, color 0.2s ease;
-				width: 20px;
+				width: 24px;
 				&.svg-active {
 					opacity: 0;
 					visibility: hidden;
@@ -417,15 +411,14 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 				color: ${theme.colors.border};
 				cursor: pointer;
 				display: flex;
-				font-size: 20px;
-				height: 20px;
+				height: 24px;
 				justify-content: center;
 				position: absolute;
 				top: 50%;
 				right: 6px;
 				transform: translateY(-50%);
 				transition: opacity 0.2s ease, color 0.2s ease;
-				width: 20px;
+				width: 24px;
 				&.svg-active {
 					opacity: 0;
 					visibility: hidden;
@@ -438,17 +431,13 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     error: {
       outlined: css`
 				color: ${theme.colors.danger};
-				font-size: 12px;
-				font-weight: 400;
-				line-height: 12px;
+				${typography.paragraph3};
 				margin-top: 8px;
 				pointer-events: none;
 			`,
       underlined: css`
 				color: ${theme.colors.danger};
-				font-size: 12px;
-				font-weight: 400;
-				line-height: 12px;
+				${typography.paragraph3};
 				bottom: -20px;
 				position: absolute;
 				pointer-events: none;
@@ -699,7 +688,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     id: IDs.label,
     htmlFor: IDs.inputTypeText
   }, label), RequireMemo), [label, required, error, disabled]);
-  const InputMemo = useMemo(() => jsx("input", _extends({}, inputProps, {
+  const InputMemo = useMemo(() => jsx("input", { ...inputProps,
     css: styles.input[viewType],
     disabled: disabled,
     id: IDs.inputTypeText,
@@ -708,7 +697,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     readOnly: true,
     ref: inputRef,
     type: 'text'
-  })), [allowSeconds, disabled, viewType]);
+  }), [allowSeconds, disabled, viewType]);
   const IconMemo = useMemo(() => jsx(React.Fragment, null, jsx("span", {
     css: styles.icon[viewType],
     className: `${IDs.icon} svg-default`,
@@ -776,10 +765,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: styles.main[viewType],
     ref: mainRef
   }, InputMemo, IconMemo, ErrorMemo), [activeHeight, activeWidth, allowSeconds, defaultValue, disabled, error, value, viewType]);
-  return jsx("div", _extends({}, props, {
+  return jsx("div", { ...props,
     css: styles.container[viewType],
     ref: ref
-  }), LabelMemo, MainMemo, ClockMemo);
+  }, LabelMemo, MainMemo, ClockMemo);
 }));
 TimePicker.defaultProps = {
   activeHeight: 200,

package/components/form-control/time-picker/swiper.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -540,13 +538,13 @@ const Swiper = props => {
       select(value);
     }
   }, [value]);
-  return jsx("div", _extends({}, other, {
+  return jsx("div", { ...other,
     className: IDs.container,
     css: styles.container,
     ref: containerRef,
     style: { ...containerStyle
     }
-  }), jsx("ul", {
+  }, jsx("ul", {
     className: IDs.mainSelector,
     css: styles.mainSelector,
     ref: mainSelectorRef,

package/components/form-control/toggle/index.js

@@ -1,11 +1,9 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
 import theme from '../../../theme/settings';
 import generateRandom from '../../../utils/randomString';
 import Typography from '../../typography';
@@ -28,6 +26,8 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     inputRef = useRef(null);
   }
 
+  const [checkedState, setCheckedState] = useState(checked || defaultChecked);
+
   if (size === 'small') {
     height = 10;
     width = 20;
@@ -146,13 +146,10 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
 
   const handleClick = () => {
-    if (disabled) {
-      return;
-    }
-
-    inputRef.current.checked = !inputRef.current.checked;
+    if (disabled) return;
+    setChecked(checked !== undefined ? checked : !checkedState);
     const e = {
-      value: inputRef.current.checked,
+      value: !checkedState,
       target: inputRef.current
     };
     if (onChange) onChange(e);
@@ -171,22 +168,29 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [disabled, onChange]);
-  useEffect(() => {
-    if (typeof checked === 'boolean') {
-      inputRef.current.checked = checked;
+
+  const setChecked = check => {
+    if (typeof check === 'boolean') {
+      setCheckedState(check);
     }
+  };
+
+  useEffect(() => {
+    if (checked !== undefined) setChecked(checked);
   }, [checked]);
-  return useMemo(() => jsx("div", _extends({
+  return useMemo(() => jsx("div", {
     id: 'DGN-Core-Toggle-' + (id ? id : idDefault),
     css: formCheck,
-    ref: ref
-  }, props), jsx("input", _extends({}, inputProps, {
+    ref: ref,
+    ...props
+  }, jsx("input", { ...inputProps,
     ref: inputRef,
     hidden: true,
     type: "checkbox",
     css: checkbox,
-    defaultChecked: defaultChecked || checked
-  })), jsx("label", {
+    checked: checkedState,
+    onChange: handleClick
+  }), jsx("label", {
     css: toggle,
     onClick: handleClick
   }, jsx("span", {
@@ -197,7 +201,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       marginBottom: 0
     },
     mapping: 'label'
-  }, label))), [disabled, onChange]);
+  }, label))), [disabled, onChange, checkedState]);
 }));
 Toggle.defaultProps = {
   disabled: false,

package/components/form-view/helper-text.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { Typography } from '../';
@@ -13,12 +11,13 @@ const HelperText = /*#__PURE__*/memo(({
     marginTop: 5,
     marginBottom: 5
   };
-  return /*#__PURE__*/React.createElement(Typography, _extends({
+  return /*#__PURE__*/React.createElement(Typography, {
     type: 'p3',
     style: { ...helperText,
       ...style
-    }
-  }, props), text);
+    },
+    ...props
+  }, text);
 });
 HelperText.defaultProps = {
   text: ''

package/components/form-view/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -51,9 +49,10 @@ const FormLabel = ({
     utc: utc,
     thousandSeparator: thousandSeparator,
     thousandChar: thousandChar
-  }), jsx(HelperText, _extends({
-    text: text
-  }, helperTextProps)));
+  }), jsx(HelperText, {
+    text: text,
+    ...helperTextProps
+  }));
 };
 
 FormLabel.defaultProps = {

package/components/form-view/input.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -7,7 +5,7 @@ import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, useRef, memo, useEffect, useMemo } from 'react';
 import { dark4 } from '../../styles/colors';
-import { fontFamily } from '../../styles/typography';
+import { typography } from '../../styles/typography';
 import { formatDate } from '../../utils';
 const InputView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   inputProps,
@@ -29,7 +27,7 @@ const InputView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         flex: 1 1 auto;
         align-items: center;
         position: relative;
-        font-family: ${fontFamily};
+        ${typography.paragraph1};
         padding-bottom: 6px;
         padding-top: 6px;
         &::before {
@@ -56,7 +54,7 @@ const InputView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         flex: 1 1 auto;
         align-items: center;
         position: relative;
-        font-family: ${fontFamily};
+        ${typography.paragraph1};
         border: 1px solid ${dark4};
         border-radius: 4px;
         height: 40px;
@@ -107,11 +105,11 @@ const InputView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       inputRef.current.innerHTML = dateWithFormat(value);
     }
   }, [value]);
-  return useMemo(() => jsx("span", _extends({}, inputProps, {
+  return useMemo(() => jsx("span", { ...inputProps,
     style: inputStyleProps,
     css: TextInput,
     ref: inputRef
-  }), value));
+  }, value));
 }));
 InputView.defaultProps = {
   label: ''

package/components/form-view/label.js

@@ -5,7 +5,7 @@ import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { memo } from 'react';
 import { dark8 } from '../../styles/colors';
-import { fontFamily } from '../../styles/typography';
+import { typography } from '../../styles/typography';
 const Label = /*#__PURE__*/memo(({
   label,
   labelProps
@@ -13,11 +13,7 @@ const Label = /*#__PURE__*/memo(({
   const labelText = css`
         display: block;
         color: ${dark8};
-        font-family: ${fontFamily};
-        font-style: normal;
-        font-weight: 500;
-        font-size: 12px;
-        line-height: 16px;
+        ${typography.paragraph3};
         margin-bottom: 5px;
     `;
   return jsx("label", {

package/components/list/list-item-action.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -7,7 +5,7 @@ import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import theme from '../../theme/settings';
-import Icon from '../../icons';
+import { ButtonIcon } from '..';
 const ListItemAction = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   name,
@@ -41,19 +39,20 @@ const ListItemAction = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let node = children;
 
     if (!node) {
-      node = jsx(Icon, {
+      node = jsx(ButtonIcon, {
+        viewType: 'ghost',
         name: name,
-        viewBox: true,
         onClick: onClick
       });
     }
 
-    return jsx("div", _extends({
+    return jsx("div", {
       className: 'DGN-UI-List-Item-Action ' + className,
       css: ListItemActionRoot,
       ref: ref,
-      style: style
-    }, props), node);
+      style: style,
+      ...props
+    }, node);
   }, [children, name, style]);
   return ListItemActionView;
 }));

package/components/list/list-item-icon.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -45,12 +43,13 @@ const ListItemIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    return jsx("div", _extends({
+    return jsx("div", {
       css: ListItemIconRoot,
       className: 'DGN-UI-List-Item-Icon ' + className,
       ref: ref,
-      style: style
-    }, props), node);
+      style: style,
+      ...props
+    }, node);
   }, [children, name]);
   return ListItemIconView;
 }));

package/components/list/list-item-text.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -30,12 +28,13 @@ const ListItemText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
-  const ListItemTextView = useMemo(() => jsx("div", _extends({
+  const ListItemTextView = useMemo(() => jsx("div", {
     css: ListItemTextRoot,
     className: 'DGN-UI-List-Item-Text ' + className,
     ref: ref,
-    style: style
-  }, props), jsx(Typography, null, children)), [children]);
+    style: style,
+    ...props
+  }, jsx(Typography, null, children)), [children]);
   return ListItemTextView;
 }));
 ListItemText.defaultProps = {

package/components/list/list-item.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -78,13 +76,14 @@ const ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [inset]);
-  const ListItemView = useMemo(() => jsx("div", _extends({
+  const ListItemView = useMemo(() => jsx("div", {
     css: ListItemRoot,
     className: 'DGN-UI-List-Item ' + (onClick ? 'click-able ' : '') + className,
     ref: ref,
     onClick: onClick ? handleClick : null,
-    style: style
-  }, props), children, button && jsx(Ripple, {
+    style: style,
+    ...props
+  }, children, button && jsx(Ripple, {
     color: '#8F9BB3'
   })), [children, button, style]);
   return ListItemView;

package/components/list/list.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -110,11 +108,12 @@ const List = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [style]);
-  const ListView = useMemo(() => jsx("div", _extends({
+  const ListView = useMemo(() => jsx("div", {
     css: ListRoot,
     ref: ref,
-    className: ('DGN-UI-List ' + className).trim()
-  }, props), children), [children]);
+    className: ('DGN-UI-List ' + className).trim(),
+    ...props
+  }, children), [children]);
   return ListView;
 }));
 List.defaultProps = {

package/components/list/sub-header.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -34,11 +32,12 @@ const ListSubHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
-  const ListSubHeaderRootView = useMemo(() => jsx("div", _extends({
+  const ListSubHeaderRootView = useMemo(() => jsx("div", {
     css: ListSubHeaderRoot,
     ref: ref,
-    style: style
-  }, props), jsx(Typography, {
+    style: style,
+    ...props
+  }, jsx(Typography, {
     type: 'h4',
     color: theme.colors.disabled,
     style: {