@ntbjs/react-components 2.0.0-rc.9 → 2.0.2-rc.1

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

@@ -1,261 +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,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23,
-  _t24,
-  _t25;
-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 Adornment = styled.div.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.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-500'), props.theme.getColor('gray-600'), 1));
-const InputIconContainer = styled.div.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.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; // important is needed to override the default Foundation styling used in the Mediebank;
-  margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank;
-  ${0}
-  ${0}
-  border: 1px solid;
-  ${0};
-
-  ${0}
-
-  ${0}
-  ${0}
-  ${0}
-
-  &::placeholder {
-    ${0}
-
-    ${0}
-  }
-
-
-  &&:hover:not(:focus) {
-    ${0};
-    transition: background 350ms;
-    & + ${0} {
-      opacity: 1;
-      transition: opacity 350ms;
-    }
-  }
-
-  :focus {
-    outline: none;
-    border-color: ${0} !important
-    ${0}
-`), 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(_t10 || (_t10 = _`
-      user-select: text;
-      cursor: default;
-    `)), props => props.warning && css(_t11 || (_t11 = _`
-      border-color: ${0} !important;
-    `), props.theme.getColor('orange-500')), props => props.error && css(_t12 || (_t12 = _`
-      border-color: ${0} !important;
-    `), props.theme.getColor('red-500')), props => props.hasIcon && css(_t13 || (_t13 = _`
-      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.noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : 'background: transparent', InputIconContainer, props => props.theme.getColor('gray-600'), props => props.readOnly && css(_t14 || (_t14 = _`
-        outline: none;
-      `)));
-const TextInputLabel = styled.label.attrs(applyDefaultTheme)(_t15 || (_t15 = _`
-  position: absolute;
-  top: 15px;
-  left: 11px;
-  line-height: 1.2;
-  font-size: 0.875rem;
-  transition: all 150ms;
-
-  ${0}
-
-  ${0}
-
-  ${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(_t16 || (_t16 = _`
-      ${0};
-    `), activeLabel), props => props.hasIcon && css(_t17 || (_t17 = _`
-      left: 35px;
-    `)), props => props.warning && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500')), props => props.error && props.theme.themeProp('color', props.theme.getColor('red-500'), props.theme.getColor('red-500')));
-const TextInputFieldIcon = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
-  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.attrs(applyDefaultTheme)(_t19 || (_t19 = _`
-  position: relative;
-
-  ${0}
-
-  &:focus-within {
-    ${0} {
-      ${0};
-    }
-
-    ${0} {
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-
-  ${0}:not(:placeholder-shown) + ${0} {
-    ${0};
-    ${0}
-
-    ${0}
-    ${0} 
-  } 
- 
-}
-`), props => props.disabled && css(_t20 || (_t20 = _`
-      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(_t21 || (_t21 = _`
-        color: ${0};
-      `), props.theme.getColor('red-500')), props => props.warning && css(_t22 || (_t22 = _`
-        color: ${0};
-      `), props.theme.getColor('orange-500')));
-const Description = styled.p.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
-  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(_t24 || (_t24 = _`
-      ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))), props => props.warning && css(_t25 || (_t25 = _`
-      ${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,10 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t;
-const InputGroup = styled.div.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"];
-const SectionSeparator = React.forwardRef(function SectionSeparator(_ref, forwardedRef) {
-  let {
-      vertical
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return React.createElement(SectionSeparator$2, _extends({
-    vertical: vertical,
-    ref: forwardedRef
-  }, props));
-});
-SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
-  vertical: PropTypes.bool
-} : {};
-SectionSeparator.defaultProps = {
-  vertical: false
-};
-var SectionSeparator$1 = SectionSeparator;
-
-export { SectionSeparator$1 as default };

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

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t;
-const SectionSeparator = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
- height: ${0};
- width: ${0};
-
- ${0}
-`), props => props.vertical ? '100%' : '1px', props => props.vertical ? '1px' : '100%', props => props.theme.themeProp('background-color', props.theme.getColor('gray-800'), 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.styled.js

@@ -1,46 +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 AssetAction = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
-  font-family: ${0};
-`), props => props.theme.primaryFontFamily);
-const AssetActionButton = styled.div.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.actionWidthHeight ? `${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.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.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
-  pointer-events: none;
-`));
-
-export { ActionTitle, AssetAction, AssetActionButton, Floating, StyledFloatingArrow };

package/esm/components/widgets/AssetActionsBase/AssetActionsBase.js

@@ -1,31 +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 { AssetActions } from './AssetActionsBase.styled.js';
-import AssetAction from '../AssetAction/AssetAction.js';
-
-const _excluded = ["actions", "asset"];
-const AssetActionsBase = React.forwardRef(function AssetActionsBase(_ref, forwardedRef) {
-  let {
-      actions,
-      asset
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const assetActions = actions.map((action, index) => React.createElement(AssetAction, _extends({
-    key: `index_${action.title}`,
-    ref: forwardedRef
-  }, props, {
-    action: action,
-    asset: asset,
-    itemKey: `${index}-${action.title}`
-  })));
-  return React.createElement(AssetActions, null, assetActions);
-});
-AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
-  actions: PropTypes.arrayOf(PropTypes.object),
-  asset: PropTypes.object
-} : {};
-AssetActionsBase.defaultProps = {};
-var AssetActionsBase$1 = AssetActionsBase;
-
-export { AssetActionsBase$1 as default };

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

@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t;
-const AssetActions = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
-  font-family: ${0};
-  font-size: 1rem;
-  font-weight: 500;
-  display: flex;
-  flex-direction: column;
-  padding: 2px;
-  gap: 8px;
-`), props => props.theme.primaryFontFamily);
-
-export { AssetActions };

package/esm/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.styled.js

@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3;
-const AssetGalleryBase = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
-  position: relative;
-`));
-const GroupLabel = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
-  font-family: ${0};
-  ${0}
-  display: flex;
-  align-items: flex-end;
-  position: absolute;
-  padding-bottom: 4px;
-  box-sizing: border-box;
-`), props => props.theme.primaryFontFamily, props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')));
-const AssetGalleryCardBase = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 0;
-  z-index: 1;
-  will-change: transform, width, height;
-
-  &:hover {
-    z-index: 2;
-  }
-`));
-
-export { AssetGalleryBase, AssetGalleryCardBase, GroupLabel };