josenanodev-react-components-library 1.0.4 → 1.0.6

package/dist/cjs/components/ScreenSteps/ScreenSteps.js

@@ -1,66 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const ScreenSteps_module_scss_1 = __importDefault(require("./ScreenSteps.module.scss"));
-const ScreenSteps = ({ steps, defaultStep = 0, onStepChange = () => { }, overrideStep, }) => {
-    const [currentStep, setCurrentStep] = (0, react_1.useState)(defaultStep);
-    const stepClassName = (index) => {
-        let className = ScreenSteps_module_scss_1.default["step"];
-        const isCompleted = index < currentStep;
-        if (isCompleted) {
-            className += ` ${ScreenSteps_module_scss_1.default["completed"]}`;
-        }
-        const isCurrent = index === currentStep;
-        if (isCurrent) {
-            className += ` ${ScreenSteps_module_scss_1.default["current"]}`;
-        }
-        return className;
-    };
-    const stepContentStyle = () => {
-        const translatePercentage = 100 / steps.length;
-        return {
-            width: `${steps.length * 100}%`,
-            transform: `translateX(-${translatePercentage * currentStep}%)`,
-        };
-    };
-    (0, react_1.useEffect)(() => {
-        const isValidStep = overrideStep !== undefined && overrideStep < steps.length && overrideStep >= 0;
-        if (isValidStep)
-            setCurrentStep(overrideStep);
-    }, [overrideStep]);
-    return (react_1.default.createElement("section", { className: ScreenSteps_module_scss_1.default["screen-steps"] },
-        react_1.default.createElement("nav", { className: ScreenSteps_module_scss_1.default["steps"] }, steps.map((step, index) => (react_1.default.createElement("div", { key: step.innerText, className: stepClassName(index), onClick: () => {
-                setCurrentStep(index);
-                onStepChange(index);
-            } }, step.innerText)))),
-        react_1.default.createElement("p", { className: ScreenSteps_module_scss_1.default["outer-text"] }, steps[currentStep].outterText),
-        react_1.default.createElement("div", { className: ScreenSteps_module_scss_1.default["frame"] },
-            react_1.default.createElement("div", { className: ScreenSteps_module_scss_1.default["steps-content"], style: stepContentStyle() }, steps.map((step) => (react_1.default.createElement("div", { key: step.innerText, className: ScreenSteps_module_scss_1.default["step-component"], style: { width: `${100 / steps.length}%` } }, step.component)))))));
-};
-exports.default = ScreenSteps;

package/dist/cjs/components/ScreenSteps/ScreenSteps.module.scss

@@ -1,68 +0,0 @@
-.screen-steps {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  .steps {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .step {
-      width: 62px;
-      height: 62px;
-      border-radius: 31px;
-      background-color: #959595;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0.2;
-      color: #000000;
-      text-align: center;
-      font-family: Arial, Helvetica, sans-serif;
-      font-size: 15px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: normal;
-      cursor: pointer;
-      transition: all 300ms ease-in-out;
-      &.completed {
-        opacity: 0.4;
-        background-color: #705a00;
-        color: #000000;
-      }
-      &.current {
-        opacity: 0.4;
-        background-color: #705a00;
-        color: #000000;
-      }
-    }
-  }
-  .outer-text {
-    color: #787878;
-    text-align: center;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    margin: 0;
-  }
-  .frame {
-    height: calc(100% - 82px);
-    width: 100%;
-    overflow: hidden;
-    .steps-content {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      transition: all 300ms ease-in-out;
-      .step-component {
-        height: 100%;
-      }
-    }
-  }
-}

package/dist/cjs/components/ScrollSnapGallery/ScrollSnapGallery.js

@@ -1,98 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const ScrollSnapGallery_module_scss_1 = __importDefault(require("./ScrollSnapGallery.module.scss"));
-//Icons
-const go_1 = require("react-icons/go");
-const bs_1 = require("react-icons/bs");
-const ScrollSnapGallery = ({ urls = [], width = "400px", height = "300px", IndicatorIcon = go_1.GoDotFill, positionIndicatorSize = Math.min(urls.length, 6), iconSize = 16, showArrows = false, frameStyle = {}, }) => {
-    const [currentSlide, setCurrentSlide] = (0, react_1.useState)(0);
-    const [minimumVisibleIndicator, setMinimumVisibleIndicator] = (0, react_1.useState)(0);
-    const [maximumVisibleIndicator, setMaximumVisibleIndicator] = (0, react_1.useState)(positionIndicatorSize - 1);
-    const [positionIndicatorXtranslateValue, setPositionIndicatorXtranslateValue] = (0, react_1.useState)(0);
-    const indicatorIconStyle = (index) => {
-        let className = ScrollSnapGallery_module_scss_1.default["indicator-icon"];
-        if (currentSlide === index) {
-            className += ` ${ScrollSnapGallery_module_scss_1.default["current"]}`;
-        }
-        const isMinimumNotFirst = minimumVisibleIndicator !== 0 && index === minimumVisibleIndicator;
-        const isMaximumNotLast = maximumVisibleIndicator !== urls.length - 1 && index === maximumVisibleIndicator;
-        if (isMinimumNotFirst || isMaximumNotLast) {
-            className += ` ${ScrollSnapGallery_module_scss_1.default["full-shrunken"]}`;
-        }
-        const isOneAfterMinimumNotSecond = minimumVisibleIndicator !== 0 && index === minimumVisibleIndicator + 1;
-        const isOneBeforeMaximumNotSecond = maximumVisibleIndicator !== urls.length - 1 &&
-            index === maximumVisibleIndicator - 1;
-        if (isOneAfterMinimumNotSecond || isOneBeforeMaximumNotSecond) {
-            className += ` ${ScrollSnapGallery_module_scss_1.default["medium-shrunken"]}`;
-        }
-        if (index < minimumVisibleIndicator || index > maximumVisibleIndicator) {
-            className += ` ${ScrollSnapGallery_module_scss_1.default["hidden"]}`;
-        }
-        return className;
-    };
-    const handleScroll = (event) => {
-        const { scrollLeft, clientWidth } = event.target;
-        const slideWidth = clientWidth;
-        const slideIndex = Math.round(scrollLeft / slideWidth);
-        setCurrentSlide(slideIndex);
-        if (slideIndex <= minimumVisibleIndicator) {
-            const minumum = Math.max(slideIndex - 1, 0);
-            const maximum = minumum + positionIndicatorSize - 1;
-            setMinimumVisibleIndicator(minumum);
-            setMaximumVisibleIndicator(maximum);
-        }
-        else if (slideIndex >= maximumVisibleIndicator) {
-            const maximum = Math.min(slideIndex + 1, urls.length - 1);
-            const minumum = maximum - positionIndicatorSize + 1;
-            setMaximumVisibleIndicator(maximum);
-            setMinimumVisibleIndicator(minumum);
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        setPositionIndicatorXtranslateValue(minimumVisibleIndicator * iconSize);
-    }, [minimumVisibleIndicator]);
-    return (react_1.default.createElement("section", { className: ScrollSnapGallery_module_scss_1.default["scroll-snap-gallery"] },
-        react_1.default.createElement("div", { className: ScrollSnapGallery_module_scss_1.default["frame"], style: Object.assign(Object.assign({}, frameStyle), { width, height }), onScroll: handleScroll }, urls.map((url, index) => {
-            return react_1.default.createElement("img", { key: url + index, src: url, alt: "gallery item" });
-        })),
-        react_1.default.createElement("div", { className: ScrollSnapGallery_module_scss_1.default["arrow-controls"] },
-            showArrows && (react_1.default.createElement(bs_1.BsArrowLeftCircle, { className: ScrollSnapGallery_module_scss_1.default["arrow"], onClick: () => {
-                    const frame = document.querySelector(`.${ScrollSnapGallery_module_scss_1.default["frame"]}`);
-                    frame.scrollLeft -= frame.clientWidth;
-                } })),
-            react_1.default.createElement("div", { className: ScrollSnapGallery_module_scss_1.default["position-indicator"], style: {
-                    transform: `translateX(calc(50% - ${positionIndicatorXtranslateValue}px - ${(iconSize * positionIndicatorSize) / 2}px))`,
-                } }, urls.map((url, index) => (react_1.default.createElement(IndicatorIcon, { key: url + index, className: indicatorIconStyle(index), style: { width: iconSize, height: iconSize } })))),
-            showArrows && (react_1.default.createElement(bs_1.BsArrowRightCircle, { className: ScrollSnapGallery_module_scss_1.default["arrow"], onClick: () => {
-                    const frame = document.querySelector(`.${ScrollSnapGallery_module_scss_1.default["frame"]}`);
-                    frame.scrollLeft += frame.clientWidth;
-                } })))));
-};
-exports.default = ScrollSnapGallery;

package/dist/cjs/components/ScrollSnapGallery/ScrollSnapGallery.module.scss

@@ -1,67 +0,0 @@
-.scroll-snap-gallery {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  .frame {
-    display: flex;
-    align-items: center;
-    scroll-snap-type: x mandatory;
-    scroll-snap-stop: always;
-    scroll-behavior: smooth;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    user-select: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    img {
-      scroll-snap-align: center;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-  .arrow-controls {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    .arrow {
-      width: 24px;
-      height: 24px;
-      fill: #959595;
-      transition: all 100ms ease-in-out;
-      z-index: 2;
-      cursor: pointer;
-      &:active {
-        fill: #0d280b;
-      }
-    }
-    .position-indicator {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      transition: all 0.3s ease-in-out;
-      .indicator-icon {
-        fill: #959595;
-        transition: all 0.3s ease-in-out;
-        &.current {
-          fill: #0d280b;
-        }
-        &.medium-shrunken {
-          transform: scale(0.75);
-        }
-        &.full-shrunken {
-          transform: scale(0.5);
-        }
-        &.hidden {
-          transform: scale(0);
-        }
-      }
-    }
-  }
-}

package/dist/cjs/components/SearchBar/SearchBar.css

@@ -1,35 +0,0 @@
-.trc-search-bar .div-search-bar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgb(185, 185, 185);
-  box-sizing: border-box;
-  margin: 2px 10px;
-  padding: 5px 0px;
-  border-radius: 6px;
-}
-
-.trc-search-bar .div-search-bar input {
-  width: 100%;
-  border: none;
-}
-
-.trc-search-bar .div-search-bar input:focus {
-  border: none;
-  outline: none;
-}
-
-.trc-search-bar .div-search-bar svg {
-  width: 36px;
-  padding: 0px 10px;
-}
-
-.trc-search-bar .div-search-bar .icono-search-bar-opciones {
-  cursor: pointer;
-  transition: all 0.5s;
-}
-
-.trc-search-bar .div-search-bar .icono-search-bar-opciones.icono-search-bar-opciones-desactivado {
-  cursor: not-allowed;
-  color: rgb(184, 184, 184);
-}

package/dist/cjs/components/SearchBar/SearchBar.js

@@ -1,54 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-require("./SearchBar.css");
-//Icons
-const bs_1 = require("react-icons/bs");
-const SearchBar = ({ actionOnEnter = () => { }, actionOnAlteringText = () => { }, actionOnEmptyText = () => { }, optionsButtonVisible, actionOnClickOptionsButton = () => { }, placeholder = "", initialValue = "", disabled = false, }) => {
-    //Estados
-    const [searchValue, setSearchValue] = (0, react_1.useState)(initialValue);
-    return (react_1.default.createElement("form", { className: "trc-search-bar", onSubmit: (e) => {
-            e.preventDefault();
-            let searchElement = e.target.elements.namedItem("search-bar-name");
-            if (searchElement !== null)
-                actionOnEnter(searchElement.value);
-        } },
-        react_1.default.createElement("div", { className: "div-search-bar" },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(bs_1.BsSearch, null)),
-            react_1.default.createElement("input", { name: "search-bar-name", type: "text", placeholder: placeholder, disabled: disabled, onChange: (e) => {
-                    setSearchValue(e.target.value);
-                    if (e.target.value)
-                        actionOnAlteringText();
-                    if (!e.target.value)
-                        actionOnEmptyText();
-                }, value: searchValue }),
-            optionsButtonVisible && (react_1.default.createElement("div", { className: disabled
-                    ? "icono-search-bar-opciones icono-search-bar-opciones-disabled"
-                    : "icono-search-bar-opciones", onClick: () => actionOnClickOptionsButton() },
-                react_1.default.createElement(bs_1.BsSliders, null))))));
-};
-exports.default = SearchBar;

package/dist/cjs/components/SearchBar/types.d.ts

@@ -1,10 +0,0 @@
-export interface SearchBarPropsType {
-  actionOnEnter?: function;
-  actionOnAlteringText?: function;
-  actionOnEmptyText?: function;
-  optionsButtonVisible: boolean;
-  actionOnClickOptionsButton?: function;
-  placeholder: string;
-  initialValue?: string;
-  disabled?: boolean;
-}

package/dist/cjs/components/SideBar/SideBar.css

@@ -1,53 +0,0 @@
-.trc-side-bar {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  z-index: 2;
-  background-color: rgb(253, 253, 253);
-  box-shadow: 0px 0px 15px 0px rgb(206 206 206);
-  transition: all 0.5s ease-in-out;
-  animation: fade-in-side-bar 1s ease-in;
-}
-
-.trc-side-bar .sidebar-close-button {
-  position: absolute;
-  top: 3px;
-  z-index: 2;
-  height: 30px;
-  width: 30px;
-  background-color: rgba(247, 247, 247, 0.7);
-  border-radius: 20px;
-  border: none;
-  outline: none;
-  transition: all 0.3s;
-  color: dimgray;
-  font-size: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.trc-side-bar .sidebar-close-button:hover {
-  color: var(--primary-color);
-  background-color: rgba(236, 236, 236, 0.7);
-}
-
-.trc-side-bar .sidebar-close-button svg.open{
-  transform: rotate(0deg);
-  transition: all 0.5s;
-}
-
-.trc-side-bar .sidebar-close-button svg.close{
-  transform: rotate(180deg);
-  transition: all 0.5s;
-}
-
-@keyframes fade-in-side-bar {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

package/dist/cjs/components/SideBar/SideBar.js

@@ -1,70 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-require("./SideBar.css");
-//Hooks
-const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
-const useResizeObserver_1 = __importDefault(require("../../hooks/useResizeObserver"));
-//Icons
-const bs_1 = require("react-icons/bs");
-/**
- * NOTE: Parent Node must have position: relative, to work correctly with the side bar
- */
-const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle = {}, }) => {
-    //Refs
-    const sideBarRef = (0, react_1.useRef)(null);
-    //Hooks
-    const [elementWidth] = (0, useResizeObserver_1.default)(sideBarRef);
-    (0, useOutsideClick_1.default)(sideBarRef, () => {
-        if (outBoundClickClosesSideBar)
-            if (closeAction) {
-                closeAction();
-            }
-            else {
-                setOpenState(false);
-            }
-    });
-    //useState
-    const [openState, setOpenState] = (0, react_1.useState)(open);
-    return (react_1.default.createElement("div", { ref: sideBarRef, className: "trc-side-bar", style: Object.assign({ [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
-                ? `calc(100% - ${elementWidth}px)`
-                : closeAction
-                    ? "100%"
-                    : `calc(100% - 30px)` }, aditionalInlineStyle) },
-        react_1.default.createElement("button", { style: side === "left" ? { right: 0 } : { left: 0 }, className: "sidebar-close-button", onClick: () => {
-                if (closeAction) {
-                    closeAction();
-                }
-                else {
-                    setOpenState(!openState);
-                }
-            } }, side === "left" ? (react_1.default.createElement(bs_1.BsChevronLeft, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" })) : (react_1.default.createElement(bs_1.BsChevronRight, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" }))),
-        children));
-};
-exports.default = SideBar;

package/dist/cjs/components/SideBar/types.d.ts

@@ -1,8 +0,0 @@
-export interface SideBarPropsType {
-  side: "left" | "right";
-  children: JSX.Element | JSX.Element[];
-  open: boolean;
-  closeAction?: Function;
-  outBoundClickClosesSideBar?: boolean;
-  aditionalInlineStyle?: React.CSSProperties;
-}

package/dist/cjs/components/Slider/Slider.css

@@ -1,55 +0,0 @@
-.trc-slider {
-  display: flex;
-  align-items: center;
-}
-
-.trc-slider.disabled{
-  opacity: 0.7;
-}
-
-.trc-slider .left-fill {
-  border: 2px solid rgb(216, 216, 216);
-  background-color: var(--secondary-color);
-}
-
-.trc-slider .right-fill {
-  border: 2px solid rgb(216, 216, 216);
-  background-color: rgb(211, 211, 211);
-}
-
-.trc-slider .sphere {
-  border-radius: 100%;
-  box-shadow: 0px 0px 20px 2px #a7a7a7;
-  background-color: rgb(255, 255, 255);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: grab;
-  z-index: 2;
-}
-
-.trc-slider .sphere p {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 600;
-  color: #757575;
-  width: 25%;
-}
-
-.trc-slider .sphere input {
-  width: 70%;
-  border: none;
-  background-color: transparent;
-  text-align: right;
-  font-size: 12px;
-  font-weight: 600;
-  color: #757575;
-}
-
-.trc-slider .sphere input::-webkit-inner-spin-button {
-  display: none;
-}
-
-.trc-slider .sphere input:focus {
-  outline: none;
-}