@salutejs/plasma-new-hope 0.339.1-canary.2315.19231744336.0 → 0.340.0-canary.2254.19231200304.0

package/cjs/index.js

@@ -17,6 +17,7 @@ var applyRoundness = require('./mixins/applyRoundness.js');
 var applySkeletonGradient = require('./mixins/applySkeletonGradient.js');
 var applyHidden = require('./mixins/applyHidden.js');
 var createApplyPaperMixin = require('./mixins/createApplyPaperMixin.js');
+var addScrollbar = require('./mixins/addScrollbar.js');
 var common = require('./engines/common.js');
 var useUniqId = require('./hooks/useUniqId.js');
 var useFocusTrap = require('./hooks/useFocusTrap.js');
@@ -350,6 +351,7 @@ exports.applySkeletonGradient = applySkeletonGradient.applySkeletonGradient;
 exports.getSkeletonColor = applySkeletonGradient.getSkeletonColor;
 exports.applyHidden = applyHidden.applyHidden;
 exports.createApplyPaperMixin = createApplyPaperMixin.createApplyPaperMixin;
+exports.addScrollbar = addScrollbar.addScrollbar;
 exports.component = common.component;
 exports.mergeConfig = common.mergeConfig;
 exports.useUniqId = useUniqId.useUniqId;

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/mixins/addScrollbar.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var addScrollbar = function addScrollbar(args) {
+  var scrollWidth = args.scrollWidth,
+    trackColor = args.trackColor,
+    thumbColor = args.thumbColor;
+  return "\n        &::-webkit-scrollbar {\n            width: ".concat(scrollWidth, ";\n            height: ").concat(scrollWidth, ";\n        }\n\n        &::-webkit-scrollbar-track {\n            border-radius: ").concat(scrollWidth, ";\n\n            background-color: ").concat(trackColor, ";\n        }\n\n        &::-webkit-scrollbar-thumb {\n            border-radius: ").concat(scrollWidth, ";\n            background-color: ").concat(thumbColor, ";\n\n            transition: background-color 0.2s ease;\n\n            &:hover {\n                background-color: ").concat(thumbColor, ";\n            }\n\n            &:active {\n                background-color: ").concat(thumbColor, ";\n            }\n        }\n    ");
+};
+
+exports.addScrollbar = addScrollbar;
+//# sourceMappingURL=addScrollbar.js.map

package/cjs/mixins/addScrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addScrollbar.js","sources":["../../src/mixins/addScrollbar.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport type ScrollbarProps = {\n    /**\n     * Ширина полосы прокрутки\n     */\n    scrollWidth?: CSSProperties['width'];\n    /**\n     * Цвет track\n     */\n    trackColor?: string;\n    /**\n     * Цвет тумблера прокрутки\n     */\n    thumbColor?: string;\n};\n\nexport const addScrollbar = (args: ScrollbarProps) => {\n    const { scrollWidth, trackColor, thumbColor } = args;\n\n    return `\n        &::-webkit-scrollbar {\n            width: ${scrollWidth};\n            height: ${scrollWidth};\n        }\n\n        &::-webkit-scrollbar-track {\n            border-radius: ${scrollWidth};\n\n            background-color: ${trackColor};\n        }\n\n        &::-webkit-scrollbar-thumb {\n            border-radius: ${scrollWidth};\n            background-color: ${thumbColor};\n\n            transition: background-color 0.2s ease;\n\n            &:hover {\n                background-color: ${thumbColor};\n            }\n\n            &:active {\n                background-color: ${thumbColor};\n            }\n        }\n    `;\n};\n"],"names":["addScrollbar","args","scrollWidth","trackColor","thumbColor","concat"],"mappings":";;;;IAiBaA,YAAY,GAAG,SAAfA,YAAYA,CAAIC,IAAoB,EAAK;AAClD,EAAA,IAAQC,WAAW,GAA6BD,IAAI,CAA5CC,WAAW;IAAEC,UAAU,GAAiBF,IAAI,CAA/BE,UAAU;IAAEC,UAAU,GAAKH,IAAI,CAAnBG,UAAU,CAAA;AAE3C,EAAA,OAAA,uDAAA,CAAAC,MAAA,CAEiBH,WAAW,EAAA,yBAAA,CAAA,CAAAG,MAAA,CACVH,WAAW,EAAA,mFAAA,CAAA,CAAAG,MAAA,CAIJH,WAAW,EAAA,qCAAA,CAAA,CAAAG,MAAA,CAERF,UAAU,EAAAE,mFAAAA,CAAAA,CAAAA,MAAA,CAIbH,WAAW,EAAAG,mCAAAA,CAAAA,CAAAA,MAAA,CACRD,UAAU,EAAAC,uHAAAA,CAAAA,CAAAA,MAAA,CAKND,UAAU,EAAAC,gFAAAA,CAAAA,CAAAA,MAAA,CAIVD,UAAU,EAAA,mCAAA,CAAA,CAAA;AAI9C;;;;"}

package/emotion/cjs/examples/components/Combobox/Combobox.js

@@ -1 +1,16 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Combobox", {
+    enumerable: true,
+    get: function() {
+        return Combobox;
+    }
+});
+var _engines = require("../../../engines");
+var _ = require("../../..");
+var _Comboboxconfig = require("./Combobox.config");
+var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
+var ComboboxComponent = (0, _engines.component)(mergedConfig);
+var Combobox = ComboboxComponent;

package/emotion/cjs/examples/components/Scrollbar/Scrollbar.config.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+var config = {
+    view: {
+        default: {
+            trackColor: 'var(--surface-transparent-primary)',
+            thumbColor: 'var(--surface-transparent-tertiary)'
+        }
+    },
+    size: {
+        s: {
+            scrollWidth: '0.125rem'
+        },
+        m: {
+            scrollWidth: '0.25rem'
+        }
+    }
+};

package/emotion/cjs/examples/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "addScrollbar", {
+    enumerable: true,
+    get: function() {
+        return addScrollbar;
+    }
+});
+var _mixins = require("../../../mixins");
+var _Scrollbarconfig = require("./Scrollbar.config");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+var addScrollbar = function(size) {
+    return (0, _mixins.addScrollbar)(_object_spread({}, _Scrollbarconfig.config.size[size], _Scrollbarconfig.config.view.default));
+};

package/emotion/cjs/mixins/addScrollbar.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "addScrollbar", {
+    enumerable: true,
+    get: function() {
+        return addScrollbar;
+    }
+});
+var addScrollbar = function(args) {
+    var scrollWidth = args.scrollWidth, trackColor = args.trackColor, thumbColor = args.thumbColor;
+    return "\n        &::-webkit-scrollbar {\n            width: ".concat(scrollWidth, ";\n            height: ").concat(scrollWidth, ";\n        }\n\n        &::-webkit-scrollbar-track {\n            border-radius: ").concat(scrollWidth, ";\n\n            background-color: ").concat(trackColor, ";\n        }\n\n        &::-webkit-scrollbar-thumb {\n            border-radius: ").concat(scrollWidth, ";\n            background-color: ").concat(thumbColor, ";\n\n            transition: background-color 0.2s ease;\n\n            &:hover {\n                background-color: ").concat(thumbColor, ";\n            }\n\n            &:active {\n                background-color: ").concat(thumbColor, ";\n            }\n        }\n    ");
+};

package/emotion/cjs/mixins/index.js

@@ -14,6 +14,7 @@ _export_star(require("./applyRoundness"), exports);
 _export_star(require("./applySkeletonGradient"), exports);
 _export_star(require("./applyHidden"), exports);
 _export_star(require("./createApplyPaperMixin"), exports);
+_export_star(require("./addScrollbar"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/emotion/es/examples/components/Scrollbar/Scrollbar.config.js

@@ -0,0 +1,16 @@
+export var config = {
+    view: {
+        default: {
+            trackColor: 'var(--surface-transparent-primary)',
+            thumbColor: 'var(--surface-transparent-tertiary)'
+        }
+    },
+    size: {
+        s: {
+            scrollWidth: '0.125rem'
+        },
+        m: {
+            scrollWidth: '0.25rem'
+        }
+    }
+};

package/emotion/es/examples/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,33 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { addScrollbar as mixin } from "../../../mixins";
+import { config } from "./Scrollbar.config";
+export var addScrollbar = function(size) {
+    return mixin(_object_spread({}, config.size[size], config.view.default));
+};

package/emotion/es/mixins/addScrollbar.js

@@ -0,0 +1,4 @@
+export var addScrollbar = function(args) {
+    var scrollWidth = args.scrollWidth, trackColor = args.trackColor, thumbColor = args.thumbColor;
+    return "\n        &::-webkit-scrollbar {\n            width: ".concat(scrollWidth, ";\n            height: ").concat(scrollWidth, ";\n        }\n\n        &::-webkit-scrollbar-track {\n            border-radius: ").concat(scrollWidth, ";\n\n            background-color: ").concat(trackColor, ";\n        }\n\n        &::-webkit-scrollbar-thumb {\n            border-radius: ").concat(scrollWidth, ";\n            background-color: ").concat(thumbColor, ";\n\n            transition: background-color 0.2s ease;\n\n            &:hover {\n                background-color: ").concat(thumbColor, ";\n            }\n\n            &:active {\n                background-color: ").concat(thumbColor, ";\n            }\n        }\n    ");
+};

package/emotion/es/mixins/index.js

@@ -10,3 +10,4 @@ export * from "./applyRoundness";
 export * from "./applySkeletonGradient";
 export * from "./applyHidden";
 export * from "./createApplyPaperMixin";
+export * from "./addScrollbar";

package/es/index.js

@@ -13,6 +13,7 @@ export { applyRoundness, getRoundness, radiuses } from './mixins/applyRoundness.
 export { applySkeletonGradient, getSkeletonColor } from './mixins/applySkeletonGradient.js';
 export { applyHidden } from './mixins/applyHidden.js';
 export { createApplyPaperMixin } from './mixins/createApplyPaperMixin.js';
+export { addScrollbar } from './mixins/addScrollbar.js';
 export { component, mergeConfig } from './engines/common.js';
 export { useUniqId } from './hooks/useUniqId.js';
 export { useFocusTrap } from './hooks/useFocusTrap.js';

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/mixins/addScrollbar.js

@@ -0,0 +1,9 @@
+var addScrollbar = function addScrollbar(args) {
+  var scrollWidth = args.scrollWidth,
+    trackColor = args.trackColor,
+    thumbColor = args.thumbColor;
+  return "\n        &::-webkit-scrollbar {\n            width: ".concat(scrollWidth, ";\n            height: ").concat(scrollWidth, ";\n        }\n\n        &::-webkit-scrollbar-track {\n            border-radius: ").concat(scrollWidth, ";\n\n            background-color: ").concat(trackColor, ";\n        }\n\n        &::-webkit-scrollbar-thumb {\n            border-radius: ").concat(scrollWidth, ";\n            background-color: ").concat(thumbColor, ";\n\n            transition: background-color 0.2s ease;\n\n            &:hover {\n                background-color: ").concat(thumbColor, ";\n            }\n\n            &:active {\n                background-color: ").concat(thumbColor, ";\n            }\n        }\n    ");
+};
+
+export { addScrollbar };
+//# sourceMappingURL=addScrollbar.js.map

package/es/mixins/addScrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addScrollbar.js","sources":["../../src/mixins/addScrollbar.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport type ScrollbarProps = {\n    /**\n     * Ширина полосы прокрутки\n     */\n    scrollWidth?: CSSProperties['width'];\n    /**\n     * Цвет track\n     */\n    trackColor?: string;\n    /**\n     * Цвет тумблера прокрутки\n     */\n    thumbColor?: string;\n};\n\nexport const addScrollbar = (args: ScrollbarProps) => {\n    const { scrollWidth, trackColor, thumbColor } = args;\n\n    return `\n        &::-webkit-scrollbar {\n            width: ${scrollWidth};\n            height: ${scrollWidth};\n        }\n\n        &::-webkit-scrollbar-track {\n            border-radius: ${scrollWidth};\n\n            background-color: ${trackColor};\n        }\n\n        &::-webkit-scrollbar-thumb {\n            border-radius: ${scrollWidth};\n            background-color: ${thumbColor};\n\n            transition: background-color 0.2s ease;\n\n            &:hover {\n                background-color: ${thumbColor};\n            }\n\n            &:active {\n                background-color: ${thumbColor};\n            }\n        }\n    `;\n};\n"],"names":["addScrollbar","args","scrollWidth","trackColor","thumbColor","concat"],"mappings":"IAiBaA,YAAY,GAAG,SAAfA,YAAYA,CAAIC,IAAoB,EAAK;AAClD,EAAA,IAAQC,WAAW,GAA6BD,IAAI,CAA5CC,WAAW;IAAEC,UAAU,GAAiBF,IAAI,CAA/BE,UAAU;IAAEC,UAAU,GAAKH,IAAI,CAAnBG,UAAU,CAAA;AAE3C,EAAA,OAAA,uDAAA,CAAAC,MAAA,CAEiBH,WAAW,EAAA,yBAAA,CAAA,CAAAG,MAAA,CACVH,WAAW,EAAA,mFAAA,CAAA,CAAAG,MAAA,CAIJH,WAAW,EAAA,qCAAA,CAAA,CAAAG,MAAA,CAERF,UAAU,EAAAE,mFAAAA,CAAAA,CAAAA,MAAA,CAIbH,WAAW,EAAAG,mCAAAA,CAAAA,CAAAA,MAAA,CACRD,UAAU,EAAAC,uHAAAA,CAAAA,CAAAA,MAAA,CAKND,UAAU,EAAAC,gFAAAA,CAAAA,CAAAA,MAAA,CAIVD,UAAU,EAAA,mCAAA,CAAA,CAAA;AAI9C;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.339.1-canary.2315.19231744336.0",
+  "version": "0.340.0-canary.2254.19231200304.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -137,5 +137,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "5909d56fb7026c306a33b8820991bf4724da79c2"
+  "gitHead": "fab52b82fb6fc8e88c66387fb21b534ea1a8ee5e"
 }

package/styled-components/cjs/examples/components/Combobox/Combobox.js

@@ -1,16 +1 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Combobox", {
-    enumerable: true,
-    get: function() {
-        return Combobox;
-    }
-});
-var _engines = require("../../../engines");
-var _ = require("../../..");
-var _Comboboxconfig = require("./Combobox.config");
-var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
-var ComboboxComponent = (0, _engines.component)(mergedConfig);
-var Combobox = ComboboxComponent;

package/styled-components/cjs/examples/components/Scrollbar/Scrollbar.config.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "config", {
+    enumerable: true,
+    get: function() {
+        return config;
+    }
+});
+var config = {
+    view: {
+        default: {
+            trackColor: 'var(--surface-transparent-primary)',
+            thumbColor: 'var(--surface-transparent-tertiary)'
+        }
+    },
+    size: {
+        s: {
+            scrollWidth: '0.125rem'
+        },
+        m: {
+            scrollWidth: '0.25rem'
+        }
+    }
+};

package/styled-components/cjs/examples/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "addScrollbar", {
+    enumerable: true,
+    get: function() {
+        return addScrollbar;
+    }
+});
+var _mixins = require("../../../mixins");
+var _Scrollbarconfig = require("./Scrollbar.config");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+var addScrollbar = function(size) {
+    return (0, _mixins.addScrollbar)(_object_spread({}, _Scrollbarconfig.config.size[size], _Scrollbarconfig.config.view.default));
+};

package/styled-components/cjs/mixins/addScrollbar.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "addScrollbar", {
+    enumerable: true,
+    get: function() {
+        return addScrollbar;
+    }
+});
+var addScrollbar = function(args) {
+    var scrollWidth = args.scrollWidth, trackColor = args.trackColor, thumbColor = args.thumbColor;
+    return "\n        &::-webkit-scrollbar {\n            width: ".concat(scrollWidth, ";\n            height: ").concat(scrollWidth, ";\n        }\n\n        &::-webkit-scrollbar-track {\n            border-radius: ").concat(scrollWidth, ";\n\n            background-color: ").concat(trackColor, ";\n        }\n\n        &::-webkit-scrollbar-thumb {\n            border-radius: ").concat(scrollWidth, ";\n            background-color: ").concat(thumbColor, ";\n\n            transition: background-color 0.2s ease;\n\n            &:hover {\n                background-color: ").concat(thumbColor, ";\n            }\n\n            &:active {\n                background-color: ").concat(thumbColor, ";\n            }\n        }\n    ");
+};

package/styled-components/cjs/mixins/index.js

@@ -14,6 +14,7 @@ _export_star(require("./applyRoundness"), exports);
 _export_star(require("./applySkeletonGradient"), exports);
 _export_star(require("./applyHidden"), exports);
 _export_star(require("./createApplyPaperMixin"), exports);
+_export_star(require("./addScrollbar"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/styled-components/es/examples/components/Scrollbar/Scrollbar.config.js

@@ -0,0 +1,16 @@
+export var config = {
+    view: {
+        default: {
+            trackColor: 'var(--surface-transparent-primary)',
+            thumbColor: 'var(--surface-transparent-tertiary)'
+        }
+    },
+    size: {
+        s: {
+            scrollWidth: '0.125rem'
+        },
+        m: {
+            scrollWidth: '0.25rem'
+        }
+    }
+};

package/styled-components/es/examples/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,33 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { addScrollbar as mixin } from "../../../mixins";
+import { config } from "./Scrollbar.config";
+export var addScrollbar = function(size) {
+    return mixin(_object_spread({}, config.size[size], config.view.default));
+};

package/styled-components/es/mixins/addScrollbar.js

@@ -0,0 +1,4 @@
+export var addScrollbar = function(args) {
+    var scrollWidth = args.scrollWidth, trackColor = args.trackColor, thumbColor = args.thumbColor;
+    return "\n        &::-webkit-scrollbar {\n            width: ".concat(scrollWidth, ";\n            height: ").concat(scrollWidth, ";\n        }\n\n        &::-webkit-scrollbar-track {\n            border-radius: ").concat(scrollWidth, ";\n\n            background-color: ").concat(trackColor, ";\n        }\n\n        &::-webkit-scrollbar-thumb {\n            border-radius: ").concat(scrollWidth, ";\n            background-color: ").concat(thumbColor, ";\n\n            transition: background-color 0.2s ease;\n\n            &:hover {\n                background-color: ").concat(thumbColor, ";\n            }\n\n            &:active {\n                background-color: ").concat(thumbColor, ";\n            }\n        }\n    ");
+};

package/styled-components/es/mixins/index.js

@@ -10,3 +10,4 @@ export * from "./applyRoundness";
 export * from "./applySkeletonGradient";
 export * from "./applyHidden";
 export * from "./createApplyPaperMixin";
+export * from "./addScrollbar";

package/types/examples/components/Scrollbar/Scrollbar.config.d.ts

@@ -0,0 +1,17 @@
+export declare const config: {
+    view: {
+        default: {
+            trackColor: string;
+            thumbColor: string;
+        };
+    };
+    size: {
+        s: {
+            scrollWidth: string;
+        };
+        m: {
+            scrollWidth: string;
+        };
+    };
+};
+//# sourceMappingURL=Scrollbar.config.d.ts.map

package/types/examples/components/Scrollbar/Scrollbar.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.config.d.ts","sourceRoot":"","sources":["../../../../src/examples/components/Scrollbar/Scrollbar.config.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAC"}

package/types/examples/components/Scrollbar/Scrollbar.d.ts

@@ -0,0 +1,2 @@
+export declare const addScrollbar: (size: "m" | "s") => string;
+//# sourceMappingURL=Scrollbar.d.ts.map

package/types/examples/components/Scrollbar/Scrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.d.ts","sourceRoot":"","sources":["../../../../src/examples/components/Scrollbar/Scrollbar.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,SAAU,GAAG,GAAG,GAAG,WAE3C,CAAC"}

package/types/mixins/addScrollbar.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+export type ScrollbarProps = {
+    /**
+     * Ширина полосы прокрутки
+     */
+    scrollWidth?: CSSProperties['width'];
+    /**
+     * Цвет track
+     */
+    trackColor?: string;
+    /**
+     * Цвет тумблера прокрутки
+     */
+    thumbColor?: string;
+};
+export declare const addScrollbar: (args: ScrollbarProps) => string;
+//# sourceMappingURL=addScrollbar.d.ts.map

package/types/mixins/addScrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addScrollbar.d.ts","sourceRoot":"","sources":["../../src/mixins/addScrollbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,cAAc,WA8BhD,CAAC"}

package/types/mixins/index.d.ts

@@ -10,4 +10,5 @@ export * from './applyRoundness';
 export * from './applySkeletonGradient';
 export * from './applyHidden';
 export * from './createApplyPaperMixin';
+export * from './addScrollbar';
 //# sourceMappingURL=index.d.ts.map

package/types/mixins/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mixins/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mixins/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC"}