@pareto-engineering/design-system 5.3.0 → 5.5.0

package/dist/cjs/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/cjs/a/DotInfo/DotInfo.js

@@ -1,86 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-require("./styles.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* @pareto-engineering/generator-front 1.0.12 */
-
-// Local Definitions
-
-const baseClassName = _exports.default.base;
-const componentClassName = 'dot-info';
-
-/**
- * This is the component description.
- */
-const DotInfo = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    booleanValue,
-    height,
-    colorTrue,
-    colorFalse,
-    colorEmpty
-    // ...otherProps
-  } = _ref;
-  return /*#__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.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),
-  /**
-   *  Boolean value to be converted into string
-   */
-  booleanValue: _propTypes.default.bool,
-  /**
-   * Color for true case
-   */
-  colorTrue: _propTypes.default.string,
-  /**
-   * Color for false case
-   */
-  colorFalse: _propTypes.default.string,
-  /**
-   * Color for the border when empty value
-   */
-  colorEmpty: _propTypes.default.string,
-  /**
-   * The height of the dot
-   */
-  height: _propTypes.default.string
-};
-DotInfo.defaultProps = {
-  colorTrue: 'success',
-  colorFalse: 'error',
-  colorEmpty: 'metadata',
-  height: '2em'
-  // someProp:false
-};
-var _default = exports.default = DotInfo;

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

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

package/dist/cjs/a/DotInfo/styles.scss

@@ -1,20 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-color: var(--black);
-$default-height:var(--height);
-
-.#{bem.$base}.dot-info {
-  background: var(--x);
-  border-radius: 50%;
-  color: $default-color;
-
-  height: $default-height;
-  width: $default-height;
-
-  &.empty {
-    background: transparent;
-    border: 1px solid var(--x);
-  }
-}

package/dist/cjs/a/Figure/Figure.js

@@ -1,72 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-require("./styles.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* @pareto-engineering/generator-front 1.0.12 */
-
-// Local Definitions
-
-const baseClassName = _exports.default.base;
-const componentClassName = 'photo-card';
-
-/**
- * This is the component description.
- */
-const Figure = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    src,
-    alt,
-    caption
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
-    src: src,
-    alt: alt
-  }), /*#__PURE__*/React.createElement("figcaption", null, caption || alt)));
-};
-Figure.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 source to the photo to be displayed
-   */
-  src: _propTypes.default.string,
-  /**
-   * The alternate text for the photo
-   */
-  alt: _propTypes.default.string,
-  /**
-   * The caption that will appear beneath the photo
-   */
-  caption: _propTypes.default.string
-};
-Figure.defaultProps = {
-  // someProp:false
-};
-var _default = exports.default = Figure;

package/dist/cjs/a/Figure/index.js

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

package/dist/cjs/a/Figure/styles.scss

@@ -1,19 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-border-radius:1em;
-
-.#{bem.$base}.photo-card {
-  figure {
-    img {
-      border-radius: $default-border-radius;
-      width: 100%;
-    }
-
-    figcaption {
-      color: var(--subtitle);
-      font-size: calc(var(--s-1) * 1em);
-    }
-  }
-}

package/dist/cjs/a/HamburgerButton/HamburgerButton.js

@@ -1,82 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-require("./styles.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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 */
-// Local Definitions
-
-const baseClassName = _exports.default.base;
-const componentClassName = 'hamburger-button';
-const hamburgerType = 'squeeze'; // docs : https://jonsuh.com/hamburgers/#sass
-
-/**
- * This is the component description.
- */
-const HamburgerButton = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    isOpen,
-    ariaLabel,
-    color,
-    ...otherProps
-  } = _ref;
-  return /*#__PURE__*/React.createElement("button", _extends({
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, 'hamburger', `hamburger--${hamburgerType}`, isOpen && 'is-active'].filter(e => e).join(' '),
-    style: style,
-    type: "button",
-    "aria-label": ariaLabel,
-    "aria-controls": "navigation"
-  }, otherProps), /*#__PURE__*/React.createElement("span", {
-    className: "hamburger-box"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "hamburger-inner"
-  })));
-};
-HamburgerButton.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 children JSX
-   */
-  children: _propTypes.default.node,
-  /**
-   * Whether the menu is open
-   */
-  isOpen: _propTypes.default.bool.isRequired,
-  /**
-   * The button color
-   */
-  color: _propTypes.default.string,
-  /**
-   * The accessibility label
-   */
-  ariaLabel: _propTypes.default.string
-};
-HamburgerButton.defaultProps = {
-  color: 'main1',
-  ariaLabel: 'Menu'
-};
-var _default = exports.default = HamburgerButton;

package/dist/cjs/a/HamburgerButton/index.js

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