@pareto-engineering/design-system 5.3.0 → 5.5.0

package/dist/es/a/Conversation/styles.scss

@@ -1,86 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* stylelint-disable selector-max-compound-selectors -- Required here  */
-/* stylelint-disable max-nesting-depth -- Required here  */
-/* stylelint-disable selector-max-universal -- Required here  */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-$default-border-radius: var(--theme-default-border-radius);
-$default-padding: var(--gap);
-$default-message-max-width: calc(100% - 4 * #{$default-padding});
-$default-message-border: 1px solid var(--hard-background-cards);
-
-.#{bem.$base}.conversation {
-  background: var(--y);
-
-  > .#{bem.$base}.section {
-    display: flex;
-    flex-direction: column;
-
-    > .#{bem.$base}.message + .#{bem.$base}.message {
-      padding-top: $default-padding;
-    }
-
-    > .#{bem.$base}.message.ours + .#{bem.$base}.message.ours,
-    > .#{bem.$base}.message.theirs + .#{bem.$base}.message.theirs {
-      padding-top: calc($default-padding / 2);
-    }
-
-    > .#{bem.$base}.message {
-      align-self: flex-start;
-      max-width: $default-message-max-width;
-      position: relative;
-
-      > .sender {
-        margin: 0;
-        padding: 0 var(--gap);
-      }
-
-      > .message-content {
-        background-color: var(--x);
-        border: $default-message-border;
-        border-radius: $default-border-radius;
-        display: flex;
-        flex-direction: column;
-        padding: 0 $default-padding;
-
-        > p {
-          color: var(--on-x);
-        }
-
-        > ul {
-          padding: 0 var(--gap);
-          text-align: left;
-
-          > li {
-            color: var(--on-x);
-          }
-        }
-
-        > * {
-          &:not(:last-child) {
-            margin-bottom: 0;
-          }
-        }
-
-        > .attachment {
-          align-items: center;
-          align-self: flex-end;
-          display: flex;
-          flex-direction: row;
-          gap: calc($default-padding / 2);
-        }
-      }
-
-      &.#{bem.$base}.theirs {
-        align-self: flex-end;
-
-        > .sender {
-          text-align: end;
-        }
-      }
-    }
-  }
-}

package/dist/es/a/Conversation/useConversation.js

@@ -1,3 +0,0 @@
-import { useContext } from 'react';
-import Context from "./Context";
-export default () => useContext(Context);

package/dist/es/a/DatePicker/DatePicker.js

@@ -1,154 +0,0 @@
-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); }
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { DayPicker } from 'react-day-picker';
-import { format } from 'date-fns';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'date-picker';
-
-/**
- * This is the component description.
- */
-const DatePickerWrapper = ({
-  id,
-  className: userClassName,
-  style,
-  mode,
-  selected,
-  setSelection,
-  fromMonth,
-  toDate,
-  customFooter,
-  timeFrom,
-  setTimeFrom,
-  timeTo,
-  setTimeTo,
-  dateFormat,
-  showDebugger,
-  ...otherProps
-}) => {
-  const convertFooterText = selection => {
-    if (mode === 'single') {
-      return format(selection, dateFormat);
-    }
-    if (mode === 'multiple') {
-      return selection.map(date => format(date, dateFormat)).join(', ');
-    }
-    if (mode === 'range') {
-      return selection.from && selection.to ? `${format(selection.from, dateFormat)} - ${format(selection.to, dateFormat)}` : 'Please pick an additional day.';
-    }
-    return null;
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement(DayPicker, _extends({
-    mode: mode,
-    selected: selected,
-    onSelect: setSelection,
-    fromMonth: fromMonth,
-    toDate: toDate,
-    showOutsideDays: true,
-    footer: customFooter || /*#__PURE__*/React.createElement("div", {
-      className: "default-footer"
-    }, setTimeFrom && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-      className: "time-label s-1"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "icon"
-    }, "C"), "\xA0 Time"), /*#__PURE__*/React.createElement("div", {
-      className: `time-inputs${timeTo ? ' multiple' : ''}`
-    }, /*#__PURE__*/React.createElement("input", {
-      className: "s-1",
-      type: "time",
-      value: timeFrom,
-      onChange: e => setTimeFrom(e.target.value)
-    }), setTimeTo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: "icon s-2"
-    }, "r"), /*#__PURE__*/React.createElement("input", {
-      className: "s-1",
-      type: "time",
-      value: timeTo,
-      onChange: e => setTimeTo(e.target.value)
-    })))), /*#__PURE__*/React.createElement("p", {
-      className: "s-1 footer-text"
-    }, selected && convertFooterText(selected)))
-  }, otherProps)), showDebugger && /*#__PURE__*/React.createElement("div", {
-    className: "debugger"
-  }, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(selected, null, 2))));
-};
-DatePickerWrapper.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: PropTypes.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: PropTypes.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: PropTypes.objectOf(PropTypes.string),
-  /**
-   * The mode for this date picker.
-   */
-  mode: PropTypes.oneOf(['single', 'multiple', 'range']),
-  /**
-   * The current selection.
-   */
-  // eslint-disable-next-line react/forbid-prop-types
-  selected: PropTypes.objectOf(PropTypes.any).isRequired,
-  /**
-   * The function to update the selection.
-   */
-  setSelection: PropTypes.func.isRequired,
-  /**
-   * The earliest month to display.
-   */
-  fromMonth: PropTypes.instanceOf(Date),
-  /**
-   * The latest month to display.
-   */
-  toDate: PropTypes.instanceOf(Date),
-  /**
-   * Custom footer component.
-   */
-  customFooter: PropTypes.node,
-  /**
-   * The start time.
-   */
-  timeFrom: PropTypes.string,
-  /**
-   * The function to update the start time.
-   */
-  setTimeFrom: PropTypes.func,
-  /**
-   * The end time.
-   */
-  timeTo: PropTypes.string,
-  /**
-   * The function to update the end time.
-   */
-  setTimeTo: PropTypes.func,
-  /**
-   * The date format.
-   */
-  dateFormat: PropTypes.string,
-  /**
-   * Show the debugger.
-   */
-  showDebugger: PropTypes.bool
-};
-DatePickerWrapper.defaultProps = {
-  mode: 'single',
-  dateFormat: 'PPP',
-  showDebugger: false
-};
-export default DatePickerWrapper;

package/dist/es/a/DatePicker/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as DatePicker } from "./DatePicker";

package/dist/es/a/DatePicker/styles.scss

@@ -1,380 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* stylelint-disable max-nesting-depth -- needed here */
-/* stylelint-disable selector-class-pattern -- needed here */
-/* stylelint-disable selector-max-compound-selectors -- needed here */
-/* stylelint-disable declaration-no-important -- needed here */
-/* stylelint-disable font-weight-notation -- needed here */
-/* stylelint-disable declaration-block-no-duplicate-properties -- needed here */
-
-@use "@pareto-engineering/bem";
-
-$default-background: var(--background-far);
-$default-border: var(--theme-default-input-border);
-$default-input-border-radius: var(--theme-default-input-border-radius);
-$default-padding: .55em .75em;
-$default-spacing-size: calc(var(--gap) / 2);
-$rdp-cell-size: 40px;
-$rdp-caption-font-size: 1em;
-$rdp-accent-color: var(--hard-interactive);
-$rdp-outline: 2px solid var(--hard-interactive);
-$rdp-selected-color: var(--on-interactive);
-
-.#{bem.$base}.date-picker {
-  /* Hide elements for devices that are not screen readers */
-  .rdp-vhidden {
-    appearance: none;
-    appearance: none;
-    appearance: none;
-    background: transparent;
-    border: 0;
-    border: 0 !important;
-    box-sizing: border-box;
-    clip: rect(1px, 1px, 1px, 1px) !important;
-    height: 1px !important;
-    margin: 0;
-    overflow: hidden !important;
-    padding: 0;
-    padding: 0 !important;
-    position: absolute !important;
-    top: 0;
-    width: 1px !important;
-  }
-
-  /* Buttons */
-  .rdp-button_reset {
-    appearance: none;
-    appearance: none;
-    appearance: none;
-    background: none;
-    color: inherit;
-    cursor: default;
-    font: inherit;
-    margin: 0;
-    padding: 0;
-    position: relative;
-  }
-
-  .rdp-button_reset:focus-visible {
-    /* Make sure to reset outline only when :focus-visible is supported */
-    outline: none;
-  }
-
-  .rdp-button {
-    border: 2px solid transparent;
-  }
-
-  .rdp-button[disabled]:not(.rdp-day_selected) {
-    opacity: .25;
-  }
-
-  .rdp-button:not([disabled]) {
-    cursor: pointer;
-  }
-
-  .rdp-button:focus-visible:not([disabled]) {
-    background-color: $default-background;
-    border: $rdp-outline;
-    color: inherit;
-  }
-
-  .rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
-    background-color: $default-background;
-  }
-
-  .rdp-months {
-    display: flex;
-  }
-
-  .rdp-month {
-    margin: 0 1em;
-  }
-
-  .rdp-month:first-child {
-    margin-left: 0;
-  }
-
-  .rdp-month:last-child {
-    margin-right: 0;
-  }
-
-  .rdp-table {
-    background-color: $default-background;
-    border-collapse: collapse;
-    margin: 0;
-    max-width: calc($rdp-cell-size * 7);
-  }
-
-  .rdp-with_weeknumber .rdp-table {
-    border-collapse: collapse;
-    max-width: calc($rdp-cell-size * 8);
-  }
-
-  .rdp-caption {
-    align-items: center;
-    background-color: $default-background;
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-    text-align: left;
-  }
-
-  .rdp-multiple_months .rdp-caption {
-    display: block;
-    position: relative;
-    text-align: center;
-  }
-
-  .rdp-caption_dropdowns {
-    display: inline-flex;
-    position: relative;
-  }
-
-  .rdp-caption_label {
-    align-items: center;
-    border: 0;
-    border: 2px solid transparent;
-    color: var(--heading);
-    display: inline-flex;
-    font-family: inherit;
-    font-size: $rdp-caption-font-size;
-    font-weight: bold;
-    margin: 0;
-    padding: 0 .25em;
-    position: relative;
-    white-space: nowrap;
-    z-index: 1;
-  }
-
-  .rdp-nav {
-    white-space: nowrap;
-  }
-
-  .rdp-multiple_months .rdp-caption_start .rdp-nav {
-    left: 0;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .rdp-multiple_months .rdp-caption_end .rdp-nav {
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .rdp-nav_button {
-    align-items: center;
-    border-radius: 100%;
-    display: inline-flex;
-    height: $rdp-cell-size;
-    justify-content: center;
-    padding: .25em;
-    width: $rdp-cell-size;
-  }
-
-  /* ---------- */
-
-  /* Dropdowns  */
-
-  /* ---------- */
-
-  .rdp-dropdown_year,
-  .rdp-dropdown_month {
-    align-items: center;
-    display: inline-flex;
-    position: relative;
-  }
-
-  .rdp-dropdown {
-    appearance: none;
-    background-color: transparent;
-    border: none;
-    bottom: 0;
-    cursor: inherit;
-    font-family: inherit;
-    font-size: inherit;
-    left: 0;
-    line-height: inherit;
-    margin: 0;
-    opacity: 0;
-    padding: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 2;
-  }
-
-  .rdp-dropdown[disabled] {
-    color: unset;
-    opacity: unset;
-  }
-
-  .rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
-    background-color: $default-background;
-    border: $rdp-outline;
-    border-radius: 6px;
-  }
-
-  .rdp-dropdown_icon {
-    margin: 0 0 0 5px;
-  }
-
-  .rdp-head {
-    border: 0;
-  }
-
-  .rdp-head_row,
-  .rdp-row {
-    height: 100%;
-  }
-
-  .rdp-head_cell {
-    font-size: .75em;
-    font-weight: 700;
-    height: 100%;
-    height: $rdp-cell-size;
-    padding: 0;
-    text-align: center;
-    text-transform: uppercase;
-    vertical-align: middle;
-  }
-
-  .rdp-tbody {
-    border: 0;
-  }
-
-  .rdp-tfoot {
-    margin: .5em;
-
-    .default-footer {
-      display: flex;
-      flex-direction: column;
-
-      >.footer-text {
-        align-self: center;
-      }
-
-      >.time-label {
-        align-items: center;
-        align-self: first baseline;
-        color: var(--heading);
-        display: flex;
-        margin: 0;
-        padding: $default-spacing-size;
-      }
-
-      >.time-inputs {
-        :not(.multiple) {
-          margin-left: $default-spacing-size;
-        }
-
-        &.multiple {
-          align-items: center;
-          align-self: center;
-          display: flex;
-          gap: $default-spacing-size;
-        }
-
-        >input[type="time"] {
-          background-color: $default-background;
-          border: $default-border;
-          border-radius: $default-input-border-radius;
-          color: var(--paragraph);
-          outline: none;
-          padding: $default-padding;
-
-          &::-webkit-calendar-picker-indicator {
-            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
-            background-position: calc(100% - $default-spacing-size / 2);
-            background-repeat: no-repeat;
-            background-size: $default-spacing-size;
-          }
-        }
-      }
-    }
-  }
-
-  .rdp-cell {
-    height: 100%;
-    height: $rdp-cell-size;
-    padding: 0;
-    text-align: center;
-    width: $rdp-cell-size;
-  }
-
-  .rdp-weeknumber {
-    font-size: .75em;
-  }
-
-  .rdp-weeknumber,
-  .rdp-day {
-    align-items: center;
-    border: 2px solid transparent;
-    border-radius: 100%;
-    box-sizing: border-box;
-    display: flex;
-    height: $rdp-cell-size;
-    justify-content: center;
-    margin: 0;
-    max-width: $rdp-cell-size;
-    overflow: hidden;
-    width: $rdp-cell-size;
-  }
-
-  .rdp-day_today:not(.rdp-day_outside) {
-    font-weight: bold;
-  }
-
-  .rdp-day_selected,
-  .rdp-day_selected:focus-visible,
-  .rdp-day_selected:hover {
-    background-color: $rdp-accent-color;
-    color: $rdp-selected-color;
-    opacity: 1;
-  }
-
-  .rdp-day_outside {
-    opacity: .5;
-  }
-
-  .rdp-day_selected:focus-visible {
-    /* Since the background is the same use again the outline */
-    outline: $rdp-outline;
-    outline-offset: 2px;
-    z-index: 1;
-  }
-
-  .rdp:not([dir="rtl"]) .rdp-day_range_start:not(.rdp-day_range_end) {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  .rdp:not([dir="rtl"]) .rdp-day_range_end:not(.rdp-day_range_start) {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  .rdp[dir="rtl"] .rdp-day_range_start:not(.rdp-day_range_end) {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  .rdp[dir="rtl"] .rdp-day_range_end:not(.rdp-day_range_start) {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  .rdp-day_range_end.rdp-day_range_start {
-    border-radius: 100%;
-  }
-
-  .rdp-day_range_middle {
-    background-color: var(--interactive);
-    border-radius: 0;
-  }
-
-  .rdp-nav_icon {
-    color: var(--ui-icons);
-  }
-}

package/dist/es/a/DotInfo/DotInfo.js

@@ -1,74 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'dot-info';
-
-/**
- * This is the component description.
- */
-const DotInfo = ({
-  id,
-  className: userClassName,
-  style,
-  booleanValue,
-  height,
-  colorTrue,
-  colorFalse,
-  colorEmpty
-  // ...otherProps
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, booleanValue === false && `x-${colorFalse}`, booleanValue === true && `x-${colorTrue}`, [null, undefined].includes(booleanValue) && `empty x-${colorEmpty}`, componentClassName, userClassName].filter(e => e).join(' '),
-  style: {
-    '--height': height,
-    ...style
-  }
-});
-DotInfo.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: PropTypes.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: PropTypes.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: PropTypes.objectOf(PropTypes.string),
-  /**
-   *  Boolean value to be converted into string
-   */
-  booleanValue: PropTypes.bool,
-  /**
-   * Color for true case
-   */
-  colorTrue: PropTypes.string,
-  /**
-   * Color for false case
-   */
-  colorFalse: PropTypes.string,
-  /**
-   * Color for the border when empty value
-   */
-  colorEmpty: PropTypes.string,
-  /**
-   * The height of the dot
-   */
-  height: PropTypes.string
-};
-DotInfo.defaultProps = {
-  colorTrue: 'success',
-  colorFalse: 'error',
-  colorEmpty: 'metadata',
-  height: '2em'
-  // someProp:false
-};
-export default DotInfo;

package/dist/es/a/DotInfo/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as DotInfo } from "./DotInfo";