@ntbjs/react-components 2.0.0-rc.29 → 2.0.0-rc.30

package/build/AssetPreviewTopBar-acd6353d.js

@@ -1,127 +0,0 @@
-import { _ as _extends$1 } from './_rollupPluginBabelHelpers-c245b26a.js';
-import * as React from 'react';
-import React__default from 'react';
-import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
-import styled, { css } from 'styled-components';
-import { S as SvgClose } from './close-a5d37608.js';
-
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function SvgArrowBack(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 32 32"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M16 32L0 16 16 0l2.1 2.1L5.7 14.5H32v3H5.7l12.4 12.4L16 32z"
-  })));
-}
-
-const AssetPreviewTopBar$1 = styled.div.attrs(applyDefaultTheme)`
-  box-sizing: border-box;
-  align-items: center;
-  border-bottom: ${props => props.border ? `1px solid` : `none`};
-  color: inherit;
-  display: flex;
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-weight: 400;
-  min-height: 72px;
-  padding: 0 24px;
-  width: 100%;
-
-  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'))}
-
-  ${props => props.shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9')}
-
-      ${props => props.disabled && css`
-      cursor: not-allowed;
-    `}
-`;
-const BackButtonContainer = styled.a.attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  font-size: 1.125rem;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
-
-  ${props => props.disabled && css`
-      opacity: 0.5;
-      pointer-events: none;
-    `}
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  > svg {
-    height: 24px;
-    margin-right: 16px;
-    width: 24px;
-  }
-`;
-const BackHoverEffect = styled.div`
-  display: inline-flex;
-  align-items: center;
-
-  > svg {
-    height: 24px;
-    margin-right: 16px;
-    width: 24px;
-    transition: transform 0.3s ease-in-out;
-  }
-
-  &:hover > svg {
-    transform: translateX(-2px);
-  }
-`;
-const LeftText = styled.span.attrs(applyDefaultTheme)`
-  font-size: 1.125rem;
-  margin-left: 16px;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))};
-`;
-const ButtonsContainer = styled.div.attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  margin-left: auto;
-
-  > span {
-    margin-left: 16px;
-  }
-`;
-
-const AssetPreviewTopBar = React__default.forwardRef(function AssetPreviewTopBar({
-  onBackButtonClick,
-  backButtonText,
-  backButtonAsClose,
-  leftText,
-  buttons,
-  shadow,
-  border,
-  disabled,
-  ...props
-}, forwardedRef) {
-  return React__default.createElement(AssetPreviewTopBar$1, _extends$1({
-    ref: forwardedRef,
-    shadow: shadow,
-    border: border,
-    disabled: disabled
-  }, props), React__default.createElement(BackButtonContainer, {
-    onClick: onBackButtonClick,
-    disabled: disabled
-  }, backButtonAsClose ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgClose, null), backButtonText) : React__default.createElement(BackHoverEffect, null, React__default.createElement(SvgArrowBack, null), backButtonText)), leftText && React__default.createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default.createElement(ButtonsContainer, null, buttons.map((button, index) => React__default.createElement("span", {
-    key: 'topBarButton-' + index
-  }, button))));
-});
-AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
-  onBackButtonClick: PropTypes.func.isRequired,
-  backButtonText: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  backButtonAsClose: PropTypes.bool,
-  leftText: PropTypes.string,
-  shadow: PropTypes.bool,
-  border: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.node)
-} : {};
-AssetPreviewTopBar.defaultProps = {};
-
-export { AssetPreviewTopBar as A };

package/build/Checkbox-4a5fd716.js

@@ -1,213 +0,0 @@
-import React__default, { useState, useMemo } from 'react';
-import { nanoid } from 'nanoid';
-import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
-import { isBoolean, isEmpty } from 'lodash';
-import styled, { css } from 'styled-components';
-
-const checkboxSize = '18px';
-const Checkbox$1 = styled.div.attrs(applyDefaultTheme)`
-  display: flex;
-  flex-direction: column;
-`;
-const CheckIcon = styled.div.attrs(applyDefaultTheme)`
-  opacity: 0;
-  transform: scale(0.1);
-  transition: all 200ms;
-  position: absolute;
-  width: 12px;
-  top: 4px;
-  left: 3px;
-  color: ${props => props.theme.getColor('gray-100')};
-
-  svg {
-    width: 100%;
-    display: block;
-  }
-`;
-const IndeterminateCheckIcon = styled.div.attrs(applyDefaultTheme)`
-  opacity: 0;
-  transform: scale(0.1);
-  transition: all 200ms;
-  position: absolute;
-  height: 2px;
-  top: 8px;
-  left: 4px;
-  background: ${props => props.theme.getColor('gray-100')};
-  width: 10px;
-`;
-const CheckboxLabel = styled.label.attrs(applyDefaultTheme)`
-  display: inline-flex;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  min-height: ${checkboxSize};
-  text-align: left;
-  flex-wrap: wrap;
-  flex: 1;
-  line-height: ${checkboxSize};
-  margin-right: auto;
-
-  & input[type='checkbox'] {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    margin: 0;
-  }
-
-  &::before {
-    content: '';
-    border: 2px solid ${props => props.theme.getColor('gray-300')};
-    border-radius: 2px;
-    transition: all 200ms;
-    width: ${checkboxSize};
-    height: ${checkboxSize};
-    box-sizing: border-box;
-    ${props => props.muted && css`
-        opacity: 0.75;
-      `}
-  }
-
-  &:has(input[type='checkbox']:checked) {
-    &::before {
-      background: ${props => props.theme.getColor('emerald-500')};
-      border-color: ${props => props.theme.getColor('emerald-500')};
-    }
-  }
-
-  &:has(input[type='checkbox']:not([data-indeterminate='true']):checked) {
-    ${CheckIcon} {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  &:has(input[type='checkbox'][data-indeterminate='true']:checked) {
-    ${IndeterminateCheckIcon} {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  ${props => props.readOnly && css`
-      opacity: 0.5;
-      cursor: default;
-      pointer-events: none;
-      user-select: text;
-    `}
-
-  ${props => props.disabled && css`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `}
-`;
-const CheckboxVisualLabel = styled.div.attrs(applyDefaultTheme)`
-  padding-left: 10px;
-  font-weight: 400;
-  font-size: 0.875rem;
-  flex: 1;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
-`;
-const Description = styled.p.attrs(applyDefaultTheme)`
-  margin: 0.375rem 0 0 0;
-  font-size: 0.75rem;
-  line-height: 1.333;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
-
-  ${props => props.error && css`
-      content: 'error';
-      ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
-    `}
-`;
-
-const Checkbox = React__default.forwardRef(function Checkbox({
-  checked,
-  defaultChecked,
-  disabled,
-  readOnly,
-  name,
-  value,
-  description,
-  error,
-  indeterminate,
-  muted,
-  label,
-  onChange,
-  onBlur,
-  className,
-  style
-}, forwardedRef) {
-  const [uniqueId] = useState(nanoid());
-  const hasError = useMemo(() => {
-    if (isBoolean(error)) {
-      return error;
-    }
-    return !isEmpty(error);
-  }, [error]);
-  const descriptionText = useMemo(() => {
-    if (!isEmpty(error)) {
-      return error;
-    }
-    if (!isEmpty(description)) {
-      return description;
-    }
-    return null;
-  }, [description, error]);
-  return React__default.createElement(Checkbox$1, {
-    className: className,
-    disabled: disabled,
-    readOnly: readOnly,
-    style: style
-  }, React__default.createElement(CheckboxLabel, {
-    disabled: disabled,
-    muted: muted,
-    readOnly: readOnly,
-    htmlFor: uniqueId
-  }, React__default.createElement("input", {
-    ref: forwardedRef,
-    id: uniqueId,
-    checked: checked,
-    defaultChecked: defaultChecked,
-    disabled: disabled,
-    readOnly: readOnly,
-    value: value,
-    name: name,
-    type: "checkbox",
-    onChange: onChange,
-    onBlur: onBlur,
-    "data-indeterminate": indeterminate
-  }), React__default.createElement(IndeterminateCheckIcon, null), React__default.createElement(CheckIcon, null, React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 10.9 8.45"
-  }, React__default.createElement("path", {
-    d: "m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z",
-    fill: "currentColor"
-  }))), (typeof label === 'string' && label.length > 0 || typeof label === 'object') && React__default.createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default.createElement(Description, {
-    error: hasError
-  }, descriptionText));
-});
-Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  name: PropTypes.string,
-  value: PropTypes.string,
-  description: PropTypes.string,
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  indeterminate: PropTypes.bool,
-  muted: PropTypes.bool,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object
-} : {};
-Checkbox.defaultProps = {
-  disabled: false,
-  readOnly: false,
-  indeterminate: false
-};
-
-export { Checkbox as C };