@pareto-engineering/design-system 2.0.0-alpha.60 → 2.0.0-alpha.61

package/dist/cjs/experimental/GradientBackground/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "GradientBackground", {
-  enumerable: true,
-  get: function get() {
-    return _GradientBackground.default;
-  }
-});
-
-var _GradientBackground = _interopRequireDefault(require("./GradientBackground"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/experimental/GradientBackground/styles.scss

@@ -1,64 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-triangle-dimension:30em;
-$default-ellipses-dimension:50em;
-$default-ellipse-dimension:80em;
-$default-shapes-opacity:.8;
-
-.#{bem.$base}.gradient-background {
-  align-items: center;
-  background: var(--light-y);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: var(--pin);
-  position: absolute;
-  width: 100%;
-
-  .shapes {
-    display: flex;
-    justify-content: center;
-
-    .triangle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: polygon(0 0, 50% 100%, 100% 0);
-      height: $default-triangle-dimension * .86;
-      opacity: $default-shapes-opacity;
-      width: $default-triangle-dimension;
-    }
-
-    .ellipses {
-
-      height: $default-ellipses-dimension / 2;
-      width: $default-ellipses-dimension;
-      opacity: $default-shapes-opacity;
-
-      .up {
-        background-image: linear-gradient(var(--light-y), var(--y));
-        clip-path: ellipse(40% 100% at 50% 0%);
-        height:50%;
-      }
-
-      .down {
-        background-image: linear-gradient(to top, var(--light-y), var(--y));
-        clip-path: ellipse(40% 100% at 50% 100%);
-        height:50%;
-      }
-
-    }
-
-    .ellipse {
-      height: $default-ellipse-dimension / 1.5;
-      width: $default-ellipse-dimension;
-      background-image: linear-gradient( to top left, var(--dark-y), var(--light-y),var(--dark-y));
-      clip-path: ellipse(50% 25% at 50% 50%);
-      opacity: $default-shapes-opacity;
-      transform: rotate3d(0, 0, -1, 10deg);
-    }
-
-  }
-}
-
-

package/dist/cjs/experimental/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "GradientBackground", {
-  enumerable: true,
-  get: function get() {
-    return _GradientBackground.GradientBackground;
-  }
-});
-
-var _GradientBackground = require("./GradientBackground");

package/dist/cjs/f/fields/IntlTelInput/IntlTelInput.js

@@ -1,170 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _intlTelInput = _interopRequireDefault(require("intl-tel-input"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-var _formik = require("formik");
-
-var _common = require("../../common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var baseClassName = _bem.default.base;
-var componentClassName = 'intl-tel-input';
-/**
- * This is the component description.
- */
-
-var IntlTelInput = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    color,
-    labelColor,
-    validate,
-    oneInputLabel,
-    description,
-    disabled,
-    // placeholder,
-    optional,
-    autoComplete // ...otherProps
-
-  } = _ref;
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-    Promise.resolve().then(() => _interopRequireWildcard(require('intl-tel-input/build/css/intlTelInput.css')));
-  }, []);
-  var [field] = (0, _formik.useField)({
-    name,
-    validate
-  });
-  var input = (0, React.useRef)(null);
-  (0, React.useEffect)(() => {
-    var iti = (0, _intlTelInput.default)(input.current, {
-      separateDialCode: true,
-      customContainer: 'input-wrapper'
-    });
-    return () => iti.destroy();
-  }, [input.current]);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name,
-    color: labelColor,
-    optional: optional
-  }, label), /*#__PURE__*/React.createElement("input", _extends({
-    id: name,
-    className: "input",
-    type: "tel",
-    disabled: disabled // placeholder={placeholder}
-    ,
-    autoComplete: autoComplete,
-    ref: input
-  }, field)), /*#__PURE__*/React.createElement(_common.FormDescription, {
-    className: "v50 mt-v s-1",
-    description: description,
-    name: name
-  }));
-};
-
-IntlTelInput.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   * The input name (html - and Formik state)
-   */
-  name: _propTypes.default.string.isRequired,
-
-  /**
-   * The input label
-   */
-  label: _propTypes.default.string.isRequired,
-
-  /**
-   * The input label color
-   */
-  labelColor: _propTypes.default.string,
-
-  /**
-   * The input field validator function
-   */
-  validate: _propTypes.default.func,
-
-  /**
-   * If the slide will only have one input
-   */
-  oneInputLabel: _propTypes.default.bool,
-
-  /**
-   * Input description
-   */
-  description: _propTypes.default.string,
-
-  /**
-   * Whether the text input should be disabled
-   */
-  disabled: _propTypes.default.bool,
-
-  /**
-   * The placeholder text for the input
-   */
-  placeholder: _propTypes.default.string,
-
-  /**
-   * The text input color
-   */
-  color: _propTypes.default.string,
-
-  /**
-  * Whether the input is optional or not
-  */
-  optional: _propTypes.default.bool,
-
-  /**
-   * The autoComplete value that the browser should watch for the input
-   * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
-   */
-  autoComplete: _propTypes.default.string
-};
-IntlTelInput.defaultProps = {
-  color: 'background2',
-  disabled: false
-};
-var _default = IntlTelInput;
-exports.default = _default;

package/dist/cjs/f/fields/IntlTelInput/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "IntlTelInput", {
-  enumerable: true,
-  get: function get() {
-    return _IntlTelInput.default;
-  }
-});
-
-var _IntlTelInput = _interopRequireDefault(require("./IntlTelInput"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/f/fields/IntlTelInput/styles.scss

@@ -1,37 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-@use "@pareto-engineering/bem";
-
-$default-padding: 0.75em 0.75em 0.55em;
-
-.#{bem.$base}.intl-tel-input {
-    display: flex;
-    flex-direction: column;
-
-    .input-wrapper {
-        width: 100%;
-    }
-
-    .input {
-        border: var(--theme-border-style) var(--dark-y);
-        background: var(--light-y);
-        color: var(--on-y);
-        padding: $default-padding;
-        width: 100%;
-
-        &::placeholder {
-            color: var(--metadata);
-        }
-
-        &:not(:disabled):hover {
-            border: var(--theme-border-style) var(--light-background4);
-        }
-
-        &:disabled {
-            background-color: var(--dark-y);
-        }
-
-        &:focus {
-            background: var(--light-background4);
-        }
-    }
-}

package/dist/cjs/f/fields/PhoneIntlTelInput/PhoneIntlTelInput.js

@@ -1,180 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _reactIntlTelInput = _interopRequireDefault(require("react-intl-tel-input"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-var _formik = require("formik");
-
-var _common = require("../../common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var baseClassName = _bem.default.base;
-var componentClassName = 'phone-intl-tel-input';
-/**
- * This is the component description.
- */
-
-var PhoneIntlTelInput = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    color,
-    labelColor,
-    oneInputLabel,
-    description,
-    disabled,
-    placeholder,
-    optional,
-    autoComplete,
-    validate,
-    errorMessage // ...otherProps
-
-  } = _ref;
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-    Promise.resolve().then(() => _interopRequireWildcard(require('react-intl-tel-input/dist/main.css')));
-  }, []);
-  var [field,, helpers] = (0, _formik.useField)({
-    name,
-    validate
-  });
-  var {
-    setValue
-  } = helpers;
-  var [intlInputError, setIntlInputError] = (0, React.useState)('');
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, "y-".concat(color), intlInputError && 'error'].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name,
-    color: labelColor,
-    optional: optional
-  }, label), /*#__PURE__*/React.createElement(_reactIntlTelInput.default, {
-    inputClassName: "input",
-    customContainer: "input-wrapper",
-    placeholder: placeholder,
-    disabled: disabled,
-    value: field.value,
-    fieldName: field.name,
-    onPhoneNumberChange: (isValid, value) => {
-      setValue(value);
-
-      if (value && !isValid) {
-        setIntlInputError(errorMessage);
-      } else {
-        setIntlInputError('');
-      }
-    },
-    autoComplete: autoComplete
-  }), /*#__PURE__*/React.createElement(_common.FormDescription, {
-    className: "v50 mt-v s-1",
-    description: intlInputError || description,
-    name: name
-  }));
-};
-
-PhoneIntlTelInput.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   * The input name (html - and Formik state)
-   */
-  name: _propTypes.default.string.isRequired,
-
-  /**
-   * The input label
-   */
-  label: _propTypes.default.string.isRequired,
-
-  /**
-   * The input label color
-   */
-  labelColor: _propTypes.default.string,
-
-  /**
-   * If the slide will only have one input
-   */
-  oneInputLabel: _propTypes.default.bool,
-
-  /**
-   * Input description
-   */
-  description: _propTypes.default.string,
-
-  /**
-   * Whether the text input should be disabled
-   */
-  disabled: _propTypes.default.bool,
-
-  /**
-   * The placeholder text for the input
-   */
-  placeholder: _propTypes.default.string,
-
-  /**
-   * The text input color
-   */
-  color: _propTypes.default.string,
-
-  /**
-  * Whether the input is optional or not
-  */
-  optional: _propTypes.default.bool,
-
-  /**
-   * The autoComplete value that the browser should watch for the input
-   * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
-   */
-  autoComplete: _propTypes.default.string,
-
-  /**
-   * The error message to be siplayed when the input is invalid
-   */
-  errorMessage: _propTypes.default.string,
-
-  /**
-   * The input field validator function
-   */
-  validate: _propTypes.default.func
-};
-PhoneIntlTelInput.defaultProps = {
-  color: 'background2',
-  disabled: false,
-  errorMessage: 'Please enter a valid phone number'
-};
-var _default = PhoneIntlTelInput;
-exports.default = _default;

package/dist/cjs/f/fields/PhoneIntlTelInput/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "PhoneIntlTelInput", {
-  enumerable: true,
-  get: function get() {
-    return _PhoneIntlTelInput.default;
-  }
-});
-
-var _PhoneIntlTelInput = _interopRequireDefault(require("./PhoneIntlTelInput"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/f/fields/PhoneIntlTelInput/styles.scss

@@ -1,43 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-@use "@pareto-engineering/bem";
-
-$default-padding: 0.75em 0.75em 0.55em;
-
-.#{bem.$base}.phone-intl-tel-input {
-    display: flex;
-    flex-direction: column;
-
-    &.error {
-        >.#{bem.$base}.description {
-            color: var(--error);
-        }
-    }
-
-    .input-wrapper {
-        width: 100%;
-    }
-
-    .input {
-        border: var(--theme-border-style) var(--dark-y);
-        background: var(--light-y);
-        color: var(--on-y);
-        padding: $default-padding;
-        width: 100%;
-
-        &::placeholder {
-            color: var(--metadata);
-        }
-
-        &:not(:disabled):hover {
-            border: var(--theme-border-style) var(--light-background4);
-        }
-
-        &:disabled {
-            background-color: var(--dark-y);
-        }
-
-        &:focus {
-            background: var(--light-background4);
-        }
-    }
-}

package/dist/cjs/f/fields/QuerySelect/styles.scss

@@ -1,21 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-@use "@pareto-engineering/bem";
-
-$default-loading-circle-displacement: .8em;
-
-.#{bem.$base}.query-select {
-    position: relative;
-
-
-    >.#{bem.$base}.select-input {
-        select:disabled {
-            appearance: none;
-        }
-    }
-
-    >.#{bem.$base}.loading-circle {
-        position: absolute;
-        right: $default-loading-circle-displacement;
-        bottom: $default-loading-circle-displacement;
-    }
-}