@plaidev/karte-action-sdk 1.1.112 → 1.1.113-27923240.51ac14b8

package/dist/hydrate/index.es.js

@@ -4,9 +4,12 @@ import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, crea
 import { setContext, getContext, createEventDispatcher, onMount, onDestroy as onDestroy$1 } from 'svelte';
 
 /**
- * 内部的に使われている、UIから選択できない関数
+ * @internal
+ */
+const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
+/**
+ * @internal
  */
-const NOOP = (_args) => { };
 const isPreview = () => {
     return true;
 };
@@ -83,12 +86,12 @@ const getMarginStyle = (margin) => {
     return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
 };
 /**
- * The scroll event hooking function
+ * スクロール率が達したときに呼び出すコールバックを登録します
  *
- * @param rate - scroll rate, which mean is percentage of scrolling in viewport
- * @param fn - a function called when `rate` is reached. if the function return `true`, it will be called again.
+ * @param rate - スクロール率。この値は viewport でのスクロールのパーセンテージ
+ * @param fn - スクロール率が達したときに呼び出されるコールバック関数
  *
- * @returns The function that is scroll stop event handling
+ * @returns スクロール率によって呼び出されるコールバックを停止する関数を返します
  */
 function onScroll(rate, fn) {
     const rates = Array.isArray(rate) ? rate : [rate];
@@ -169,12 +172,12 @@ function onScroll(rate, fn) {
     };
 }
 /**
- * The time event hooking function
+ * 指定した時間の経過後に呼び出すコールバックを登録します
  *
- * @param time - the time until callback is called, in milliseconds
- * @param fn - a function called when `time` is reached
+ * @param time - コールバックを呼び出すまでの時間。単位はミリセカンド(ms)
+ * @param fn - 指定した時間が経過後に呼び出されるコールバック関数
  *
- * @returns The function that stop event handling
+ * @returns コールバックを呼び出すためのタイマーを停止する関数を返します
  */
 function onTime(time, fn) {
     const timeoutHandler = setTimeout(fn, time);
@@ -191,7 +194,9 @@ function randStr(digit = 8) {
 }
 
 /**
- * @deprecated
+ * get store state value
+ *
+ * @deprecated 非推奨
  */
 const getStoreState = get;
 /**
@@ -200,15 +205,18 @@ const getStoreState = get;
 const actionSetting = writable({ autoStart: true });
 /**
  * {@link getActionSetting} function to get action setting.
- * @return {ActionSetting} Current action setting
+ *
+ * @returns Current action setting
  */
 function getActionSetting() {
     return get(actionSetting);
 }
 /**
  * {@link setActionSetting} function to "update" action setting
- * @param {ActonSetting} Updated action setting
- * @return {ActionSetting} New action setting
+ *
+ * @param setting - Updated action setting
+ *
+ * @returns New action setting
  */
 function setActionSetting(setting) {
     actionSetting.update(current => {
@@ -231,7 +239,8 @@ function resetActionSetting() {
 const system = writable({});
 /**
  * {@link getSystem} function to get KARTE system config.
- * @return {SystemConfig} Current karte system config
+ *
+ * @returns Current karte system config
  */
 function getSystem() {
     return get(system);
@@ -259,7 +268,8 @@ function setState$1(stateId, force = false) {
 }
 /**
  * {@link getState} function to get current state ID.
- * @return {string} Current state ID
+ *
+ * @returns Current state ID
  */
 function getState$1() {
     return get(state);
@@ -270,7 +280,8 @@ function getState$1() {
 const states = writable([]);
 /**
  * {@link getStates} function to add new state ID to list of state IDs.
- * @param {string} New state ID
+ *
+ * @param stateId - New state ID
  */
 function addState(stateId) {
     states.update(current => {
@@ -280,7 +291,8 @@ function addState(stateId) {
 }
 /**
  * {@link getStates} function to get a list of all state IDs.
- * @return {string[]} All state IDs
+ *
+ * @returns All state IDs
  */
 function getStates() {
     return get(states);
@@ -291,7 +303,8 @@ function getStates() {
 const opened = writable(true);
 /**
  * {@link isOpened} function to check if action is opened.
- * @return {boolean} Flag if action is opend / true: Opend, false: Not opened
+ *
+ * @returns Flag if action is opend / true: Opend, false: Not opened
  */
 function isOpened() {
     return get(opened);
@@ -305,13 +318,15 @@ function setOpened(on) {
 /**
  * Store to handle visibility of action
  *
- * @deprecated
+ * @deprecated 非推奨
  */
 const closed = writable(false); // deprecated
 /**
  * {@link isClosed} function to check if action is clsoed.
- * @deprecated
- * @return {boolean} Flag if action is closed / true: Closed, false: Not closed
+ *
+ * @returns Flag if action is closed / true: Closed, false: Not closed
+ *
+ * @deprecated 非推奨
  */
 function isClosed() {
     return get(closed);
@@ -319,7 +334,7 @@ function isClosed() {
 /**
  * {@link setClosed} function to set if action is closed.
  *
- * @deprecated
+ * @deprecated 非推奨
  */
 function setClosed(on) {
     closed.set(on);
@@ -329,7 +344,7 @@ function setClosed(on) {
  */
 const maximumZindex = writable(0);
 /**
- * {@link getMaximumZindex} function to get maximum z-index.
+ * Set maximum z-index.
  */
 const setMaximumZindex = (zindex) => {
     if (!zindex || zindex < get(maximumZindex))
@@ -344,7 +359,8 @@ const setMaximumZindex = (zindex) => {
 const internalHandlers = writable({});
 /**
  * {@link getInternalHandlers} function to get internal event handlers.
- * @return {{ [key: string]: ActionEventHandler }} Current internal handlers
+ *
+ * @returns Current internal handlers
  */
 function getInternalHandlers() {
     return get(internalHandlers);
@@ -357,8 +373,10 @@ function setInternalHandlers(handlers) {
 }
 /**
  * {@link updateInternalHandlers} function to update internal event handlers.
- * @param {{ [key: string]: ActionEventHandler }} handlers Updated internal event handlers
- * @return {{ [key: string]: ActionEventHandler }} New internal handlers
+ *
+ * @param handlers - Updated internal event handlers
+ *
+ * @returns New internal handlers
  */
 function updateInternalHandlers(handlers) {
     internalHandlers.update(current => {
@@ -374,22 +392,26 @@ function updateInternalHandlers(handlers) {
 const customHandlers = writable({});
 /**
  * {@link getCustomHandlers} function to get custom event handlers.
- * @return {{ [key: string]: ActionEventHandler }} Current custom event handlers
+ *
+ * @returns Current custom event handlers
  */
 function getCustomHandlers() {
     return get(customHandlers);
 }
 /**
  * {@link setCustomHandlers} function to set custom event handlers.
- * @param {{ [key: string]: ActionEventHandler }} handlers New custom event handlers
+ *
+ * @param handlers - New custom event handlers
  */
 function setCustomHandlers(handlers) {
     customHandlers.set(handlers);
 }
 /**
  * {@link updateCustomHandlers} function to update custom event handlers.
- * @param {{ [key: string]: ActionEventHandler }} handlers Updated custom event handlers
- * @return {{ [key: string]: ActionEventHandler }} New custom event handlers
+ *
+ * @param handlers - Updated custom event handlers
+ *
+ * @returns New custom event handlers
  */
 function updateCustomHandlers(handlers) {
     customHandlers.update(current => {
@@ -403,7 +425,8 @@ function updateCustomHandlers(handlers) {
 const destroyed = writable(false);
 /**
  * {@link isDestroyed} function to check if action is destroyed.
- * @return {boolean} Flag if action is destoryed / true: Destroyed, false: Not Destroyed
+ *
+ * @returns Flag if action is destoryed / true: Destroyed, false: Not Destroyed
  */
 function isDestroyed() {
     return get(destroyed);
@@ -419,7 +442,8 @@ function setDestroyed(on) {
 const stopped = writable(false);
 /**
  * {@link isStopped} function to check if action is stopped.
- * @return {boolean} Flag if action is stopped / true: Stopped, false: Not stopped
+ *
+ * @returns Flag if action is stopped / true: Stopped, false: Not stopped
  */
 function isStopped() {
     return get(stopped);
@@ -438,22 +462,26 @@ function setStopped(on) {
 const customVariables = writable({});
 /**
  * {@link getCustomVariables} function to get custom variables.
- * @return {CustomVariables} Current custom variables
+ *
+ * @returns Current custom variables
  */
 function getCustomVariables() {
     return get(customVariables);
 }
 /**
  * {@link setCustomVariables} function to set custom variables.
- * @param {CustomVariables} variables New custom variables
+ *
+ * @param variables - New custom variables
  */
 function setCustomVariables(variables) {
     customVariables.set(variables);
 }
 /**
  * {@link updateCustomVariables} function to update custom variables.
- * @param {CustomVariables} variables Updated custom variables
- * @return {CustomVariables} New custom variables
+ *
+ * @param variables - Updated custom variables
+ *
+ * @returns New custom variables
  */
 function updateCustomVariables(variables) {
     customVariables.update(current => {
@@ -547,9 +575,11 @@ const haveFunction = (onClickOperation) => {
 };
 /**
  * The function to activate svelte animation.
+ *
+ * @param node - A target node of animation. This argument is passed by svelte, by default.
+ * @param customAnimationOptions - A custom animation option object
+ *
  * @see {@link https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions| Custom transition functions} for detail documentation
- * @param {Element} node A target node of animation. This argument is passed by svelte, by default.
- * @param {CustomAnimationOptions} customAnimationOptions A custom animation option object
  */
 function customAnimation(node, { transform, animationStyle, delay = 0, duration = 1000 }) {
     {
@@ -559,7 +589,7 @@ function customAnimation(node, { transform, animationStyle, delay = 0, duration
 /**
  * {@link loadGlobalScript} load JavaScript that does not support ESM.
  *
- * @param {string} src Link of JavaScript file
+ * @param src - Link of JavaScript file
  */
 async function loadGlobalScript(src) {
     return new Promise((resolve, reject) => {
@@ -573,7 +603,7 @@ async function loadGlobalScript(src) {
 /**
  * {@link applyGlobalCss} apply global CSS to WEB page.
  *
- * @param {string} css CSS
+ * @param css - CSS
  */
 async function applyGlobalCss(css) {
     return new Promise((resolve, reject) => {
@@ -587,7 +617,7 @@ async function applyGlobalCss(css) {
 /**
  * {@link loadGlobalStyle} load global style to WEB page.
  *
- * @param {string} href Link of style file
+ * @param href - Link of style file
  */
 async function loadGlobalStyle(href) {
     return new Promise((resolve, reject) => {
@@ -602,8 +632,10 @@ async function loadGlobalStyle(href) {
 /**
  * {@link hashCode} generate hash with FNV-1a hash
  *
- * @param {string} s Inputed string
- * @return {string} Hashed string
+ * @param s - Inputed string
+ *
+ * @returns Hashed string
+ *
  * @see https://stackoverflow.com/a/22429679
  */
 function hashCode(s) {
@@ -618,15 +650,17 @@ function hashCode(s) {
 /**
  * {@link setAutoStart} function to set auto start flag.
  *
- * NOTE: Use setActionConfig({ autoStart: false }).
+ * @param on - true: auto start, false: not auto start
  *
- * @deprecated
- * @param {boolean} on
+ * @deprecated 非推奨。`setActionConfig({ autoStart: false })` を使ってください。
  */
 const setAutoStart = (on = true) => {
     setStopped();
 };
 
+/**
+ * @internal
+ */
 const PropTypes = [
     'BooleanKeyword',
     'NumberKeyword',
@@ -648,12 +682,21 @@ const PropTypes = [
     'ModalPlacement',
     'OnClick',
 ];
+/**
+ * @internal
+ */
 const MediaQueries = {
     PC: '(\\s*min-width\\s*:\\s*1025px\\s*)',
     Tablet: '(\\s*min-width\\s*:\\s*897px)\\s+and\\s+(\\s*max-width\\s*:\\s*1024px\\s*)',
     Mobile: '(\\s*max-width\\s*:\\s*896px\\s*)',
 };
+/**
+ * @internal
+ */
 const Directions = ['row', 'column'];
+/**
+ * @internal
+ */
 const AnimationStyles = [
     'none',
     'fade',
@@ -663,6 +706,9 @@ const AnimationStyles = [
     'slide-left',
     'slide-right',
 ];
+/**
+ * @internal
+ */
 const ModalPositions = [
     'top-left',
     'top-center',
@@ -675,6 +721,9 @@ const ModalPositions = [
     'bottom-right',
     'none',
 ];
+/**
+ * @internal
+ */
 const DefaultModalPlacement = {
     position: 'center',
     margin: {
@@ -686,13 +735,25 @@ const DefaultModalPlacement = {
     backgroundOverlay: false,
     backgroundClick: { operation: 'closeApp', args: ['overlay'] },
 };
+/**
+ * @internal
+ */
 const Elasticities = ['none', 'vertical', 'horizontal'];
+/**
+ * @internal
+ */
 const ElasticityStyle = {
     none: '',
     vertical: 'height: 100%',
     horizontal: 'width: 100%',
 };
+/**
+ * @internal
+ */
 const TextDirections = ['horizontal', 'vertical'];
+/**
+ * @internal
+ */
 const OnClickOperationOptions = [
     {
         operation: 'none',
@@ -739,41 +800,133 @@ const OnClickOperationOptions = [
         ],
     },
 ];
+/**
+ * @internal
+ */
+const FormOperationOptions = [
+    {
+        operation: 'submit',
+        args: [
+            {
+                type: 'TransitState',
+                default: '/',
+            },
+        ],
+    },
+    {
+        operation: 'next',
+        args: [
+            {
+                type: 'TransitState',
+                default: '/',
+            },
+        ],
+    },
+    {
+        operation: 'prev',
+        args: [
+            {
+                type: 'TransitState',
+                default: '/',
+            },
+        ],
+    },
+];
+/**
+ * @internal
+ */
 const LengthUnits = ['px', 'em', 'rem', 'vw', 'fr', '%'];
+/**
+ * @internal
+ */
 const Justifies = ['flex-start', 'center', 'flex-end'];
+/**
+ * @internal
+ */
 const Alignments = ['flex-start', 'center', 'flex-end'];
+/**
+ * @internal
+ */
 const ObjectFits = ['fill', 'contain', 'cover'];
+/**
+ * @internal
+ */
 const ClipPaths = ['none', 'circle(closest-side)'];
+/**
+ * @internal
+ */
 const Repeats = ['repeat', 'space', 'round', 'no-repeat'];
+/**
+ * @internal
+ */
 const BackgroundSizes = ['cover', 'contain', 'auto'];
+/**
+ * @internal
+ */
 const Cursors = ['default', 'pointer'];
+/**
+ * @internal
+ */
 const Overflows = ['visible', 'auto', 'hidden'];
+/**
+ * @internal
+ */
 const WritingModes = ['horizontal-tb', 'vertical-lr'];
+/**
+ * @internal
+ */
 const ListSeparatorTypes = ['none', 'border', 'gap'];
+/**
+ * @internal
+ */
 const DefaultListSeparatorNone = {
     type: 'none',
 };
+/**
+ * @internal
+ */
 const DefaultListSeparatorBorder = {
     type: 'border',
     borderStyle: 'solid',
     borderWidth: '1px',
     borderColor: 'rgba(0, 0, 0, 0.06)',
 };
+/**
+ * @internal
+ */
 const DefaultListSeparatorGap = {
     type: 'gap',
     gap: '8px',
 };
+/**
+ * @internal
+ */
 const DefaultListSeparator = DefaultListSeparatorBorder;
+/**
+ * @internal
+ */
 const ListBackgroundTypes = ['none', 'stripe'];
+/**
+ * @internal
+ */
 const DefaultListBackgroundNone = {
     type: 'none',
 };
+/**
+ * @internal
+ */
 const DefaultListBackgroundStripe = {
     type: 'stripe',
     background1: 'rgba(0, 0, 0, 0.06)',
     background2: '#fff',
 };
+/**
+ * @internal
+ */
 const DefaultListBackground = DefaultListBackgroundNone;
+/**
+ * @internal
+ */
 const ListDirections = ['vertical', 'horizontal'];
 
 function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
@@ -786,33 +939,36 @@ function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
     return true;
 }
 /**
- * The scroll trigger function to hide the action
+ * スクロールに応じてアクションを非表示にするトリガー関数
  *
- * @param props - The props of the action
- * @param hide - The function to hide on the action
- * @param show - The function to show on the action
+ * @remarks
+ * スクロール率が `hide_on_scroll_rate` に達したときに `hide` 関数を呼び出します。
+ * `show_on_scroll_reenter` が `true` で、かつ `hide_on_scroll_rate` またはその値以下の場合、アクションに対して `show` 関数が呼び出されます。
  *
- * @description
- * trigger `hide` function when the scroll rate reaches `hide_on_scroll_rate`.
- * If `show_on_scroll_reenter` is `true` and under the `hide_on_scroll_rate`, `show` function is called on the action.
+ * @param props - アクションのプロパティ。プロパティには `hide_on_scroll`、`hide_on_scroll_rate` そして `show_on_scroll_reenter` が必要です。
+ * @param hide - アクションを非表示にするロジックが実装された関数。指定ない場合は noop 関数が使用されます。
+ * @param show - アクションを再び表示するロジックが実装された関数。指定ない場合は noop 関数が使用されます。
  *
- * @returns if scroll is started, return the function scroll clean up function, else return `null`
+ * @returns
+ * スクロールが開始された場合は、クリーンアップする関数を返します。そうでない場合は `null` を返します。
  */
-function hideOnScroll({ hide_on_scroll, hide_on_scroll_rate, show_on_scroll_reenter }, hide = NOOP, show = NOOP) {
+function hideOnScroll(props, hide = NOOP, show = NOOP) {
+    const { hide_on_scroll, hide_on_scroll_rate, show_on_scroll_reenter } = props;
     return hide_on_scroll && hide_on_scroll_rate
         ? onScroll(hide_on_scroll_rate / 100, ctx => doPresent(ctx, hide, show, show_on_scroll_reenter))
         : null;
 }
 /**
- * The time trigger function to hide the action
+ * 時間に応じてアクションを非表示にするトリガー関数
  *
- * @param props - The props of the action
- * @param hide - The function to hide on the action
+ * @remarks
+ * 時間のカウントが `hide_on_time_count` に達したときに `hide` 関数を呼び出します。
  *
- * @description
- * trigger `hide` function when the time count reaches `hide_on_time_count`.
+ * @param props - アクションのプロパティ。プロパティには `hide_on_time` そして `hide_on_time_count` が必要です。
+ * @param hide - アクションを非表示にするロジックが実装された関数。指定ない場合は noop 関数が使用されます。
  *
- * @returns if timer is started for hide, return the function timer clean up function, else return `null`
+ * @returns
+ * タイマーが開始された場合、タイマーをクリーンアップする関数を返します。それ以外は `null` を返します。
  */
 function hideOnTime(props, hide = NOOP) {
     return props.hide_on_time && props.hide_on_time_count
@@ -820,33 +976,36 @@ function hideOnTime(props, hide = NOOP) {
         : null;
 }
 /**
- * The scroll trigger function to show the action
+ * スクロールに応じてアクションを表示するトリガー関数
  *
- * @param props - The props of the action
- * @param show - The function to show on the action
- * @param hide - The function to hide on the action
+ * @remarks
+ * スクロール率が `show_on_scroll_rate` に達したときに `show` 関数を呼び出します。
+ * `hide_on_scroll_releave` が `true` で、かつ `show_on_scroll_rate` 以下の場合は、アクションに対して `hide` 関数が呼び出されます。
  *
- * @description
- * trigger `show` function when the scroll rate reaches `show_on_scroll_rate`.
- * If `hide_on_scroll_releave` is `true` and under the `show_on_scroll_rate`, `hide` function is called on the action.
+ * @param props - アクションのプロパティ。プロパティには `show_on_scroll`、`show_on_scroll_rate` そして `hide_on_scroll_releave` が必要です。
+ * @param show - アクションを表示するロジックが実装された関数。指定ない場合は noop 関数が使用されます。
+ * @param hide - アクションを非表示にするロジックが実装された関数。指定ない場合は noop 関数が使用されます。
  *
- * @returns if scroll is started, return the function scroll clean up function, else return `null`
+ * @returns
+ * スクロールが開始されている場合は、クリーンアップ関数を返します。そうでない場合は `null` を返します
  */
-function showOnScroll({ show_on_scroll, show_on_scroll_rate, hide_on_scroll_releave }, show = NOOP, hide = NOOP) {
+function showOnScroll(props, show = NOOP, hide = NOOP) {
+    const { show_on_scroll, show_on_scroll_rate, hide_on_scroll_releave } = props;
     return show_on_scroll && show_on_scroll_rate
         ? onScroll(show_on_scroll_rate / 100, ctx => doPresent(ctx, show, hide, hide_on_scroll_releave))
         : null;
 }
 /**
- * The time trigger function to show the action
+ * 時間に応じてアクションを表示するトリガー関数
  *
- * @param props - The props of the action
- * @param show - The function to show on the action
+ * @param props - アクションのプロパティ。プロパティには `show_on_time` そして `show_on_time_count` が必要です。
+ * @param show - アクションを表示するロジックが実装された関数。指定ない場合は noop 関数が使用されます。
  *
- * @description
- * trigger `show` function when the time count reaches `show_on_time_count`.
+ * @remarks
+ * 時間のカウントが `show_on_time_count` に達したときに `show` 関数を呼び出します。
  *
- * @returns if timer is started for show, return the function timer clean up function, else return `null`
+ * @returns
+ * タイマーが開始された場合、タイマーをクリーンアップする関数を返します。それ以外は `null` を返します。
  */
 function showOnTime(props, show = NOOP) {
     return props.show_on_time && props.show_on_time_count
@@ -855,12 +1014,14 @@ function showOnTime(props, show = NOOP) {
 }
 
 /**
- * Create the KARTE action
+ * KARTE アクションを作成する
  *
- * @param App - An entry point of svelte component.
- * @param options - A {@link ActionOptions | options}
+ * @param App - Svelte コンポーネントのエントリポイント
+ * @param options - {@link ActionOptions | オプション}
  *
- * @return A function to destroy KARTE action
+ * @returns KARTE アクションを破棄する関数
+ *
+ * @public
  */
 function create(App, options = {
     send: () => { },
@@ -991,6 +1152,8 @@ function create(App, options = {
 }
 /**
  * Dispatch the event to destroy KARTE action
+ *
+ * @internal
  */
 function dispatchDestroyEvent() {
     const event = new CustomEvent(ACTION_DESTROY_EVENT);
@@ -1043,16 +1206,13 @@ function ensureActionRoot(useShadow = true) {
     }
 }
 /**
- * {@link onCreate} function to set the function to hook the phase before creating action.
+ * アクションが作成 (create) される前にフックする
  *
- * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
- */
-function onCreate(
-/**
- * @param {ActionProps<Props, Variables & CustomVariables>} props Properties of KARTE action
- * @returns {void|Promise<void>}
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
  */
-fn) {
+function onCreate(fn) {
     let { onCreateHandlers } = getInternalHandlers();
     if (!onCreateHandlers) {
         onCreateHandlers = [];
@@ -1061,16 +1221,13 @@ fn) {
     updateInternalHandlers({ onCreateHandlers });
 }
 /**
- * {@link onShow} function to set the function to hook the phase after showing action.
+ * アクションが表示 (show) された後にフックする
  *
- * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
- */
-function onShow(
-/**
- * @param {ActionProps<Props, Variables & CustomVariables>} props Properties of KARTE action
- * @returns {void|Promise<void>}
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
  */
-fn) {
+function onShow(fn) {
     let { onShowHandlers } = getInternalHandlers();
     if (!onShowHandlers) {
         onShowHandlers = [];
@@ -1079,17 +1236,13 @@ fn) {
     updateInternalHandlers({ onShowHandlers });
 }
 /**
- * {@link onClose} function to set the function to hook the phase before closing action.
+ * アクションがクローズ (close) される前にフックする
  *
- * @param {(props: ActionProps<Props, Variables & CustomVariables>) => void | Promise<void>} fn Callback
- * @param {ClosePlace} fn Callback
- */
-function onClose(
-/**
- * @param {ActionProps<Props, Variables & CustomVariables>} props Properties of KARTE action
- * @returns {void|Promise<void>}
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
  */
-fn) {
+function onClose(fn) {
     let { onCloseHandlers } = getInternalHandlers();
     if (!onCloseHandlers) {
         onCloseHandlers = [];
@@ -1098,16 +1251,13 @@ fn) {
     updateInternalHandlers({ onCloseHandlers });
 }
 /**
- * {@link onDestory} function to set the function to hook the phase before destroying action.
+ * アクションが破棄 (destroy) される前にフックする
  *
- * @param {(props: ActionProps<Props, Variables & CustomVariables>) => void | Promise<void>} fn Callback
- */
-function onDestroy(
-/**
- * @param {ActionProps<Props, Variables & CustomVariables>} props Properties of KARTE action
- * @returns {void|Promise<void>}
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
  */
-fn) {
+function onDestroy(fn) {
     let { onDestoryHandlers } = getInternalHandlers();
     if (!onDestoryHandlers) {
         onDestoryHandlers = [];
@@ -1116,17 +1266,13 @@ fn) {
     updateInternalHandlers({ onDestoryHandlers });
 }
 /**
- * {@link onChangeState} function to set the function to hook the phase after changing action state.
+ * アクションのステートが変更された (changeState) 後にフックする
  *
- * @param {(props: ActionProps<Props, Variables & CustomVariables>, newState: string) => void | Promise<void>} fn Callback
- */
-function onChangeState(
-/**
- * @param {ActionProps<Props, Variables & CustomVariables>} props Properties of KARTE action
- * @param {string} newState New state of KARTE action
- * @returns {void|Promise<void>}
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
  */
-fn) {
+function onChangeState(fn) {
     let { onChangeStateHandlers } = getInternalHandlers();
     if (!onChangeStateHandlers) {
         onChangeStateHandlers = [];
@@ -1151,7 +1297,9 @@ const h = (type, props, ...children) => {
     return el;
 };
 /**
- * @deprecated
+ * create a fog element
+ *
+ * @deprecated 非推奨
  */
 function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
     const root = ensureModalRoot(false);
@@ -1205,9 +1353,11 @@ function getActionShadowRoot() {
     return root.shadowRoot;
 }
 /**
- * {@link applyCss} apply CSS to KARTE action.
+ * KARTE アクションに CSS を適用する
  *
- * @param {string} css CSS
+ * @param css - 適用する CSS
+ *
+ * @returns 適用された style 要素を返す Promise
  */
 async function applyCss(css) {
     return new Promise((resolve, reject) => {
@@ -1245,9 +1395,9 @@ async function fixFontFaceIssue(href, cssRules) {
     return [rules.join('\n'), fixedRules.join('\n')];
 }
 /**
- * {@link loadStyle} load global style to KARTE action.
+ * KARTE アクションにグローバルなスタイルをロードする
  *
- * @param {string} href Link of style file
+ * @param href - style ファイルのリンク先 URL
  */
 async function loadStyle(href) {
     const sr = getActionShadowRoot();
@@ -1287,12 +1437,13 @@ const show = showAction; // deprecated
 const close = closeAction; // deprecated
 /**
  * Create an application instance
- * @deprecated
  *
  * @param App - An entry point of svelte component.
  * @param options - An {@link AppOptions | options}
  *
- * @return A function to close the modal
+ * @returns A function to close the modal
+ *
+ * @deprecated 非推奨
  */
 function createApp(App, options = {
     send: () => { },
@@ -1416,8 +1567,10 @@ onDestroy(() => {
 /**
  * 変数を設定する
  *
- * @param {string} name 変数名
- * @param {any} value 変数値
+ * @param name - 変数名
+ * @param value - 変数値
+ *
+ * @public
  */
 function setVal(name, value) {
     customVariables.update(current => {
@@ -1433,19 +1586,23 @@ function setVal(name, value) {
 /**
  * 変数を取得する
  *
- * @param {string} name 変数名
+ * @param name - 変数名
+ *
+ * @returns 変数値
  *
- * @returns {any} 変数値
+ * @public
  */
 function getVal(name) {
     const cv = getCustomVariables();
     return cv[name];
 }
 /**
- * 変数が変更されたときに実行されるコールバックを設定する
+ * 変数が変更されたときに実行されるコールバック関数を設定する
  *
- * @param {string} name 変数名
- * @param {ChangeValCallback} callback コールバック
+ * @param name - 変数名
+ * @param callback - コールバック関数
+ *
+ * @public
  */
 function onChangeVal(name, callback) {
     if (!valCallbacks[name]) {
@@ -1454,10 +1611,12 @@ function onChangeVal(name, callback) {
     valCallbacks[name].push(callback);
 }
 /**
- * WEBのイベントが発生したときに実行されるコールバックを設定する
+ * WEBのイベントが発生したときに実行されるコールバック関数を設定する
+ *
+ * @param name - WEBのイベント名
+ * @param callback - コールバック関数
  *
- * @param {string} name WEBのイベント名
- * @param {EventCallback} callback コールバック
+ * @public
  */
 function method(name, callback) {
     window.addEventListener(name, callback);
@@ -1467,10 +1626,12 @@ function method(name, callback) {
     eventCallbacks[name].push(callback);
 }
 /**
- * Widgetのイベントが発生したときに実行されるコールバックを設定する
+ * Widgetのイベントが発生したときに実行されるコールバック関数を設定する
  *
- * @param {WidgetEventName} name Widgetのイベント名
- * @param {EventCallback} callback コールバック
+ * @param name - Widgetのイベント名
+ * @param callback - コールバック関数
+ *
+ * @public
  */
 function on(name, callback) {
     let onCallback;
@@ -1506,7 +1667,9 @@ function on(name, callback) {
 /**
  * 現在のステートを設定する
  *
- * @param {string} stateId ステートID
+ * @param stateId - ステートID
+ *
+ * @public
  */
 function setState(stateId) {
     const stateIds = getStates();
@@ -1517,7 +1680,9 @@ function setState(stateId) {
 /**
  * 現在のステートを取得する
  *
- * @return {string} ステートID
+ * @returns ステートID
+ *
+ * @public
  */
 function getState() {
     return getState$1();
@@ -1525,8 +1690,10 @@ function getState() {
 /**
  * ページ内の変数を設定する
  *
- * @param {string} key 変数のキー
- * @param {any} value 変数値
+ * @param key - 変数のキー
+ * @param value - 変数値
+ *
+ * @public
  */
 function setMemoryStore(key, value) {
     memoryStore[key] = value;
@@ -1534,8 +1701,11 @@ function setMemoryStore(key, value) {
 /**
  * ページ内の変数を取定する
  *
- * @param {string} key 変数のキー
- * @return {any} 変数
+ * @param key - 変数のキー
+ *
+ * @returns 変数
+ *
+ * @public
  */
 function getMemoryStore(key) {
     return memoryStore[key];
@@ -1543,8 +1713,10 @@ function getMemoryStore(key) {
 /**
  * ページをまたぐ変数を設定する
  *
- * @param {string} key 変数のキー
- * @param {any} value 変数値
+ * @param key - 変数のキー
+ * @param value - 変数値
+ *
+ * @public
  */
 function setLocalStore(key, value, options = { expire: false }) {
     const item = {
@@ -1559,8 +1731,11 @@ function setLocalStore(key, value, options = { expire: false }) {
 /**
  * ページをまたぐ変数を取得設定する
  *
- * @param {string} key 変数のキー
- * @return {any} 変数
+ * @param key - 変数のキー
+ *
+ * @returns 変数
+ *
+ * @public
  */
 function getLocalStore(key) {
     const lsKey = STORE_LS_KEY_PREFIX + key;
@@ -1592,8 +1767,9 @@ const storage = {
 /**
  * アクションテーブルを操作するオブジェクト
  *
- * @param {string} table アクションテーブル名
- * @version develop
+ * @param table - アクションテーブル名
+ *
+ * @public
  */
 function collection(table) {
     const systemConfig = getSystem();
@@ -1618,20 +1794,20 @@ var widget = /*#__PURE__*/Object.freeze({
 
 /* src/components/Normalize.svelte generated by Svelte v3.53.1 */
 
-function add_css$m(target) {
+function add_css$n(target) {
 	append_styles(target, "svelte-tr4qnr", "@import 'https://esm.sh/normalize.css';");
 }
 
 class Normalize extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, null, null, safe_not_equal, {}, add_css$m);
+		init(this, options, null, null, safe_not_equal, {}, add_css$n);
 	}
 }
 
 /* src/components/State.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$q(ctx) {
+function create_fragment$r(ctx) {
 	let normalize;
 	let t;
 	let current;
@@ -1695,7 +1871,7 @@ function create_fragment$q(ctx) {
 	};
 }
 
-function instance$q($$self, $$props, $$invalidate) {
+function instance$r($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 
 	$$self.$$set = $$props => {
@@ -1708,13 +1884,13 @@ function instance$q($$self, $$props, $$invalidate) {
 class State extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$q, create_fragment$q, safe_not_equal, {});
+		init(this, options, instance$r, create_fragment$r, safe_not_equal, {});
 	}
 }
 
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$l(target) {
+function add_css$m(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
 
@@ -1791,7 +1967,7 @@ function create_if_block$4(ctx) {
 	};
 }
 
-function create_fragment$p(ctx) {
+function create_fragment$q(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$4(ctx);
@@ -1856,7 +2032,7 @@ function getStateItemContext() {
 	return getContext(STATE_ITEM_CONTEXT_KEY);
 }
 
-function instance$p($$self, $$props, $$invalidate) {
+function instance$q($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, $$value => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -1882,13 +2058,13 @@ function instance$p($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$p, create_fragment$p, safe_not_equal, { path: 0 }, add_css$l);
+		init(this, options, instance$q, create_fragment$q, safe_not_equal, { path: 0 }, add_css$m);
 	}
 }
 
 /* src/components/BackgroundOverray.svelte generated by Svelte v3.53.1 */
 
-function add_css$k(target) {
+function add_css$l(target) {
 	append_styles(target, "svelte-1d4fta", ".background.svelte-1d4fta{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
 }
 
@@ -1928,7 +2104,7 @@ function create_if_block$3(ctx) {
 	};
 }
 
-function create_fragment$o(ctx) {
+function create_fragment$p(ctx) {
 	let if_block_anchor;
 	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$3(ctx);
 
@@ -1968,7 +2144,7 @@ function create_fragment$o(ctx) {
 	};
 }
 
-function instance$o($$self, $$props, $$invalidate) {
+function instance$p($$self, $$props, $$invalidate) {
 	let { backgroundOverray = false } = $$props;
 	const dispatch = createEventDispatcher();
 	const click_handler = () => dispatch('click');
@@ -1983,13 +2159,13 @@ function instance$o($$self, $$props, $$invalidate) {
 class BackgroundOverray extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$o, create_fragment$o, safe_not_equal, { backgroundOverray: 0 }, add_css$k);
+		init(this, options, instance$p, create_fragment$p, safe_not_equal, { backgroundOverray: 0 }, add_css$l);
 	}
 }
 
 /* src/components/Modal.svelte generated by Svelte v3.53.1 */
 
-function add_css$j(target) {
+function add_css$k(target) {
 	append_styles(target, "svelte-12dkw0q", ".modal.svelte-12dkw0q{position:fixed;box-sizing:border-box;z-index:2147483647}.close.svelte-12dkw0q{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-12dkw0q:hover{transform:rotate(90deg)}.modal-content.svelte-12dkw0q{display:flex;justify-content:center;align-items:center}");
 }
 
@@ -2219,7 +2395,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-function create_fragment$n(ctx) {
+function create_fragment$o(ctx) {
 	let backgroundoverray;
 	let t;
 	let if_block_anchor;
@@ -2318,7 +2494,7 @@ function create_fragment$n(ctx) {
 	};
 }
 
-function instance$n($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
 	let click;
 	let close;
 	let closable;
@@ -2509,8 +2685,8 @@ class Modal extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$n,
-			create_fragment$n,
+			instance$o,
+			create_fragment$o,
 			safe_not_equal,
 			{
 				onClick: 17,
@@ -2526,14 +2702,14 @@ class Modal extends SvelteComponent {
 				closeButtonColor: 2,
 				_closeStyle: 3
 			},
-			add_css$j
+			add_css$k
 		);
 	}
 }
 
 /* src/components/Grid.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$m(ctx) {
+function create_fragment$n(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[8].default;
@@ -2601,7 +2777,7 @@ function create_fragment$m(ctx) {
 	};
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { width = '512px' } = $$props;
@@ -2646,7 +2822,7 @@ class Grid extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$m, create_fragment$m, safe_not_equal, {
+		init(this, options, instance$n, create_fragment$n, safe_not_equal, {
 			width: 1,
 			height: 2,
 			rows: 3,
@@ -2837,7 +3013,7 @@ function create_default_slot(ctx) {
 	};
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$m(ctx) {
 	let stateitem;
 	let current;
 
@@ -2885,7 +3061,7 @@ function create_fragment$l(ctx) {
 	};
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -2956,7 +3132,7 @@ class GridModalState extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$l, create_fragment$l, safe_not_equal, {
+		init(this, options, instance$m, create_fragment$m, safe_not_equal, {
 			path: 0,
 			onClick: 1,
 			clickEventName: 2,
@@ -2981,11 +3157,11 @@ class GridModalState extends SvelteComponent {
 
 /* src/components/GridItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$i(target) {
+function add_css$j(target) {
 	append_styles(target, "svelte-n7kdl3", ".grid-item.svelte-n7kdl3{word-break:break-all;position:relative}.grid-item-inner.svelte-n7kdl3{position:absolute;inset:0}");
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$l(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -3066,7 +3242,7 @@ function create_fragment$k(ctx) {
 	};
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { x1 } = $$props;
@@ -3119,8 +3295,8 @@ class GridItem extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$k,
-			create_fragment$k,
+			instance$l,
+			create_fragment$l,
 			safe_not_equal,
 			{
 				x1: 2,
@@ -3130,18 +3306,18 @@ class GridItem extends SvelteComponent {
 				z: 6,
 				background: 7
 			},
-			add_css$i
+			add_css$j
 		);
 	}
 }
 
 /* src/components/Flex.svelte generated by Svelte v3.53.1 */
 
-function add_css$h(target) {
+function add_css$i(target) {
 	append_styles(target, "svelte-1e71ejc", ".flex.svelte-1e71ejc{display:flex}");
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
 	let div;
 	let div_style_value;
 	let current;
@@ -3216,7 +3392,7 @@ function getFlexContext() {
 	return getContext(FlexContextKey);
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'row' } = $$props;
 	let { width = '100%' } = $$props;
@@ -3242,8 +3418,8 @@ class Flex extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$j,
-			create_fragment$j,
+			instance$k,
+			create_fragment$k,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -3251,18 +3427,18 @@ class Flex extends SvelteComponent {
 				height: 2,
 				_style: 3
 			},
-			add_css$h
+			add_css$i
 		);
 	}
 }
 
 /* src/components/FlexItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$g(target) {
+function add_css$h(target) {
 	append_styles(target, "svelte-1p0bk1x", ".flex-item.svelte-1p0bk1x{max-width:100%;max-height:100%;position:relative;isolation:isolate}");
 }
 
-function create_fragment$i(ctx) {
+function create_fragment$j(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[4].default;
@@ -3330,7 +3506,7 @@ function create_fragment$i(ctx) {
 	};
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { length } = $$props;
 	let { _style = '' } = $$props;
@@ -3373,13 +3549,13 @@ function instance$i($$self, $$props, $$invalidate) {
 class FlexItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$i, create_fragment$i, safe_not_equal, { length: 1, _style: 2 }, add_css$g);
+		init(this, options, instance$j, create_fragment$j, safe_not_equal, { length: 1, _style: 2 }, add_css$h);
 	}
 }
 
 /* src/components/RenderText.svelte generated by Svelte v3.53.1 */
 
-function get_each_context$2(ctx, list, i) {
+function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[2] = list[i];
 	return child_ctx;
@@ -3431,7 +3607,7 @@ function create_if_block$1(ctx) {
 }
 
 // (9:0) {#each items as item}
-function create_each_block$2(ctx) {
+function create_each_block$3(ctx) {
 	let show_if;
 	let if_block_anchor;
 
@@ -3478,13 +3654,13 @@ function create_each_block$2(ctx) {
 	};
 }
 
-function create_fragment$h(ctx) {
+function create_fragment$i(ctx) {
 	let each_1_anchor;
 	let each_value = /*items*/ ctx[0];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
 	}
 
 	return {
@@ -3515,12 +3691,12 @@ function create_fragment$h(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$2(ctx, each_value, i);
+					const child_ctx = get_each_context$3(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$2(child_ctx);
+						each_blocks[i] = create_each_block$3(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
 					}
@@ -3544,7 +3720,7 @@ function create_fragment$h(ctx) {
 
 const regexp = /(\r?\n)/;
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
 	let items;
 	let { text = 'サンプルSample' } = $$props;
 
@@ -3564,17 +3740,17 @@ function instance$h($$self, $$props, $$invalidate) {
 class RenderText extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$h, create_fragment$h, safe_not_equal, { text: 1 });
+		init(this, options, instance$i, create_fragment$i, safe_not_equal, { text: 1 });
 	}
 }
 
 /* src/components/TextElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$f(target) {
+function add_css$g(target) {
 	append_styles(target, "svelte-9en2jg", ".text-element.svelte-9en2jg.svelte-9en2jg{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:auto}.text-element-inner.svelte-9en2jg.svelte-9en2jg{width:100%;height:auto}.text-direction-vertical.svelte-9en2jg.svelte-9en2jg{writing-mode:vertical-rl}.text-direction-vertical.svelte-9en2jg .text-element-inner.svelte-9en2jg{width:auto;height:100%}");
 }
 
-function create_fragment$g(ctx) {
+function create_fragment$h(ctx) {
 	let div1;
 	let div0;
 	let rendertext;
@@ -3639,7 +3815,7 @@ function create_fragment$g(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
 	let { _textStyle = 'font-size:12px;' } = $$props;
@@ -3669,8 +3845,8 @@ class TextElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$g,
-			create_fragment$g,
+			instance$h,
+			create_fragment$h,
 			safe_not_equal,
 			{
 				text: 0,
@@ -3678,18 +3854,18 @@ class TextElement extends SvelteComponent {
 				textDirection: 1,
 				_style: 4
 			},
-			add_css$f
+			add_css$g
 		);
 	}
 }
 
 /* src/components/TextButtonElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$e(target) {
+function add_css$f(target) {
 	append_styles(target, "svelte-tx5xf5", ".text-button-element.svelte-tx5xf5{width:100%;height:100%}.text-button.svelte-tx5xf5{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s;white-space:pre-wrap;overflow:hidden}.text-button.svelte-tx5xf5:active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button.svelte-tx5xf5:hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$g(ctx) {
 	let div;
 	let button;
 	let rendertext;
@@ -3763,7 +3939,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let { text = 'ボタンラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 
@@ -3797,8 +3973,8 @@ class TextButtonElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$f,
-			create_fragment$f,
+			instance$g,
+			create_fragment$g,
 			safe_not_equal,
 			{
 				text: 0,
@@ -3807,18 +3983,18 @@ class TextButtonElement extends SvelteComponent {
 				_buttonStyle: 1,
 				_style: 2
 			},
-			add_css$e
+			add_css$f
 		);
 	}
 }
 
 /* src/components/ImageElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$d(target) {
+function add_css$e(target) {
 	append_styles(target, "svelte-t8kpqw", ".image-element.svelte-t8kpqw{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.image.svelte-t8kpqw{width:100%;height:100%}.transport.svelte-t8kpqw:hover,.transport.svelte-t8kpqw:focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}");
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
 	let div;
 	let img;
 	let img_src_value;
@@ -3900,7 +4076,7 @@ function create_fragment$e(ctx) {
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let { src = 'https://admin.karte.io/action-editor2/public/images/no_image_en.svg' } = $$props;
 	let { alt = 'No Image' } = $$props;
 	let { transport = false } = $$props;
@@ -3938,8 +4114,8 @@ class ImageElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$e,
-			create_fragment$e,
+			instance$f,
+			create_fragment$f,
 			safe_not_equal,
 			{
 				src: 0,
@@ -3950,18 +4126,18 @@ class ImageElement extends SvelteComponent {
 				_imageStyle: 3,
 				_style: 4
 			},
-			add_css$d
+			add_css$e
 		);
 	}
 }
 
 /* src/components/List.svelte generated by Svelte v3.53.1 */
 
-function add_css$c(target) {
+function add_css$d(target) {
 	append_styles(target, "svelte-dfqtyx", ".list.svelte-dfqtyx{display:flex;width:100%;height:100%;overflow:hidden}");
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[6].default;
@@ -4031,7 +4207,7 @@ function create_fragment$d(ctx) {
 
 const LIST_CONTEXT_KEY = Symbol();
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'vertical' } = $$props;
@@ -4098,8 +4274,8 @@ class List extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$d,
-			create_fragment$d,
+			instance$e,
+			create_fragment$e,
 			safe_not_equal,
 			{
 				direction: 1,
@@ -4107,18 +4283,18 @@ class List extends SvelteComponent {
 				background: 3,
 				_style: 4
 			},
-			add_css$c
+			add_css$d
 		);
 	}
 }
 
 /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$b(target) {
+function add_css$c(target) {
 	append_styles(target, "svelte-h5j4xe", ".list-item.svelte-h5j4xe{flex:auto;box-sizing:border-box;min-width:0;min-height:0;position:relative}.list-item-inner.svelte-h5j4xe{position:absolute;inset:0}");
 }
 
-function create_fragment$c(ctx) {
+function create_fragment$d(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -4212,7 +4388,7 @@ function create_fragment$c(ctx) {
 	};
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
 	let click;
 	let listItemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -4302,17 +4478,17 @@ function instance$c($$self, $$props, $$invalidate) {
 class ListItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$c, create_fragment$c, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$b);
+		init(this, options, instance$d, create_fragment$d, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$c);
 	}
 }
 
 /* src/components/EmbedElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$a(target) {
+function add_css$b(target) {
 	append_styles(target, "svelte-k86zna", ".embed.svelte-k86zna{position:relative;box-shadow:0 1px rgba(0, 0, 0, 0.06);padding-top:56.25%;overflow:hidden}.embed.svelte-k86zna iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$c(ctx) {
 	let div;
 
 	return {
@@ -4348,7 +4524,7 @@ function create_fragment$b(ctx) {
 	};
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	let { code } = $$props;
 	let { _style = '' } = $$props;
 
@@ -4363,17 +4539,17 @@ function instance$b($$self, $$props, $$invalidate) {
 class EmbedElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$b, create_fragment$b, safe_not_equal, { code: 0, _style: 1 }, add_css$a);
+		init(this, options, instance$c, create_fragment$c, safe_not_equal, { code: 0, _style: 1 }, add_css$b);
 	}
 }
 
 /* src/components/MovieYouTubeElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$9(target) {
+function add_css$a(target) {
 	append_styles(target, "svelte-k86zna", ".embed.svelte-k86zna{position:relative;box-shadow:0 1px rgba(0, 0, 0, 0.06);padding-top:56.25%;overflow:hidden}.embed.svelte-k86zna iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
 	let div1;
 	let div0;
 
@@ -4415,7 +4591,7 @@ function create_fragment$a(ctx) {
 	};
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, $$value => $$invalidate(12, $system = $$value));
 	let { videoId } = $$props;
@@ -4594,8 +4770,8 @@ class MovieYouTubeElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$a,
-			create_fragment$a,
+			instance$b,
+			create_fragment$b,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -4605,18 +4781,18 @@ class MovieYouTubeElement extends SvelteComponent {
 				mute: 6,
 				_style: 0
 			},
-			add_css$9
+			add_css$a
 		);
 	}
 }
 
 /* src/components/MovieVimeoElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$8(target) {
+function add_css$9(target) {
 	append_styles(target, "svelte-5l33p2", ".embed.svelte-5l33p2{position:relative;box-shadow:0 1px rgba(0, 0, 0, 0.06);padding-top:56.25%;overflow:hidden}.embed.svelte-5l33p2 iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
 	let div1;
 	let div0;
 
@@ -4658,7 +4834,7 @@ function create_fragment$9(ctx) {
 	};
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
 	let $system;
 	component_subscribe($$self, system, $$value => $$invalidate(12, $system = $$value));
 	let { videoId } = $$props;
@@ -4801,8 +4977,8 @@ class MovieVimeoElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$9,
-			create_fragment$9,
+			instance$a,
+			create_fragment$a,
 			safe_not_equal,
 			{
 				videoId: 2,
@@ -4812,7 +4988,7 @@ class MovieVimeoElement extends SvelteComponent {
 				mute: 6,
 				_style: 0
 			},
-			add_css$8
+			add_css$9
 		);
 	}
 }
@@ -4854,7 +5030,7 @@ function registerInput({ name, statePath, validator = () => true, initialValue,
 function deleteValues(statePath) {
     formData.update(prev => {
         const targetNames = Object.entries(prev)
-            .filter(([_, { statePath: s }]) => s === statePath)
+            .filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
             .map(([name]) => name);
         targetNames.forEach(name => {
             delete prev[name];
@@ -4866,8 +5042,8 @@ const getValuesAreValidReader = statePath => ({
     subscribe(callback) {
         return formData.subscribe(formData => {
             const valuesAreValid = Object.entries(formData)
-                .filter(([_, { statePath: s }]) => s === statePath)
-                .every(([_, { isValid }]) => isValid);
+                .filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
+                .every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
             callback(valuesAreValid);
         });
     },
@@ -4914,11 +5090,11 @@ function submit() {
 
 /* src/components/FormTextarea.svelte generated by Svelte v3.53.1 */
 
-function add_css$7(target) {
+function add_css$8(target) {
 	append_styles(target, "svelte-kyay3k", ".textarea-wrapper.svelte-kyay3k{display:flex;align-items:center;width:100%;height:100%}.textarea.svelte-kyay3k{width:100%;resize:none}");
 }
 
-function create_fragment$8(ctx) {
+function create_fragment$9(ctx) {
 	let div;
 	let textarea;
 	let mounted;
@@ -4988,7 +5164,7 @@ function create_fragment$8(ctx) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	let $value;
 	let { name = '' } = $$props;
 	let { required = true } = $$props;
@@ -5029,8 +5205,8 @@ class FormTextarea extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$8,
-			create_fragment$8,
+			instance$9,
+			create_fragment$9,
 			safe_not_equal,
 			{
 				name: 6,
@@ -5038,14 +5214,14 @@ class FormTextarea extends SvelteComponent {
 				rows: 1,
 				placeholder: 2
 			},
-			add_css$7
+			add_css$8
 		);
 	}
 }
 
 /* src/components/FormButton.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$7(ctx) {
+function create_fragment$8(ctx) {
 	let input;
 	let mounted;
 	let dispose;
@@ -5093,21 +5269,21 @@ function create_fragment$7(ctx) {
 	};
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$8($$self, $$props, $$invalidate) {
 	let disabled;
 	let $valuesAreValid;
 	let { text = '' } = $$props;
-	let { type = { type: 'submit' } } = $$props;
+	let { onClick = { operation: 'submit', args: ['/'] } } = $$props;
 	const { path: statePath } = getStateItemContext();
 
 	function handleClick() {
-		switch (type.type) {
+		switch (onClick.operation) {
 			case 'submit':
 				{
 					if ($valuesAreValid) {
 						submit();
-						const stateId = type.stateId;
-						setState$1(stateId, true);
+						const stateId = onClick.args[0];
+						setState$1(stateId);
 					}
 
 					break;
@@ -5115,8 +5291,8 @@ function instance$7($$self, $$props, $$invalidate) {
 			case 'next':
 				{
 					if ($valuesAreValid) {
-						const stateId = type.stateId;
-						setState$1(stateId, true);
+						const stateId = onClick.args[0];
+						setState$1(stateId);
 					}
 
 					break;
@@ -5124,8 +5300,8 @@ function instance$7($$self, $$props, $$invalidate) {
 			case 'prev':
 				{
 					deleteValues(statePath);
-					const stateId = type.stateId;
-					setState$1(stateId, true);
+					const stateId = onClick.args[0];
+					setState$1(stateId);
 					break;
 				}
 		}
@@ -5136,35 +5312,35 @@ function instance$7($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
-		if ('type' in $$props) $$invalidate(4, type = $$props.type);
+		if ('onClick' in $$props) $$invalidate(4, onClick = $$props.onClick);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*type, $valuesAreValid*/ 48) {
+		if ($$self.$$.dirty & /*onClick, $valuesAreValid*/ 48) {
 			$$invalidate(1, disabled = (() => {
-				const enabled = type.type === 'prev' || $valuesAreValid;
+				const enabled = onClick.operation === 'prev' || $valuesAreValid;
 				return !enabled;
 			})());
 		}
 	};
 
-	return [text, disabled, handleClick, valuesAreValid, type, $valuesAreValid];
+	return [text, disabled, handleClick, valuesAreValid, onClick, $valuesAreValid];
 }
 
 class FormButton extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$7, create_fragment$7, safe_not_equal, { text: 0, type: 4 });
+		init(this, options, instance$8, create_fragment$8, safe_not_equal, { text: 0, onClick: 4 });
 	}
 }
 
 /* src/components/FormRadioButtons.svelte generated by Svelte v3.53.1 */
 
-function add_css$6(target) {
+function add_css$7(target) {
 	append_styles(target, "svelte-1ajmbw1", ".radio-buttons.svelte-1ajmbw1{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%}");
 }
 
-function get_each_context$1(ctx, list, i) {
+function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[7] = list[i];
 	child_ctx[9] = i;
@@ -5172,7 +5348,7 @@ function get_each_context$1(ctx, list, i) {
 }
 
 // (23:2) {#each _options as option, i}
-function create_each_block$1(ctx) {
+function create_each_block$2(ctx) {
 	let label;
 	let input;
 	let t0;
@@ -5239,13 +5415,13 @@ function create_each_block$1(ctx) {
 	};
 }
 
-function create_fragment$6(ctx) {
+function create_fragment$7(ctx) {
 	let div;
 	let each_value = /*_options*/ ctx[1];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
+		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
 	}
 
 	return {
@@ -5285,12 +5461,12 @@ function create_fragment$6(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$1(ctx, each_value, i);
+					const child_ctx = get_each_context$2(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$1(child_ctx);
+						each_blocks[i] = create_each_block$2(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(div, null);
 					}
@@ -5312,11 +5488,11 @@ function create_fragment$6(ctx) {
 	};
 }
 
-function instance$6($$self, $$props, $$invalidate) {
+function instance$7($$self, $$props, $$invalidate) {
 	let _options;
 	let $value;
 	let { name = '' } = $$props;
-	let { options = '人参,レタス,キャベツ' } = $$props;
+	let { options = 'ラジオボタン1,ラジオボタン2,ラジオボタン3' } = $$props;
 	const { path: statePath } = getStateItemContext();
 
 	const value = registerInput({
@@ -5353,17 +5529,17 @@ function instance$6($$self, $$props, $$invalidate) {
 class FormRadioButtons extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$6, create_fragment$6, safe_not_equal, { name: 0, options: 5 }, add_css$6);
+		init(this, options, instance$7, create_fragment$7, safe_not_equal, { name: 0, options: 5 }, add_css$7);
 	}
 }
 
 /* src/components/FormSelect.svelte generated by Svelte v3.53.1 */
 
-function add_css$5(target) {
+function add_css$6(target) {
 	append_styles(target, "svelte-1ajmbw1", ".radio-buttons.svelte-1ajmbw1{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%}");
 }
 
-function get_each_context(ctx, list, i) {
+function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[6] = list[i];
 	child_ctx[8] = i;
@@ -5416,7 +5592,7 @@ function create_if_block(ctx) {
 }
 
 // (24:4) {#each _options as option, i}
-function create_each_block(ctx) {
+function create_each_block$1(ctx) {
 	let option;
 	let t;
 	let option_value_value;
@@ -5478,7 +5654,7 @@ function create_each_block(ctx) {
 	};
 }
 
-function create_fragment$5(ctx) {
+function create_fragment$6(ctx) {
 	let div;
 	let select;
 	let mounted;
@@ -5487,7 +5663,7 @@ function create_fragment$5(ctx) {
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
 	}
 
 	return {
@@ -5537,12 +5713,12 @@ function create_fragment$5(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context(ctx, each_value, i);
+					const child_ctx = get_each_context$1(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i] = create_each_block$1(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(select, null);
 					}
@@ -5566,7 +5742,7 @@ function create_fragment$5(ctx) {
 	};
 }
 
-function instance$5($$self, $$props, $$invalidate) {
+function instance$6($$self, $$props, $$invalidate) {
 	let _options;
 	let { name = '' } = $$props;
 	let { options = 'プルダウン1,プルダウン2,プルダウン3' } = $$props;
@@ -5603,7 +5779,217 @@ function instance$5($$self, $$props, $$invalidate) {
 class FormSelect extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$5, create_fragment$5, safe_not_equal, { name: 2, options: 3 }, add_css$5);
+		init(this, options, instance$6, create_fragment$6, safe_not_equal, { name: 2, options: 3 }, add_css$6);
+	}
+}
+
+/* src/components/FormCheckBoxes.svelte generated by Svelte v3.53.1 */
+
+function add_css$5(target) {
+	append_styles(target, "svelte-3uhiw4", ".check-boxes.svelte-3uhiw4{display:flex;justify-content:center;flex-direction:column;width:100%;height:100%}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[8] = list[i];
+	child_ctx[10] = i;
+	return child_ctx;
+}
+
+// (30:2) {#each _options as option, i}
+function create_each_block(ctx) {
+	let label;
+	let input;
+	let t0;
+	let t1_value = /*option*/ ctx[8] + "";
+	let t1;
+	let t2;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			label = element("label");
+			input = element("input");
+			t0 = space();
+			t1 = text(t1_value);
+			t2 = space();
+			this.h();
+		},
+		l(nodes) {
+			label = claim_element(nodes, "LABEL", {});
+			var label_nodes = children(label);
+			input = claim_element(label_nodes, "INPUT", { type: true, name: true });
+			t0 = claim_space(label_nodes);
+			t1 = claim_text(label_nodes, t1_value);
+			t2 = claim_space(label_nodes);
+			label_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(input, "type", "checkbox");
+			attr(input, "name", /*name*/ ctx[0]);
+			input.value = /*$value*/ ctx[2];
+		},
+		m(target, anchor) {
+			insert_hydration(target, label, anchor);
+			append_hydration(label, input);
+			append_hydration(label, t0);
+			append_hydration(label, t1);
+			append_hydration(label, t2);
+
+			if (!mounted) {
+				dispose = listen(input, "change", /*handleChange*/ ctx[4](/*i*/ ctx[10]));
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty & /*name*/ 1) {
+				attr(input, "name", /*name*/ ctx[0]);
+			}
+
+			if (dirty & /*$value*/ 4) {
+				input.value = /*$value*/ ctx[2];
+			}
+
+			if (dirty & /*_options*/ 2 && t1_value !== (t1_value = /*option*/ ctx[8] + "")) set_data(t1, t1_value);
+		},
+		d(detaching) {
+			if (detaching) detach(label);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment$5(ctx) {
+	let div;
+	let each_value = /*_options*/ ctx[1];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			this.h();
+		},
+		l(nodes) {
+			div = claim_element(nodes, "DIV", { class: true });
+			var div_nodes = children(div);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].l(div_nodes);
+			}
+
+			div_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(div, "class", "check-boxes svelte-3uhiw4");
+		},
+		m(target, anchor) {
+			insert_hydration(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*_options, name, $value, handleChange*/ 23) {
+				each_value = /*_options*/ ctx[1];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(div, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_each(each_blocks, detaching);
+		}
+	};
+}
+
+function instance$5($$self, $$props, $$invalidate) {
+	let _options;
+	let isCheckedArray;
+	let $value;
+	let { name = '' } = $$props;
+	let { options = 'チェックボックス1,チェックボックス2,チェックボックス3' } = $$props;
+	const { path: statePath } = getStateItemContext();
+
+	const value = registerInput({
+		name,
+		statePath,
+		initialValue: [],
+		validator(value) {
+			return value.length > 0;
+		}
+	});
+
+	component_subscribe($$self, value, value => $$invalidate(2, $value = value));
+
+	const handleChange = index => event => {
+		if (isCheckedArray[index] !== event.target.checked) {
+			isCheckedArray[index] = event.target.checked;
+			isCheckedArray = [...isCheckedArray];
+			const updated = _options.filter((option, i) => isCheckedArray[i]);
+			value.set(updated);
+		}
+	};
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+		if ('options' in $$props) $$invalidate(5, options = $$props.options);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*options*/ 32) {
+			$$invalidate(1, _options = options.split(','));
+		}
+
+		if ($$self.$$.dirty & /*$value, _options*/ 6) {
+			isCheckedArray = (() => {
+				const checkedSet = new Set($value);
+				return _options.map(option => checkedSet.has(option));
+			})();
+		}
+	};
+
+	return [name, _options, $value, value, handleChange, options];
+}
+
+class FormCheckBoxes extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$5, create_fragment$5, safe_not_equal, { name: 0, options: 5 }, add_css$5);
 	}
 }
 
@@ -6579,4 +6965,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, ALL_ACTION_SHORTEN_ID, Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormButton, FormRadioButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_ACTION_SHORTEN_ID, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slider, SliderItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, actionId, actionSetting, addState, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection$1 as collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, formData, getActionSetting, getActionShadowRoot, getCustomHandlers, getCustomVariables, getInternalHandlers, getMarginStyle, getPositionStyle, getState$1 as getState, getStates, getStoreState, getSystem, getTransform, h, handleFocus, handleKeydown, handleState, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isClosed, isDestroyed, isOpened, isPreview, isStopped, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, randStr, resetActionSetting, runScript, send_event, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setDestroyed, setInternalHandlers, setMaximumZindex, setOpened, setPreviousFocus, setState$1 as setState, setStopped, setSystem, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, system, toBr, updateCustomHandlers, updateCustomVariables, updateInternalHandlers, widget };
+export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, ALL_ACTION_SHORTEN_ID, Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormButton, FormCheckBoxes, FormOperationOptions, FormRadioButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_ACTION_SHORTEN_ID, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slider, SliderItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, actionId, actionSetting, addState, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection$1 as collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, formData, getActionSetting, getActionShadowRoot, getCustomHandlers, getCustomVariables, getInternalHandlers, getMarginStyle, getPositionStyle, getState$1 as getState, getStates, getStoreState, getSystem, getTransform, h, handleFocus, handleKeydown, handleState, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isClosed, isDestroyed, isOpened, isPreview, isStopped, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, randStr, resetActionSetting, runScript, send_event, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setDestroyed, setInternalHandlers, setMaximumZindex, setOpened, setPreviousFocus, setState$1 as setState, setStopped, setSystem, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, system, toBr, updateCustomHandlers, updateCustomVariables, updateInternalHandlers, widget };