@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.26

package/esm/components/inputs/TextInput/TextInput.js

@@ -1,142 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React from '../../../node_modules/react/index.js';
-import { nanoid } from 'nanoid';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import useMergedRefs from '../../../node_modules/@restart/hooks/lib/useMergedRefs.js';
-import { isBoolean, isEmpty } from 'lodash';
-import { ReactComponent as SvgEditNote } from '../../../icons/edit-note.svg.js';
-import { TextInput as TextInput$2, TextInputFieldIcon, TextInputWrapper, Adornment, TextInputField, InputIconContainer, TextInputLabel, Description } from './TextInput.styled.js';
-import { r as react } from '../../../_virtual/index.js';
-
-const _excluded = ["value", "defaultValue", "name", "label", "placeholder", "type", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "adornments", "className", "style", "onChange", "onBlur", "noBorder"];
-const TextInput = React.forwardRef(function TextInput(_ref, forwardedRef) {
-  let {
-      value,
-      defaultValue,
-      name,
-      label,
-      placeholder,
-      type,
-      required,
-      disabled,
-      readOnly,
-      autoComplete,
-      description,
-      error,
-      warning,
-      icon,
-      adornments,
-      className,
-      style,
-      onChange,
-      onBlur,
-      noBorder
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const textInputDomNode = react.exports.useRef(null);
-  const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);
-  const [uniqueId] = react.exports.useState(nanoid());
-  const hasError = react.exports.useMemo(() => {
-    if (isBoolean(error)) {
-      return error;
-    }
-    return !isEmpty(error);
-  }, [error]);
-  const hasWarning = react.exports.useMemo(() => {
-    if (isBoolean(warning)) {
-      return warning;
-    }
-    return !isEmpty(warning);
-  }, [warning]);
-  const descriptionText = react.exports.useMemo(() => {
-    if (!isEmpty(error)) {
-      return error;
-    }
-    if (!isEmpty(warning)) {
-      return warning;
-    }
-    if (!isEmpty(description)) {
-      return description;
-    }
-    return null;
-  }, [description, error, warning]);
-  return React.createElement(TextInput$2, {
-    $error: hasError,
-    disabled: disabled,
-    $warning: hasWarning,
-    className: className,
-    style: style
-  }, typeof icon !== 'undefined' && React.createElement(TextInputFieldIcon, null, icon), React.createElement(TextInputWrapper, null, typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 && React.createElement(Adornment, {
-    htmlFor: `text-input-${uniqueId}`,
-    $error: hasError,
-    $warning: hasWarning,
-    $isPrefix: true,
-    onClick: () => textInputDomNode.current.focus()
-  }, adornments.prefix), React.createElement(TextInputField, _extends({
-    ref: textInputRef,
-    value: value,
-    defaultValue: defaultValue,
-    name: name,
-    placeholder: placeholder || ' ',
-    type: type,
-    required: required,
-    autoComplete: autoComplete,
-    $hasIcon: Boolean(icon),
-    $error: hasError,
-    $warning: hasWarning,
-    id: `text-input-${uniqueId}`,
-    onChange: onChange,
-    onBlur: onBlur,
-    readOnly: readOnly,
-    $noBorder: noBorder
-  }, rest)), !readOnly && noBorder && React.createElement(InputIconContainer, {
-    $error: hasError,
-    $warning: hasWarning
-  }, React.createElement(SvgEditNote, null)), label && React.createElement(TextInputLabel, {
-    htmlFor: `text-input-${uniqueId}`,
-    $hasPlaceholder: Boolean(placeholder),
-    $hasAdornments: Boolean(typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 || typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0),
-    $hasIcon: Boolean(icon),
-    $error: hasError
-  }, label, required && ' *'), typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0 && React.createElement(Adornment, {
-    $error: hasError,
-    $warning: hasWarning,
-    $isPrefix: false,
-    onClick: () => textInputDomNode.current.focus()
-  }, adornments.suffix)), typeof descriptionText === 'string' && descriptionText.length > 0 && React.createElement(Description, {
-    $error: hasError,
-    $warning: hasWarning
-  }, descriptionText));
-});
-TextInput.defaultProps = {
-  type: 'text',
-  noBorder: false
-};
-TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  value: PropTypes.string,
-  defaultValue: PropTypes.string,
-  name: PropTypes.string,
-  label: PropTypes.string,
-  placeholder: PropTypes.string,
-  type: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  autoComplete: PropTypes.string,
-  description: PropTypes.string,
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  icon: PropTypes.element,
-  adornments: PropTypes.shape({
-    prefix: PropTypes.string,
-    suffix: PropTypes.string
-  }),
-  className: PropTypes.string,
-  style: PropTypes.object,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  noBorder: PropTypes.bool
-} : {};
-var TextInput$1 = TextInput;
-
-export { TextInput$1 as default };

package/esm/components/inputs/TextInput/TextInput.styled.js

@@ -1,274 +0,0 @@
-import styled, { css } from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9,
-  _t0,
-  _t1,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23;
-const activeLabel = css(_t || (_t = _`
-  font-size: 0.75rem;
-  padding: 0 3px;
-  top: -7px;
-  letter-spacing: 0.03em;
-  left: 8px !important;
-  opacity: 1 !important;
-`));
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const Adornment = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
-  flex-shrink: 0;
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: initial;
-  padding: 13px 10px;
-
-  ${0}
-  ${0}
-  border: 1px solid;
-  ${0}
-  border-radius: 3px;
-  ${0}
-  box-sizing: border-box;
-  appearance: none;
-  transition: border-color 350ms;
-  height: 2.75rem;
-
-  ${0}
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.$isPrefix ? css(_t3 || (_t3 = _`
-          padding-right: 10px;
-          border-right: 0;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        `)) : css(_t4 || (_t4 = _`
-          padding-left: 0;
-          margin-left: -3px;
-          border-left: 0;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        `)), props => props.$warning && css(_t5 || (_t5 = _`
-      border-color: ${0} !important;
-    `), props.theme.getColor('orange-500')), props => props.$error && css(_t6 || (_t6 = _`
-      border-color: ${0} !important;
-    `), props.theme.getColor('red-500')));
-const TextInputWrapper = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
-  display: flex;
-  align-content: center;
-
-  &:focus-within {
-    ${0} {
-      outline: none;
-      ${0}
-    }
-  }
-`), Adornment, props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1));
-const InputIconContainer = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
-  opacity: 0;
-  pointer-events: none;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  padding-right: 4px;
-  padding-left: 30px;
-  display: flex;
-  align-items: center;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  color: ${0};
-
-  ${0}
-
-  ${0}
-
-  > svg {
-    width: 12px;
-  }
-`), props => props.theme.getColor('gray-400'), props => props.$warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43'), props => props.$error && props.theme.themeProp('color', '#CB968F', '#CB968F'));
-const TextInputField = styled.input.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
-  display: block;
-  width: 100%;
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: 1;
-  padding: 13px 10px;
-  border-radius: 3px;
-  box-sizing: border-box;
-  appearance: none;
-  transition: border-color 350ms;
-  height: 2.75rem !important;
-  margin-bottom: 0;
-  ${0}
-  ${0}
-  border: 1px solid;
-  ${0};
-
-  ${0}
-
-  ${0}
-  ${0}
-  ${0}
-
-  &::placeholder {
-    ${0}
-
-    ${0}
-  }
-  &:focus {
-    outline: none !important;
-    box-shadow: none !important;
-   ${0}
-    ${0}
-  }
-  &&:hover:not(:focus) {
-    ${0};
-    transition: background 350ms;
-    & + ${0} {
-      opacity: 1;
-      transition: opacity 350ms;
-    }
-  }
-
-
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.$noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')), props => props.readOnly && css(_t0 || (_t0 = _`
-      user-select: text;
-      cursor: default;
-    `)), props => props.$warning && css(_t1 || (_t1 = _`
-      border-color: ${0} !important;
-    `), props.theme.getColor('orange-500')), props => props.$error && css(_t10 || (_t10 = _`
-      border-color: ${0} !important;
-    `), props.theme.getColor('red-500')), props => props.$hasIcon && css(_t11 || (_t11 = _`
-      padding-left: 35px;
-    `)), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1), props => props.theme.themeProp('opacity', 0.6, 0.5, 1), props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-600')), props => props.readOnly && css(_t12 || (_t12 = _`
-        outline: none;
-      `)), props => props.$noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), InputIconContainer);
-const TextInputLabel = styled.label.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t13 || (_t13 = _`
-  position: absolute;
-  top: 15px;
-  left: 11px;
-  line-height: 1.2;
-  font-size: 0.875rem;
-  transition: all 150ms;
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => props.theme.themeProp('opacity', 0.6, 0.5), props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`), props => (props.$hasPlaceholder || props.$hasAdornments) && css(_t14 || (_t14 = _`
-      ${0};
-    `), activeLabel), props => props.$hasIcon && css(_t15 || (_t15 = _`
-      left: 35px;
-    `)));
-const TextInputFieldIcon = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t16 || (_t16 = _`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 2.625rem;
-  display: flex;
-  padding: 0 10px;
-
-  svg {
-    width: 15px;
-    opacity: 0.6;
-    transition: opacity 250ms;
-  }
-`));
-const TextInput = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t17 || (_t17 = _`
-  position: relative;
-
-  ${0}
-
-  &:focus-within {
-    ${0} {
-      ${0};
-    }
-
-    ${0} {
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-
-  ${0}:not(:placeholder-shown) + ${0} {
-    ${0};
-    ${0}
-
-    ${0}
-    ${0} 
-  } 
-}
-`), props => props.disabled && css(_t18 || (_t18 = _`
-      user-select: none;
-      opacity: 0.5;
-      cursor: not-allowed;
-      > * {
-        pointer-events: none;
-      }
-    `)), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, props => props.$error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')), props => props.$error && css(_t19 || (_t19 = _`
-        color: ${0};
-      `), props.theme.getColor('red-500')), props => props.$warning && css(_t20 || (_t20 = _`
-        color: ${0};
-      `), props.theme.getColor('orange-500')));
-const Description = styled.p.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t21 || (_t21 = _`
-  margin: 8px 0 0 0;
-  padding: 0 0.6875rem;
-  font-size: 0.75rem;
-  line-height: 1.333;
-
-  ${0};
-
-  ${0}
-
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.$error && css(_t22 || (_t22 = _`
-      ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))), props => props.$warning && css(_t23 || (_t23 = _`
-      ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))));
-
-export { Adornment, Description, InputIconContainer, TextInput, TextInputField, TextInputFieldIcon, TextInputLabel, TextInputWrapper };

package/esm/components/inputs/TextInput/inputs/TextInput/index.js

@@ -1 +0,0 @@
-export { default } from '../../TextInput.js';

package/esm/components/inputs/inputs/index.js

@@ -1,13 +0,0 @@
-export { default as ActionButton } from '../ActionButton/ActionButton.js';
-export { default as Button } from '../Button/Button.js';
-export { default as Checkbox } from '../Checkbox/Checkbox.js';
-export { default as CompactAutocompleteSelect } from '../CompactAutocompleteSelect/CompactAutocompleteSelect.js';
-export { default as CompactStarRating } from '../CompactStarRating/CompactStarRating.js';
-export { default as CompactTextInput } from '../CompactTextInput/CompactTextInput.js';
-export { default as MultiSelect } from '../MultiSelect/MultiSelect.js';
-export { default as Radio } from '../Radio/Radio.js';
-export { default as TextArea } from '../TextArea/TextArea.js';
-export { default as TextInput } from '../TextInput/TextInput.js';
-export { default as Switch } from '../Switch/Switch.js';
-export { default as MultiLevelCheckbox } from '../MultiLevelCheckbox/MultiLevelCheckbox.js';
-export { default as MultiLevelCheckboxSelect } from '../MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js';

package/esm/components/layout/InputGroup/InputGroup.js

@@ -1,22 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React from '../../../node_modules/react/index.js';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import { InputGroup as InputGroup$2 } from './InputGroup.styled.js';
-
-const _excluded = ["children"];
-const InputGroup = React.forwardRef(function InputGroup(_ref, forwardedRef) {
-  let {
-      children
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return React.createElement(InputGroup$2, _extends({
-    ref: forwardedRef
-  }, props), children);
-});
-InputGroup.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.node
-} : {};
-InputGroup.defaultProps = {};
-var InputGroup$1 = InputGroup;
-
-export { InputGroup$1 as default };

package/esm/components/layout/InputGroup/InputGroup.styled.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t;
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const InputGroup = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t || (_t = _`
-  margin: 8px 0;
-`));
-
-export { InputGroup };

package/esm/components/layout/InputGroup/layout/InputGroup/index.js

@@ -1 +0,0 @@
-export { default } from '../../InputGroup.js';

package/esm/components/layout/SectionSeparator/SectionSeparator.js

@@ -1,25 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React from '../../../node_modules/react/index.js';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import { SectionSeparator as SectionSeparator$2 } from './SectionSeparator.styled.js';
-
-const _excluded = ["vertical", "margin"];
-const SectionSeparator = React.forwardRef(function SectionSeparator(_ref, forwardedRef) {
-  let {
-      vertical = false,
-      margin = 0
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return React.createElement(SectionSeparator$2, _extends({
-    $vertical: vertical,
-    $margin: margin,
-    ref: forwardedRef
-  }, props));
-});
-SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
-  vertical: PropTypes.bool,
-  margin: PropTypes.number
-} : {};
-var SectionSeparator$1 = SectionSeparator;
-
-export { SectionSeparator$1 as default };

package/esm/components/layout/SectionSeparator/SectionSeparator.styled.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t;
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const SectionSeparator = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t || (_t = _`
-  height: ${0};
-  width: ${0};
-
-  ${0}
-
-  ${0}
-`), props => props.$vertical ? '100%' : '1px', props => props.$vertical ? '1px' : '100%', props => props.$vertical ? `margin-left: ${props.$margin}px; margin-right: ${props.$margin}px;` : `margin-top: ${props.$margin}px; margin-bottom: ${props.$margin}px;`, props => props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
-
-export { SectionSeparator };

package/esm/components/layout/SectionSeparator/layout/SectionSeparator/index.js

@@ -1 +0,0 @@
-export { default } from '../../SectionSeparator.js';

package/esm/components/layout/layout/index.js

@@ -1,2 +0,0 @@
-export { default as InputGroup } from '../InputGroup/InputGroup.js';
-export { default as SectionSeparator } from '../SectionSeparator/SectionSeparator.js';

package/esm/components/widgets/AssetAction/AssetAction.js

@@ -1,102 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React from '../../../node_modules/react/index.js';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import { AssetAction as AssetAction$2, AssetActionButton, Floating, ActionTitle, StyledFloatingArrow } from './AssetAction.styled.js';
-import { isFunction } from 'lodash';
-import { useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useHover, useDismiss, useInteractions } from '@floating-ui/react';
-import { r as react } from '../../../_virtual/index.js';
-
-const _excluded = ["action", "asset", "itemKey"];
-const AssetAction = React.forwardRef(function AssetAction(_ref, forwardedRef) {
-  let {
-      action,
-      asset,
-      itemKey
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const ARROW_WIDTH = 10;
-  const ARROW_HEIGHT = 5;
-  const GAP = 3;
-  const arrowRef = react.exports.useRef(null);
-  const [isOpen, setIsOpen] = react.exports.useState(false);
-  const [placement] = react.exports.useState('bottom');
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = useFloating({
-    placement,
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(ARROW_HEIGHT + GAP), flip({
-      padding: 5
-    }), shift({
-      padding: 5
-    }), arrow({
-      element: arrowRef
-    })]
-  });
-  const {
-    isMounted,
-    styles
-  } = useTransitionStyles(context, {
-    initial: {
-      transform: 'translateY(-8px)',
-      opacity: 0
-    },
-    duration: {
-      open: 200,
-      close: 100
-    }
-  });
-  const hover = useHover(context);
-  const dismiss = useDismiss(context, {
-    referencePress: true
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = useInteractions([dismiss, hover]);
-  const onActionClick = react.exports.useCallback((e, action) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isFunction(action === null || action === void 0 ? void 0 : action.onClick)) {
-      action.onClick(asset);
-    }
-  }, [action]);
-  return React.createElement(AssetAction$2, _extends({
-    ref: forwardedRef
-  }, props), React.createElement(AssetActionButton, _extends({
-    key: itemKey,
-    ref: refs.setReference
-  }, getReferenceProps(), {
-    onClick: e => onActionClick(e, action.onClick(asset), itemKey),
-    $actionWidthHeight: action.actionWidthHeight
-  }), action.icon), isOpen && isMounted && React.createElement(Floating, _extends({
-    className: "floating",
-    ref: refs.setFloating,
-    style: floatingStyles
-  }, getFloatingProps()), React.createElement(ActionTitle, {
-    style: styles
-  }, action.title), React.createElement(StyledFloatingArrow, {
-    ref: arrowRef,
-    context: context,
-    width: ARROW_WIDTH,
-    height: ARROW_HEIGHT
-  })));
-});
-AssetAction.propTypes = process.env.NODE_ENV !== "production" ? {
-  action: PropTypes.shape({
-    icon: PropTypes.node,
-    onClick: PropTypes.func,
-    actionWidthHeight: PropTypes.arrayOf(PropTypes.number),
-    title: PropTypes.string
-  }),
-  asset: PropTypes.object,
-  itemKey: PropTypes.string
-} : {};
-AssetAction.defaultProps = {};
-var AssetAction$1 = AssetAction;
-
-export { AssetAction$1 as default };

package/esm/components/widgets/AssetAction/AssetAction.styled.js

@@ -1,57 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-import { FloatingArrow } from '@floating-ui/react';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5;
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const AssetAction = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t || (_t = _`
-  font-family: ${0};
-`), props => props.theme.primaryFontFamily);
-const AssetActionButton = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
-  border-radius: 50%;
-  width: ${0};
-  height: ${0};
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  ${0};
-  svg {
-    pointer-events: none;
-    width: ${0};
-    height: ${0};
-    ${0};
-  }
-`), props => props.$actionWidthHeight ? `${props.$actionWidthHeight[0]}px` : 'auto', props => props.$actionWidthHeight ? `${props.$actionWidthHeight[1]}px` : 'auto', props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.$actionWidthHeightactionWidthHeight ? `${props.$actionWidthHeight[0] - 14}px` : 'auto', props => props.$actionWidthHeight ? `${props.$actionWidthHeight[1] - 14}px` : 'auto', props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white')));
-const ActionTitle = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
-  font-size: 14px;
-  border-radius: 4px;
-  padding: 8px 12px;
-  white-space: nowrap;
-  color: white;
-  background: ${0};
-`), props => props.theme.getColor('gray-700'));
-const StyledFloatingArrow = styled(FloatingArrow).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
-  fill: ${0};
-`), props => props.theme.getColor('gray-700'));
-const Floating = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
-  pointer-events: none;
-`));
-
-export { ActionTitle, AssetAction, AssetActionButton, Floating, StyledFloatingArrow };