@pareto-engineering/design-system 5.2.0 → 5.3.0

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

@@ -1,6 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
+@use "sass:math";
+@use "sass:list";
 
 /*
 $hamburger-padding-x           : 15px !default;
@@ -22,17 +24,157 @@ $hamburger-hover-filter       : opacity(50%) !default;
 $hamburger-active-hover-filter: $hamburger-hover-filter !default;
 */
 
-$hamburgers-types:(
-  squeeze
-);
-$hamburger-layer-color         : var(--x);
-$hamburger-padding-x           : .5em;
-$hamburger-padding-y           : .5em;
+// Define the variables to be used with the hamburgers library
+$hamburger-types: (squeeze);
+$hamburger-layer-color: var(--x);
+$hamburger-padding-x: .5em;
+$hamburger-padding-y: .5em;
 
-// Open the following file for the template
+// Additional hamburger variables with defaults
+$hamburger-layer-width: 40px !default;
+$hamburger-layer-height: 4px !default;
+$hamburger-layer-spacing: 6px !default;
+$hamburger-layer-border-radius: 4px !default;
+$hamburger-hover-opacity: .7 !default;
+$hamburger-hover-use-filter: false !default;
+$hamburger-hover-filter: opacity(50%) !default;
+$hamburger-active-layer-color: $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+$hamburger-active-hover-filter: $hamburger-hover-filter !default;
+
+// Base Hamburger Styles
+// ==================================================
+.hamburger {
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-block;
+
+  // Normalize (<button>)
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: $hamburger-padding-y $hamburger-padding-x;
+  text-transform: none;
+  transition-duration: .15s;
+
+  transition-property: opacity, filter;
+  transition-timing-function: linear;
+
+  &:hover {
+    @if $hamburger-hover-use-filter == true {
+      filter: $hamburger-hover-filter;
+    }
+    @else {
+      opacity: $hamburger-hover-opacity;
+    }
+  }
+
+  &.is-active {
+    &:hover {
+      @if $hamburger-hover-use-filter == true {
+        filter: $hamburger-active-hover-filter;
+      }
+      @else {
+        opacity: $hamburger-active-hover-opacity;
+      }
+    }
+
+    .hamburger-inner,
+    .hamburger-inner::before,
+    .hamburger-inner::after {
+      background-color: $hamburger-active-layer-color;
+    }
+  }
+}
+
+.hamburger-box {
+  display: inline-block;
+  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+  position: relative;
+  width: $hamburger-layer-width;
+}
+
+.hamburger-inner {
+  display: block;
+  margin-top: math.div($hamburger-layer-height, -2);
+  top: 50%;
+
+  &,
+  &::before,
+  &::after {
+    background-color: $hamburger-layer-color;
+    border-radius: $hamburger-layer-border-radius;
+    height: $hamburger-layer-height;
+    position: absolute;
+    transition-duration: .15s;
+    transition-property: transform;
+    transition-timing-function: ease;
+    width: $hamburger-layer-width;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+  }
+
+  &::before {
+    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+
+  &::after {
+    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+}
+
+// Squeeze Type
+// ==================================================
+
+@if list.index($hamburger-types, squeeze) {
+  /*
+    * Squeeze
+    */
+  .hamburger-squeeze {
+    .hamburger-inner {
+      transition-duration: .1s;
+      transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+
+      &::before {
+        transition: top .1s .12s ease,
+          opacity .1s ease;
+      }
+
+      &::after {
+        transition: bottom .1s .12s ease,
+          transform .1s cubic-bezier(.55, .055, .675, .19);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        transform: rotate(45deg);
+        transition-delay: .12s;
+        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+
+        &::before {
+          opacity: 0;
+          top: 0;
+          transition: top .1s ease,
+            opacity .1s .12s ease;
+        }
 
-@import "hamburgers/_sass/hamburgers/hamburgers";
-@import "hamburgers/_sass/hamburgers/types/squeeze";
+        &::after {
+          bottom: 0;
+          transform: rotate(-90deg);
+          transition: bottom .1s ease,
+            transform .1s .12s cubic-bezier(.215, .61, .355, 1);
+        }
+      }
+    }
+  }
+}
 
 /*
 .#{bem.$base}.hamburger-button{

package/dist/cjs/a/ThroughPutIndicator/ThroughPutIndicator.js

@@ -0,0 +1,78 @@
+"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; }
+// Local Definitions
+const baseClassName = _exports.default.base;
+const componentClassName = 'throughput-indicator';
+const ThroughPutIndicator = _ref => {
+  let {
+    data,
+    keyName = 'reserved'
+  } = _ref;
+  const renderNoChange = () => /*#__PURE__*/React.createElement("div", {
+    className: [baseClassName, componentClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "no-change-text"
+  }, "No change"));
+  const renderChange = function (direction, percentage) {
+    let icon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : direction === 'positive' ? 'S' : 'R';
+    return /*#__PURE__*/React.createElement("div", {
+      className: [baseClassName, componentClassName].filter(e => e).join(' ')
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `ai-icon ${direction}-throughput-indicator`
+    }, icon), /*#__PURE__*/React.createElement("p", null, percentage, "%"));
+  };
+
+  // Handle invalid or insufficient data
+  if (!data || data.length < 2) {
+    return renderNoChange();
+  }
+  const first = data[0][keyName];
+  const last = data[data.length - 1][keyName];
+
+  // Handle no change scenarios
+  if (first === 0 && last === 0) {
+    return renderNoChange();
+  }
+
+  // Handle special case: starting from zero
+  if (first === 0 && last !== 0) {
+    return renderChange('positive', '100');
+  }
+
+  // Calculate percentage change
+  const percentChange = (last - first) / Math.abs(first) * 100;
+  const rounded = Math.abs(percentChange).toFixed(1);
+
+  // No change
+  if (percentChange === 0) {
+    return renderNoChange();
+  }
+
+  // Positive or negative change
+  const direction = percentChange > 0 ? 'positive' : 'negative';
+  const icon = direction === 'positive' ? 'S' : 'R';
+  return renderChange(direction, rounded, icon);
+};
+ThroughPutIndicator.propTypes = {
+  /**
+   * The data to be displayed in the throughput indicator
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * The key name to be displayed in the throughput indicator
+   */
+  keyName: _propTypes.default.string
+};
+var _default = exports.default = ThroughPutIndicator;

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

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

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

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-text-font-size: calc(var(--s-1) * 1rem);
+
+.#{bem.$base} {
+  .throughput-indicator {
+    align-items: center;
+    border: 1px solid var(--hard-grey);
+    border-radius: 2rem;
+    display: flex;
+    gap: .5rem;
+    height: 3rem;
+    padding: .5rem;
+
+    .positive-throughput-indicator {
+      color: var(--success);
+      font-size: 1rem;
+    }
+
+    .negative-throughput-indicator {
+      color: var(--error);
+      font-size: .75rem;
+    }
+
+    .no-change-text {
+      color: var(--paragraph);
+    }
+
+    p {
+      font-size: 1rem;
+    }
+  }
+}

package/dist/cjs/a/ToggleSwitch/ToggleSwitch.js

@@ -47,7 +47,8 @@ const ToggleSwitch = _ref => {
     checked: checked,
     onChange: handleOnChange
   }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: inputId
+    htmlFor: inputId,
+    className: checked ? 'checked' : ''
   }));
 };
 ToggleSwitch.propTypes = {

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

@@ -7,7 +7,7 @@ $default-size: var(--size, 1.2em);
 $default-slider-color: var(--slider-color, var(--background-far));
 $default-slider-border-color: var(--slider-border-color, var(--ui-lines));
 $default-background-color: var(--slider-background-color, var(--interactive));
-
+$default-background-disabled: var(--disabled, var(--background-far));
 .#{bem.$base}.toggle-switch {
   background: transparent;
   border: none;
@@ -21,7 +21,6 @@ $default-background-color: var(--slider-background-color, var(--interactive));
   }
 
   >label {
-    background: $default-background-color;
     border-radius: $default-border-radius;
     cursor: pointer;
     display: block;
@@ -29,6 +28,14 @@ $default-background-color: var(--slider-background-color, var(--interactive));
     position: relative;
     width: calc($default-size * 2);
 
+    &.checked {
+      background: $default-background-color;
+    }
+
+    &:not(.checked) {
+      background: $default-background-disabled;
+    }
+
     &::after {
       background: $default-slider-color;
       border: 1px solid $default-slider-border-color;

package/dist/cjs/a/Tooltip/Tooltip.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 require("./styles.scss");
@@ -27,12 +28,24 @@ const Tooltip = _ref => {
     className: userClassName,
     style,
     position,
+    isFloating,
     color,
     description,
     content,
     children
     // ...otherProps
   } = _ref;
+  (0, _react.useEffect)(() => {
+    const handleMouseMove = e => {
+      document.documentElement.style.setProperty('--mouse-x', `${e.clientX}px`);
+      document.documentElement.style.setProperty('--mouse-y', `${e.clientY}px`);
+    };
+    if (!isFloating) {
+      return () => window.removeEventListener('mousemove', handleMouseMove);
+    }
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, [isFloating]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
@@ -41,7 +54,7 @@ const Tooltip = _ref => {
     className: "tooltip-trigger-wrapper",
     "aria-describedby": description
   }, children), /*#__PURE__*/React.createElement("div", {
-    className: `tooltip-content ${position}`,
+    className: ['tooltip-content', position, isFloating ? 'floating' : ''].filter(e => e).join(' '),
     role: "tooltip",
     id: description
   }, content));
@@ -75,6 +88,10 @@ Tooltip.propTypes = {
    * The position of the tooltip with respect to the trigger element
    */
   position: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * Whether or not the tooltip should be floating
+   */
+  isFloating: _propTypes.default.bool,
   /**
    * The base color of the tooltip
    */

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

@@ -24,25 +24,53 @@ $default-width: var(--tooltip-width, 20rem);
     visibility: hidden;
     z-index: 10;
 
-    &.top {
+    &.floating.top {
+      left: var(--mouse-x);
+      position: fixed;
+      top: calc(var(--mouse-y) - $default-block-padding);
+      transform: translate(-50%, -100%);
+    }
+
+    &.floating.right {
+      left: calc(var(--mouse-x) + $default-inline-padding);
+      position: fixed;
+      top: var(--mouse-y);
+      transform: translateY(-50%);
+    }
+
+    &.floating.bottom {
+      left: var(--mouse-x);
+      position: fixed;
+      top: calc(var(--mouse-y) + $default-block-padding);
+      transform: translateX(-50%);
+    }
+
+    &.floating.left {
+      left: calc(var(--mouse-x) - $default-inline-padding);
+      position: fixed;
+      top: var(--mouse-y);
+      transform: translate(-100%, -50%);
+    }
+
+    &:not(.floating).top {
       --horizontal: -50%;
       bottom: calc(100% + $default-block-padding);
       left: 50%;
     }
 
-    &.right {
+    &:not(.floating).right {
       --vertical: 50%;
       bottom: 50%;
       left: calc(100% + $default-inline-padding);
     }
 
-    &.bottom {
+    &:not(.floating).bottom {
       --horizontal: -50%;
       left: 50%;
       top: calc(100% + $default-block-padding);
     }
 
-    &.left {
+    &:not(.floating).left {
       --vertical: 50%;
       bottom: 50%;
       right: calc(100% + $default-inline-padding);

package/dist/cjs/a/XMLEditor/XMLEditor.js

@@ -44,7 +44,10 @@ const XMLEditor = _ref => {
   (0, _react.useEffect)(() => {
     const startState = _state.EditorState.create({
       doc: config,
-      extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab, ..._commands.historyKeymap]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), (0, _commands.history)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
+      extensions: [_state.Prec.highest(_view.keymap.of([{
+        key: 'Enter',
+        run: view => (0, _commands.insertNewlineAndIndent)(view)
+      }])), _view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab, ..._commands.historyKeymap]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), (0, _commands.history)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
       }), _view.EditorView.focusChangeEffect.of((state, focused) => {

package/dist/cjs/a/index.js

@@ -177,6 +177,12 @@ Object.defineProperty(exports, "TextSteps", {
     return _TextSteps.TextSteps;
   }
 });
+Object.defineProperty(exports, "ThroughPutIndicator", {
+  enumerable: true,
+  get: function () {
+    return _ThroughPutIndicator.ThroughPutIndicator;
+  }
+});
 Object.defineProperty(exports, "Timestamp", {
   enumerable: true,
   get: function () {
@@ -249,4 +255,5 @@ var _ToggleSwitch = require("./ToggleSwitch");
 var _XMLEditor = require("./XMLEditor");
 var _DatePicker = require("./DatePicker");
 var _Tooltip = require("./Tooltip");
-var _Charts = require("./Charts");
+var _Charts = require("./Charts");
+var _ThroughPutIndicator = require("./ThroughPutIndicator");

package/dist/cjs/f/FormInput/FormInput.js

@@ -68,6 +68,12 @@ const FormInput = _ref => {
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'toggle') {
+    return /*#__PURE__*/React.createElement(_fields.ToggleInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (type === 'query-choices') {
     return /*#__PURE__*/React.createElement(_fields.QueryChoices, _extends({
       className: newClassName,
@@ -130,7 +136,7 @@ FormInput.propTypes = {
   /**
    * The HTML class names for this element
    */
-  type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'query-select', 'url', 'rating', 'checkbox',
+  type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'query-select', 'url', 'rating', 'checkbox', 'toggle',
   // to be removed
   'extendedTypeInput']),
   /**

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

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formik = require("formik");
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _a = require("../../../a");
+var _common = require("../../common");
+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.1.1-alpha.3 */
+
+// Local Definitions
+const baseClassName = _exports.default.base;
+const componentClassName = 'toggle-input';
+
+/**
+ * Toggle input field component that wraps ToggleSwitch for use with Formik
+ */
+const ToggleInput = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    name,
+    label,
+    color,
+    labelColor,
+    validate,
+    description,
+    disabled,
+    optional,
+    size
+    // ...otherProps
+  } = _ref;
+  const [field,, helpers] = (0, _formik.useField)({
+    name,
+    validate,
+    type: 'checkbox'
+  });
+  const handleChange = () => {
+    helpers.setValue(!field.value);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "toggle-wrapper"
+  }, /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
+    checked: Boolean(field.value),
+    handleOnChange: handleChange,
+    inputId: name,
+    size: size,
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(_common.FormDescription, {
+    className: "s-1",
+    description: description,
+    name: name
+  }));
+};
+ToggleInput.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,
+  /**
+   * Input description
+   */
+  description: _propTypes.default.string,
+  /**
+   * Whether the toggle input should be disabled
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * The text input color
+   */
+  color: _propTypes.default.string,
+  /**
+   * Whether the input is optional or not
+   */
+  optional: _propTypes.default.bool,
+  /**
+   * The size of the toggle switch
+   */
+  size: _propTypes.default.string
+};
+ToggleInput.defaultProps = {
+  color: 'paragraph',
+  disabled: false
+};
+var _default = exports.default = ToggleInput;

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

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

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

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.toggle-input {
+  display: flex;
+  flex-direction: column;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+  > .toggle-wrapper {
+    align-items: center;
+    display: flex;
+    margin-bottom: calc(var(--gap) / 2);
+  }
+}
+
+