react-linear-gradient-picker
Version:
React linear gradient picker
97 lines (83 loc) • 148 kB
JavaScript
(self.webpackChunkreact_linear_gradient_picker=self.webpackChunkreact_linear_gradient_picker||[]).push([[141],{"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/AnglePicker/index.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".controls-wrapper .ap{flex:none;box-sizing:border-box;background-color:#fff;border:1px solid #4374ad;border-radius:50%;display:inline-block;position:relative;cursor:pointer;margin-top:-2px}.controls-wrapper .ap .apc{width:6px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.controls-wrapper .ap .aph{width:6px;height:6px;background-color:#4374ad;display:inline-block;border-radius:50%;position:absolute;left:0;right:0;top:4px;margin:auto;cursor:pointer}.controls-wrapper .ai{background:#f2f2f2;display:flex;flex:1;margin:0 12px;justify-content:space-around;align-items:center}.controls-wrapper .ai input{border:none;text-align:center;width:48px;color:#0c0c09;background:inherit}.controls-wrapper .ai span{padding:5px;color:#000;cursor:pointer;user-select:none;font-size:14px}","",{version:3,sources:["webpack://./src/components/AnglePicker/index.scss"],names:[],mappings:"AACE,sBACE,SAAA,CACA,qBAAA,CACA,qBAAA,CACA,wBAAA,CACA,iBAAA,CACA,oBAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CAEA,2BACE,SAAA,CACA,iBAAA,CACA,MAAA,CACA,OAAA,CACA,KAAA,CACA,QAAA,CACA,WAAA,CAGF,2BACE,SAAA,CACA,UAAA,CACA,wBAAA,CACA,oBAAA,CACA,iBAAA,CACA,iBAAA,CACA,MAAA,CACA,OAAA,CACA,OAAA,CACA,WAAA,CACA,cAAA,CAIJ,sBACE,kBAAA,CACA,YAAA,CACA,MAAA,CACA,aAAA,CACA,4BAAA,CACA,kBAAA,CAEA,4BACE,WAAA,CACA,iBAAA,CACA,UAAA,CACA,aAAA,CACA,kBAAA,CAGF,2BACE,WAAA,CACA,UAAA,CACA,cAAA,CACA,gBAAA,CACA,cAAA",sourcesContent:[".controls-wrapper {\n .ap {\n flex: none;\n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid #4374ad;\n border-radius: 50%;\n display: inline-block;\n position: relative;\n cursor: pointer;\n margin-top: -2px;\n\n .apc {\n width: 6px;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n }\n\n .aph {\n width: 6px;\n height: 6px;\n background-color: #4374ad;\n display: inline-block;\n border-radius: 50%;\n position: absolute;\n left: 0;\n right: 0;\n top: 4px;\n margin: auto;\n cursor: pointer;\n }\n }\n\n .ai {\n background: #f2f2f2;\n display: flex;\n flex: 1;\n margin: 0 12px;\n justify-content: space-around;\n align-items: center;\n\n input {\n border: none;\n text-align: center;\n width: 48px;\n color: #0c0c09;\n background: inherit;\n }\n\n span {\n padding: 5px;\n color: black;\n cursor: pointer;\n user-select: none;\n font-size: 14px;\n }\n }\n}\n"],sourceRoot:""}]);let __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ColorPicker/index.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".cp div{box-sizing:border-box;cursor:pointer;display:inline-block;height:16px;width:16px}.cp div:hover{border:1px solid #fff}","",{version:3,sources:["webpack://./src/components/ColorPicker/index.scss"],names:[],mappings:"AACE,QACE,qBAAA,CACA,cAAA,CACA,oBAAA,CACA,WAAA,CACA,UAAA,CAEA,cACE,qBAAA",sourcesContent:[".cp {\n div {\n box-sizing: border-box;\n cursor: pointer;\n display: inline-block;\n height: 16px;\n width: 16px;\n\n &:hover {\n border: 1px solid #fff;\n }\n }\n}\n"],sourceRoot:""}]);let __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ColorStop/index.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__),_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/css-loader/dist/runtime/getUrl.js"),_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__),___CSS_LOADER_URL_IMPORT_0___=new URL(__webpack_require__("./src/components/ColorStop/ColorStop.png"),__webpack_require__.b),___CSS_LOADER_EXPORT___=_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()),___CSS_LOADER_URL_REPLACEMENT_0___=_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);___CSS_LOADER_EXPORT___.push([module.id,`.cs{height:17px;position:absolute;width:11px;cursor:pointer;background:url(${___CSS_LOADER_URL_REPLACEMENT_0___}) right center}.cs div{height:7px;left:2px;width:7px;position:absolute;top:8px}.cs .active{background-position:left center}.cs.vertical{transform:rotate(-90deg) translate(4px, 2px)}`,"",{version:3,sources:["webpack://./src/components/ColorStop/index.scss"],names:[],mappings:"AAAA,IACE,WAAA,CACA,iBAAA,CACA,UAAA,CACA,cAAA,CACA,+DAAA,CAEA,QACE,UAAA,CACA,QAAA,CACA,SAAA,CACA,iBAAA,CACA,OAAA,CAGF,YACE,+BAAA,CAGF,aACE,4CAAA",sourcesContent:[".cs {\n height: 17px;\n position: absolute;\n width: 11px;\n cursor: pointer;\n background: url(./ColorStop.png) right center;\n\n div {\n height: 7px;\n left: 2px;\n width: 7px;\n position: absolute;\n top: 8px;\n }\n\n .active {\n background-position: left center;\n }\n\n &.vertical {\n transform: rotate(-90deg) translate(4px, 2px);\n }\n}\n"],sourceRoot:""}]);let __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/GradientPicker/index.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".gp{display:flex;flex-direction:column;align-items:center}.gp.vertical{flex-direction:row}.gp .gp-flat{margin:0 auto;padding:10px 0 0 !important;box-shadow:none !important;transform:none !important}.gp.color-picker-mode-popover .color-picker-wrapper{position:relative;width:100%;flex:0}.gp.color-picker-mode-popover .color-picker-wrapper .color-picker-wrapper-inner{position:absolute;display:flex;justify-content:center}.gp.color-picker-mode-popover.vertical .color-picker-wrapper .color-picker-wrapper-inner{flex-direction:column;height:100%}.gp.color-picker-mode-popover.horizontal .color-picker-wrapper .color-picker-wrapper-inner{flex-direction:row;width:100%}","",{version:3,sources:["webpack://./src/components/GradientPicker/index.scss"],names:[],mappings:"AAAA,IACE,YAAA,CACA,qBAAA,CACA,kBAAA,CAEA,aACE,kBAAA,CAGF,aACE,aAAA,CACA,2BAAA,CACA,0BAAA,CACA,yBAAA,CAIA,oDACE,iBAAA,CACA,UAAA,CACA,MAAA,CAEA,gFACE,iBAAA,CACA,YAAA,CACA,sBAAA,CAIJ,yFACE,qBAAA,CACA,WAAA,CAGF,2FACE,kBAAA,CACA,UAAA",sourcesContent:[".gp {\n display: flex;\n flex-direction: column;\n align-items: center;\n\n &.vertical {\n flex-direction: row;\n }\n\n .gp-flat {\n margin: 0 auto;\n padding: 10px 0 0 !important;\n box-shadow: none !important;\n transform: none !important;\n }\n\n &.color-picker-mode-popover {\n .color-picker-wrapper {\n position: relative;\n width: 100%;\n flex: 0;\n\n .color-picker-wrapper-inner {\n position: absolute;\n display: flex;\n justify-content: center;\n }\n }\n\n &.vertical .color-picker-wrapper .color-picker-wrapper-inner {\n flex-direction: column;\n height: 100%;\n }\n\n &.horizontal .color-picker-wrapper .color-picker-wrapper-inner {\n flex-direction: row;\n width: 100%;\n }\n }\n}\n"],sourceRoot:""}]);let __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/GradientPickerPopover/index.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".gpw{padding:20px}.gpw .trigger{padding:5px;background:#fff;border-radius:1px;box-shadow:rgba(0,0,0,.1) 0 0 0 1px;display:inline-block;cursor:pointer}.gpw .trigger .inner{width:36px;height:14px;border-radius:2px}.gpw .popover{z-index:2;margin-top:6px;box-shadow:rgba(0,0,0,.15) 0 0 0 1px,rgba(0,0,0,.15) 0 8px 16px;background-color:#fff;padding:12px;border-radius:4px;position:absolute}.gpw .overlay{position:fixed;top:0;right:0;bottom:0;left:0}.gpw .controls-wrapper{margin:0 -10px 10px;padding:6px 0 0 10px;display:flex;flex-wrap:wrap;position:relative}.gpw .controls-wrapper.with-angle{justify-content:space-around;align-items:center}","",{version:3,sources:["webpack://./src/components/GradientPickerPopover/index.scss"],names:[],mappings:"AAAA,KACE,YAAA,CAEA,cACE,WAAA,CACA,eAAA,CACA,iBAAA,CACA,mCAAA,CACA,oBAAA,CACA,cAAA,CAEA,qBACE,UAAA,CACA,WAAA,CACA,iBAAA,CAIJ,cACE,SAAA,CACA,cAAA,CACA,+DACE,CAEF,qBAAA,CACA,YAAA,CACA,iBAAA,CACA,iBAAA,CAGF,cACE,cAAA,CACA,KAAA,CACA,OAAA,CACA,QAAA,CACA,MAAA,CAGF,uBACE,mBAAA,CACA,oBAAA,CACA,YAAA,CACA,cAAA,CACA,iBAAA,CAEA,kCACE,4BAAA,CACA,kBAAA",sourcesContent:[".gpw {\n padding: 20px;\n\n .trigger {\n padding: 5px;\n background: rgb(255, 255, 255);\n border-radius: 1px;\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;\n display: inline-block;\n cursor: pointer;\n\n .inner {\n width: 36px;\n height: 14px;\n border-radius: 2px;\n }\n }\n\n .popover {\n z-index: 2;\n margin-top: 6px;\n box-shadow:\n rgba(0, 0, 0, 0.15) 0 0 0 1px,\n rgba(0, 0, 0, 0.15) 0 8px 16px;\n background-color: white;\n padding: 12px;\n border-radius: 4px;\n position: absolute;\n }\n\n .overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n\n .controls-wrapper {\n margin: 0 -10px 10px;\n padding: 6px 0 0 10px;\n display: flex;\n flex-wrap: wrap;\n position: relative;\n\n &.with-angle {\n justify-content: space-around;\n align-items: center;\n }\n }\n}\n"],sourceRoot:""}]);let __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/GradientTypePicker/index.scss":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".type-picker-wrapper{display:inline-flex;margin-right:16px}.type-picker-wrapper .type-picker{height:24px;width:24px;border:1px solid #eee;filter:grayscale(1);margin-right:8px;cursor:pointer;transition:all .2s ease}.type-picker-wrapper .type-picker.active{border:1px solid #4374ad;filter:grayscale(0)}.type-picker-wrapper .type-picker.lg{background:linear-gradient(270deg, #ddd, #4374ad)}.type-picker-wrapper .type-picker.rg{background:radial-gradient(circle, #fff 0, #4374ad 100%)}","",{version:3,sources:["webpack://./src/components/GradientTypePicker/index.scss"],names:[],mappings:"AAAA,qBACE,mBAAA,CACA,iBAAA,CAEA,kCACE,WAAA,CACA,UAAA,CACA,qBAAA,CACA,mBAAA,CACA,gBAAA,CACA,cAAA,CACA,uBAAA,CAEA,yCACE,wBAAA,CACA,mBAAA,CAGF,qCACE,iDAAA,CAGF,qCACE,wDAAA",sourcesContent:[".type-picker-wrapper {\n display: inline-flex;\n margin-right: 16px;\n\n .type-picker {\n height: 24px;\n width: 24px;\n border: 1px solid rgb(238, 238, 238);\n filter: grayscale(1);\n margin-right: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n\n &.active {\n border: 1px solid #4374ad;\n filter: grayscale(0);\n }\n\n &.lg {\n background: linear-gradient(270deg, #ddd, #4374ad);\n }\n\n &.rg {\n background: radial-gradient(circle, #fff 0, #4374ad 100%);\n }\n }\n}\n"],sourceRoot:""}]);let __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./stories/Popover/index.css":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,`.gpw {
padding: 20px;
}
.gpw .trigger {
padding: 5px;
background: rgb(255, 255, 255);
border-radius: 1px;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;
display: inline-block;
cursor: pointer;
}
.gpw .trigger .inner {
width: 36px;
height: 14px;
border-radius: 2px;
}
.gpw .popover {
z-index: 2;
margin-top: 6px;
box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px,
rgba(0, 0, 0, 0.15) 0 8px 16px;
background-color: white;
padding: 12px;
border-radius: 4px;
position: absolute;
}
.gpw .overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}`,"",{version:3,sources:["webpack://./stories/Popover/index.css"],names:[],mappings:"AAAA;IACI,aAAa;AACjB;;AAEA;IACI,YAAY;IACZ,8BAA8B;IAC9B,kBAAkB;IAClB,wCAAwC;IACxC,qBAAqB;IACrB,eAAe;AACnB;;AAEA;IACI,WAAW;IACX,YAAY;IACZ,kBAAkB;AACtB;;AAEA;IACI,UAAU;IACV,eAAe;IACf;sCACkC;IAClC,uBAAuB;IACvB,aAAa;IACb,kBAAkB;IAClB,kBAAkB;AACtB;;AAEA;IACI,eAAe;IACf,MAAM;IACN,QAAQ;IACR,SAAS;IACT,OAAO;AACX",sourcesContent:[".gpw {\n padding: 20px;\n}\n\n.gpw .trigger {\n padding: 5px;\n background: rgb(255, 255, 255);\n border-radius: 1px;\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;\n display: inline-block;\n cursor: pointer;\n}\n\n.gpw .trigger .inner {\n width: 36px;\n height: 14px;\n border-radius: 2px;\n}\n\n.gpw .popover {\n z-index: 2;\n margin-top: 6px;\n box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px,\n rgba(0, 0, 0, 0.15) 0 8px 16px;\n background-color: white;\n padding: 12px;\n border-radius: 4px;\n position: absolute;\n}\n\n.gpw .overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}"],sourceRoot:""}]);let __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[9].use[1]!./stories/Story.css":(module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,"@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);"]),___CSS_LOADER_EXPORT___.push([module.id,`body {
font-family: 'Roboto', sans-serif;
}
.use-case-content {
margin: 20px;
display: flex;
flex-wrap: wrap;
}
.use-case-content .title {
margin: 6px 0 6px 0;
color: #a0522d;
font-weight: bold;
}
.use-case-content .title a {
text-decoration: none;
color: #d78025;
}
.use-case-content .title a:hover {
color: #a0522d;
}
.cp, .sketch-picker, .rc-color-picker-panel {
margin: 6px;
}
.palette {
border: 1px solid #ccc;
}
.result {
height: 72px;
width: 300px;
margin-bottom: 8px;
padding: 4px;
background-color: #eee;
overflow-y: auto;
font-family: monospace;
font-size: 0.8em;
}
.preview {
width: 100%;
max-width: 400px;
height: 40px;
}
hr {
margin: 20px 0;
}
.aps {
padding: 20px;
display: flex;
align-items: center;
flex-direction: column;
}
`,"",{version:3,sources:["webpack://./stories/Story.css"],names:[],mappings:"AAEA;IACI,iCAAiC;AACrC;;AAEA;IACI,YAAY;IACZ,aAAa;IACb,eAAe;AACnB;;AAEA;IACI,mBAAmB;IACnB,cAAc;IACd,iBAAiB;AACrB;;AAEA;IACI,qBAAqB;IACrB,cAAc;AAClB;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,WAAW;AACf;;AAEA;IACI,sBAAsB;AAC1B;;AAEA;IACI,YAAY;IACZ,YAAY;IACZ,kBAAkB;IAClB,YAAY;IACZ,sBAAsB;IACtB,gBAAgB;IAChB,sBAAsB;IACtB,gBAAgB;AACpB;;AAEA;IACI,WAAW;IACX,gBAAgB;IAChB,YAAY;AAChB;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,aAAa;IACb,aAAa;IACb,mBAAmB;IACnB,sBAAsB;AAC1B",sourcesContent:["@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');\n\nbody {\n font-family: 'Roboto', sans-serif;\n}\n\n.use-case-content {\n margin: 20px;\n display: flex;\n flex-wrap: wrap;\n}\n\n.use-case-content .title {\n margin: 6px 0 6px 0;\n color: #a0522d;\n font-weight: bold;\n}\n\n.use-case-content .title a {\n text-decoration: none;\n color: #d78025;\n}\n\n.use-case-content .title a:hover {\n color: #a0522d;\n}\n\n.cp, .sketch-picker, .rc-color-picker-panel {\n margin: 6px;\n}\n\n.palette {\n border: 1px solid #ccc;\n}\n\n.result {\n height: 72px;\n width: 300px;\n margin-bottom: 8px;\n padding: 4px;\n background-color: #eee;\n overflow-y: auto;\n font-family: monospace;\n font-size: 0.8em;\n}\n\n.preview {\n width: 100%;\n max-width: 400px;\n height: 40px;\n}\n\nhr {\n margin: 20px 0;\n}\n\n.aps {\n padding: 20px;\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n"],sourceRoot:""}]);let __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./src/components/AnglePicker/index.scss":(module,__unused_webpack_exports,__webpack_require__)=>{var api=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/AnglePicker/index.scss");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.id,content,""]]);var options={};options.insert="head",options.singleton=!1,api(content,options),module.exports=content.locals||{}},"./src/components/AnglePicker/index.tsx":(__unused_webpack_module,exports,__webpack_require__)=>{"use strict";function _type_of(obj){return obj&&"undefined"!=typeof Symbol&&obj.constructor===Symbol?"symbol":typeof obj}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function get(){return _default}});var _jsxruntime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_react=_interop_require_wildcard(__webpack_require__("./node_modules/react/index.js")),_lib=__webpack_require__("./src/lib/index.ts"),_useDragging=_interop_require_default(__webpack_require__("./src/components/hooks/useDragging/index.ts"));function _array_like_to_array(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_with_holes(arr){if(Array.isArray(arr))return arr}function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interop_require_wildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||(void 0===obj?"undefined":_type_of(obj))!=="object"&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={__proto__:null},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}return newObj.default=obj,cache&&cache.set(obj,newObj),newObj}function _iterable_to_array_limit(arr,i){var _s,_e,_i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null!=_i){var _arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}}function _non_iterable_rest(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _sliced_to_array(arr,i){return _array_with_holes(arr)||_iterable_to_array_limit(arr,i)||_unsupported_iterable_to_array(arr,i)||_non_iterable_rest()}function _unsupported_iterable_to_array(o,minLen){if(o){if("string"==typeof o)return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if("Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}}__webpack_require__("./src/components/AnglePicker/index.scss");var AnglePicker=function AnglePicker(param){var angle=param.angle,setAngle=param.setAngle,_param_size=param.size,size=void 0===_param_size?24:_param_size,_param_snap=param.snap,snap=void 0===_param_snap?5:_param_snap,pickerRef=(0,_react.useRef)(null),onAngleChange=function onAngleChange(param){var clientX=param.clientX,clientY=param.clientY,useSnap=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(pickerRef.current){var center=(0,_lib.centerOffset)(pickerRef.current),degrees=(0,_lib.pointDegrees)(clientX,clientY,center),clamped=(0,_lib.clampAngle)(degrees);setAngle(useSnap?(0,_lib.snapAngle)(clamped,snap):clamped)}},dragHandler=_sliced_to_array((0,_useDragging.default)({onDragStart:function onDragStart(e){return onAngleChange(e,!0)},onDrag:onAngleChange,onDragEnd:function onDragEnd(coords){coords&&onAngleChange(coords,!0)}}),1)[0];return(0,_jsxruntime.jsxs)(_jsxruntime.Fragment,{children:[(0,_jsxruntime.jsx)("div",{className:"ap",ref:pickerRef,onMouseDown:dragHandler,onTouchStart:dragHandler,style:{height:size,width:size},children:(0,_jsxruntime.jsx)("span",{className:"apc",style:{transform:"rotate(".concat(angle,"deg)"),height:size},children:(0,_jsxruntime.jsx)("i",{className:"aph"})})}),(0,_jsxruntime.jsxs)("div",{className:"ai",children:[(0,_jsxruntime.jsx)("span",{onClick:function onClick(){return setAngle(angle-1)},children:"−"}),(0,_jsxruntime.jsx)("input",{value:"".concat(angle,"°"),disabled:!0}),(0,_jsxruntime.jsx)("span",{onClick:function onClick(){return setAngle(angle+1)},children:"+"})]})]})},_default=AnglePicker;try{AnglePicker.displayName="AnglePicker",AnglePicker.__docgenInfo={description:"",displayName:"AnglePicker",props:{angle:{defaultValue:null,description:"",name:"angle",required:!0,type:{name:"number"}},setAngle:{defaultValue:null,description:"",name:"setAngle",required:!0,type:{name:"(angle: number) => void"}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"number"}},snap:{defaultValue:{value:"5"},description:"",name:"snap",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/AnglePicker/index.tsx#AnglePicker"]={docgenInfo:AnglePicker.__docgenInfo,name:"AnglePicker",path:"src/components/AnglePicker/index.tsx#AnglePicker"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/ColorPicker/constants.ts":(__unused_webpack_module,exports)=>{"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"COLORS",{enumerable:!0,get:function get(){return COLORS}});var COLORS=[{value:"#000000",name:"black"},{value:"#808080",name:"gray"},{value:"#C0C0C0",name:"silver"},{value:"#FFFFFF",name:"white"},{value:"#FF0000",name:"red"},{value:"#800000",name:"maroon"},{value:"#FFFF00",name:"yellow"},{value:"#808000",name:"olive"},{value:"#00FF00",name:"lime"},{value:"#008000",name:"green"},{value:"#00FFFF",name:"aqua"},{value:"#008080",name:"teal"},{value:"#0000FF",name:"blue"},{value:"#000080",name:"navy"},{value:"#FF00FF",name:"fuchsia"},{value:"#800080",name:"purple"}]},"./src/components/ColorPicker/index.scss":(module,__unused_webpack_exports,__webpack_require__)=>{var api=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ColorPicker/index.scss");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.id,content,""]]);var options={};options.insert="head",options.singleton=!1,api(content,options),module.exports=content.locals||{}},"./src/components/ColorPicker/index.tsx":(__unused_webpack_module,exports,__webpack_require__)=>{"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function get(){return _default}});var _jsxruntime=__webpack_require__("./node_modules/react/jsx-runtime.js");__webpack_require__("./node_modules/react/index.js");var _constants=__webpack_require__("./src/components/ColorPicker/constants.ts");__webpack_require__("./src/components/ColorPicker/index.scss");var ColorPicker=function ColorPicker(param){var onSelect=param.onSelect;return(0,_jsxruntime.jsx)("div",{className:"cp",children:_constants.COLORS.map(function(param){var value=param.value,name=param.name;return(0,_jsxruntime.jsx)("div",{onClick:function onClick(){return onSelect(value)},title:name,style:{backgroundColor:value}},name)})})},_default=ColorPicker;try{ColorPicker.displayName="ColorPicker",ColorPicker.__docgenInfo={description:"",displayName:"ColorPicker",props:{color:{defaultValue:null,description:"",name:"color",required:!0,type:{name:"string"}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!0,type:{name:"(color: string) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ColorPicker/index.tsx#ColorPicker"]={docgenInfo:ColorPicker.__docgenInfo,name:"ColorPicker",path:"src/components/ColorPicker/index.tsx#ColorPicker"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/ColorStop/ColorStop.png":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__.p+"static/media/ColorStop.11e499fa.png"},"./src/components/ColorStop/hooks/useStopDragging.ts":(__unused_webpack_module,exports,__webpack_require__)=>{"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function get(){return _default}});var _react=__webpack_require__("./node_modules/react/index.js"),_constants=__webpack_require__("./src/components/GradientPicker/constants.ts"),_useDragging=_interop_require_default(__webpack_require__("./src/components/hooks/useDragging/index.ts"));function _array_like_to_array(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_with_holes(arr){if(Array.isArray(arr))return arr}function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _iterable_to_array_limit(arr,i){var _s,_e,_i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null!=_i){var _arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}}function _non_iterable_rest(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _sliced_to_array(arr,i){return _array_with_holes(arr)||_iterable_to_array_limit(arr,i)||_unsupported_iterable_to_array(arr,i)||_non_iterable_rest()}function _unsupported_iterable_to_array(o,minLen){if(o){if("string"==typeof o)return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if("Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}}var getColorStopRefCoordinate=function getColorStopRefCoordinate(ref,direction){if(!ref.current)return 0;var rect=ref.current.getBoundingClientRect();return direction===_constants.DIRECTIONS.HORIZONTAL?rect.top:rect.left},_default=function useStopDragging(param){var limits=param.limits,stop=param.stop,initialPos=param.initialPos,colorStopRef=param.colorStopRef,onPosChange=param.onPosChange,onDragStart=param.onDragStart,onDragEnd=param.onDragEnd,onDeleteColor=param.onDeleteColor,direction=param.direction,_useState=_sliced_to_array((0,_react.useState)(initialPos||0),2),posStart=_useState[0],setPosStart=_useState[1];return[_sliced_to_array((0,_useDragging.default)({onDragStart:function onDragStart1(param){var clientX=param.clientX,clientY=param.clientY;setPosStart(direction===_constants.DIRECTIONS.HORIZONTAL?clientX:clientY),void 0!==stop.id&&onDragStart(stop.id)},onDrag:function handleDrag(coordinates){var id=stop.id,offset=stop.offset;if(void 0!==id){var min=limits.min,max=limits.max;if(Math.abs((direction===_constants.DIRECTIONS.HORIZONTAL?coordinates.clientY:coordinates.clientX)-getColorStopRefCoordinate(colorStopRef,direction))>(limits.drop||0))return onDeleteColor(id);onPosChange({id:id,offset:Math.max(Math.min(offset-posStart+(direction===_constants.DIRECTIONS.HORIZONTAL?coordinates.clientX:coordinates.clientY),max),min)})}},onDragEnd:function onDragEnd1(){void 0!==stop.id&&onDragEnd(stop.id)}}),1)[0]]}},"./src/components/ColorStop/index.scss":(module,__unused_webpack_exports,__webpack_require__)=>{var api=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ColorStop/index.scss");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.id,content,""]]);var options={};options.insert="head",options.singleton=!1,api(content,options),module.exports=content.locals||{}},"./src/components/ColorStop/index.tsx":(__unused_webpack_module,exports,__webpack_require__)=>{"use strict";function _type_of(obj){return obj&&"undefined"!=typeof Symbol&&obj.constructor===Symbol?"symbol":typeof obj}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function get(){return _default}});var _jsxruntime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_react=_interop_require_wildcard(__webpack_require__("./node_modules/react/index.js")),_lib=__webpack_require__("./src/lib/index.ts"),_constants=__webpack_require__("./src/components/GradientPicker/constants.ts"),_useStopDragging=_interop_require_default(__webpack_require__("./src/components/ColorStop/hooks/useStopDragging.ts"));function _array_like_to_array(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _array_with_holes(arr){if(Array.isArray(arr))return arr}function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interop_require_wildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||(void 0===obj?"undefined":_type_of(obj))!=="object"&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={__proto__:null},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}return newObj.default=obj,cache&&cache.set(obj,newObj),newObj}function _iterable_to_array_limit(arr,i){var _s,_e,_i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null!=_i){var _arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}}function _non_iterable_rest(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _sliced_to_array(arr,i){return _array_with_holes(arr)||_iterable_to_array_limit(arr,i)||_unsupported_iterable_to_array(arr,i)||_non_iterable_rest()}function _unsupported_iterable_to_array(o,minLen){if(o){if("string"==typeof o)return _array_like_to_array(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if("Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}}__webpack_require__("./src/components/ColorStop/index.scss");var ColorStop=function ColorStop(param){var stop=param.stop,limits=param.limits,onPosChange=param.onPosChange,onDeleteColor=param.onDeleteColor,_param_onDragStart=param.onDragStart,onDragStart=void 0===_param_onDragStart?_lib.noop:_param_onDragStart,_param_onDragEnd=param.onDragEnd,onDragEnd=void 0===_param_onDragEnd?_lib.noop:_param_onDragEnd,direction=param.direction,colorStopRef=(0,_react.useRef)(null),_useState=_sliced_to_array((0,_react.useState)(!1),2),allowRemoveOnDoubleClick=_useState[0],setAllowRemoveOnDoubleClick=_useState[1],drag=_sliced_to_array((0,_useStopDragging.default)({stop:stop,limits:limits,onPosChange:onPosChange,onDragStart:onDragStart,onDragEnd:onDragEnd,onDeleteColor:onDeleteColor,colorStopRef:colorStopRef,direction:direction}),1)[0];(0,_react.useEffect)(function(){setTimeout(function(){return setAllowRemoveOnDoubleClick(!0)},500)},[]);var offset=stop.offset,color=stop.color,isActive=stop.isActive,opacity=stop.opacity,id=stop.id;return(0,_jsxruntime.jsx)("div",{className:"cs ".concat(direction," ").concat(isActive?"active":""),ref:colorStopRef,style:direction===_constants.DIRECTIONS.HORIZONTAL?{left:offset}:{top:offset},onMouseDown:drag,onDoubleClick:function onDoubleClick(){allowRemoveOnDoubleClick&&void 0!==id&&onDeleteColor(id)},onTouchStart:drag,children:(0,_jsxruntime.jsx)("div",{style:{backgroundColor:color,opacity:opacity}})})},_default=ColorStop;try{ColorStop.displayName="ColorStop",ColorStop.__docgenInfo={description:"",displayName:"ColorStop",props:{stop:{defaultValue:null,description:"",name:"stop",required:!0,type:{name:"ColorStop"}},limits:{defaultValue:null,description:"",name:"limits",required:!0,type:{name:"Limits"}},onPosChange:{defaultValue:null,description:"",name:"onPosChange",required:!0,type:{name:"(data: { id: number; offset: number; }) => void"}},onDeleteColor:{defaultValue:null,description:"",name:"onDeleteColor",required:!0,type:{name:"(id: number) => void"}},onDragStart:{defaultValue:{value:"() => {}"},description:"",name:"onDragStart",required:!1,type:{name:"((id: number) => void)"}},onDragEnd:{defaultValue:{value:"() => {}"},description:"",name:"onDragEnd",required:!1,type:{name:"((id: number) => void)"}},direction:{defaultValue:null,description:"",name:"direction",required:!0,type:{name:"enum",value:[{value:'"horizontal"'},{value:'"vertical"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ColorStop/index.tsx#ColorStop"]={docgenInfo:ColorStop.__docgenInfo,name:"ColorStop",path:"src/components/ColorStop/index.tsx#ColorStop"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/ColorStopsHolder/constants.ts":(__unused_webpack_module,exports)=>{"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"COLOR_STOP_HOLDER_CLASSNAME",{enumerable:!0,get:function get(){return COLOR_STOP_HOLDER_CLASSNAME}});var COLOR_STOP_HOLDER_CLASSNAME="csh"},"./src/components/ColorStopsHolder/index.tsx":(__unused_webpack_module,exports,__webpack_require__)=>{"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function get(){return _default}});var _jsxruntime=__webpack_require__("./node_modules/react/jsx-runtime.js");__webpack_require__("./node_modules/react/index.js");var _ColorStop=_interop_require_default(__webpack_require__("./src/components/ColorStop/index.tsx")),_constants=__webpack_require__("./src/components/GradientPicker/constants.ts"),_constants1=__webpack_require__("./src/components/ColorStopsHolder/constants.ts");function _define_property(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{},ownKeys=Object.keys(source);"function"==typeof Object.getOwnPropertySymbols&&(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}function _object_without_properties(source,excluded){if(null==source)return{};var key,i,target=_object_without_properties_loose(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function _object_without_properties_loose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}var ColorStopsHolder=function ColorStopsHolder(_param){var disabled,width=_param.width,direction=_param.direction,stops=_param.stops,_param_disabled=_param.disabled,onAddColor=_param.onAddColor,rest=_object_without_properties(_param,["width","direction","stops","disabled","onAddColor"]);return(0,_jsxruntime.jsx)("div",{className:_constants1.COLOR_STOP_HOLDER_CLASSNAME,style:(disabled=void 0!==_param_disabled&&_param_disabled,{width:direction===_constants.DIRECTIONS.HORIZONTAL?width:17,height:direction===_constants.DIRECTIONS.HORIZONTAL?17:width,position:"relative",cursor:disabled?"default":"crosshair"}),onMouseDown:function handleColorAdd(e){e.preventDefault(),e.button||onAddColor({offset:direction===_constants.DIRECTIONS.HORIZONTAL?e.clientX-e.currentTarget.getBoundingClientRect().left:e.clientY-e.currentTarget.getBoundingClientRect().top})},children:stops.map(function(stop){return(0,_jsxruntime.jsx)(_ColorStop.default,_object_spread({stop:stop,direction:direction},rest),stop.id)})})},_default=ColorStopsHolder;try{ColorStopsHolder.displayName="ColorStopsHolder",ColorStopsHolder.__docgenInfo={description:"",displayName:"ColorStopsHolder",props:{width:{defaultValue:null,description:"",name:"width",required:!0,type:{name:"number"}},direction:{defaultValue:null,description:"",name:"direction",required:!0,type:{name:"enum",value:[{value:'"horizontal"'},{value:'"vertical"'}]}},stops:{defaultValue:null,description:"",name:"stops",required:!0,type:{name:"ColorStop[]"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean"}},limits:{defaultValue:null,description:"",name:"limits",required:!0,type:{name:"Limits"}},onPosChange:{defaultValue:null,description:"",name:"onPosChange",required:!0,type:{name:"(data: { id: number; offset: number; }) => void"}},onAddColor:{defaultValue:null,description:"",name:"onAddColor",required:!0,type:{name:"(data: { offset: number; }) => void"}},onDeleteColor:{defaultValue:null,description:"",name:"onDeleteColor",required:!0,type:{name:"(id: number) => void"}},onDragStart:{defaultValue:null,description:"",name:"onDragStart",required:!1,type:{name:"((id: number) => void)"}},onDragEnd:{defaultValue:null,description:"",name:"onDragEnd",required:!1,type:{name:"((id: number) => void)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ColorStopsHolder/index.tsx#ColorStopsHolder"]={docgenInfo:ColorStopsHolder.__docgenInfo,name:"ColorStopsHolder",path:"src/components/ColorStopsHolder/index.tsx#ColorStopsHolder"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/GradientPicker/constants.ts":(__unused_webpack_module,exports,__webpack_require__)=>{"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),function _export(target,all){for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:all[name]})}(exports,{COLOR_PICKER_CLASSNAME:function COLOR_PICKER_CLASSNAME1(){return COLOR_PICKER_CLASSNAME},COLOR_PICKER_MODS:function COLOR_PICKER_MODS1(){return COLOR_PICKER_MODS},DEFAULT_COLOR_PICKER_MOD:function DEFAULT_COLOR_PICKER_MOD1(){return DEFAULT_COLOR_PICKER_MOD},DEFAULT_DIRECTION:function DEFAULT_DIRECTION1(){return DEFAULT_DIRECTION},DEFAULT_HEIGHT:function DEFAULT_HEIGHT1(){return DEFAULT_HEIGHT},DEFAULT_MAX_STOPS:function DEFAULT_MAX_STOPS1(){return DEFAULT_MAX_STOPS},DEFAULT_MIN_STOPS:function DEFAULT_MIN_STOPS1(){return DEFAULT_MIN_STOPS},DEFAULT_STOP_REMOVAL_DROP:function DEFAULT_STOP_REMOVAL_DROP1(){return DEFAULT_STOP_REMOVAL_DROP},DEFAULT_WIDTH:function DEFAULT_WIDTH1(){return DEFAULT_WIDTH},DIRECTIONS:function DIRECTIONS1(){return DIRECTIONS},GRADIENT_PICKER_CLASSNAME:function GRADIENT_PICKER_CLASSNAME1(){return GRADIENT_PICKER_CLASSNAME},HALF_STOP_WIDTH:function HALF_STOP_WIDTH1(){return HALF_STOP_WIDTH},IGNORED_CLICK_OUTSIDE_SELECTORS:function IGNORED_CLICK_OUTSIDE_SELECTORS1(){return IGNORED_CLICK_OUTSIDE_SELECTORS}});var _constants=__webpack_require__("./src/components/ColorStopsHolder/constants.ts"),HALF_STOP_WIDTH=5,DEFAULT_STOP_REMOVAL_DROP=50,DEFAULT_WIDTH=220,DEFAULT_HEIGHT=32,DEFAULT_MAX_STOPS=5,DEFAULT_MIN_STOPS=2,DIRECTIONS={HORIZONTAL:"horizontal",VERTICAL:"vertical"},DEFAULT_DIRECTION=DIRECTIONS.HORIZONTAL,GRADIENT_PICKER_CLASSNAME="gp",COLOR_PICKER_CLASSNAME="color-picker",IGNORED_CLICK_OUTSIDE_SELECTORS=[".".concat(COLOR_PICKER_CLASSNAME),".".concat(GRADIENT_PICKER_CLASSNAME," .").concat(_constants.COLOR_STOP_HOLDER_CLASSNAME)],COLOR_PICKER_MODS={STATIC:"static",POPOVER:"popover"},DEFAULT_COLOR_PICKER_MOD=COLOR_PICKER_MODS.STATIC},"./src/components/GradientPicker/index.scss":(module,__unused_webpack_exports,__webpack_require__)=>{var api=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/GradientPicker/index.scss");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.id,content,""]]);var options={};options.insert="head",options.singleton=!1,api(content,options),module.exports=content.locals||{}},"./src/components/GradientPicker/index.tsx":(__unused_webpack_module,exports,__webpack_require__)=>{"use strict";function _type_of(obj){return obj&&"undefined"!=typeof Symbol&&obj.constructor===Symbol?"symbol":typeof obj}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function get(){return _default}});var _jsxruntime=__webpack_require__("./node_modules/react/jsx-runtime.js"),_react=_interop_requ