@redocly/theme/lib/components/DatePicker/DatePicker.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePicker = void 0;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const react_date_picker_1 = require("react-date-picker");
const DatePicker = (props) => {
    return (react_1.default.createElement(DatePickerWrapper, { "data-component-name": "DatePicker/DatePicker" },
        react_1.default.createElement(react_date_picker_1.DatePicker, Object.assign({}, props))));
};
exports.DatePicker = DatePicker;
const DatePickerWrapper = styled_components_1.default.div `
  display: flex;
  flex: 1;
  button {
    color: var(--date-picker-nav-color);
  }

  .react-date-picker {
    flex: 1;
  }

  .react-calendar__tile--now {
    background: var(--date-picker-tile-bg-color);
    color: var(--date-picker-tile-color);

    &:enabled:hover,
    &:enabled:focus {
      background: var(--date-picker-tile-bg-color-hover);
      color: var(--date-picker-tile-color-hover);
    }
  }

  .react-date-picker__inputGroup__input {
    width: var(--date-picker-input-width);

    &:invalid {
      background: var(--date-picker-invalid-input-bg-color);
    }
  }

  .react-date-picker__button {
    padding: var(--date-picker-button-padding);

    svg {
      stroke: var(--date-picker-icon-stroke);
      width: var(--date-picker-icon-width);
    }

    &:enabled:hover .react-date-picker__button__icon {
      stroke: var(--date-picker-icon-stroke-hover);
    }
  }

  .react-calendar__month-view__days__day--weekend:disabled,
  .react-calendar__month-view__days__day--weekend {
    color: var(--date-picker-weekend-days-color);
  }
  .react-calendar__month-view__days__day--neighboringMonth {
    color: var(--date-picker-week-days-color);
  }
  .react-calendar__month-view__weekdays__weekday {
    color: var(--date-picker-neighboring-month-color);
  }

  .react-date-picker__wrapper {
    border: 1px solid var(--date-picker-wrapper-border-color);
    border-radius: var(--date-picker-wrapper-radius);
    padding: var(--date-picker-wrapper-padding);
  }
`;
//# sourceMappingURL=DatePicker.js.map