@sunggang/ui-lib 0.0.4 → 0.0.5

package/storybook-static/852.18487f4c.iframe.bundle.js.LICENSE.txt

@@ -0,0 +1,23 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <feross@feross.org> <http://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/storybook-static/852.18487f4c.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"852.18487f4c.iframe.bundle.js","mappings":";;AAMA;;AAEA;AACA;ACJA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;AAEA","sources":["webpack://@sunggang/ui-lib/../node_modules/@storybook/addon-backgrounds/dist/preview.js","webpack://@sunggang/ui-lib/../node_modules/@storybook/addon-outline/dist/preview.js"],"sourcesContent":["import { useMemo, useEffect } from '@storybook/preview-api';\nimport { global } from '@storybook/global';\nimport { dedent } from 'ts-dedent';\nimport { logger } from '@storybook/client-logger';\n\nvar PARAM_KEY=\"backgrounds\";var{document,window}=global,isReduceMotionEnabled=()=>window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches,getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue===\"transparent\")return \"transparent\";if(backgrounds.find(background=>background.value===currentSelectedValue))return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(\", \");logger.warn(dedent`\n        Backgrounds Addon: could not find the default color \"${defaultName}\".\n        These are the available colors for your story based on your configuration:\n        ${availableColors}.\n      `);}return \"transparent\"},clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=selector=>{let element=document.getElementById(selector);element&&element.parentElement?.removeChild(element);},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement(\"style\");style.setAttribute(\"id\",selector),style.innerHTML=css,document.head.appendChild(style);}},addBackgroundStyle=(selector,css,storyId)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement(\"style\");style.setAttribute(\"id\",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:\"\"}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?existingGridStyle.parentElement?.insertBefore(style,existingGridStyle):document.head.appendChild(style);}};var withBackground=(StoryFn,context)=>{let{globals:globals2,parameters:parameters2}=context,globalsBackgroundColor=globals2[PARAM_KEY]?.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=useMemo(()=>backgroundsConfig.disable?\"transparent\":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=useMemo(()=>selectedBackgroundColor&&selectedBackgroundColor!==\"transparent\",[selectedBackgroundColor]),selector=context.viewMode===\"docs\"?`#anchor--${context.id} .docs-story`:\".sb-show-main\",backgroundStyles=useMemo(()=>`\n      ${selector} {\n        background: ${selectedBackgroundColor} !important;\n        ${isReduceMotionEnabled()?\"\":\"transition: background-color 0.3s;\"}\n      }\n    `,[selectedBackgroundColor,selector]);return useEffect(()=>{let selectorId=context.viewMode===\"docs\"?`addon-backgrounds-docs-${context.id}`:\"addon-backgrounds-color\";if(!isActive){clearStyles(selectorId);return}addBackgroundStyle(selectorId,backgroundStyles,context.viewMode===\"docs\"?context.id:null);},[isActive,backgroundStyles,context]),StoryFn()};var withGrid=(StoryFn,context)=>{let{globals:globals2,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=globals2[PARAM_KEY]?.grid===!0&&gridParameters.disable!==!0,{cellAmount,cellSize,opacity}=gridParameters,isInDocs=context.viewMode===\"docs\",defaultOffset=parameters2.layout===void 0||parameters2.layout===\"padded\"?16:0,offsetX=gridParameters.offsetX??(isInDocs?20:defaultOffset),offsetY=gridParameters.offsetY??(isInDocs?20:defaultOffset),gridStyles=useMemo(()=>{let selector=context.viewMode===\"docs\"?`#anchor--${context.id} .docs-story`:\".sb-show-main\",backgroundSize=[`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(\", \");return `\n      ${selector} {\n        background-size: ${backgroundSize} !important;\n        background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;\n        background-blend-mode: difference !important;\n        background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),\n         linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),\n         linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),\n         linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;\n      }\n    `},[cellSize]);return useEffect(()=>{let selectorId=context.viewMode===\"docs\"?`addon-backgrounds-grid-docs-${context.id}`:\"addon-backgrounds-grid\";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:\"light\",value:\"#F8F8F8\"},{name:\"dark\",value:\"#333333\"}]}},globals={[PARAM_KEY]:null};\n\nexport { decorators, globals, parameters };\n","import { useMemo, useEffect } from '@storybook/preview-api';\nimport { global } from '@storybook/global';\nimport { dedent } from 'ts-dedent';\n\nvar clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=input=>{let selector=typeof input==\"string\"?input:input.join(\"\"),element=global.document.getElementById(selector);element&&element.parentElement&&element.parentElement.removeChild(element);},addOutlineStyles=(selector,css)=>{let existingStyle=global.document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=global.document.createElement(\"style\");style.setAttribute(\"id\",selector),style.innerHTML=css,global.document.head.appendChild(style);}};var PARAM_KEY=\"outline\";function outlineCSS(selector){return dedent`\n    ${selector} body {\n      outline: 1px solid #2980b9 !important;\n    }\n\n    ${selector} article {\n      outline: 1px solid #3498db !important;\n    }\n\n    ${selector} nav {\n      outline: 1px solid #0088c3 !important;\n    }\n\n    ${selector} aside {\n      outline: 1px solid #33a0ce !important;\n    }\n\n    ${selector} section {\n      outline: 1px solid #66b8da !important;\n    }\n\n    ${selector} header {\n      outline: 1px solid #99cfe7 !important;\n    }\n\n    ${selector} footer {\n      outline: 1px solid #cce7f3 !important;\n    }\n\n    ${selector} h1 {\n      outline: 1px solid #162544 !important;\n    }\n\n    ${selector} h2 {\n      outline: 1px solid #314e6e !important;\n    }\n\n    ${selector} h3 {\n      outline: 1px solid #3e5e85 !important;\n    }\n\n    ${selector} h4 {\n      outline: 1px solid #449baf !important;\n    }\n\n    ${selector} h5 {\n      outline: 1px solid #c7d1cb !important;\n    }\n\n    ${selector} h6 {\n      outline: 1px solid #4371d0 !important;\n    }\n\n    ${selector} main {\n      outline: 1px solid #2f4f90 !important;\n    }\n\n    ${selector} address {\n      outline: 1px solid #1a2c51 !important;\n    }\n\n    ${selector} div {\n      outline: 1px solid #036cdb !important;\n    }\n\n    ${selector} p {\n      outline: 1px solid #ac050b !important;\n    }\n\n    ${selector} hr {\n      outline: 1px solid #ff063f !important;\n    }\n\n    ${selector} pre {\n      outline: 1px solid #850440 !important;\n    }\n\n    ${selector} blockquote {\n      outline: 1px solid #f1b8e7 !important;\n    }\n\n    ${selector} ol {\n      outline: 1px solid #ff050c !important;\n    }\n\n    ${selector} ul {\n      outline: 1px solid #d90416 !important;\n    }\n\n    ${selector} li {\n      outline: 1px solid #d90416 !important;\n    }\n\n    ${selector} dl {\n      outline: 1px solid #fd3427 !important;\n    }\n\n    ${selector} dt {\n      outline: 1px solid #ff0043 !important;\n    }\n\n    ${selector} dd {\n      outline: 1px solid #e80174 !important;\n    }\n\n    ${selector} figure {\n      outline: 1px solid #ff00bb !important;\n    }\n\n    ${selector} figcaption {\n      outline: 1px solid #bf0032 !important;\n    }\n\n    ${selector} table {\n      outline: 1px solid #00cc99 !important;\n    }\n\n    ${selector} caption {\n      outline: 1px solid #37ffc4 !important;\n    }\n\n    ${selector} thead {\n      outline: 1px solid #98daca !important;\n    }\n\n    ${selector} tbody {\n      outline: 1px solid #64a7a0 !important;\n    }\n\n    ${selector} tfoot {\n      outline: 1px solid #22746b !important;\n    }\n\n    ${selector} tr {\n      outline: 1px solid #86c0b2 !important;\n    }\n\n    ${selector} th {\n      outline: 1px solid #a1e7d6 !important;\n    }\n\n    ${selector} td {\n      outline: 1px solid #3f5a54 !important;\n    }\n\n    ${selector} col {\n      outline: 1px solid #6c9a8f !important;\n    }\n\n    ${selector} colgroup {\n      outline: 1px solid #6c9a9d !important;\n    }\n\n    ${selector} button {\n      outline: 1px solid #da8301 !important;\n    }\n\n    ${selector} datalist {\n      outline: 1px solid #c06000 !important;\n    }\n\n    ${selector} fieldset {\n      outline: 1px solid #d95100 !important;\n    }\n\n    ${selector} form {\n      outline: 1px solid #d23600 !important;\n    }\n\n    ${selector} input {\n      outline: 1px solid #fca600 !important;\n    }\n\n    ${selector} keygen {\n      outline: 1px solid #b31e00 !important;\n    }\n\n    ${selector} label {\n      outline: 1px solid #ee8900 !important;\n    }\n\n    ${selector} legend {\n      outline: 1px solid #de6d00 !important;\n    }\n\n    ${selector} meter {\n      outline: 1px solid #e8630c !important;\n    }\n\n    ${selector} optgroup {\n      outline: 1px solid #b33600 !important;\n    }\n\n    ${selector} option {\n      outline: 1px solid #ff8a00 !important;\n    }\n\n    ${selector} output {\n      outline: 1px solid #ff9619 !important;\n    }\n\n    ${selector} progress {\n      outline: 1px solid #e57c00 !important;\n    }\n\n    ${selector} select {\n      outline: 1px solid #e26e0f !important;\n    }\n\n    ${selector} textarea {\n      outline: 1px solid #cc5400 !important;\n    }\n\n    ${selector} details {\n      outline: 1px solid #33848f !important;\n    }\n\n    ${selector} summary {\n      outline: 1px solid #60a1a6 !important;\n    }\n\n    ${selector} command {\n      outline: 1px solid #438da1 !important;\n    }\n\n    ${selector} menu {\n      outline: 1px solid #449da6 !important;\n    }\n\n    ${selector} del {\n      outline: 1px solid #bf0000 !important;\n    }\n\n    ${selector} ins {\n      outline: 1px solid #400000 !important;\n    }\n\n    ${selector} img {\n      outline: 1px solid #22746b !important;\n    }\n\n    ${selector} iframe {\n      outline: 1px solid #64a7a0 !important;\n    }\n\n    ${selector} embed {\n      outline: 1px solid #98daca !important;\n    }\n\n    ${selector} object {\n      outline: 1px solid #00cc99 !important;\n    }\n\n    ${selector} param {\n      outline: 1px solid #37ffc4 !important;\n    }\n\n    ${selector} video {\n      outline: 1px solid #6ee866 !important;\n    }\n\n    ${selector} audio {\n      outline: 1px solid #027353 !important;\n    }\n\n    ${selector} source {\n      outline: 1px solid #012426 !important;\n    }\n\n    ${selector} canvas {\n      outline: 1px solid #a2f570 !important;\n    }\n\n    ${selector} track {\n      outline: 1px solid #59a600 !important;\n    }\n\n    ${selector} map {\n      outline: 1px solid #7be500 !important;\n    }\n\n    ${selector} area {\n      outline: 1px solid #305900 !important;\n    }\n\n    ${selector} a {\n      outline: 1px solid #ff62ab !important;\n    }\n\n    ${selector} em {\n      outline: 1px solid #800b41 !important;\n    }\n\n    ${selector} strong {\n      outline: 1px solid #ff1583 !important;\n    }\n\n    ${selector} i {\n      outline: 1px solid #803156 !important;\n    }\n\n    ${selector} b {\n      outline: 1px solid #cc1169 !important;\n    }\n\n    ${selector} u {\n      outline: 1px solid #ff0430 !important;\n    }\n\n    ${selector} s {\n      outline: 1px solid #f805e3 !important;\n    }\n\n    ${selector} small {\n      outline: 1px solid #d107b2 !important;\n    }\n\n    ${selector} abbr {\n      outline: 1px solid #4a0263 !important;\n    }\n\n    ${selector} q {\n      outline: 1px solid #240018 !important;\n    }\n\n    ${selector} cite {\n      outline: 1px solid #64003c !important;\n    }\n\n    ${selector} dfn {\n      outline: 1px solid #b4005a !important;\n    }\n\n    ${selector} sub {\n      outline: 1px solid #dba0c8 !important;\n    }\n\n    ${selector} sup {\n      outline: 1px solid #cc0256 !important;\n    }\n\n    ${selector} time {\n      outline: 1px solid #d6606d !important;\n    }\n\n    ${selector} code {\n      outline: 1px solid #e04251 !important;\n    }\n\n    ${selector} kbd {\n      outline: 1px solid #5e001f !important;\n    }\n\n    ${selector} samp {\n      outline: 1px solid #9c0033 !important;\n    }\n\n    ${selector} var {\n      outline: 1px solid #d90047 !important;\n    }\n\n    ${selector} mark {\n      outline: 1px solid #ff0053 !important;\n    }\n\n    ${selector} bdi {\n      outline: 1px solid #bf3668 !important;\n    }\n\n    ${selector} bdo {\n      outline: 1px solid #6f1400 !important;\n    }\n\n    ${selector} ruby {\n      outline: 1px solid #ff7b93 !important;\n    }\n\n    ${selector} rt {\n      outline: 1px solid #ff2f54 !important;\n    }\n\n    ${selector} rp {\n      outline: 1px solid #803e49 !important;\n    }\n\n    ${selector} span {\n      outline: 1px solid #cc2643 !important;\n    }\n\n    ${selector} br {\n      outline: 1px solid #db687d !important;\n    }\n\n    ${selector} wbr {\n      outline: 1px solid #db175b !important;\n    }`}var withOutline=(StoryFn,context)=>{let{globals:globals2}=context,isActive=[!0,\"true\"].includes(globals2[PARAM_KEY]),isInDocs=context.viewMode===\"docs\",outlineStyles=useMemo(()=>outlineCSS(isInDocs?'[data-story-block=\"true\"]':\".sb-show-main\"),[context]);return useEffect(()=>{let selectorId=isInDocs?`addon-outline-docs-${context.id}`:\"addon-outline\";return isActive?addOutlineStyles(selectorId,outlineStyles):clearStyles(selectorId),()=>{clearStyles(selectorId);}},[isActive,outlineStyles,context]),StoryFn()};var decorators=[withOutline],globals={[PARAM_KEY]:!1};\n\nexport { decorators, globals };\n"],"names":[],"sourceRoot":""}

package/storybook-static/DropImage-index-stories.befa1b35.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_sunggang_ui_lib=self.webpackChunk_sunggang_ui_lib||[]).push([[376],{"./src/lib/DropImage/index.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Base:()=>Base,__namedExportsOrder:()=>__namedExportsOrder,default:()=>index_stories});var jsx_runtime=__webpack_require__("../node_modules/next/dist/compiled/react/jsx-runtime.js"),react=__webpack_require__("../node_modules/next/dist/compiled/react/index.js"),es=__webpack_require__("../node_modules/react-dropzone/dist/es/index.js"),v4=__webpack_require__("../node_modules/uuid/dist/esm-browser/v4.js"),iconify=__webpack_require__("../node_modules/@iconify/react/dist/iconify.mjs");const DropImage=param=>{let{preview=!0,setFiles,imageUrls}=param;const[previewFiles,setPreviewFiles]=(0,react.useState)([]),{getRootProps,getInputProps,isDragActive,isDragAccept,isDragReject}=(0,es.VB)({accept:{"image/png":[".png"],"image/jpeg":[".jpg",".jpeg"]},maxFiles:10,maxSize:5e6,onDrop:dropFiles=>{const newFiles=[];setFiles(dropFiles),dropFiles.forEach((dropFile=>{Object.assign(dropFile,{preview:URL.createObjectURL(dropFile),uuid:(0,v4.A)()}),newFiles.push(dropFile),setPreviewFiles(newFiles)}))}});return(0,jsx_runtime.jsxs)("section",{className:"w-full",children:[(0,jsx_runtime.jsxs)("div",{...getRootProps({className:"dropzone"}),children:[(0,jsx_runtime.jsx)("input",{...getInputProps()}),(0,jsx_runtime.jsx)("div",{className:"flex justify-between",children:(0,jsx_runtime.jsx)("div",{className:"w-full bg-gray-light rounded-lg",children:(0,jsx_runtime.jsxs)("div",{className:"border-2 border-dashed border-gray-400 rounded-lg bg-gray-100",children:[(0,jsx_runtime.jsx)("div",{className:"flex justify-center py-8",children:(0,jsx_runtime.jsx)(iconify.In,{icon:"material-symbols:upload",width:"2.5rem",height:"2.5rem"})}),(0,jsx_runtime.jsxs)("div",{className:"flex items-center flex-col justify-center",children:[(0,jsx_runtime.jsx)("p",{className:"font-normal text-sm text-gray-400 pb-4",children:"圖片僅支援 png、jpg、jpeg"}),(0,jsx_runtime.jsx)("h5",{className:"mb-2 text-xl font-bold tracking-tight text-gray-700 pb-4",children:"拖曳圖片至此"})]})]})})})]}),preview&&(0,jsx_runtime.jsx)("div",{className:"flex pt-2 gap-2",children:(null==previewFiles?void 0:previewFiles.length)?previewFiles.length>0?previewFiles.map((item=>(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)("img",{className:"w-24 h-24 object-cover",src:null==item?void 0:item.preview,alt:""})},null==item?void 0:item.uuid))):null:imageUrls&&imageUrls.length?imageUrls.map((item=>(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)("img",{className:"w-24 h-24 object-cover",src:null==item?void 0:item.url,alt:""})},null==item?void 0:item.url))):null})]})};var _Base_parameters,_Base_parameters_docs,_Base_parameters1;DropImage.__docgenInfo={description:"",methods:[],displayName:"DropImage",props:{preview:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},imageUrls:{required:!1,tsType:{name:"Array",elements:[{name:"ImageItem"}],raw:"ImageItem[]"},description:""},setFiles:{required:!0,tsType:{name:"ReactDispatch",raw:"React.Dispatch<React.SetStateAction<File[]>>",elements:[{name:"ReactSetStateAction",raw:"React.SetStateAction<File[]>",elements:[{name:"Array",elements:[{name:"File"}],raw:"File[]"}]}]},description:""}}};const index_stories={component:DropImage,title:"DropImage"},Base=(args=>(0,jsx_runtime.jsx)(DropImage,{...args})).bind({});Base.args={preview:!0,setFiles:()=>({}),imageUrls:[{url:"https://gobobook.s3.ap-northeast-1.amazonaws.com/regions/DEV/region1.png",book_items_category_id:null},{url:"https://gobobook.s3.ap-northeast-1.amazonaws.com/regions/DEV/region2.png",book_items_category_id:null}]},Base.parameters={...Base.parameters,docs:{...null===(_Base_parameters=Base.parameters)||void 0===_Base_parameters?void 0:_Base_parameters.docs,source:{originalSource:"args => {\n  return <DropImage {...args} />;\n}",...null===(_Base_parameters1=Base.parameters)||void 0===_Base_parameters1||null===(_Base_parameters_docs=_Base_parameters1.docs)||void 0===_Base_parameters_docs?void 0:_Base_parameters_docs.source}}};const __namedExportsOrder=["Base"]}}]);

package/storybook-static/Switch-index-stories.9cfb2ba1.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_sunggang_ui_lib=self.webpackChunk_sunggang_ui_lib||[]).push([[512],{"./src/lib/Switch/index.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Base:()=>Base,__namedExportsOrder:()=>__namedExportsOrder,default:()=>index_stories});var jsx_runtime=__webpack_require__("../node_modules/next/dist/compiled/react/jsx-runtime.js"),react=__webpack_require__("../node_modules/next/dist/compiled/react/index.js"),dist=__webpack_require__("./node_modules/@radix-ui/react-switch/dist/index.mjs"),clsx=__webpack_require__("./node_modules/clsx/dist/clsx.mjs"),bundle_mjs=__webpack_require__("./node_modules/tailwind-merge/dist/bundle-mjs.mjs");function cn(){for(var _len=arguments.length,inputs=new Array(_len),_key=0;_key<_len;_key++)inputs[_key]=arguments[_key];return(0,bundle_mjs.QP)((0,clsx.$)(inputs))}const Switch=react.forwardRef(((param,ref)=>{let{className,...props}=param;return(0,jsx_runtime.jsx)(dist.bL,{className:cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",className),...props,ref,children:(0,jsx_runtime.jsx)(dist.zi,{className:cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0")})})}));var _Base_parameters,_Base_parameters_docs,_Base_parameters1;Switch.displayName=dist.bL.displayName,Switch.__docgenInfo={description:"",methods:[]};const index_stories={component:Switch,title:"Switch"},Base=(args=>(0,jsx_runtime.jsx)(Switch,{...args})).bind({});Base.args={id:"ad-123",onCheckedChange:()=>({}),disabled:!1},Base.parameters={...Base.parameters,docs:{...null===(_Base_parameters=Base.parameters)||void 0===_Base_parameters?void 0:_Base_parameters.docs,source:{originalSource:"args => {\n  return <Switch {...args} />;\n}",...null===(_Base_parameters1=Base.parameters)||void 0===_Base_parameters1||null===(_Base_parameters_docs=_Base_parameters1.docs)||void 0===_Base_parameters_docs?void 0:_Base_parameters_docs.source}}};const __namedExportsOrder=["Base"]}}]);

package/storybook-static/UploadImage-CustomUpload-stories.521444aa.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_sunggang_ui_lib=self.webpackChunk_sunggang_ui_lib||[]).push([[134],{"./src/lib/UploadImage/CustomUpload.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Base:()=>Base,Customer:()=>Customer,__namedExportsOrder:()=>__namedExportsOrder,default:()=>CustomUpload_stories});var jsx_runtime=__webpack_require__("../node_modules/next/dist/compiled/react/jsx-runtime.js"),react=__webpack_require__("../node_modules/next/dist/compiled/react/index.js"),iconify=__webpack_require__("../node_modules/@iconify/react/dist/iconify.mjs");const ModalContent=param=>{let{title,setModal,children,onClick,notice=!1}=param;return(0,jsx_runtime.jsxs)("form",{children:[title&&(0,jsx_runtime.jsx)("div",{className:"text-2xl text-gray-700 font-medium border-solid border-b border-gray-300 mb-4 p-4",children:title}),children&&(0,jsx_runtime.jsx)("div",{className:"py-4 px-8",children}),(0,jsx_runtime.jsx)("div",{className:"flex items-center text-base p-4 px-8 justify-around",children:notice?(0,jsx_runtime.jsx)("button",{type:"button",className:"w-24 h-10 px-2 text-white bg-gray-600  rounded",onClick:setModal,children:"確定"}):(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("button",{type:"button",className:"w-24 h-10 px-2 text-white bg-gray-600  rounded",onClick:setModal,children:"取消"}),onClick&&(0,jsx_runtime.jsx)("button",{type:"button",className:"w-24 h-10 mx-3 text-white bg-gray-500 rounded",onClick,children:"送出"})]})})]})},Modal_ModalContent=ModalContent;ModalContent.__docgenInfo={description:"",methods:[],displayName:"ModalContent",props:{title:{required:!1,tsType:{name:"string"},description:""},setModal:{required:!1,tsType:{name:"any"},description:""},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},onClick:{required:!1,tsType:{name:"any"},description:""},notice:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}}}};const ErrorContent=param=>{let{setModal,errmsg}=param;return(0,jsx_runtime.jsx)(Modal_ModalContent,{setModal,onClick:setModal,notice:!0,children:(0,jsx_runtime.jsxs)("div",{className:"w-full max-w-xl",children:[(0,jsx_runtime.jsx)("div",{className:"flex justify-center items-center mb-6",children:(0,jsx_runtime.jsx)(iconify.In,{icon:"fluent-mdl2:status-error-full",color:"red",height:60})}),(0,jsx_runtime.jsx)("div",{className:"text-center text-lg text-gray-500",children:errmsg})]})})},Modal_ErrorContent=ErrorContent;ErrorContent.__docgenInfo={description:"",methods:[],displayName:"ErrorContent",props:{setModal:{required:!0,tsType:{name:"any"},description:""},errmsg:{required:!0,tsType:{name:"union",raw:"React.ReactNode | string",elements:[{name:"ReactReactNode",raw:"React.ReactNode"},{name:"string"}]},description:""}}};const Modal=param=>{let{modal,unsetModal=()=>{}}=param;const handleKeyUp=e=>{var _document_activeElement;"Escape"!==e.key||["INPUT","SELECT"].includes(null===(_document_activeElement=document.activeElement)||void 0===_document_activeElement?void 0:_document_activeElement.tagName)||unsetModal()};return(0,react.useEffect)((()=>(document.addEventListener("keyup",handleKeyUp),()=>document.removeEventListener("keyup",handleKeyUp))),[unsetModal]),(0,jsx_runtime.jsx)("div",{className:"fixed top-0 left-0 h-screen z-[2000] transition-opacity duration-300 transition-opacity bg-[#000000b3] w-full",children:(0,jsx_runtime.jsx)("div",{className:"w-full h-full flex justify-center items-center p-6",children:(0,jsx_runtime.jsx)("div",{className:"bg-white rounded overflow-y-auto w-full m-auto max-w-[455px] rounded-xl",children:modal})})})},Modal_Modal=Modal;Modal.__docgenInfo={description:"",methods:[],displayName:"Modal",props:{modal:{required:!0,tsType:{name:"ReactReactElement",raw:"React.ReactElement"},description:""},unsetModal:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"",defaultValue:{value:"() => {}",computed:!1}}}};const BaseTemplate=param=>{let{file,imageUrl}=param;const[tempImage,setTempImage]=(0,react.useState)(null);return(0,react.useEffect)((()=>{let fileReader,isCancel=!1;return file&&(fileReader=new FileReader,fileReader.onload=e=>{const{result}=e.target;result&&!isCancel&&setTempImage(result.toString())},fileReader.readAsDataURL(file)),()=>{setTempImage(null),isCancel=!0,fileReader&&1===fileReader.readyState&&fileReader.abort()}}),[file]),(0,jsx_runtime.jsx)("div",{className:"max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden items-center",children:(0,jsx_runtime.jsx)("div",{className:"px-4 py-6 w-72 h-56",children:tempImage||imageUrl?(0,jsx_runtime.jsx)("img",{className:"w-full h-full object-contain border-dashed border-2 border-gray-400 p-6 rounded-lg",src:tempImage||imageUrl,alt:""}):(0,jsx_runtime.jsx)("div",{id:"image-preview",className:"max-w-sm p-6 bg-gray-100 border-dashed border-2 border-gray-400 rounded-lg items-center mx-auto text-center cursor-pointer",children:(0,jsx_runtime.jsxs)("div",{className:"cursor-pointer",children:[(0,jsx_runtime.jsx)("div",{className:"flex justify-center",children:(0,jsx_runtime.jsx)(iconify.In,{icon:"material-symbols:upload",width:"2.5rem",height:"2.5rem"})}),(0,jsx_runtime.jsx)("p",{className:"font-normal text-sm text-gray-400 py-4",children:"圖片僅支援 png、jpg、jpeg"}),(0,jsx_runtime.jsx)("h5",{className:"mb-2 text-xl font-bold tracking-tight text-gray-700",children:"上傳圖片"})]})})})})},UploadImage_BaseTemplate=BaseTemplate;BaseTemplate.__docgenInfo={description:"",methods:[],displayName:"BaseTemplate",props:{file:{required:!1,tsType:{name:"union",raw:"File | null",elements:[{name:"File"},{name:"null"}]},description:""},imageUrl:{required:!1,tsType:{name:"string"},description:""}}};const CustomUpload=param=>{let{className,children,file,setFile,imageUrl}=param;const imageMimeType=/image\/(png|jpg|jpeg)/i,[modal,setModal]=(0,react.useState)(null),hiddenFileInput=(0,react.useRef)(null);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsxs)("button",{className:className?[className].join(" "):"",type:"button",onClick:()=>{var _hiddenFileInput_current;null===(_hiddenFileInput_current=hiddenFileInput.current)||void 0===_hiddenFileInput_current||_hiddenFileInput_current.click()},children:[children||(0,jsx_runtime.jsx)(UploadImage_BaseTemplate,{file,imageUrl}),(0,jsx_runtime.jsx)("input",{type:"file",ref:hiddenFileInput,accept:".png, .jpg, .jpeg",onChange:event=>{var _event_target_files,_currentFile_type;const currentFile=null===(_event_target_files=event.target.files)||void 0===_event_target_files?void 0:_event_target_files[0];currentFile?!currentFile||(null===(_currentFile_type=currentFile.type)||void 0===_currentFile_type?void 0:_currentFile_type.match(imageMimeType))?currentFile&&currentFile.size>512e4?setModal((0,jsx_runtime.jsx)(Modal_ErrorContent,{setModal,errmsg:(0,jsx_runtime.jsxs)("span",{children:["選擇的檔案大小：",String((currentFile.size/1024/1024).toFixed(3))," MB",(0,jsx_runtime.jsx)("br",{}),(0,jsx_runtime.jsx)("hr",{}),"上限：",String(4.8828125.toFixed(3))," MB"]})})):setFile(currentFile):setModal((0,jsx_runtime.jsx)(Modal_ErrorContent,{setModal,errmsg:"圖片僅支援 png、jpg、jpeg!"})):setFile(null)},className:"hidden"})]}),modal&&(0,jsx_runtime.jsx)(Modal_Modal,{modal,unsetModal:setModal})]})};var _Base_parameters,_Base_parameters_docs,_Base_parameters1,_Customer_parameters,_Customer_parameters_docs,_Customer_parameters1;CustomUpload.__docgenInfo={description:"",methods:[],displayName:"CustomUpload",props:{className:{required:!1,tsType:{name:"string"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},file:{required:!1,tsType:{name:"union",raw:"File | null",elements:[{name:"File"},{name:"null"}]},description:""},setFile:{required:!1,tsType:{name:"any"},description:""},imageUrl:{required:!1,tsType:{name:"string"},description:""}}};const CustomUpload_stories={component:CustomUpload,title:"CustomUpload"},Base=(args=>{const[file,setFile]=(0,react.useState)(null);return(0,jsx_runtime.jsx)(CustomUpload,{...args,file,setFile})}).bind({});Base.args={file:null,setFile:()=>{},imageUrl:"https://gobobook.s3.ap-northeast-1.amazonaws.com/regions/DEV/vaadin_golf.svg"};const Customer=(args=>{const[file,setFile]=(0,react.useState)(null);return(0,jsx_runtime.jsx)(CustomUpload,{...args,file,setFile,children:(0,jsx_runtime.jsxs)("div",{className:"border border-solid border-gray-400 p-4",children:[(0,jsx_runtime.jsx)("div",{children:"圖片僅支援 png、jpg、jpeg"}),(0,jsx_runtime.jsx)("div",{children:"點擊上傳"})]})})}).bind({});Customer.args={file:null,setFile:()=>{},imageUrl:""},Base.parameters={...Base.parameters,docs:{...null===(_Base_parameters=Base.parameters)||void 0===_Base_parameters?void 0:_Base_parameters.docs,source:{originalSource:"args => {\n  const [file, setFile] = useState(null);\n  return <CustomUpload {...args} file={file} setFile={setFile} />;\n}",...null===(_Base_parameters1=Base.parameters)||void 0===_Base_parameters1||null===(_Base_parameters_docs=_Base_parameters1.docs)||void 0===_Base_parameters_docs?void 0:_Base_parameters_docs.source}}},Customer.parameters={...Customer.parameters,docs:{...null===(_Customer_parameters=Customer.parameters)||void 0===_Customer_parameters?void 0:_Customer_parameters.docs,source:{originalSource:'args => {\n  const [file, setFile] = useState(null);\n  return <CustomUpload {...args} file={file} setFile={setFile}>\n      <div className="border border-solid border-gray-400 p-4">\n        <div>圖片僅支援 png、jpg、jpeg</div>\n        <div>點擊上傳</div>\n      </div>\n    </CustomUpload>;\n}',...null===(_Customer_parameters1=Customer.parameters)||void 0===_Customer_parameters1||null===(_Customer_parameters_docs=_Customer_parameters1.docs)||void 0===_Customer_parameters_docs?void 0:_Customer_parameters_docs.source}}};const __namedExportsOrder=["Base","Customer"]}}]);

package/storybook-static/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="164" height="164">
+  <svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z" fill="#FF4785"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" fill="#fff"></path>
+  </svg>
+  <style>@media (prefers-color-scheme: light) { :root { filter: none; } }</style>
+</svg>

package/storybook-static/iframe.html

@@ -0,0 +1,370 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="prefetch" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-italic.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-bold-italic.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="./sb-common-assets/fonts.css"><base target="_parent"><style>/* While we aren't showing the main block yet, but still preparing, we want everything the user
+     has rendered, which may or may not be in #storybook-root, to be display none */
+  .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
+    display: none;
+  }
+
+  .sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
+    display: none;
+  }
+
+  /* Hide our own blocks when we aren't supposed to be showing them */
+  :not(.sb-show-preparing-story) > .sb-preparing-story,
+  :not(.sb-show-preparing-docs) > .sb-preparing-docs,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+    display: none;
+  }
+
+  .sb-show-main.sb-main-centered {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    min-height: 100vh;
+  }
+
+  .sb-show-main.sb-main-centered #storybook-root {
+    box-sizing: border-box;
+    margin: auto;
+    padding: 1rem;
+    max-height: 100%; /* Hack for centering correctly in IE11 */
+  }
+
+  /* Vertical centering fix for IE11 */
+  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .sb-show-main.sb-main-centered:after {
+      content: '';
+      min-height: inherit;
+      font-size: 0;
+    }
+  }
+
+  .sb-show-main.sb-main-fullscreen {
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
+  .sb-show-main.sb-main-padded {
+    margin: 0;
+    padding: 1rem;
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    font-family:
+      'Nunito Sans',
+      -apple-system,
+      '.SFNSText-Regular',
+      'San Francisco',
+      BlinkMacSystemFont,
+      'Segoe UI',
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    overflow: auto;
+  }
+
+  .sb-heading {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+    padding-right: 25px;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    border: 20px solid rgb(187, 49, 49);
+    background: #222;
+    color: #fff;
+    z-index: 999999;
+  }
+
+  .sb-errordisplay_code {
+    padding: 10px;
+    background: #000;
+    color: #eee;
+    font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
+      'Lucida Console', Consolas, Monaco, monospace;
+  }
+
+  .sb-errordisplay pre {
+    white-space: pre-wrap;
+  }
+
+  @-webkit-keyframes sb-rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes sb-rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes sb-glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  @keyframes sb-glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  /* We display the preparing loaders *over* the rendering story */
+  .sb-preparing-story,
+  .sb-preparing-docs {
+    background-color: white;
+    /* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always
+    on top, but this isn't possible as it would require making CSS changes that could affect user code */
+    z-index: 2147483647;
+  }
+
+  .sb-loader {
+    -webkit-animation: sb-rotate360 0.7s linear infinite;
+    animation: sb-rotate360 0.7s linear infinite;
+    border-color: rgba(97, 97, 97, 0.29);
+    border-radius: 50%;
+    border-style: solid;
+    border-top-color: #646464;
+    border-width: 2px;
+    display: inline-block;
+    height: 32px;
+    left: 50%;
+    margin-left: -16px;
+    margin-top: -16px;
+    mix-blend-mode: difference;
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    transition: all 200ms ease-out;
+    vertical-align: top;
+    width: 32px;
+    z-index: 4;
+  }
+
+  .sb-previewBlock {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+    margin: 25px auto 40px;
+    max-width: 600px;
+  }
+
+  .sb-previewBlock_header {
+    align-items: center;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
+    display: flex;
+    gap: 14px;
+    height: 40px;
+    padding: 0 12px;
+  }
+
+  .sb-previewBlock_icon {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background: #e6e6e6;
+    height: 14px;
+    width: 14px;
+  }
+  .sb-previewBlock_icon:last-child {
+    margin-left: auto;
+  }
+
+  .sb-previewBlock_body {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    height: 182px;
+    position: relative;
+  }
+
+  .sb-argstableBlock {
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 13px;
+    line-height: 20px;
+    margin: 25px auto 40px;
+    max-width: 600px;
+    text-align: left;
+    width: 100%;
+  }
+  .sb-argstableBlock th:first-of-type,
+  .sb-argstableBlock td:first-of-type {
+    padding-left: 20px;
+  }
+  .sb-argstableBlock th:nth-of-type(2),
+  .sb-argstableBlock td:nth-of-type(2) {
+    width: 35%;
+  }
+  .sb-argstableBlock th:nth-of-type(3),
+  .sb-argstableBlock td:nth-of-type(3) {
+    width: 15%;
+  }
+  .sb-argstableBlock th:last-of-type,
+  .sb-argstableBlock td:last-of-type {
+    width: 25%;
+    padding-right: 20px;
+  }
+  .sb-argstableBlock th span,
+  .sb-argstableBlock td span {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0;
+    box-shadow: none;
+    color: transparent;
+  }
+  .sb-argstableBlock th {
+    padding: 10px 15px;
+  }
+
+  .sb-argstableBlock-body {
+    border-radius: 4px;
+    box-shadow:
+      rgba(0, 0, 0, 0.1) 0 1px 3px 1px,
+      rgba(0, 0, 0, 0.065) 0 0 0 1px;
+  }
+  .sb-argstableBlock-body tr {
+    background: transparent;
+    overflow: hidden;
+  }
+  .sb-argstableBlock-body tr:not(:first-child) {
+    border-top: 1px solid #e6e6e6;
+  }
+  .sb-argstableBlock-body tr:first-child td:first-child {
+    border-top-left-radius: 4px;
+  }
+  .sb-argstableBlock-body tr:first-child td:last-child {
+    border-top-right-radius: 4px;
+  }
+  .sb-argstableBlock-body tr:last-child td:first-child {
+    border-bottom-left-radius: 4px;
+  }
+  .sb-argstableBlock-body tr:last-child td:last-child {
+    border-bottom-right-radius: 4px;
+  }
+  .sb-argstableBlock-body td {
+    background: #fff;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    vertical-align: top;
+  }
+  .sb-argstableBlock-body td:not(:first-of-type) {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .sb-argstableBlock-body button {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background-color: rgba(0, 0, 0, 0.1);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    color: transparent;
+    display: inline;
+    font-size: 12px;
+    line-height: 1;
+    padding: 10px 16px;
+  }
+
+  .sb-argstableBlock-summary {
+    margin-top: 4px;
+  }
+
+  .sb-argstableBlock-code {
+    margin-right: 4px;
+    margin-bottom: 4px;
+    padding: 2px 5px;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.top !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+      window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to top frame for connecting dev tools');
+  }</script><style>#storybook-root[hidden],
+      #storybook-docs[hidden] {
+        display: none !important;
+      }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="storybook-root"></div><div id="storybook-docs"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
+          
+      
+          
+            window['LOGLEVEL'] = "info";
+          
+      
+          
+            window['FRAMEWORK_OPTIONS'] = {};
+          
+      
+          
+      
+          
+            window['FEATURES'] = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true};
+          
+      
+          
+      
+          
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src/lib","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src\\/lib(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];
+          
+      
+          
+            window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag"};
+          
+      
+          
+            window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};</script><script type="module">import './sb-preview/runtime.js';
+
+      
+      import './runtime~main.28408b82.iframe.bundle.js';
+      
+      import './852.18487f4c.iframe.bundle.js';
+      
+      import './main.6f3c811b.iframe.bundle.js';</script></body></html>

package/storybook-static/index.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>@storybook/cli - Storybook</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+
+    
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    
+    <link
+      rel="prefetch"
+      href="./sb-common-assets/nunito-sans-regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="prefetch"
+      href="./sb-common-assets/nunito-sans-bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+
+    <link href="./sb-manager/runtime.js" rel="modulepreload" />
+
+    
+    <link href="./sb-addons/storybook-core-server-presets-0/common-manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-controls-1/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-actions-2/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-backgrounds-3/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-viewport-4/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-toolbars-5/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-measure-6/manager-bundle.js" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-outline-7/manager-bundle.js" rel="modulepreload" />
+       
+
+    <style>
+      #storybook-root[hidden] {
+        display: none !important;
+      }
+    </style>
+
+    
+  </head>
+  <body>
+    <div id="root"></div>
+
+    
+    <script>
+      
+        
+          window['FEATURES'] = {
+  "argTypeTargetsV7": true,
+  "legacyDecoratorFileOrder": false,
+  "disallowImplicitActionsInRenderV8": true
+};
+        
+      
+        
+          window['REFS'] = {};
+        
+      
+        
+          window['LOGLEVEL'] = "info";
+        
+      
+        
+          window['DOCS_OPTIONS'] = {
+  "defaultName": "Docs",
+  "autodocs": "tag"
+};
+        
+      
+        
+          window['CONFIG_TYPE'] = "PRODUCTION";
+        
+      
+        
+      
+        
+      
+        
+          window['TAGS_OPTIONS'] = {
+  "dev-only": {
+    "excludeFromDocsStories": true
+  },
+  "docs-only": {
+    "excludeFromSidebar": true
+  },
+  "test-only": {
+    "excludeFromSidebar": true,
+    "excludeFromDocsStories": true
+  }
+};
+        
+      
+        
+          window['STORYBOOK_RENDERER'] = "@storybook/react";
+        
+      
+        
+          window['STORYBOOK_BUILDER'] = "@storybook/builder-webpack5";
+        
+      
+        
+          window['STORYBOOK_FRAMEWORK'] = "@storybook/nextjs";
+        
+      
+    </script>
+    
+
+    <script type="module">
+      import './sb-manager/globals-runtime.js';
+      
+      
+        import './sb-addons/storybook-core-server-presets-0/common-manager-bundle.js';
+      
+        import './sb-addons/essentials-controls-1/manager-bundle.js';
+      
+        import './sb-addons/essentials-actions-2/manager-bundle.js';
+      
+        import './sb-addons/essentials-backgrounds-3/manager-bundle.js';
+      
+        import './sb-addons/essentials-viewport-4/manager-bundle.js';
+      
+        import './sb-addons/essentials-toolbars-5/manager-bundle.js';
+      
+        import './sb-addons/essentials-measure-6/manager-bundle.js';
+      
+        import './sb-addons/essentials-outline-7/manager-bundle.js';
+      
+      
+      import './sb-manager/runtime.js';
+    </script>
+
+    
+    <link href="./sb-preview/runtime.js" rel="prefetch" as="script" />
+    
+  </body>
+</html>

package/storybook-static/index.json

@@ -0,0 +1 @@
+{"v":4,"entries":{"dropimage--base":{"type":"story","id":"dropimage--base","name":"Base","title":"DropImage","importPath":"./src/lib/DropImage/index.stories.tsx","tags":["story"]},"switch--base":{"type":"story","id":"switch--base","name":"Base","title":"Switch","importPath":"./src/lib/Switch/index.stories.tsx","tags":["story"]},"customupload--base":{"type":"story","id":"customupload--base","name":"Base","title":"CustomUpload","importPath":"./src/lib/UploadImage/CustomUpload.stories.tsx","tags":["story"]},"customupload--customer":{"type":"story","id":"customupload--customer","name":"Customer","title":"CustomUpload","importPath":"./src/lib/UploadImage/CustomUpload.stories.tsx","tags":["story"]}}}