@varlet/ui 1.23.4-alpha.8 → 1.23.4

package/lib/picker/Picker.js

@@ -1,446 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.render = render;
-exports.default = void 0;
-
-var _button = _interopRequireDefault(require("../button"));
-
-var _popup = _interopRequireDefault(require("../popup"));
-
-var _vue = require("vue");
-
-var _props = require("./props");
-
-var _shared = require("../utils/shared");
-
-var _elements = require("../utils/elements");
-
-var _locale = require("../locale");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var MOMENTUM_RECORD_TIME = 300;
-var MOMENTUM_ALLOW_DISTANCE = 15;
-var sid = 0;
-
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-picker__toolbar"
-};
-var _hoisted_2 = {
-  class: "var-picker__title"
-};
-var _hoisted_3 = ["onTouchstart", "onTouchmove", "onTouchend"];
-var _hoisted_4 = ["onTransitionend"];
-var _hoisted_5 = {
-  class: "var-picker__text"
-};
-
-function render(_ctx, _cache) {
-  var _component_var_button = (0, _vue.resolveComponent)("var-button");
-
-  return (0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.dynamic ? 'var-popup' : _ctx.Transition), (0, _vue.mergeProps)(_ctx.dynamic ? {
-    onOpen: _ctx.onOpen,
-    onOpened: _ctx.onOpened,
-    onClose: _ctx.onClose,
-    onClosed: _ctx.onClosed,
-    onClickOverlay: _ctx.onClickOverlay,
-    onRouteChange: _ctx.onRouteChange,
-    closeOnClickOverlay: _ctx.closeOnClickOverlay,
-    teleport: _ctx.teleport,
-    show: _ctx.show,
-    'onUpdate:show': _ctx.handlePopupUpdateShow,
-    position: 'bottom',
-    class: 'var-picker__popup'
-  } : null, {
-    "var-picker-cover": ""
-  }), {
-    default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-      class: "var-picker"
-    }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "cancel", {}, () => [(0, _vue.createVNode)(_component_var_button, {
-      class: "var-picker__cancel-button",
-      "var-picker-cover": "",
-      text: "",
-      "text-color": _ctx.cancelButtonTextColor,
-      onClick: _ctx.cancel
-    }, {
-      default: (0, _vue.withCtx)(() => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.cancelButtonText, _ctx.pack.pickerCancelButtonText)), 1
-      /* TEXT */
-      )]),
-      _: 1
-      /* STABLE */
-
-    }, 8
-    /* PROPS */
-    , ["text-color", "onClick"])]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createElementVNode)("div", _hoisted_2, (0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.pickerTitle)), 1
-    /* TEXT */
-    )]), (0, _vue.renderSlot)(_ctx.$slots, "confirm", {}, () => [(0, _vue.createVNode)(_component_var_button, {
-      class: "var-picker__confirm-button",
-      text: "",
-      "var-picker-cover": "",
-      "text-color": _ctx.confirmButtonTextColor,
-      onClick: _ctx.confirm
-    }, {
-      default: (0, _vue.withCtx)(() => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.confirmButtonText, _ctx.pack.pickerConfirmButtonText)), 1
-      /* TEXT */
-      )]),
-      _: 1
-      /* STABLE */
-
-    }, 8
-    /* PROPS */
-    , ["text-color", "onClick"])])]), (0, _vue.createElementVNode)("div", {
-      class: "var-picker__columns",
-      style: (0, _vue.normalizeStyle)({
-        height: _ctx.columnHeight + "px"
-      })
-    }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.scrollColumns, c => {
-      return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-        class: "var-picker__column",
-        key: c.id,
-        onTouchstart: $event => _ctx.handleTouchstart($event, c),
-        onTouchmove: (0, _vue.withModifiers)($event => _ctx.handleTouchmove($event, c), ["prevent"]),
-        onTouchend: $event => _ctx.handleTouchend($event, c)
-      }, [(0, _vue.createElementVNode)("div", {
-        class: "var-picker__scroller",
-        ref: el => _ctx.getScrollEl(el, c),
-        style: (0, _vue.normalizeStyle)({
-          transform: "translateY(" + c.translate + "px)",
-          transitionDuration: c.duration + "ms",
-          transitionProperty: c.duration ? 'transform' : 'none'
-        }),
-        onTransitionend: $event => _ctx.handleTransitionend(c)
-      }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(c.column.texts, t => {
-        return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-          class: "var-picker__option",
-          style: (0, _vue.normalizeStyle)({
-            height: _ctx.optionHeight + "px"
-          }),
-          key: t
-        }, [(0, _vue.createElementVNode)("div", _hoisted_5, (0, _vue.toDisplayString)(t), 1
-        /* TEXT */
-        )], 4
-        /* STYLE */
-        );
-      }), 128
-      /* KEYED_FRAGMENT */
-      ))], 44
-      /* STYLE, PROPS, HYDRATE_EVENTS */
-      , _hoisted_4)], 40
-      /* PROPS, HYDRATE_EVENTS */
-      , _hoisted_3);
-    }), 128
-    /* KEYED_FRAGMENT */
-    )), (0, _vue.createElementVNode)("div", {
-      class: "var-picker__picked",
-      style: (0, _vue.normalizeStyle)({
-        top: _ctx.center + "px",
-        height: _ctx.optionHeight + "px"
-      })
-    }, null, 4
-    /* STYLE */
-    ), (0, _vue.createElementVNode)("div", {
-      class: "var-picker__mask",
-      style: (0, _vue.normalizeStyle)({
-        backgroundSize: "100% " + (_ctx.columnHeight - _ctx.optionHeight) / 2 + "px"
-      })
-    }, null, 4
-    /* STYLE */
-    )], 4
-    /* STYLE */
-    )], 16
-    /* FULL_PROPS */
-    )]),
-    _: 3
-    /* FORWARDED */
-
-  }, 16
-  /* FULL_PROPS */
-  );
-}
-
-var _default = (0, _vue.defineComponent)({
-  render,
-  name: 'VarPicker',
-  components: {
-    VarButton: _button.default,
-    VarPopup: _popup.default
-  },
-  inheritAttrs: false,
-  props: _props.props,
-
-  setup(props) {
-    var scrollColumns = (0, _vue.ref)([]);
-    var optionHeight = (0, _vue.computed)(() => (0, _elements.toPxNum)(props.optionHeight));
-    var optionCount = (0, _vue.computed)(() => (0, _elements.toPxNum)(props.optionCount));
-    var center = (0, _vue.computed)(() => optionCount.value * optionHeight.value / 2 - optionHeight.value / 2);
-    var columnHeight = (0, _vue.computed)(() => optionCount.value * optionHeight.value);
-    var prevIndexes = [];
-
-    var getScrollEl = (el, scrollColumn) => {
-      scrollColumn.scrollEl = el;
-    };
-
-    var handlePopupUpdateShow = value => {
-      var _props$onUpdateShow;
-
-      (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, value);
-    };
-
-    var limitTranslate = scrollColumn => {
-      var START_LIMIT = optionHeight.value + center.value;
-      var END_LIMIT = center.value - scrollColumn.column.texts.length * optionHeight.value;
-
-      if (scrollColumn.translate >= START_LIMIT) {
-        scrollColumn.translate = START_LIMIT;
-      }
-
-      if (scrollColumn.translate <= END_LIMIT) {
-        scrollColumn.translate = END_LIMIT;
-      }
-    };
-
-    var boundaryIndex = (scrollColumn, index) => {
-      var {
-        length
-      } = scrollColumn.column.texts;
-      index = index >= length ? length - 1 : index;
-      index = index <= 0 ? 0 : index;
-      return index;
-    };
-
-    var getIndex = scrollColumn => {
-      var index = Math.round((center.value - scrollColumn.translate) / optionHeight.value);
-      return boundaryIndex(scrollColumn, index);
-    };
-
-    var getPicked = () => {
-      var texts = scrollColumns.value.map(scrollColumn => scrollColumn.column.texts[scrollColumn.index]);
-      var indexes = scrollColumns.value.map(scrollColumn => scrollColumn.index);
-      return {
-        texts,
-        indexes
-      };
-    };
-
-    var scrollTo = (scrollColumn, index, duration, noEmit = false) => {
-      var translate = center.value - boundaryIndex(scrollColumn, index) * optionHeight.value;
-
-      if (translate === scrollColumn.translate) {
-        scrollColumn.scrolling = false;
-        !noEmit && change(scrollColumn);
-      }
-
-      scrollColumn.translate = translate;
-      scrollColumn.duration = duration;
-    };
-
-    var momentum = (scrollColumn, distance, duration) => {
-      scrollColumn.translate += Math.abs(distance / duration) / 0.003 * (distance < 0 ? -1 : 1);
-    };
-
-    var handleTouchstart = (event, scrollColumn) => {
-      scrollColumn.touching = true;
-      scrollColumn.scrolling = false;
-      scrollColumn.duration = 0;
-      scrollColumn.translate = (0, _elements.getTranslate)(scrollColumn.scrollEl);
-    };
-
-    var handleTouchmove = (event, scrollColumn) => {
-      if (!scrollColumn.touching) {
-        return;
-      }
-
-      var {
-        clientY
-      } = event.touches[0];
-      var moveY = scrollColumn.prevY !== undefined ? clientY - scrollColumn.prevY : 0;
-      scrollColumn.prevY = clientY;
-      scrollColumn.translate += moveY;
-      limitTranslate(scrollColumn);
-      var now = performance.now();
-
-      if (now - scrollColumn.momentumTime > MOMENTUM_RECORD_TIME) {
-        scrollColumn.momentumTime = now;
-        scrollColumn.momentumPrevY = scrollColumn.translate;
-      }
-    };
-
-    var handleTouchend = (event, scrollColumn) => {
-      scrollColumn.touching = false;
-      scrollColumn.scrolling = true;
-      scrollColumn.prevY = undefined;
-      var distance = scrollColumn.translate - scrollColumn.momentumPrevY;
-      var duration = performance.now() - scrollColumn.momentumTime;
-      var shouldMomentum = Math.abs(distance) >= MOMENTUM_ALLOW_DISTANCE && duration <= MOMENTUM_RECORD_TIME;
-      shouldMomentum && momentum(scrollColumn, distance, duration);
-      scrollColumn.index = getIndex(scrollColumn);
-      scrollTo(scrollColumn, scrollColumn.index, shouldMomentum ? 1000 : 200);
-    };
-
-    var handleTransitionend = scrollColumn => {
-      scrollColumn.scrolling = false;
-      change(scrollColumn);
-    };
-
-    var normalizeNormalColumns = normalColumns => {
-      return normalColumns.map(column => {
-        var _normalColumn$initial;
-
-        var normalColumn = (0, _shared.isArray)(column) ? {
-          texts: column
-        } : column;
-        var scrollColumn = {
-          id: sid++,
-          prevY: undefined,
-          momentumPrevY: undefined,
-          touching: false,
-          translate: center.value,
-          index: (_normalColumn$initial = normalColumn.initialIndex) != null ? _normalColumn$initial : 0,
-          duration: 0,
-          momentumTime: 0,
-          column: normalColumn,
-          scrollEl: null,
-          scrolling: false
-        };
-        scrollTo(scrollColumn, scrollColumn.index, 200);
-        return scrollColumn;
-      });
-    };
-
-    var normalizeCascadeColumns = cascadeColumns => {
-      var scrollColumns = [];
-      createChildren(scrollColumns, cascadeColumns);
-      return scrollColumns;
-    };
-
-    var createChildren = (scrollColumns, children) => {
-      if ((0, _shared.isArray)(children) && children.length) {
-        var scrollColumn = {
-          id: sid++,
-          prevY: undefined,
-          momentumPrevY: undefined,
-          touching: false,
-          translate: center.value,
-          index: 0,
-          duration: 0,
-          momentumTime: 0,
-          column: {
-            texts: children.map(cascadeColumn => cascadeColumn[props.textKey])
-          },
-          columns: children,
-          scrollEl: null,
-          scrolling: false
-        };
-        scrollColumns.push(scrollColumn);
-        createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children);
-      }
-    };
-
-    var rebuildChildren = scrollColumn => {
-      scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
-      createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children);
-    };
-
-    var change = scrollColumn => {
-      var {
-        cascade,
-        onChange
-      } = props;
-      cascade && rebuildChildren(scrollColumn);
-      var hasScrolling = scrollColumns.value.some(scrollColumn => scrollColumn.scrolling);
-
-      if (hasScrolling) {
-        return;
-      }
-
-      var {
-        texts,
-        indexes
-      } = getPicked();
-      var samePicked = indexes.every((index, idx) => index === prevIndexes[idx]);
-
-      if (samePicked) {
-        return;
-      }
-
-      prevIndexes = [...indexes];
-      onChange == null ? void 0 : onChange(texts, indexes);
-    };
-
-    var stopScroll = () => {
-      if (props.cascade) {
-        var currentScrollColumn = scrollColumns.value.find(scrollColumn => scrollColumn.scrolling);
-
-        if (currentScrollColumn) {
-          currentScrollColumn.translate = (0, _elements.getTranslate)(currentScrollColumn.scrollEl);
-          currentScrollColumn.index = getIndex(currentScrollColumn);
-          scrollTo(currentScrollColumn, currentScrollColumn.index, 0, true);
-          currentScrollColumn.scrolling = false;
-          rebuildChildren(currentScrollColumn);
-        }
-      } else {
-        scrollColumns.value.forEach(scrollColumn => {
-          scrollColumn.translate = (0, _elements.getTranslate)(scrollColumn.scrollEl);
-          scrollColumn.index = getIndex(scrollColumn);
-          scrollTo(scrollColumn, scrollColumn.index, 0);
-        });
-      }
-    }; // expose
-
-
-    var confirm = () => {
-      stopScroll();
-      var {
-        texts,
-        indexes
-      } = getPicked();
-      prevIndexes = [...indexes];
-      props.onConfirm == null ? void 0 : props.onConfirm(texts, indexes);
-    }; // expose
-
-
-    var cancel = () => {
-      stopScroll();
-      var {
-        texts,
-        indexes
-      } = getPicked();
-      prevIndexes = [...indexes];
-      props.onCancel == null ? void 0 : props.onCancel(texts, indexes);
-    };
-
-    (0, _vue.watch)(() => props.columns, newValue => {
-      scrollColumns.value = props.cascade ? normalizeCascadeColumns((0, _vue.toRaw)(newValue)) : normalizeNormalColumns((0, _vue.toRaw)(newValue));
-      var {
-        indexes
-      } = getPicked();
-      prevIndexes = [...indexes];
-    }, {
-      immediate: true
-    });
-    return {
-      pack: _locale.pack,
-      optionHeight,
-      optionCount,
-      scrollColumns,
-      columnHeight,
-      center,
-      Transition: _vue.Transition,
-      getScrollEl,
-      handlePopupUpdateShow,
-      handleTouchstart,
-      handleTouchmove,
-      handleTouchend,
-      handleTransitionend,
-      confirm,
-      cancel,
-      dt: _shared.dt
-    };
-  }
-
-});
-
-exports.default = _default;

package/lib/picker/index.js

@@ -1,98 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = exports._PickerComponent = void 0;
-
-var _Picker = _interopRequireDefault(require("./Picker.js"));
-
-var _vue = require("vue");
-
-var _shared = require("../utils/shared");
-
-var _components = require("../utils/components");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var singletonOptions;
-
-function Picker(options) {
-  return new Promise(resolve => {
-    Picker.close();
-    var pickerOptions = (0, _shared.isArray)(options) ? {
-      columns: options
-    } : options;
-    var reactivePickerOptions = (0, _vue.reactive)(pickerOptions);
-    reactivePickerOptions.dynamic = true;
-    reactivePickerOptions.teleport = 'body';
-    singletonOptions = reactivePickerOptions;
-    var {
-      unmountInstance
-    } = (0, _components.mountInstance)(_Picker.default, reactivePickerOptions, {
-      onConfirm: (texts, indexes) => {
-        reactivePickerOptions.onConfirm == null ? void 0 : reactivePickerOptions.onConfirm(texts, indexes);
-        resolve({
-          state: 'confirm',
-          texts,
-          indexes
-        });
-        reactivePickerOptions.show = false;
-        singletonOptions === reactivePickerOptions && (singletonOptions = null);
-      },
-      onCancel: (texts, indexes) => {
-        reactivePickerOptions.onCancel == null ? void 0 : reactivePickerOptions.onCancel(texts, indexes);
-        resolve({
-          state: 'cancel',
-          texts,
-          indexes
-        });
-        reactivePickerOptions.show = false;
-        singletonOptions === reactivePickerOptions && (singletonOptions = null);
-      },
-      onClose: () => {
-        reactivePickerOptions.onClose == null ? void 0 : reactivePickerOptions.onClose();
-        resolve({
-          state: 'close'
-        });
-        singletonOptions === reactivePickerOptions && (singletonOptions = null);
-      },
-      onClosed: () => {
-        reactivePickerOptions.onClosed == null ? void 0 : reactivePickerOptions.onClosed();
-        unmountInstance();
-        singletonOptions === reactivePickerOptions && (singletonOptions = null);
-      },
-      onRouteChange: () => {
-        unmountInstance();
-        singletonOptions === reactivePickerOptions && (singletonOptions = null);
-      },
-      'onUpdate:show': value => {
-        reactivePickerOptions.show = value;
-      }
-    });
-    reactivePickerOptions.show = true;
-  });
-}
-
-_Picker.default.install = function (app) {
-  app.component(_Picker.default.name, _Picker.default);
-};
-
-Picker.Component = _Picker.default;
-
-Picker.install = function (app) {
-  app.component(_Picker.default.name, _Picker.default);
-};
-
-Picker.close = () => {
-  if (singletonOptions != null) {
-    var prevSingletonOptions = singletonOptions;
-    singletonOptions = null;
-    (0, _vue.nextTick)().then(() => {
-      prevSingletonOptions.show = false;
-    });
-  }
-};
-
-var _PickerComponent = _Picker.default;
-exports._PickerComponent = _PickerComponent;
-var _default = Picker;
-exports.default = _default;

package/lib/picker/picker.css

@@ -1 +0,0 @@
-:root { --picker-background: #fff; --picker-toolbar-height: 44px; --picker-confirm-button-text-color: var(--color-primary); --picker-cancel-button-text-color: #888; --picker-picked-border: 1px solid rgba(0, 0, 0, 0.12); --picker-title-font-size: 16px; --picker-toolbar-padding: 0 4px; --picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));}.var-picker { width: 100%; background: var(--picker-background); user-select: none; transition: 0.25s background-color;}.var-picker__popup[var-picker-cover] { width: 100%;}.var-picker__columns { position: relative; display: flex; width: 100%; cursor: grab;}.var-picker__column { flex: 1; overflow: hidden;}.var-picker__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.var-picker__scroller { width: 100%; transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);}.var-picker__option { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0 4px;}.var-picker__picked { position: absolute; z-index: 2; pointer-events: none; width: 100%; left: 0; border-top: var(--picker-picked-border); border-bottom: var(--picker-picked-border); transition: 0.25s border;}.var-picker__mask { position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%;}.var-picker__toolbar { display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--picker-toolbar-height); padding: var(--picker-toolbar-padding);}.var-picker__confirm-button[var-picker-cover] { color: var(--picker-confirm-button-text-color);}.var-picker__cancel-button[var-picker-cover] { color: var(--picker-cancel-button-text-color);}.var-picker__title { font-size: var(--picker-title-font-size);}

package/lib/picker/picker.less

@@ -1,103 +0,0 @@
-@picker-background: #fff;
-@picker-toolbar-height: 44px;
-@picker-confirm-button-text-color: var(--color-primary);
-@picker-cancel-button-text-color: #888;
-@picker-picked-border: 1px solid rgba(0, 0, 0, 0.12);
-@picker-title-font-size: 16px;
-@picker-toolbar-padding: 0 4px;
-@picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)),
-  linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
-
-:root {
-  --picker-background: @picker-background;
-  --picker-toolbar-height: @picker-toolbar-height;
-  --picker-confirm-button-text-color: @picker-confirm-button-text-color;
-  --picker-cancel-button-text-color: @picker-cancel-button-text-color;
-  --picker-picked-border: @picker-picked-border;
-  --picker-title-font-size: @picker-title-font-size;
-  --picker-toolbar-padding: @picker-toolbar-padding;
-  --picker-mask-background-image: @picker-mask-background-image;
-}
-
-.var-picker {
-  width: 100%;
-  background: var(--picker-background);
-  user-select: none;
-  transition: 0.25s background-color;
-
-  &__popup[var-picker-cover] {
-    width: 100%;
-  }
-
-  &__columns {
-    position: relative;
-    display: flex;
-    width: 100%;
-    cursor: grab;
-  }
-
-  &__column {
-    flex: 1;
-    overflow: hidden;
-  }
-
-  &__text {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &__scroller {
-    width: 100%;
-    transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
-  }
-
-  &__option {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    padding: 0 4px;
-  }
-
-  &__picked {
-    position: absolute;
-    z-index: 2;
-    pointer-events: none;
-    width: 100%;
-    left: 0;
-    border-top: var(--picker-picked-border);
-    border-bottom: var(--picker-picked-border);
-    transition: 0.25s border;
-  }
-
-  &__mask {
-    position: absolute;
-    pointer-events: none;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  &__toolbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    height: var(--picker-toolbar-height);
-    padding: var(--picker-toolbar-padding);
-  }
-
-  &__confirm-button[var-picker-cover] {
-    color: var(--picker-confirm-button-text-color);
-  }
-
-  &__cancel-button[var-picker-cover] {
-    color: var(--picker-cancel-button-text-color);
-  }
-
-  &__title {
-    font-size: var(--picker-title-font-size);
-  }
-}