@konomi-app/ui 1.4.0 → 1.5.0

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from './loading-overlay';
+export * from './modal';

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './loading-overlay';
+export * from './modal';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC"}

package/dist/loading-overlay.d.ts

@@ -15,6 +15,8 @@ export declare class LoadingOverlay extends Overlay {
     set html(html: string);
     set progress(progress: number);
     render(): void;
-    private pushLoadingStyle;
+    private containerStyle;
+    private loaderStyle;
+    private progressStyle;
 }
 export {};

package/dist/loading-overlay.js

@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import { Overlay } from './overlay';
 export class LoadingOverlay extends Overlay {
     #label;
@@ -12,20 +13,19 @@ export class LoadingOverlay extends Overlay {
         this.#html = '';
         this.#progress = props.progress ?? null;
         const container = document.createElement('div');
-        container.classList.add('__container');
+        container.classList.add(this.containerStyle);
         this._root.append(container);
         const loaderElement = document.createElement('div');
-        loaderElement.classList.add('__loader');
+        loaderElement.classList.add(this.loaderStyle);
         this._loaderElement = loaderElement;
         container.append(loaderElement);
         const progressElement = document.createElement('div');
-        progressElement.classList.add('__progress');
+        progressElement.classList.add(this.progressStyle);
         this._progressElement = progressElement;
         container.append(progressElement);
         const contentElement = document.createElement('div');
         this._contentElement = contentElement;
         container.append(contentElement);
-        this.pushLoadingStyle();
         this.render();
     }
     hide() {
@@ -62,73 +62,67 @@ export class LoadingOverlay extends Overlay {
             }
         }
     }
-    pushLoadingStyle() {
-        const style = document.createElement('style');
-        style.textContent = `
-      #${this._rootId} .__container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 32px;
-        padding: 32px 64px;
-        background-color: #fffc;
-        backdrop-filter: blur(8px);
-        border-radius: 8px;
-        box-shadow: 0 5px 24px -6px #0002;
-        min-width: 300px;
-        max-width: 90vw;
-        min-height: 200px;
-        position: relative;
-        overflow: hidden;
-        transition: all 250ms ease;
-    
-        @keyframes spin {
-          0% {
-            transform: rotate(0deg);
-            border-radius: 1em;
-          }
-          20% {
-            transform: rotate(0deg);
-          }
-          30%,
-          60% {
-            border-radius: 0.25em;
-          }
-          70% {
-            transform: rotate(180deg);
-          }
-          100% {
-            transform: rotate(180deg);
-            border-radius: 1em;
-          }
-        }
-      }
-      #${this._rootId} .__loader {
-        font-size: 48px;
-        width: 1em;
-        height: 1em;
-        position: relative;
-        border: 2px solid #2563ebaa;
+    containerStyle = css `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 32px;
+    padding: 32px 64px;
+    background-color: #fffc;
+    border-radius: 8px;
+    box-shadow: 0 5px 24px -6px #0002;
+    min-width: 300px;
+    max-width: 90vw;
+    min-height: 200px;
+    position: relative;
+    overflow: hidden;
+    transition: all 250ms ease;
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
         border-radius: 1em;
-        animation-duration: 2s;
-        animation-timing-function: ease;
-        animation-delay: 0s;
-        animation-iteration-count: infinite;
-        animation-direction: normal;
-        animation-fill-mode: none;
-        animation-play-state: running;
       }
-      #${this._rootId} .__progress {
-        position: absolute;
-        bottom: 0px;
-        left: 0;
-        width: 0%;
-        height: 3px;
-        background-color: #2563eb;
-        transition: all 250ms ease;
+      20% {
+        transform: rotate(0deg);
+      }
+      30%,
+      60% {
+        border-radius: 0.25em;
+      }
+      70% {
+        transform: rotate(180deg);
+      }
+      100% {
+        transform: rotate(180deg);
+        border-radius: 1em;
       }
-    `;
     }
+  `;
+    loaderStyle = css `
+    font-size: 48px;
+    width: 1em;
+    height: 1em;
+    position: relative;
+    border: 2px solid #2563ebaa;
+    border-radius: 1em;
+    animation-duration: 2s;
+    animation-timing-function: ease;
+    animation-delay: 0s;
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+    animation-fill-mode: none;
+    animation-play-state: running;
+  `;
+    progressStyle = css `
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    width: 0%;
+    height: 3px;
+    background-color: #2563eb;
+    transition: all 250ms ease;
+  `;
 }
 //# sourceMappingURL=loading-overlay.js.map

package/dist/loading-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-overlay.js","sourceRoot":"","sources":["../src/loading-overlay.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"loading-overlay.js","sourceRoot":"","sources":["../src/loading-overlay.ts"],"names":[],"mappings":"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"}

package/dist/modal.d.ts

@@ -0,0 +1,21 @@
+import { Overlay } from './overlay';
+type Mode = 'alert' | 'prompt' | 'loading' | 'custom';
+type Label = string | string[];
+type ConstructorProps = Readonly<Partial<{
+    initialMode: Mode;
+}>>;
+type LoadingProps = {
+    label: Label;
+    html: string;
+    progress: number | null;
+};
+export declare class Modal extends Overlay {
+    #private;
+    constructor(props?: ConstructorProps);
+    hide(): void;
+    set loading(props: Partial<LoadingProps>);
+    changeMode(mode: Mode): void;
+    render(): void;
+    private containerStyle;
+}
+export {};

package/dist/modal.js

@@ -0,0 +1,139 @@
+import { css } from '@emotion/css';
+import { Overlay } from './overlay';
+export class Modal extends Overlay {
+    #mode;
+    #containerElement;
+    #loadingProps;
+    constructor(props = {}) {
+        super();
+        const { initialMode = 'loading' } = props;
+        this.#mode = initialMode;
+        this.#loadingProps = {
+            label: '',
+            html: '',
+            progress: null,
+        };
+        const container = document.createElement('div');
+        this.#containerElement = container;
+        container.classList.add(this.containerStyle);
+        this._root.append(container);
+        this.render();
+    }
+    hide() {
+        this.#loadingProps = {
+            label: '',
+            html: '',
+            progress: null,
+        };
+        super.hide();
+    }
+    set loading(props) {
+        this.#mode = 'loading';
+        this.#loadingProps = { ...this.#loadingProps, ...props };
+        this.render();
+    }
+    changeMode(mode) {
+        this.#mode = mode;
+        this.render();
+    }
+    render() {
+        super.render();
+        if (this.#mode === 'loading') {
+            const { label, html, progress } = this.#loadingProps;
+            this.#containerElement.innerHTML = `
+        <div>
+        <div class="__l">${html || typeof label === 'string' ? label : label.join('<br />')}</div>
+          <div class="__p" style="width: ${progress ?? 0}%"></div>
+        </div>
+      `;
+        }
+        else {
+        }
+    }
+    containerStyle = css `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 32px;
+    padding: 32px 64px;
+    background-color: #fffc;
+    border-radius: 8px;
+    box-shadow: 0 5px 24px -6px #0002;
+    min-width: 400px;
+    max-width: 90vw;
+    min-height: 300px;
+    position: relative;
+    overflow: hidden;
+    transition: all 250ms ease;
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+        border-radius: 1em;
+      }
+      20% {
+        transform: rotate(0deg);
+      }
+      30%,
+      60% {
+        border-radius: 0.25em;
+      }
+      70% {
+        transform: rotate(180deg);
+      }
+      100% {
+        transform: rotate(180deg);
+        border-radius: 1em;
+      }
+    }
+
+    @keyframes show {
+      0% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    @keyframes hide {
+      0% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+    }
+
+    .__l {
+      font-size: 48px;
+      width: 1em;
+      height: 1em;
+      position: relative;
+      border: 2px solid #2563ebaa;
+      border-radius: 1em;
+      animation-duration: 2s;
+      animation-timing-function: ease;
+      animation-delay: 0s;
+      animation-iteration-count: infinite;
+      animation-direction: normal;
+      animation-fill-mode: none;
+      animation-play-state: running;
+    }
+
+    .__p {
+      position: absolute;
+      bottom: 0px;
+      left: 0;
+      width: 0%;
+      height: 3px;
+      background-color: #2563eb;
+      transition: all 250ms ease;
+    }
+  `;
+}
+//# sourceMappingURL=modal.js.map

package/dist/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../src/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAOpC,MAAM,OAAO,KAAM,SAAQ,OAAO;IAChC,KAAK,CAAO;IACZ,iBAAiB,CAAiB;IAClC,aAAa,CAAe;IAE5B,YAAmB,QAA0B,EAAE;QAC7C,KAAK,EAAE,CAAC;QAER,MAAM,EAAE,WAAW,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;QAE1C,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QACzB,IAAI,CAAC,aAAa,GAAG;YACnB,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,IAAI;SACf,CAAC;QAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACnC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC7C,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAE7B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEQ,IAAI;QACX,IAAI,CAAC,aAAa,GAAG;YACnB,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,IAAI;SACf,CAAC;QACF,KAAK,CAAC,IAAI,EAAE,CAAC;IACf,CAAC;IAED,IAAW,OAAO,CAAC,KAA4B;QAC7C,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,KAAK,EAAE,CAAC;QACzD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,UAAU,CAAC,IAAU;QAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEQ,MAAM;QACb,KAAK,CAAC,MAAM,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC;YACrD,IAAI,CAAC,iBAAiB,CAAC,SAAS,GAAG;;2BAEd,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;2CAChD,QAAQ,IAAI,CAAC;;OAEjD,CAAC;SACH;aAAM;SACN;IACH,CAAC;IAEO,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoF3B,CAAC;CACH"}

package/dist/overlay.d.ts

@@ -1,6 +1,5 @@
 export declare class Overlay {
     protected readonly _root: HTMLDivElement;
-    protected readonly _rootId: string;
     protected _shown: boolean;
     protected _disableBeforeUnload: boolean;
     constructor();
@@ -9,7 +8,7 @@ export declare class Overlay {
     protected render(): void;
     /** JavaScript中にページを離れようとした場合にアラートを表示します */
     private beforeunload;
-    private pushStyle;
+    private rootClass;
     /**
      * @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。
      */
@@ -19,3 +18,4 @@ export declare class Overlay {
      */
     stop(): void;
 }
+export declare const getLoadingOverlay: () => Overlay;

package/dist/overlay.js

@@ -1,6 +1,6 @@
+import { css } from '@emotion/css';
 export class Overlay {
     _root;
-    _rootId;
     _shown;
     _disableBeforeUnload;
     constructor() {
@@ -8,10 +8,7 @@ export class Overlay {
         this._disableBeforeUnload = false;
         const root = document.createElement('div');
         this._root = root;
-        const rootId = `overlay-${Math.random().toString(36).slice(2)}`;
-        this._rootId = rootId;
-        this._root.id = rootId;
-        this.pushStyle();
+        this._root.classList.add(this.rootClass);
         document.body.append(root);
     }
     show() {
@@ -35,35 +32,29 @@ export class Overlay {
         event.preventDefault();
         event.returnValue = '';
     }
-    pushStyle() {
-        const style = document.createElement('style');
-        style.textContent = `
-      #${this._rootId} {
-        font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN',
-        Meiryo, sans-serif;
-        color: #356;
-        font-size: 17px;
-    
-        overflow: hidden;
-        background-color: #fff6;
-        backdrop-filter: blur(10px);
-        box-sizing: content-box;
-    
-        position: fixed;
-        inset: 0;
-        width: 100vw;
-        height: 100vh;
-    
-        display: grid;
-        place-items: center;
-        transition: all 250ms ease;
-        z-index: 1000;
-        opacity: 0;
-        transition: all 250ms ease; 
-      }
-    `;
-        document.head.append(style);
-    }
+    rootClass = css `
+    font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN',
+      Meiryo, sans-serif;
+    color: #356;
+    font-size: 17px;
+
+    overflow: hidden;
+    background-color: #fff6;
+    backdrop-filter: blur(10px);
+    box-sizing: content-box;
+
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
+
+    display: grid;
+    place-items: center;
+    transition: all 250ms ease;
+    z-index: 1000;
+    opacity: 0;
+    transition: all 250ms ease;
+  `;
     /**
      * @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。
      */
@@ -77,4 +68,11 @@ export class Overlay {
         this.hide();
     }
 }
+let cachedLoadingOverlay = null;
+export const getLoadingOverlay = () => {
+    if (cachedLoadingOverlay === null) {
+        cachedLoadingOverlay = new Overlay();
+    }
+    return cachedLoadingOverlay;
+};
 //# sourceMappingURL=overlay.js.map

package/dist/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,OAAO;IACC,KAAK,CAAiB;IACtB,OAAO,CAAS;IACzB,MAAM,CAAU;IAChB,oBAAoB,CAAU;IAExC;QACE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;QAElC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,MAAM,MAAM,GAAG,WAAW,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,MAAM,CAAC;QACvB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACxC,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;QACtC,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAES,MAAM;QACd,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QACnD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;IAChE,CAAC;IAED,2CAA2C;IACnC,YAAY,CAAC,KAAwB;QAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC;IACzB,CAAC;IAEO,SAAS;QACf,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,WAAW,GAAG;SACf,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;KAuBhB,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED;;OAEG;IACI,KAAK;QACV,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IACD;;OAEG;IACI,IAAI;QACT,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;CACF"}
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,MAAM,OAAO,OAAO;IACC,KAAK,CAAiB;IAC/B,MAAM,CAAU;IAChB,oBAAoB,CAAU;IAExC;QACE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;QAElC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACxC,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;QACtC,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAES,MAAM;QACd,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QACnD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;IAChE,CAAC;IAED,2CAA2C;IACnC,YAAY,CAAC,KAAwB;QAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC;IACzB,CAAC;IAEO,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;GAsBtB,CAAC;IAEF;;OAEG;IACI,KAAK;QACV,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IACD;;OAEG;IACI,IAAI;QACT,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;CACF;AAED,IAAI,oBAAoB,GAAmB,IAAI,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAY,EAAE;IAC7C,IAAI,oBAAoB,KAAK,IAAI,EAAE;QACjC,oBAAoB,GAAG,IAAI,OAAO,EAAE,CAAC;KACtC;IACD,OAAO,oBAAoB,CAAC;AAC9B,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konomi-app/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "types": "dist/index.d.ts",
   "main": "dist/index.js",
   "author": "adachi",