@bigbinary/neeto-molecules 1.1.9 → 1.1.11

package/dist/ThemeSidebar/constants.js

@@ -0,0 +1,127 @@
+import * as yup from "yup";
+export var DIRECT_UPLOAD_URL = "/api/direct_uploads";
+export var DESIGN_SCREENS = {
+  THEMES: "Themes",
+  CUSTOMIZE: "Customize",
+  LOADING: "Loading"
+};
+export var INITIAL_STATE = {
+  name: "",
+  backgroundColor: "#ffffff",
+  backgroundOverlayColor: "#000000",
+  backgroundOverlayOpacity: 0,
+  isDominantBackgroundColorEnabled: false,
+  questionColor: "#000000",
+  buttonBackgroundColor: "#2D36D4",
+  buttonTextColor: "#ffffff",
+  answerColor: "#2D36D4",
+  answerTextColor: "#ffffff",
+  logo: {},
+  buttonBorderRadius: 10,
+  isContentBackgroundEnabled: false,
+  welcomeTextAlignment: "left",
+  thankYouTextAlignment: "center",
+  questionsTextAlignment: "left",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+};
+export var THEME_VALIDATION_SCHEMA = yup.object().shape({
+  name: yup.string().required("Name is required")
+});
+export var ONE_MEGABYTE = 1048576;
+export var FIVE_MEGABYTES = 5242880;
+export var POSITION_OPTIONS = [{
+  label: "Left",
+  value: "left"
+}, {
+  label: "Right",
+  value: "right"
+}];
+export var BACKGROUND_POSITION_OPTIONS = [{
+  label: "Center",
+  value: "center"
+}, {
+  label: "Top left",
+  value: "top left"
+}, {
+  label: "Top center",
+  value: "top center"
+}, {
+  label: "Top right",
+  value: "top right"
+}, {
+  label: "Center left",
+  value: "center left"
+}, {
+  label: "Center right",
+  value: "center right"
+}, {
+  label: "Bottom left",
+  value: "bottom left"
+}, {
+  label: "Bottom right",
+  value: "bottom right"
+}, {
+  label: "Bottom center",
+  value: "bottom center"
+}];
+export var FONT_OPTIONS = [{
+  label: "System UI",
+  value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+}, {
+  label: "Cedarville Cursive",
+  value: "'Cedarville Cursive', cursive"
+}, {
+  label: "Poppins",
+  value: "Poppins, sans-serif"
+}, {
+  label: "Roboto",
+  value: "Roboto, sans-serif"
+}, {
+  label: "Open Sans",
+  value: "Open Sans, sans-serif"
+}, {
+  label: "Montserrat",
+  value: "Montserrat, sans-serif"
+}, {
+  label: "Raleway",
+  value: "Raleway, sans-serif"
+}, {
+  label: "Quicksand",
+  value: "Quicksand, sans-serif"
+}, {
+  label: "Inter",
+  value: "Inter, sans-serif"
+}, {
+  label: "Satoshi",
+  value: "Satoshi, sans-serif"
+}, {
+  label: "Chillax",
+  value: "Chillax, sans-serif"
+}, {
+  label: "Clash Display",
+  value: "Clash Display, sans-serif"
+}, {
+  label: "General Sans",
+  value: "General Sans, sans-serif"
+}, {
+  label: "Cabinet Grotesk",
+  value: "Cabinet Grotesk, sans-serif"
+}, {
+  label: "Lora",
+  value: "Lora, serif"
+}, {
+  label: "Merriweather",
+  value: "Merriweather, serif"
+}, {
+  label: "Boska",
+  value: "Boska, serif"
+}, {
+  label: "Playfair Display",
+  value: "Playfair Display, serif"
+}, {
+  label: "Roboto Slab",
+  value: "Roboto Slab, serif"
+}, {
+  label: "Dancing Script",
+  value: "Dancing Script, cursive"
+}];

package/dist/ThemeSidebar/fields/AlignmentBlock.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { Field } from "formik";
+import { CenterAlign, LeftAlign } from "@bigbinary/neeto-icons";
+import { Button, Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+var AlignmentBlock = function AlignmentBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between gap-2 py-3 first:pt-0 last:pb-0"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "style-fields-labels",
+    style: "body2"
+  }, label), /*#__PURE__*/React.createElement(Field, {
+    name: name
+  }, function (_ref2) {
+    var value = _ref2.field.value,
+      setFieldValue = _ref2.form.setFieldValue;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center gap-3"
+    }, /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "alignment-left",
+      icon: LeftAlign,
+      size: "large",
+      style: value === "left" ? "primary" : "text",
+      tooltipProps: {
+        content: t("neetoMolecules.themeSidebar.alignmentOptions.left"),
+        position: "bottom"
+      },
+      onClick: function onClick() {
+        return setFieldValue(name, "left");
+      }
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "alignment-center",
+      icon: CenterAlign,
+      size: "large",
+      style: value === "center" ? "primary" : "text",
+      tooltipProps: {
+        content: t("neetoMolecules.themeSidebar.alignmentOptions.center"),
+        position: "bottom"
+      },
+      onClick: function onClick() {
+        return setFieldValue(name, "center");
+      }
+    }));
+  }));
+};
+export default AlignmentBlock;

package/dist/ThemeSidebar/fields/Card.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Typography } from "@bigbinary/neetoui";
+var Card = function Card(_ref) {
+  var title = _ref.title,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-border-gray-300 neeto-ui-rounded-lg neeto-ui-bg-white space-y-3 border p-4"
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "edit-theme-properties",
+    lineHeight: "normal",
+    style: "h4",
+    weight: "semibold"
+  }, title)), children && /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4"
+  }, children));
+};
+export default Card;

package/dist/ThemeSidebar/fields/ColorBlock.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { ColorPicker, Typography } from "@bigbinary/neetoui";
+var ColorBlock = function ColorBlock(_ref) {
+  var label = _ref.label,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#FFFFFF" : _ref$color,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "style-fields-labels",
+    style: "body2"
+  }, label), /*#__PURE__*/React.createElement(ColorPicker, {
+    showEyeDropper: true,
+    color: color,
+    onChange: onChange
+  }));
+};
+export default ColorBlock;

package/dist/ThemeSidebar/fields/FontPickerBlock.js

@@ -0,0 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from "react";
+import { Typography, Select } from "@bigbinary/neetoui";
+var FontPickerBlock = function FontPickerBlock(_ref) {
+  var label = _ref.label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    value = _ref.value,
+    options = _ref.options,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "style-fields-labels",
+    style: "body2"
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "w-40"
+  }, /*#__PURE__*/React.createElement(Select, {
+    options: options,
+    placeholder: placeholder,
+    value: value,
+    styles: {
+      option: function option(styles, _ref2) {
+        var data = _ref2.data;
+        return _objectSpread(_objectSpread({}, styles), {}, {
+          fontFamily: data.value
+        });
+      }
+    },
+    onChange: onChange
+  })));
+};
+export default FontPickerBlock;

package/dist/ThemeSidebar/fields/ImageBlock/ImageUploader.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import classnames from "classnames";
+import { ImageUpload } from "@bigbinary/neeto-icons";
+import { Typography } from "@bigbinary/neetoui";
+import { Trans, useTranslation } from "react-i18next";
+import ProgressBar from "./ProgressBar";
+import { FIVE_MEGABYTES } from "../../constants";
+import useDropzoneWithValidation from "../../hooks/useDirectUploadDropzone";
+var ImageUploader = function ImageUploader(_ref) {
+  var onChange = _ref.onChange,
+    name = _ref.name,
+    _ref$isDominantColorE = _ref.isDominantColorEnabled,
+    isDominantColorEnabled = _ref$isDominantColorE === void 0 ? false : _ref$isDominantColorE;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDropzoneWithValid = useDropzoneWithValidation({
+      maxSize: FIVE_MEGABYTES,
+      acceptedTypes: "image/*",
+      handleAcceptedFile: onChange,
+      isDominantColorEnabled: isDominantColorEnabled
+    }),
+    getInputProps = _useDropzoneWithValid.getInputProps,
+    getRootProps = _useDropzoneWithValid.getRootProps,
+    isDragActive = _useDropzoneWithValid.isDragActive,
+    uploadProgress = _useDropzoneWithValid.uploadProgress;
+  var shouldShowProgress = !!(uploadProgress && uploadProgress !== 1);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "space-y-2"
+  }, /*#__PURE__*/React.createElement("div", _extends({}, getRootProps(), {
+    "data-cy": "image-browse-button",
+    className: classnames("neeto-ui-border-primary-600 hover:neeto-ui-bg-gray-100 neeto-ui-rounded-lg flex cursor-pointer flex-col items-center justify-center gap-3 border border-dashed p-5 px-4 transition-all duration-300 ease-in-out", {
+      "neeto-ui-border-gray-300": !isDragActive,
+      "neeto-ui-border-gray-700": isDragActive
+    })
+  }), shouldShowProgress ? /*#__PURE__*/React.createElement("div", {
+    className: "flex h-24 w-full items-center"
+  }, /*#__PURE__*/React.createElement(ProgressBar, {
+    progressPercentage: uploadProgress * 100,
+    progressValue: "".concat(uploadProgress, "%")
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageUpload, {
+    className: "neeto-ui-text-primary-500",
+    size: 24
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col space-y-1"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 text-center leading-4",
+    style: "body2"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "neetoMolecules.themeSidebar.editTheme.imageUpload",
+    components: {
+      span: /*#__PURE__*/React.createElement("span", {
+        className: "neeto-ui-text-primary-500"
+      })
+    }
+  })), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
+    name: name
+  })), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700 text-center",
+    "data-cy": "supported-files-text",
+    lineHeight: "snug",
+    style: "nano"
+  }, t("neetoMolecules.themeSidebar.fileRequirements", {
+    maxSize: FIVE_MEGABYTES
+  }))))));
+};
+export default ImageUploader;

package/dist/ThemeSidebar/fields/ImageBlock/ProgressBar.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { motion } from "framer-motion";
+var ProgressBar = function ProgressBar(_ref) {
+  var progressPercentage = _ref.progressPercentage,
+    progressValue = _ref.progressValue;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-200 neeto-ui-rounded-full w-full overflow-hidden"
+  }, /*#__PURE__*/React.createElement(motion.div, {
+    animate: {
+      width: "".concat(progressPercentage, "%")
+    },
+    className: "neeto-ui-bg-primary-600 neeto-ui-text-primary-100 text-2xs neeto-ui-rounded-full flex h-3 animate-pulse items-center justify-center font-medium leading-none",
+    initial: {
+      width: 0
+    },
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut"
+    }
+  }, progressValue));
+};
+export default ProgressBar;

package/dist/ThemeSidebar/fields/ImageBlock/index.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Button, Typography } from "@bigbinary/neetoui";
+import ImageUploader from "./ImageUploader";
+var ImageBlock = function ImageBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name,
+    _ref$imageData = _ref.imageData,
+    imageData = _ref$imageData === void 0 ? {} : _ref$imageData,
+    _onChange = _ref.onChange;
+  var url = imageData.url,
+    size = imageData.size;
+  var fileName = imageData.name;
+  if (url && !fileName) {
+    var urlParts = url.split("/");
+    fileName = urlParts[urlParts.length - 1];
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "space-y-3 py-3 first:pt-0 last:pb-0"
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "style-fields-labels",
+    style: "body2"
+  }, label)), url ? /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between gap-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex min-w-0 flex-grow items-center gap-2"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "h-10 w-10 object-cover",
+    src: url
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex min-w-0 flex-grow flex-col gap-1"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700 break-words",
+    style: "nano"
+  }, fileName), size ? /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-500",
+    style: "nano"
+  }, size / 1000, "KB") : null)), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-1"
+  }, /*#__PURE__*/React.createElement(Button, {
+    label: "Remove",
+    size: "small",
+    style: "danger-text",
+    onClick: function onClick() {
+      return _onChange(name, {}, "");
+    }
+  }))) : /*#__PURE__*/React.createElement(ImageUploader, {
+    isDominantColorEnabled: true,
+    onChange: function onChange(value) {
+      return _onChange(name, value, "url(".concat(value.url, ")"));
+    }
+  }));
+};
+export default ImageBlock;

package/dist/ThemeSidebar/fields/SelectBlock.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Typography, Select } from "@bigbinary/neetoui";
+var SelectBlock = function SelectBlock(_ref) {
+  var label = _ref.label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    value = _ref.value,
+    options = _ref.options,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "logo-field-labels",
+    style: "body2"
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "w-40"
+  }, /*#__PURE__*/React.createElement(Select, {
+    options: options,
+    placeholder: placeholder,
+    value: value,
+    onChange: onChange
+  })));
+};
+export default SelectBlock;

package/dist/ThemeSidebar/fields/SliderBlock.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Slider } from "antd";
+import { noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { Typography } from "@bigbinary/neetoui";
+import "./slider.scss";
+var SliderBlock = function SliderBlock(_ref) {
+  var label = _ref.label,
+    onChange = _ref.onChange,
+    defaultValue = _ref.defaultValue,
+    min = _ref.min,
+    max = _ref.max,
+    marks = _ref.marks;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between gap-3 py-3 first:pt-0 last:pb-0"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "style-fields-labels",
+    style: "body2"
+  }, label), /*#__PURE__*/React.createElement(Slider, {
+    className: "my-2 w-20",
+    defaultValue: defaultValue,
+    marks: marks,
+    max: max,
+    min: min,
+    onChange: onChange,
+    tooltip: {
+      formatter: noop
+    }
+  }));
+};
+export default SliderBlock;

package/dist/ThemeSidebar/fields/SwitchBlock.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Typography } from "@bigbinary/neetoui";
+import { Switch } from "@bigbinary/neetoui/formik";
+var SwitchBlock = function SwitchBlock(_ref) {
+  var label = _ref.label,
+    name = _ref.name;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-cy": "style-fields-labels",
+    style: "body2"
+  }, label), /*#__PURE__*/React.createElement(Switch, {
+    "data-cy": "enable-background-color-toggle",
+    name: name
+  }));
+};
+export default SwitchBlock;

package/dist/ThemeSidebar/fields/TextBlock.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Input } from "@bigbinary/neetoui/formik";
+var TextBlock = function TextBlock(_ref) {
+  var name = _ref.name,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
+  return /*#__PURE__*/React.createElement(Input, {
+    autoFocus: autoFocus,
+    "data-cy": "text-block-input",
+    name: name
+  });
+};
+export default TextBlock;

package/dist/ThemeSidebar/fields/slider.scss

@@ -0,0 +1,199 @@
+.ant-slider {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: "tnum";
+  position: relative;
+  height: 12px;
+  margin: 10px 6px 10px;
+  padding: 4px 0;
+  cursor: pointer;
+  touch-action: none;
+}
+.ant-slider-vertical {
+  width: 12px;
+  height: 100%;
+  margin: 6px 10px;
+  padding: 0 4px;
+}
+.ant-slider-vertical .ant-slider-rail {
+  width: 4px;
+  height: 100%;
+}
+.ant-slider-vertical .ant-slider-track {
+  width: 4px;
+}
+.ant-slider-vertical .ant-slider-handle {
+  margin-top: -6px;
+  margin-left: -5px;
+}
+.ant-slider-vertical .ant-slider-mark {
+  top: 0;
+  left: 12px;
+  width: 18px;
+  height: 100%;
+}
+.ant-slider-vertical .ant-slider-mark-text {
+  left: 4px;
+  white-space: nowrap;
+}
+.ant-slider-vertical .ant-slider-step {
+  width: 4px;
+  height: 100%;
+}
+.ant-slider-vertical .ant-slider-dot {
+  top: auto;
+  margin-left: -2px;
+}
+.ant-slider-tooltip .ant-tooltip-inner {
+  min-width: unset;
+}
+.ant-slider-rtl.ant-slider-vertical .ant-slider-handle {
+  margin-right: -5px;
+  margin-left: 0;
+}
+.ant-slider-rtl.ant-slider-vertical .ant-slider-mark {
+  right: 12px;
+  left: auto;
+}
+.ant-slider-rtl.ant-slider-vertical .ant-slider-mark-text {
+  right: 4px;
+  left: auto;
+}
+.ant-slider-rtl.ant-slider-vertical .ant-slider-dot {
+  right: 2px;
+  left: auto;
+}
+.ant-slider-with-marks {
+  margin-bottom: 28px;
+}
+.ant-slider-rail {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background-color: #f5f5f5;
+  border-radius: 2px;
+  transition: background-color 0.3s;
+}
+.ant-slider-track {
+  position: absolute;
+  height: 4px;
+  background-color: #91d5ff;
+  border-radius: 2px;
+  transition: background-color 0.3s;
+}
+.ant-slider-handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  background-color: #fff;
+  border: solid 2px #91d5ff;
+  border-radius: 50%;
+  box-shadow: 0;
+  cursor: pointer;
+  transition: border-color 0.3s, box-shadow 0.6s,
+    transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+}
+.ant-slider-handle-dragging {
+  z-index: 1;
+}
+.ant-slider-handle:focus {
+  border-color: #46a6ff;
+  outline: none;
+  box-shadow: 0 0 0 5px rgba(24, 144, 255, 0.12);
+}
+.ant-slider-handle.ant-tooltip-open {
+  border-color: #1890ff;
+}
+.ant-slider-handle::after {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  bottom: -6px;
+  left: -6px;
+  content: "";
+}
+.ant-slider:hover .ant-slider-rail {
+  background-color: #e1e1e1;
+}
+.ant-slider:hover .ant-slider-track {
+  background-color: #69c0ff;
+}
+.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
+  border-color: #69c0ff;
+}
+.ant-slider-mark {
+  position: absolute;
+  top: 14px;
+  left: 0;
+  width: 100%;
+  font-size: 14px;
+}
+.ant-slider-mark-text {
+  position: absolute;
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.45);
+  text-align: center;
+  word-break: keep-all;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ant-slider-mark-text-active {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-slider-step {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background: transparent;
+  pointer-events: none;
+}
+.ant-slider-dot {
+  position: absolute;
+  top: -2px;
+  width: 8px;
+  height: 8px;
+  background-color: #fff;
+  border: 2px solid #f0f0f0;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.ant-slider-dot-active {
+  border-color: #8cc8ff;
+}
+.ant-slider-disabled {
+  cursor: not-allowed;
+}
+.ant-slider-disabled .ant-slider-rail {
+  background-color: #f5f5f5 !important;
+}
+.ant-slider-disabled .ant-slider-track {
+  background-color: rgba(0, 0, 0, 0.25) !important;
+}
+.ant-slider-disabled .ant-slider-handle,
+.ant-slider-disabled .ant-slider-dot {
+  background-color: #fff;
+  border-color: rgba(0, 0, 0, 0.25) !important;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.ant-slider-disabled .ant-slider-mark-text,
+.ant-slider-disabled .ant-slider-dot {
+  cursor: not-allowed !important;
+}
+.ant-slider-rtl {
+  direction: rtl;
+}
+.ant-slider-rtl .ant-slider-mark {
+  right: 0;
+  left: auto;
+}