armtek-uikit-react 1.0.2 → 1.0.3

package/lib/cjs/Loader/Loader.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _LoaderModule = _interopRequireDefault(require("./Loader.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+const Loader = props => {
+  let width = props.size === 'large' ? 25 : props.size === 'medium' ? 23 : props.size === 'small' ? 21 : 27;
+  let height = props.size === 'large' ? 24 : props.size === 'medium' ? 22 : props.size === 'small' ? 20 : 26;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.default)(_LoaderModule.default.loader, 'material_icon'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: width,
+        height: height,
+        viewBox: `0 0 ${width} ${height}`,
+        fill: "none",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+          opacity: "0.3",
+          cx: "12.0003",
+          cy: "12",
+          r: "8.47059",
+          stroke: "#DFE2E6",
+          strokeWidth: "1.41176"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+          filter: "url(#filter0_f_1024_93554)",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M19.575 12.745C20.0016 8.47797 17.0747 4.67221 12.8076 4.24564L12.9481 2.84088C17.9909 3.34501 21.8325 7.87742 21.3283 12.9203C21.2815 13.3888 20.8734 13.7602 20.364 13.7093C19.9468 13.6676 19.5194 13.3009 19.575 12.745Z",
+            fill: "url(#paint0_radial_1024_93554)"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.0006 4.23529C7.71225 4.23529 4.23588 7.71167 4.23588 12H2.82411C2.82411 6.93198 6.93256 2.82353 12.0006 2.82353V4.23529Z",
+          fill: "url(#paint1_radial_1024_93554)"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M19.5805 12.0194C19.5805 7.73103 16.2889 4.23529 12.0006 4.23529V2.82353C17.0686 2.82353 21.3426 6.95133 21.3426 12.0194C21.3426 12.4901 20.9734 12.9004 20.4616 12.9004C20.0422 12.9004 19.5805 12.578 19.5805 12.0194Z",
+          fill: "url(#paint2_radial_1024_93554)"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("filter", {
+            id: "filter0_f_1024_93554",
+            x: "9.9841",
+            y: "0.0173481",
+            width: "14.2122",
+            height: "16.5202",
+            filterUnits: "userSpaceOnUse",
+            colorInterpolationFilters: "sRGB",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("feFlood", {
+              floodOpacity: "0",
+              result: "BackgroundImageFix"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("feBlend", {
+              mode: "normal",
+              in: "SourceGraphic",
+              in2: "BackgroundImageFix",
+              result: "shape"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("feGaussianBlur", {
+              stdDeviation: "1.41176",
+              result: "effect1_foregroundBlur_1024_93554"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("radialGradient", {
+            id: "paint0_radial_1024_93554",
+            cx: "0",
+            cy: "0",
+            r: "1",
+            gradientUnits: "userSpaceOnUse",
+            gradientTransform: "translate(20.3817 13.7111) rotate(-126.186) scale(12.6961 11.7694)",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+              offset: "0.395833",
+              stopColor: "#98A4B0"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+              offset: "1",
+              stopColor: "#98A4B0",
+              stopOpacity: "0"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("radialGradient", {
+            id: "paint1_radial_1024_93554",
+            cx: "0",
+            cy: "0",
+            r: "1",
+            gradientUnits: "userSpaceOnUse",
+            gradientTransform: "translate(20.4793 12.9004) rotate(-145.457) scale(17.1491 15.8974)",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+              offset: "0.395833",
+              stopColor: "#98A4B0"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+              offset: "1",
+              stopColor: "#98A4B0",
+              stopOpacity: "0"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("radialGradient", {
+            id: "paint2_radial_1024_93554",
+            cx: "0",
+            cy: "0",
+            r: "1",
+            gradientUnits: "userSpaceOnUse",
+            gradientTransform: "translate(20.4793 12.9004) rotate(-145.457) scale(17.1491 15.8974)",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+              offset: "0.395833",
+              stopColor: "#98A4B0"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+              offset: "1",
+              stopColor: "#98A4B0",
+              stopOpacity: "0"
+            })]
+          })]
+        })]
+      })
+    })
+  });
+};
+var _default = Loader;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/Loader/Loader.module.scss

@@ -0,0 +1,37 @@
+@import "../assets/styles";
+
+.loader{
+  -webkit-animation: rotating 2s linear infinite;
+  -moz-animation: rotating 2s linear infinite;
+  -ms-animation: rotating 2s linear infinite;
+  -o-animation: rotating 2s linear infinite;
+  animation: rotating 2s linear infinite;
+}
+@-webkit-keyframes rotating /* Safari and Chrome */ {
+  from {
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

package/lib/cjs/Logo/Logo.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+export type LogoProps = {
+    description?: string;
+    black?: boolean;
+    inverse?: boolean;
+    src?: string;
+    href?: string;
+    shape?: boolean;
+    linkProps?: HTMLAttributes<HTMLAnchorElement>;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Logo: (props: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export default Logo;

package/lib/cjs/Logo/Logo.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _LogoModule = _interopRequireDefault(require("./Logo.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+const Logo = props => {
+  let {
+    description,
+    children,
+    black,
+    shape,
+    className,
+    href,
+    src,
+    linkProps,
+    inverse,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ...restProps,
+      className: (0, _clsx.default)(_LogoModule.default.logo, {
+        [_LogoModule.default.logo_inverse]: inverse,
+        [_LogoModule.default.logo_shape]: shape
+      }, className),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "logo__inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _LogoModule.default.logo__img,
+          children: href ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+            href: href,
+            ...linkProps,
+            children: src ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: src,
+              alt: ''
+            }) : children || /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoArmtek, {
+              black: black,
+              inverse: inverse
+            })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: src ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: src,
+              alt: ''
+            }) : children || /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoArmtek, {
+              black: black,
+              inverse: inverse
+            })
+          })
+        }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _LogoModule.default.logo__description,
+          children: description
+        })]
+      })
+    })
+  });
+};
+const LogoArmtek = ({
+  black,
+  inverse
+}) => {
+  let part1Color = '#FF7F00';
+  let part2Color = inverse ? '#FFFFFF' : '#212529';
+  if (black) part1Color = part2Color;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "124",
+      height: "15",
+      viewBox: "0 0 124 15",
+      fill: "none",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M9.56897 0L0 15H6.30094L7.2884 13.2837H13.4718L13.7304 15H20.0313L16.8574 0H9.56897ZM9.38088 9.61599L12.2257 4.53762H12.2727L12.9545 9.61599H9.38088Z",
+        fill: part1Color
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M41.1677 4.18495C41.5204 2.53918 40.9091 1.10502 39.8981 0.540752C39.1693 0.141066 38.1583 0 36.4655 0H23.9812L20.8072 15H26.732L27.7194 10.3683H31.9279C33.0094 10.3683 33.2445 11.0502 33.0799 12.1552C33.0343 12.4623 32.9923 12.7357 32.9548 12.9802C32.7797 14.1202 32.701 14.6322 32.7978 15H39.2633C38.9577 14.4592 38.8166 13.848 38.9107 13.2367L39.3574 9.96865C39.522 8.67555 38.9812 7.89969 38.1583 7.66458V7.61756C39.9687 7.10031 40.8621 5.59561 41.1677 4.18495ZM34.6552 5.19592C34.4436 6.13636 33.8793 6.60658 32.7273 6.60658H28.5188L29.1066 3.78527H33.221C34.2085 3.78527 34.8903 4.04389 34.6552 5.19592Z",
+        fill: part1Color
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M53.2053 8.72257L57.5078 0H65.8307L62.6567 15H57.2727L59.5533 4.279H59.5062L54.0752 15H49.5846L48.7147 4.279H48.6677L46.3871 15H41.0031L44.2006 0H52.547L53.1348 8.72257H53.2053Z",
+        fill: part1Color
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M84.5345 0H67.6301L66.8307 3.78527H72.3088L69.9342 15H75.8589L78.2571 3.78527H83.7351L84.5345 0Z",
+        fill: part2Color
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M99.1348 9.33386L99.9107 5.68966H90.6003L91.0235 3.66771H101.039L101.839 0H85.8981L82.7006 15H98.6411L99.4169 11.3558H89.4013L89.8245 9.33386H99.1348Z",
+        fill: part2Color
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M115.216 0H123.069L115.146 5.80721L120.459 15H112.583L109.715 9.23981L107.387 10.9561L106.517 15H100.592L103.79 0H109.715L108.586 5.28997L115.216 0Z",
+        fill: part2Color
+      })]
+    })
+  });
+};
+var _default = Logo;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/Logo/Logo.module.scss

@@ -0,0 +1,29 @@
+@import "../assets/styles";
+
+.logo{
+  display: inline-block;
+}
+.logo_shape{
+  box-shadow: $box-shadow;
+  padding: calc($size-step * 2);
+  transform: skewX(-10deg);
+  & .logo__inner{
+    transform: skewX(10deg);
+  }
+}
+.logo__inner{
+
+}
+
+.logo__img{
+  font-size: 0;
+}
+.logo__description{
+  color: $color-gray-900;
+  font-size: 14px;
+  font-style: italic;
+  margin-top: 2px;
+}
+.logo_inverse .logo__description{
+  color: #fff;
+}

package/lib/cjs/Slider/RcSlider.d.ts

@@ -0,0 +1,2 @@
+import RcSlider from 'rc-slider';
+export default RcSlider;

package/lib/cjs/Slider/RcSlider.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _rcSlider = _interopRequireDefault(require("rc-slider"));
+var _default = _rcSlider.default;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/Slider/Slider.d.ts

@@ -0,0 +1,8 @@
+import '!style-loader!css-loader!./style.css';
+import { SliderProps as RcSliderProps } from 'rc-slider/lib/Slider';
+import { SizeType } from '../shared/types/theme';
+export type SliderProps = {
+    size?: Exclude<SizeType, 'extraLarge' | 'medium'>;
+} & Omit<RcSliderProps, 'size'>;
+declare const Slider: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;

package/lib/cjs/Slider/Slider.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _rcSlider = _interopRequireDefault(require("rc-slider"));
+require("!style-loader!css-loader!./style.css");
+var _HelperText = _interopRequireDefault(require("../Typography/HelperText/HelperText"));
+var _SliderModule = _interopRequireDefault(require("./Slider.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+const Slider = props => {
+  let {
+    size = 'large',
+    ...restProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_rcSlider.default, {
+        ...restProps,
+        className: '_' + size
+      }), restProps.min && restProps.max && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _SliderModule.default.slider__helperText,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HelperText.default, {
+          children: restProps.min
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HelperText.default, {
+          children: restProps.max
+        })]
+      })]
+    })
+  });
+};
+var _default = Slider;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/Slider/Slider.module.scss

@@ -0,0 +1,6 @@
+@import "../assets/styles";
+
+.slider__helperText{
+  @include flex(space-between);
+  margin-top: 8px;
+}

package/lib/cjs/Slider/style.css

@@ -0,0 +1,281 @@
+.rc-slider {
+    position: relative;
+    width: 100%;
+    height: 14px;
+    padding: 5px 0;
+    border-radius: 6px;
+    touch-action: none;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-rail {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background-color: #FFD3A6;
+    border-radius: 6px;
+}
+.rc-slider._small .rc-slider-rail{
+    height: 2px;
+}
+.rc-slider-track {
+    position: absolute;
+    height: 4px;
+    background-color: #FF7F00;
+    border-radius: 6px;
+}
+.rc-slider._small .rc-slider-track{
+    height: 2px;
+}
+.rc-slider-track-draggable {
+    z-index: 1;
+    box-sizing: content-box;
+    background-clip: content-box;
+    border-top: 5px solid rgba(0, 0, 0, 0);
+    border-bottom: 5px solid rgba(0, 0, 0, 0);
+    transform: translateY(-5px);
+}
+.rc-slider-handle {
+    position: absolute;
+    z-index: 1;
+    width: 28px;
+    height: 28px;
+    margin-top: -12px;
+    background-color: #fff;
+    border: solid 2px #FF7F00;
+    border-radius: 50%;
+    cursor: pointer;
+    cursor: -webkit-grab;
+    cursor: grab;
+    touch-action: pan-x;
+}
+.rc-slider._small .rc-slider-handle{
+    width: 20px;
+    height: 20px;
+    margin-top: -8px;
+}
+
+.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
+    border-color: #FF7F00;
+    box-shadow: 0 0 0 5px #FFD3A6;
+}
+.rc-slider-handle:focus {
+    outline: none;
+    box-shadow: none;
+}
+.rc-slider-handle:focus-visible {
+    border-color: #2db7f5;
+    box-shadow: 0 0 0 3px #96dbfa;
+}
+.rc-slider-handle-click-focused:focus {
+    border-color: #96dbfa;
+    box-shadow: unset;
+}
+.rc-slider-handle:hover {
+    border-color: #FF7F00;
+}
+.rc-slider-handle:active {
+    border-color: #57c5f7;
+    box-shadow: 0 0 5px #57c5f7;
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+.rc-slider-mark {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    font-size: 12px;
+}
+.rc-slider-mark-text {
+    position: absolute;
+    display: inline-block;
+    color: #999;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+}
+.rc-slider-mark-text-active {
+    color: #666;
+}
+.rc-slider-step {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: transparent;
+}
+.rc-slider-dot {
+    position: absolute;
+    bottom: -2px;
+    width: 8px;
+    height: 8px;
+    vertical-align: middle;
+    background-color: #fff;
+    border: 2px solid #e9e9e9;
+    border-radius: 50%;
+    cursor: pointer;
+}
+.rc-slider-dot-active {
+    border-color: #96dbfa;
+}
+.rc-slider-dot-reverse {
+    margin-right: -4px;
+}
+.rc-slider-disabled {
+    /*background-color: #e9e9e9;*/
+}
+.rc-slider-disabled .rc-slider-track {
+    background-color: #ccc;
+}
+.rc-slider-disabled .rc-slider-handle,
+.rc-slider-disabled .rc-slider-dot {
+    background-color: #D3DAE1;
+    border-color: #D3DAE1;
+    box-shadow: none;
+    cursor: not-allowed;
+}
+.rc-slider-disabled .rc-slider-mark-text,
+.rc-slider-disabled .rc-slider-dot {
+    cursor: not-allowed !important;
+}
+.rc-slider-vertical {
+    width: 14px;
+    height: 100%;
+    padding: 0 5px;
+}
+.rc-slider-vertical .rc-slider-rail {
+    width: 4px;
+    height: 100%;
+}
+.rc-slider-vertical .rc-slider-track {
+    bottom: 0;
+    left: 5px;
+    width: 4px;
+}
+.rc-slider-vertical .rc-slider-track-draggable {
+    border-top: 0;
+    border-bottom: 0;
+    border-right: 5px solid rgba(0, 0, 0, 0);
+    border-left: 5px solid rgba(0, 0, 0, 0);
+    transform: translateX(-5px);
+}
+.rc-slider-vertical .rc-slider-handle {
+    position: absolute;
+    z-index: 1;
+    margin-top: 0;
+    margin-left: -5px;
+    touch-action: pan-y;
+}
+.rc-slider-vertical .rc-slider-mark {
+    top: 0;
+    left: 18px;
+    height: 100%;
+}
+.rc-slider-vertical .rc-slider-step {
+    width: 4px;
+    height: 100%;
+}
+.rc-slider-vertical .rc-slider-dot {
+    margin-left: -2px;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+    display: block !important;
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-leave {
+    display: block !important;
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
+.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
+    animation-name: rcSliderTooltipZoomDownIn;
+    animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
+    animation-name: rcSliderTooltipZoomDownOut;
+    animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+    transform: scale(0, 0);
+    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.rc-slider-tooltip-zoom-down-leave {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+@keyframes rcSliderTooltipZoomDownIn {
+    0% {
+        transform: scale(0, 0);
+        transform-origin: 50% 100%;
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1, 1);
+        transform-origin: 50% 100%;
+    }
+}
+@keyframes rcSliderTooltipZoomDownOut {
+    0% {
+        transform: scale(1, 1);
+        transform-origin: 50% 100%;
+    }
+    100% {
+        transform: scale(0, 0);
+        transform-origin: 50% 100%;
+        opacity: 0;
+    }
+}
+.rc-slider-tooltip {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+    visibility: visible;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip-hidden {
+    display: none;
+}
+.rc-slider-tooltip-placement-top {
+    padding: 4px 0 8px 0;
+}
+.rc-slider-tooltip-inner {
+    min-width: 24px;
+    height: 24px;
+    padding: 6px 2px;
+    color: #fff;
+    font-size: 12px;
+    line-height: 1;
+    text-align: center;
+    text-decoration: none;
+    background-color: #6c6c6c;
+    border-radius: 6px;
+    box-shadow: 0 0 4px #d9d9d9;
+}
+.rc-slider-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
+    bottom: 4px;
+    left: 50%;
+    margin-left: -4px;
+    border-width: 4px 4px 0;
+    border-top-color: #6c6c6c;
+}

package/lib/cjs/Status/Status.d.ts

@@ -0,0 +1,10 @@
+import { ColorStatusType, ColorType } from '../shared/types/theme';
+import { ReactNode } from 'react';
+export type StatusProps = {
+    color?: ColorType | ColorStatusType;
+    text?: string;
+    children?: ReactNode;
+    icon?: string;
+};
+declare function Status(props: StatusProps): import("react/jsx-runtime").JSX.Element;
+export default Status;

package/lib/cjs/Status/Status.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _StatusModule = _interopRequireDefault(require("./Status.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Status(props) {
+  let {
+    color,
+    icon,
+    text,
+    children
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: (0, _clsx.default)(_StatusModule.default.status, _StatusModule.default['status_' + color]),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: _StatusModule.default.status__content,
+        children: text || children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx.default)(_StatusModule.default.status__icon, 'material_icon'),
+        children: icon
+      })]
+    })
+  });
+}
+var _default = Status;
+exports.default = _default;
+module.exports = exports.default;