@plaidev/karte-action-sdk 1.1.178 → 1.1.179-28041798.8342584c

package/dist/hydrate/index.es.js

@@ -1,6 +1,6 @@
 import { writable, get } from 'svelte/store';
 import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeUpdate$1, afterUpdate as afterUpdate$1, tick as tick$1, setContext, getContext, createEventDispatcher } from 'svelte';
-import { SvelteComponent, init, safe_not_equal, create_slot, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, append_styles, empty, insert_hydration, group_outros, check_outros, detach, component_subscribe, element, space, claim_element, children, claim_space, attr, noop, listen, null_to_empty, is_function, create_component, claim_component, mount_component, destroy_component, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, claim_svg_element, append_hydration, destroy_each, text, claim_text, set_data, src_url_equal, HtmlTagHydration, claim_html_tag, construct_svelte_component, subscribe } from 'svelte/internal';
+import { SvelteComponent, init, safe_not_equal, element, claim_element, children, detach, insert_hydration, noop, component_subscribe, attr, create_slot, create_component, space, claim_component, claim_space, mount_component, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, append_styles, empty, group_outros, check_outros, listen, null_to_empty, is_function, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, claim_svg_element, append_hydration, destroy_each, text, claim_text, set_data, src_url_equal, HtmlTagHydration, claim_html_tag, construct_svelte_component, subscribe } from 'svelte/internal';
 import 'svelte/easing';
 
 /** @internal */
@@ -26,7 +26,7 @@ const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
 const KARTE_MODAL_ROOT = 'karte-modal-root';
 
 /**
- * 静的変数に関連するコードを管理する
+ * ポップアップ(モーダル)のコンポーネントで利用するPropの定義
  */
 /** @internal */
 const PropTypes = [
@@ -162,7 +162,10 @@ const OnClickOperationOptions = [
 /** @internal */
 const LengthUnits = ['px', 'em', 'rem', 'vw', 'fr', '%'];
 /** @internal */
+const SYSTEM_FONT = 'sans-serif, serif, monospace, system-ui';
+/** @internal */
 const Fonts = [
+    SYSTEM_FONT,
     'Noto Sans JP',
     'M PLUS Rounded 1c',
     'M PLUS 1p',
@@ -340,10 +343,6 @@ const getMarginStyle = (margin) => {
     return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
 };
 /** @internal */
-const parseStyle = (style) => {
-    return Object.fromEntries(style.split(';').map(attr => attr.split(':').map(str => str.trim())));
-};
-/** @internal */
 const stringifyStyleObj = (styleObj) => {
     return Object.entries(styleObj)
         .map(([key, value]) => `${key}:${value}`)
@@ -455,11 +454,31 @@ function onTime(time, fn) {
 function hasSuffix(value, suffix) {
     return new RegExp(`[0-9]${suffix}$`).test(value);
 }
-/** @internal */
-function getGoogleFontsParam() {
-    return 'family=' + Fonts.map(font => font.replace(/ /g, '+')).join('&family=');
+/**
+ * Goolge Fonts用のURLを生成
+ *
+ * @param fonts - フォント名の配列
+ * @param texts - 使用するテキストの配列
+ *
+ * @remarks
+ * textsを指定した場合フォントサイズが削減される
+ *
+ * @internal
+ */
+function makeGoogleFontUrl(fonts, texts) {
+    const params = [];
+    params.push('display=swap');
+    if (texts) {
+        texts.forEach(text => params.push(`text=${text}`));
+    }
+    fonts.forEach(font => params.push(`family=${font.replace(/['"]/g, '').replace(/ /g, '+')}`));
+    return `https://fonts.googleapis.com/css2?${params.join('&')}`;
 }
-/** @internal */
+/**
+ * HTML要素を生成
+ *
+ * @internal
+ */
 const h = (type, props, ...children) => {
     const el = document.createElement(type);
     for (const key of Object.keys(props)) {
@@ -476,6 +495,16 @@ const h = (type, props, ...children) => {
     }
     return el;
 };
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+function getGoogleFontsParam() {
+    return 'family=' + Fonts.map(font => font.replace(/ /g, '+')).join('&family=');
+}
 
 /**
  * Store to handle action setting
@@ -673,6 +702,28 @@ const setMaximumZindex = (zindex) => {
         return;
     maximumZindex.set(zindex);
 };
+/**
+ * Store to handle font-family of CSS
+ *
+ * @internal
+ */
+const fonts = writable([]);
+/**
+ * Add font-family
+ *
+ * @internal
+ */
+const addFont = (font) => {
+    if (font === SYSTEM_FONT) {
+        return;
+    }
+    fonts.update(current => {
+        if (!current.includes(font)) {
+            current.push(font);
+        }
+        return current;
+    });
+};
 /**
  * Store to handle internal event handlers
  *
@@ -1615,9 +1666,13 @@ async function loadGlobalScript(src) {
  */
 async function applyGlobalCss(css) {
     return new Promise((resolve, reject) => {
+        const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+        if (!action) {
+            return;
+        }
         const style = document.createElement('style');
         style.textContent = css;
-        document.body.appendChild(style);
+        action.appendChild(style);
         style.addEventListener('load', () => resolve(style));
         style.addEventListener('error', () => reject(style));
     });
@@ -1631,10 +1686,15 @@ async function applyGlobalCss(css) {
  */
 async function loadGlobalStyle(href) {
     return new Promise((resolve, reject) => {
+        const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+        if (!action) {
+            return;
+        }
         const link = document.createElement('link');
         link.rel = 'stylesheet';
         link.href = href;
-        document.body.appendChild(link);
+        link.type = 'text/css';
+        action.appendChild(link);
         link.addEventListener('load', () => resolve(link));
         link.addEventListener('error', () => reject(link));
     });
@@ -2124,21 +2184,140 @@ const LAYOUT_COMPONENT_NAMES = [
     'StateItem',
 ];
 
+/* src/components/Header.svelte generated by Svelte v3.53.1 */
+
+function create_if_block$9(ctx) {
+	let link;
+
+	return {
+		c() {
+			link = element("link");
+			this.h();
+		},
+		l(nodes) {
+			link = claim_element(nodes, "LINK", { href: true, type: true, rel: true });
+			this.h();
+		},
+		h() {
+			attr(link, "href", /*googleFontUrl*/ ctx[0]);
+			attr(link, "type", "text/css");
+			attr(link, "rel", "stylesheet");
+		},
+		m(target, anchor) {
+			insert_hydration(target, link, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*googleFontUrl*/ 1) {
+				attr(link, "href", /*googleFontUrl*/ ctx[0]);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(link);
+		}
+	};
+}
+
+function create_fragment$y(ctx) {
+	let head;
+	let if_block = /*googleFontUrl*/ ctx[0] && create_if_block$9(ctx);
+
+	return {
+		c() {
+			head = element("head");
+			if (if_block) if_block.c();
+		},
+		l(nodes) {
+			head = claim_element(nodes, "HEAD", {});
+			var head_nodes = children(head);
+			if (if_block) if_block.l(head_nodes);
+			head_nodes.forEach(detach);
+		},
+		m(target, anchor) {
+			insert_hydration(target, head, anchor);
+			if (if_block) if_block.m(head, null);
+		},
+		p(ctx, [dirty]) {
+			if (/*googleFontUrl*/ ctx[0]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block$9(ctx);
+					if_block.c();
+					if_block.m(head, null);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(head);
+			if (if_block) if_block.d();
+		}
+	};
+}
+
+function instance$y($$self, $$props, $$invalidate) {
+	let $fonts;
+	component_subscribe($$self, fonts, $$value => $$invalidate(1, $fonts = $$value));
+	let googleFontUrl = '';
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*$fonts*/ 2) {
+			{
+				{
+					// フォントのロードが遅れてエディタのプレビューがガタつく対策
+					$$invalidate(0, googleFontUrl = makeGoogleFontUrl(Fonts.filter(font => font !== SYSTEM_FONT)));
+				}
+			}
+		}
+
+		if ($$self.$$.dirty & /*googleFontUrl*/ 1) {
+			{
+				if (googleFontUrl) {
+					loadGlobalStyle(googleFontUrl);
+				}
+			}
+		}
+	};
+
+	return [googleFontUrl, $fonts];
+}
+
+class Header extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance$y, create_fragment$y, safe_not_equal, {});
+	}
+}
+
 /* src/components/State.svelte generated by Svelte v3.53.1 */
 
 function create_fragment$x(ctx) {
+	let header;
+	let t;
 	let current;
+	header = new Header({});
 	const default_slot_template = /*#slots*/ ctx[1].default;
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[0], null);
 
 	return {
 		c() {
+			create_component(header.$$.fragment);
+			t = space();
 			if (default_slot) default_slot.c();
 		},
 		l(nodes) {
+			claim_component(header.$$.fragment, nodes);
+			t = claim_space(nodes);
 			if (default_slot) default_slot.l(nodes);
 		},
 		m(target, anchor) {
+			mount_component(header, target, anchor);
+			insert_hydration(target, t, anchor);
+
 			if (default_slot) {
 				default_slot.m(target, anchor);
 			}
@@ -2163,14 +2342,18 @@ function create_fragment$x(ctx) {
 		},
 		i(local) {
 			if (current) return;
+			transition_in(header.$$.fragment, local);
 			transition_in(default_slot, local);
 			current = true;
 		},
 		o(local) {
+			transition_out(header.$$.fragment, local);
 			transition_out(default_slot, local);
 			current = false;
 		},
 		d(detaching) {
+			destroy_component(header, detaching);
+			if (detaching) detach(t);
 			if (default_slot) default_slot.d(detaching);
 		}
 	};
@@ -4260,7 +4443,7 @@ function add_css$o(target) {
 	append_styles(target, "svelte-600oh0", ".text-element-wrapper.svelte-600oh0.svelte-600oh0{position:relative;height:100%}.text-element.svelte-600oh0.svelte-600oh0{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:auto;margin:0px;padding:0px}.text-link-element.svelte-600oh0.svelte-600oh0{text-decoration:none;color:inherit}.text-element-inner.svelte-600oh0.svelte-600oh0{width:100%;height:auto}.text-direction-vertical.svelte-600oh0.svelte-600oh0{writing-mode:vertical-rl}.text-direction-vertical.svelte-600oh0 .text-element-inner.svelte-600oh0{width:auto;height:100%}.tooltip.svelte-600oh0.svelte-600oh0{display:none;position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:#fff;background-color:#3d4948;white-space:nowrap;padding:4px 8px 4px 8px;border-radius:4px;font-size:12px;z-index:2147483647}.tooltip.svelte-600oh0.svelte-600oh0:before{content:'';position:absolute;top:-13px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom:7px solid #3d4948}.tooltip.show.svelte-600oh0.svelte-600oh0{display:block}.tooltip-error.svelte-600oh0.svelte-600oh0{background-color:#c00}.tooltip-error.svelte-600oh0.svelte-600oh0:before{border-bottom:7px solid #c00}");
 }
 
-// (78:2) {:else}
+// (86:2) {:else}
 function create_else_block$1(ctx) {
 	let div1;
 	let div0;
@@ -4326,7 +4509,7 @@ function create_else_block$1(ctx) {
 	};
 }
 
-// (69:2) {#if enableCopy}
+// (77:2) {#if enableCopy}
 function create_if_block$3(ctx) {
 	let a;
 	let div0;
@@ -4391,11 +4574,11 @@ function create_if_block$3(ctx) {
 			insert_hydration(target, t0, anchor);
 			insert_hydration(target, div1, anchor);
 			append_hydration(div1, t1);
-			/*div1_binding*/ ctx[10](div1);
+			/*div1_binding*/ ctx[11](div1);
 			insert_hydration(target, t2, anchor);
 			insert_hydration(target, div2, anchor);
 			append_hydration(div2, t3);
-			/*div2_binding*/ ctx[11](div2);
+			/*div2_binding*/ ctx[12](div2);
 			current = true;
 
 			if (!mounted) {
@@ -4430,10 +4613,10 @@ function create_if_block$3(ctx) {
 			destroy_component(rendertext);
 			if (detaching) detach(t0);
 			if (detaching) detach(div1);
-			/*div1_binding*/ ctx[10](null);
+			/*div1_binding*/ ctx[11](null);
 			if (detaching) detach(t2);
 			if (detaching) detach(div2);
-			/*div2_binding*/ ctx[11](null);
+			/*div2_binding*/ ctx[12](null);
 			mounted = false;
 			dispose();
 		}
@@ -4442,9 +4625,6 @@ function create_if_block$3(ctx) {
 
 function create_fragment$p(ctx) {
 	let div;
-	let link;
-	let link_href_value;
-	let t;
 	let current_block_type_index;
 	let if_block;
 	let current;
@@ -4462,37 +4642,25 @@ function create_fragment$p(ctx) {
 	return {
 		c() {
 			div = element("div");
-			link = element("link");
-			t = space();
 			if_block.c();
 			this.h();
 		},
 		l(nodes) {
 			div = claim_element(nodes, "DIV", { class: true });
 			var div_nodes = children(div);
-			link = claim_element(div_nodes, "LINK", { href: true, rel: true });
-			t = claim_space(div_nodes);
 			if_block.l(div_nodes);
 			div_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
-			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`);
-			attr(link, "rel", "stylesheet");
 			attr(div, "class", "text-element-wrapper svelte-600oh0");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
-			append_hydration(div, link);
-			append_hydration(div, t);
 			if_blocks[current_block_type_index].m(div, null);
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (!current || dirty & /*text*/ 1 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`)) {
-				attr(link, "href", link_href_value);
-			}
-
 			let previous_block_index = current_block_type_index;
 			current_block_type_index = select_block_type(ctx);
 
@@ -4538,6 +4706,7 @@ function create_fragment$p(ctx) {
 function instance$p($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
+	let { font = SYSTEM_FONT } = $$props;
 	let { _textStyle = 'font-size:12px; line-height: 1.5;' } = $$props;
 	let { textDirection = 'horizontal' } = $$props;
 	let { _style = '' } = $$props;
@@ -4587,16 +4756,21 @@ function instance$p($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
-		if ('_textStyle' in $$props) $$invalidate(7, _textStyle = $$props._textStyle);
+		if ('font' in $$props) $$invalidate(7, font = $$props.font);
+		if ('_textStyle' in $$props) $$invalidate(8, _textStyle = $$props._textStyle);
 		if ('textDirection' in $$props) $$invalidate(1, textDirection = $$props.textDirection);
-		if ('_style' in $$props) $$invalidate(8, _style = $$props._style);
+		if ('_style' in $$props) $$invalidate(9, _style = $$props._style);
 		if ('enableCopy' in $$props) $$invalidate(2, enableCopy = $$props.enableCopy);
-		if ('eventName' in $$props) $$invalidate(9, eventName = $$props.eventName);
+		if ('eventName' in $$props) $$invalidate(10, eventName = $$props.eventName);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*_textStyle, _style*/ 384) {
-			$$invalidate(5, style = [..._textStyle.split(';'), ..._style.split(';')].join(';'));
+		if ($$self.$$.dirty & /*font*/ 128) {
+			addFont(font);
+		}
+
+		if ($$self.$$.dirty & /*_textStyle, _style, font*/ 896) {
+			$$invalidate(5, style = [..._textStyle.split(';'), ..._style.split(';'), `font-family:${font}`].filter(prop => prop).join(';'));
 		}
 	};
 
@@ -4608,6 +4782,7 @@ function instance$p($$self, $$props, $$invalidate) {
 		tooltipErrorEl,
 		style,
 		onCopy,
+		font,
 		_textStyle,
 		_style,
 		eventName,
@@ -4628,11 +4803,12 @@ class TextElement extends SvelteComponent {
 			safe_not_equal,
 			{
 				text: 0,
-				_textStyle: 7,
+				font: 7,
+				_textStyle: 8,
 				textDirection: 1,
-				_style: 8,
+				_style: 9,
 				enableCopy: 2,
-				eventName: 9
+				eventName: 10
 			},
 			add_css$o
 		);
@@ -5999,12 +6175,12 @@ function add_css$f(target) {
 
 function get_each_context$5(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[15] = list[i];
-	child_ctx[17] = i;
+	child_ctx[16] = list[i];
+	child_ctx[18] = i;
 	return child_ctx;
 }
 
-// (89:2) {#each _options as option, i}
+// (98:2) {#each _options as option, i}
 function create_each_block$5(ctx) {
 	let label;
 	let input;
@@ -6012,7 +6188,7 @@ function create_each_block$5(ctx) {
 	let input_checked_value;
 	let t0;
 	let span;
-	let t1_value = /*option*/ ctx[15] + "";
+	let t1_value = /*option*/ ctx[16] + "";
 	let t1;
 	let t2;
 	let mounted;
@@ -6053,8 +6229,8 @@ function create_each_block$5(ctx) {
 			attr(input, "class", "radio-button-input svelte-17s08g");
 			attr(input, "style", /*buttonStyle*/ ctx[5]);
 			attr(input, "name", /*name*/ ctx[0]);
-			input.value = input_value_value = /*option*/ ctx[15];
-			input.checked = input_checked_value = /*option*/ ctx[15] === /*_value*/ ctx[3];
+			input.value = input_value_value = /*option*/ ctx[16];
+			input.checked = input_checked_value = /*option*/ ctx[16] === /*_value*/ ctx[3];
 			attr(span, "class", "radio-button-text svelte-17s08g");
 			attr(span, "style", /*_textStyle*/ ctx[2]);
 			attr(label, "class", "radio-button svelte-17s08g");
@@ -6068,7 +6244,7 @@ function create_each_block$5(ctx) {
 			append_hydration(label, t2);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*handleChange*/ ctx[7](/*i*/ ctx[17]));
+				dispose = listen(input, "change", /*handleChange*/ ctx[7](/*i*/ ctx[18]));
 				mounted = true;
 			}
 		},
@@ -6083,15 +6259,15 @@ function create_each_block$5(ctx) {
 				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*_options*/ 16 && input_value_value !== (input_value_value = /*option*/ ctx[15])) {
+			if (dirty & /*_options*/ 16 && input_value_value !== (input_value_value = /*option*/ ctx[16])) {
 				input.value = input_value_value;
 			}
 
-			if (dirty & /*_options, _value*/ 24 && input_checked_value !== (input_checked_value = /*option*/ ctx[15] === /*_value*/ ctx[3])) {
+			if (dirty & /*_options, _value*/ 24 && input_checked_value !== (input_checked_value = /*option*/ ctx[16] === /*_value*/ ctx[3])) {
 				input.checked = input_checked_value;
 			}
 
-			if (dirty & /*_options*/ 16 && t1_value !== (t1_value = /*option*/ ctx[15] + "")) set_data(t1, t1_value);
+			if (dirty & /*_options*/ 16 && t1_value !== (t1_value = /*option*/ ctx[16] + "")) set_data(t1, t1_value);
 
 			if (dirty & /*_textStyle*/ 4) {
 				attr(span, "style", /*_textStyle*/ ctx[2]);
@@ -6107,9 +6283,6 @@ function create_each_block$5(ctx) {
 
 function create_fragment$g(ctx) {
 	let div;
-	let link;
-	let link_href_value;
-	let t;
 	let each_value = /*_options*/ ctx[4];
 	let each_blocks = [];
 
@@ -6120,8 +6293,6 @@ function create_fragment$g(ctx) {
 	return {
 		c() {
 			div = element("div");
-			link = element("link");
-			t = space();
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
@@ -6132,8 +6303,6 @@ function create_fragment$g(ctx) {
 		l(nodes) {
 			div = claim_element(nodes, "DIV", { class: true, style: true });
 			var div_nodes = children(div);
-			link = claim_element(div_nodes, "LINK", { href: true, rel: true });
-			t = claim_space(div_nodes);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].l(div_nodes);
@@ -6143,25 +6312,17 @@ function create_fragment$g(ctx) {
 			this.h();
 		},
 		h() {
-			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*_options*/ ctx[4].join('')}`);
-			attr(link, "rel", "stylesheet");
 			attr(div, "class", "radio-buttons svelte-17s08g");
 			attr(div, "style", /*_layoutStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
-			append_hydration(div, link);
-			append_hydration(div, t);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(div, null);
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_options*/ 16 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*_options*/ ctx[4].join('')}`)) {
-				attr(link, "href", link_href_value);
-			}
-
 			if (dirty & /*_textStyle, _options, buttonStyle, name, _value, handleChange*/ 189) {
 				each_value = /*_options*/ ctx[4];
 				let i;
@@ -6207,6 +6368,7 @@ function instance$g($$self, $$props, $$invalidate) {
 	let { options = 'ラジオボタン1,ラジオボタン2,ラジオボタン3' } = $$props;
 	let { required = false } = $$props;
 	let { _layoutStyle = 'flex-direction: column; gap: 0px;' } = $$props;
+	let { font = SYSTEM_FONT } = $$props;
 	let { _textStyle = 'color: #333; font-size: 12px; line-height:1.5;' } = $$props;
 	let { buttonSize = '16px' } = $$props;
 	let { buttonColor = { main: '#f0f1f1', sub: '#f0f1f1' } } = $$props;
@@ -6223,7 +6385,7 @@ function instance$g($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(13, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(14, $value = value));
 
 	const handleChange = index => event => {
 		if (event.target.checked) {
@@ -6236,18 +6398,23 @@ function instance$g($$self, $$props, $$invalidate) {
 		if ('options' in $$props) $$invalidate(8, options = $$props.options);
 		if ('required' in $$props) $$invalidate(9, required = $$props.required);
 		if ('_layoutStyle' in $$props) $$invalidate(1, _layoutStyle = $$props._layoutStyle);
+		if ('font' in $$props) $$invalidate(10, font = $$props.font);
 		if ('_textStyle' in $$props) $$invalidate(2, _textStyle = $$props._textStyle);
-		if ('buttonSize' in $$props) $$invalidate(10, buttonSize = $$props.buttonSize);
-		if ('buttonColor' in $$props) $$invalidate(11, buttonColor = $$props.buttonColor);
-		if ('buttonColorActive' in $$props) $$invalidate(12, buttonColorActive = $$props.buttonColorActive);
+		if ('buttonSize' in $$props) $$invalidate(11, buttonSize = $$props.buttonSize);
+		if ('buttonColor' in $$props) $$invalidate(12, buttonColor = $$props.buttonColor);
+		if ('buttonColorActive' in $$props) $$invalidate(13, buttonColorActive = $$props.buttonColorActive);
 	};
 
 	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*font*/ 1024) {
+			addFont(font);
+		}
+
 		if ($$self.$$.dirty & /*options*/ 256) {
 			$$invalidate(4, _options = options.split(','));
 		}
 
-		if ($$self.$$.dirty & /*buttonColor, buttonColorActive, buttonSize*/ 7168) {
+		if ($$self.$$.dirty & /*buttonColor, buttonColorActive, buttonSize*/ 14336) {
 			$$invalidate(5, buttonStyle = (() => {
 				return stringifyStyleObj({
 					'--color-main': buttonColor.main,
@@ -6259,7 +6426,7 @@ function instance$g($$self, $$props, $$invalidate) {
 			})());
 		}
 
-		if ($$self.$$.dirty & /*$value*/ 8192) {
+		if ($$self.$$.dirty & /*$value*/ 16384) {
 			$$invalidate(3, _value = $value[0]);
 		}
 	};
@@ -6275,6 +6442,7 @@ function instance$g($$self, $$props, $$invalidate) {
 		handleChange,
 		options,
 		required,
+		font,
 		buttonSize,
 		buttonColor,
 		buttonColorActive,
@@ -6297,10 +6465,11 @@ class FormRadioButtons extends SvelteComponent {
 				options: 8,
 				required: 9,
 				_layoutStyle: 1,
+				font: 10,
 				_textStyle: 2,
-				buttonSize: 10,
-				buttonColor: 11,
-				buttonColorActive: 12
+				buttonSize: 11,
+				buttonColor: 12,
+				buttonColorActive: 13
 			},
 			add_css$f
 		);
@@ -6315,12 +6484,12 @@ function add_css$e(target) {
 
 function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[18] = list[i];
-	child_ctx[20] = i;
+	child_ctx[19] = list[i];
+	child_ctx[21] = i;
 	return child_ctx;
 }
 
-// (99:10) {:else}
+// (108:10) {:else}
 function create_else_block(ctx) {
 	let t;
 
@@ -6343,9 +6512,9 @@ function create_else_block(ctx) {
 	};
 }
 
-// (97:10) {#if option}
+// (106:10) {#if option}
 function create_if_block$2(ctx) {
-	let t_value = /*option*/ ctx[18] + "";
+	let t_value = /*option*/ ctx[19] + "";
 	let t;
 
 	return {
@@ -6359,7 +6528,7 @@ function create_if_block$2(ctx) {
 			insert_hydration(target, t, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*_options*/ 16 && t_value !== (t_value = /*option*/ ctx[18] + "")) set_data(t, t_value);
+			if (dirty & /*_options*/ 16 && t_value !== (t_value = /*option*/ ctx[19] + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(t);
@@ -6367,7 +6536,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-// (95:6) {#each _options as option, i}
+// (104:6) {#each _options as option, i}
 function create_each_block$4(ctx) {
 	let option;
 	let t;
@@ -6375,7 +6544,7 @@ function create_each_block$4(ctx) {
 	let option_selected_value;
 
 	function select_block_type(ctx, dirty) {
-		if (/*option*/ ctx[18]) return create_if_block$2;
+		if (/*option*/ ctx[19]) return create_if_block$2;
 		return create_else_block;
 	}
 
@@ -6398,9 +6567,9 @@ function create_each_block$4(ctx) {
 			this.h();
 		},
 		h() {
-			option.__value = option_value_value = /*option*/ ctx[18];
+			option.__value = option_value_value = /*option*/ ctx[19];
 			option.value = option.__value;
-			option.selected = option_selected_value = /*option*/ ctx[18] === /*_value*/ ctx[1];
+			option.selected = option_selected_value = /*option*/ ctx[19] === /*_value*/ ctx[1];
 		},
 		m(target, anchor) {
 			insert_hydration(target, option, anchor);
@@ -6420,12 +6589,12 @@ function create_each_block$4(ctx) {
 				}
 			}
 
-			if (dirty & /*_options*/ 16 && option_value_value !== (option_value_value = /*option*/ ctx[18])) {
+			if (dirty & /*_options*/ 16 && option_value_value !== (option_value_value = /*option*/ ctx[19])) {
 				option.__value = option_value_value;
 				option.value = option.__value;
 			}
 
-			if (dirty & /*_options, _value*/ 18 && option_selected_value !== (option_selected_value = /*option*/ ctx[18] === /*_value*/ ctx[1])) {
+			if (dirty & /*_options, _value*/ 18 && option_selected_value !== (option_selected_value = /*option*/ ctx[19] === /*_value*/ ctx[1])) {
 				option.selected = option_selected_value;
 			}
 		},
@@ -6438,11 +6607,8 @@ function create_each_block$4(ctx) {
 
 function create_fragment$f(ctx) {
 	let div1;
-	let link;
-	let link_href_value;
-	let t0;
 	let select;
-	let t1;
+	let t;
 	let div0;
 	let mounted;
 	let dispose;
@@ -6456,23 +6622,19 @@ function create_fragment$f(ctx) {
 	return {
 		c() {
 			div1 = element("div");
-			link = element("link");
-			t0 = space();
 			select = element("select");
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
 
-			t1 = space();
+			t = space();
 			div0 = element("div");
 			this.h();
 		},
 		l(nodes) {
 			div1 = claim_element(nodes, "DIV", { class: true, style: true });
 			var div1_nodes = children(div1);
-			link = claim_element(div1_nodes, "LINK", { href: true, rel: true });
-			t0 = claim_space(div1_nodes);
 			select = claim_element(div1_nodes, "SELECT", { class: true, style: true });
 			var select_nodes = children(select);
 
@@ -6481,15 +6643,13 @@ function create_fragment$f(ctx) {
 			}
 
 			select_nodes.forEach(detach);
-			t1 = claim_space(div1_nodes);
+			t = claim_space(div1_nodes);
 			div0 = claim_element(div1_nodes, "DIV", { class: true });
 			children(div0).forEach(detach);
 			div1_nodes.forEach(detach);
 			this.h();
 		},
 		h() {
-			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${[/*placeholder*/ ctx[0], .../*_options*/ ctx[4]].join('')}`);
-			attr(link, "rel", "stylesheet");
 			attr(select, "class", "select-select svelte-1n4ag74");
 			attr(select, "style", /*style*/ ctx[3]);
 			attr(div0, "class", "select-icon svelte-1n4ag74");
@@ -6498,15 +6658,13 @@ function create_fragment$f(ctx) {
 		},
 		m(target, anchor) {
 			insert_hydration(target, div1, anchor);
-			append_hydration(div1, link);
-			append_hydration(div1, t0);
 			append_hydration(div1, select);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(select, null);
 			}
 
-			append_hydration(div1, t1);
+			append_hydration(div1, t);
 			append_hydration(div1, div0);
 
 			if (!mounted) {
@@ -6515,10 +6673,6 @@ function create_fragment$f(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*placeholder, _options*/ 17 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${[/*placeholder*/ ctx[0], .../*_options*/ ctx[4]].join('')}`)) {
-				attr(link, "href", link_href_value);
-			}
-
 			if (dirty & /*_options, _value, placeholder*/ 19) {
 				each_value = /*_options*/ ctx[4];
 				let i;
@@ -6573,6 +6727,7 @@ function instance$f($$self, $$props, $$invalidate) {
 	let { required = false } = $$props;
 	let { _style = 'cursor: pointer; background-color: #fff; border: solid 2px #ccc; border-radius: 6px; padding: 0 0 0 10px;' } = $$props;
 	let { _focusStyle = 'border-width: 2px; border-color: #2aab9f; border-style: solid' } = $$props;
+	let { font = SYSTEM_FONT } = $$props;
 	let { _textStyle = 'font-size: 12px; line-height:1.5;' } = $$props;
 	let { _placeholderStyle = 'color: #ccc;' } = $$props;
 	let { iconColor = 'rgba(0, 16, 14, 0.8)' } = $$props;
@@ -6589,7 +6744,7 @@ function instance$f($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(16, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(17, $value = value));
 
 	function handleChange(event) {
 		const updated = event.target.value ? [event.target.value] : [];
@@ -6603,22 +6758,27 @@ function instance$f($$self, $$props, $$invalidate) {
 		if ('required' in $$props) $$invalidate(9, required = $$props.required);
 		if ('_style' in $$props) $$invalidate(10, _style = $$props._style);
 		if ('_focusStyle' in $$props) $$invalidate(11, _focusStyle = $$props._focusStyle);
-		if ('_textStyle' in $$props) $$invalidate(12, _textStyle = $$props._textStyle);
-		if ('_placeholderStyle' in $$props) $$invalidate(13, _placeholderStyle = $$props._placeholderStyle);
-		if ('iconColor' in $$props) $$invalidate(14, iconColor = $$props.iconColor);
-		if ('iconSize' in $$props) $$invalidate(15, iconSize = $$props.iconSize);
+		if ('font' in $$props) $$invalidate(12, font = $$props.font);
+		if ('_textStyle' in $$props) $$invalidate(13, _textStyle = $$props._textStyle);
+		if ('_placeholderStyle' in $$props) $$invalidate(14, _placeholderStyle = $$props._placeholderStyle);
+		if ('iconColor' in $$props) $$invalidate(15, iconColor = $$props.iconColor);
+		if ('iconSize' in $$props) $$invalidate(16, iconSize = $$props.iconSize);
 	};
 
 	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*font*/ 4096) {
+			addFont(font);
+		}
+
 		if ($$self.$$.dirty & /*options*/ 256) {
 			$$invalidate(4, _options = ['', ...options.split(',')]);
 		}
 
-		if ($$self.$$.dirty & /*$value*/ 65536) {
+		if ($$self.$$.dirty & /*$value*/ 131072) {
 			$$invalidate(1, _value = $value[0]);
 		}
 
-		if ($$self.$$.dirty & /*_style, _textStyle, _value, _placeholderStyle*/ 13314) {
+		if ($$self.$$.dirty & /*_style, _textStyle, _value, _placeholderStyle*/ 25602) {
 			$$invalidate(3, style = [
 				..._style.split(';'),
 				..._textStyle.split(';'),
@@ -6626,7 +6786,7 @@ function instance$f($$self, $$props, $$invalidate) {
 			].join(';'));
 		}
 
-		if ($$self.$$.dirty & /*_focusStyle, _placeholderStyle, iconColor, iconSize*/ 59392) {
+		if ($$self.$$.dirty & /*_focusStyle, _placeholderStyle, iconColor, iconSize*/ 116736) {
 			$$invalidate(2, styleVariables = (() => {
 				const variables = {};
 				const focusStyleObj = parseStyle(_focusStyle);
@@ -6655,6 +6815,7 @@ function instance$f($$self, $$props, $$invalidate) {
 		required,
 		_style,
 		_focusStyle,
+		font,
 		_textStyle,
 		_placeholderStyle,
 		iconColor,
@@ -6680,10 +6841,11 @@ class FormSelect extends SvelteComponent {
 				required: 9,
 				_style: 10,
 				_focusStyle: 11,
-				_textStyle: 12,
-				_placeholderStyle: 13,
-				iconColor: 14,
-				iconSize: 15
+				font: 12,
+				_textStyle: 13,
+				_placeholderStyle: 14,
+				iconColor: 15,
+				iconSize: 16
 			},
 			add_css$e
 		);
@@ -6698,12 +6860,12 @@ function add_css$d(target) {
 
 function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[15] = list[i];
-	child_ctx[17] = i;
+	child_ctx[17] = list[i];
+	child_ctx[19] = i;
 	return child_ctx;
 }
 
-// (95:2) {#each _options as option, i}
+// (105:2) {#each _options as option, i}
 function create_each_block$3(ctx) {
 	let label;
 	let input;
@@ -6714,7 +6876,7 @@ function create_each_block$3(ctx) {
 	let span1_class_value;
 	let t1;
 	let span2;
-	let t2_value = /*option*/ ctx[15] + "";
+	let t2_value = /*option*/ ctx[17] + "";
 	let t2;
 	let t3;
 	let mounted;
@@ -6757,10 +6919,10 @@ function create_each_block$3(ctx) {
 			attr(input, "class", "check-box-input svelte-o1ztcf");
 			attr(input, "type", "checkbox");
 			attr(input, "name", /*name*/ ctx[0]);
-			input.checked = input_checked_value = /*isCheckedArray*/ ctx[4][/*i*/ ctx[17]];
+			input.checked = input_checked_value = /*isCheckedArray*/ ctx[4][/*i*/ ctx[19]];
 			attr(span0, "class", "check-box-icon svelte-o1ztcf");
 
-			attr(span1, "class", span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[4][/*i*/ ctx[17]]
+			attr(span1, "class", span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[4][/*i*/ ctx[19]]
 			? ' _checked'
 			: ''}`) + " svelte-o1ztcf"));
 
@@ -6781,7 +6943,7 @@ function create_each_block$3(ctx) {
 			append_hydration(label, t3);
 
 			if (!mounted) {
-				dispose = listen(input, "change", /*handleChange*/ ctx[7](/*i*/ ctx[17]));
+				dispose = listen(input, "change", /*handleChange*/ ctx[7](/*i*/ ctx[19]));
 				mounted = true;
 			}
 		},
@@ -6792,11 +6954,11 @@ function create_each_block$3(ctx) {
 				attr(input, "name", /*name*/ ctx[0]);
 			}
 
-			if (dirty & /*isCheckedArray*/ 16 && input_checked_value !== (input_checked_value = /*isCheckedArray*/ ctx[4][/*i*/ ctx[17]])) {
+			if (dirty & /*isCheckedArray*/ 16 && input_checked_value !== (input_checked_value = /*isCheckedArray*/ ctx[4][/*i*/ ctx[19]])) {
 				input.checked = input_checked_value;
 			}
 
-			if (dirty & /*isCheckedArray*/ 16 && span1_class_value !== (span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[4][/*i*/ ctx[17]]
+			if (dirty & /*isCheckedArray*/ 16 && span1_class_value !== (span1_class_value = "" + (null_to_empty(`check-box-check${/*isCheckedArray*/ ctx[4][/*i*/ ctx[19]]
 			? ' _checked'
 			: ''}`) + " svelte-o1ztcf"))) {
 				attr(span1, "class", span1_class_value);
@@ -6806,7 +6968,7 @@ function create_each_block$3(ctx) {
 				attr(span1, "style", /*styleVariables*/ ctx[5]);
 			}
 
-			if (dirty & /*_options*/ 8 && t2_value !== (t2_value = /*option*/ ctx[15] + "")) set_data(t2, t2_value);
+			if (dirty & /*_options*/ 8 && t2_value !== (t2_value = /*option*/ ctx[17] + "")) set_data(t2, t2_value);
 
 			if (dirty & /*_textStyle*/ 4) {
 				attr(span2, "style", /*_textStyle*/ ctx[2]);
@@ -6822,9 +6984,6 @@ function create_each_block$3(ctx) {
 
 function create_fragment$e(ctx) {
 	let div;
-	let link;
-	let link_href_value;
-	let t;
 	let each_value = /*_options*/ ctx[3];
 	let each_blocks = [];
 
@@ -6835,8 +6994,6 @@ function create_fragment$e(ctx) {
 	return {
 		c() {
 			div = element("div");
-			link = element("link");
-			t = space();
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
@@ -6847,8 +7004,6 @@ function create_fragment$e(ctx) {
 		l(nodes) {
 			div = claim_element(nodes, "DIV", { class: true, style: true });
 			var div_nodes = children(div);
-			link = claim_element(div_nodes, "LINK", { href: true, rel: true });
-			t = claim_space(div_nodes);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].l(div_nodes);
@@ -6858,25 +7013,17 @@ function create_fragment$e(ctx) {
 			this.h();
 		},
 		h() {
-			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*_options*/ ctx[3].join('')}`);
-			attr(link, "rel", "stylesheet");
 			attr(div, "class", "check-boxes svelte-o1ztcf");
 			attr(div, "style", /*_layoutStyle*/ ctx[1]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
-			append_hydration(div, link);
-			append_hydration(div, t);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(div, null);
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*_options*/ 8 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*_options*/ ctx[3].join('')}`)) {
-				attr(link, "href", link_href_value);
-			}
-
 			if (dirty & /*_textStyle, _options, isCheckedArray, styleVariables, name, handleChange*/ 189) {
 				each_value = /*_options*/ ctx[3];
 				let i;
@@ -6922,7 +7069,9 @@ function instance$e($$self, $$props, $$invalidate) {
 	let { options = 'チェックボックス1,チェックボックス2,チェックボックス3' } = $$props;
 	let { required = false } = $$props;
 	let { _layoutStyle = 'flex-direction: column; gap: 0px;' } = $$props;
-	let { _textStyle = 'color: #333; font-size: 12px; line-height:1.5;' } = $$props;
+	let { font = SYSTEM_FONT } = $$props;
+	const fontCss = font ? 'font-family:' + font : '';
+	let { _textStyle = `color:#333; font-size:12px; line-height:1.5; ${fontCss}` } = $$props;
 	let { buttonSize = '16px' } = $$props;
 	let { buttonColor = { main: '#f0f1f1', sub: '#f0f1f1' } } = $$props;
 	let { buttonColorActive = { main: '#2aab9f', sub: '#fff' } } = $$props;
@@ -6938,7 +7087,7 @@ function instance$e($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(13, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(14, $value = value));
 
 	const handleChange = index => event => {
 		if (isCheckedArray[index] !== event.target.checked) {
@@ -6954,18 +7103,23 @@ function instance$e($$self, $$props, $$invalidate) {
 		if ('options' in $$props) $$invalidate(8, options = $$props.options);
 		if ('required' in $$props) $$invalidate(9, required = $$props.required);
 		if ('_layoutStyle' in $$props) $$invalidate(1, _layoutStyle = $$props._layoutStyle);
+		if ('font' in $$props) $$invalidate(10, font = $$props.font);
 		if ('_textStyle' in $$props) $$invalidate(2, _textStyle = $$props._textStyle);
-		if ('buttonSize' in $$props) $$invalidate(10, buttonSize = $$props.buttonSize);
-		if ('buttonColor' in $$props) $$invalidate(11, buttonColor = $$props.buttonColor);
-		if ('buttonColorActive' in $$props) $$invalidate(12, buttonColorActive = $$props.buttonColorActive);
+		if ('buttonSize' in $$props) $$invalidate(11, buttonSize = $$props.buttonSize);
+		if ('buttonColor' in $$props) $$invalidate(12, buttonColor = $$props.buttonColor);
+		if ('buttonColorActive' in $$props) $$invalidate(13, buttonColorActive = $$props.buttonColorActive);
 	};
 
 	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*font*/ 1024) {
+			addFont(font);
+		}
+
 		if ($$self.$$.dirty & /*options*/ 256) {
 			$$invalidate(3, _options = options.split(','));
 		}
 
-		if ($$self.$$.dirty & /*buttonColor, buttonColorActive, buttonSize*/ 7168) {
+		if ($$self.$$.dirty & /*buttonColor, buttonColorActive, buttonSize*/ 14336) {
 			$$invalidate(5, styleVariables = (() => {
 				return stringifyStyleObj({
 					'--color-main': buttonColor.main,
@@ -6977,7 +7131,7 @@ function instance$e($$self, $$props, $$invalidate) {
 			})());
 		}
 
-		if ($$self.$$.dirty & /*$value, _options*/ 8200) {
+		if ($$self.$$.dirty & /*$value, _options*/ 16392) {
 			$$invalidate(4, isCheckedArray = (() => {
 				const checkedSet = new Set($value);
 				return _options.map(option => checkedSet.has(option));
@@ -6996,6 +7150,7 @@ function instance$e($$self, $$props, $$invalidate) {
 		handleChange,
 		options,
 		required,
+		font,
 		buttonSize,
 		buttonColor,
 		buttonColorActive,
@@ -7018,10 +7173,11 @@ class FormCheckBoxes extends SvelteComponent {
 				options: 8,
 				required: 9,
 				_layoutStyle: 1,
+				font: 10,
 				_textStyle: 2,
-				buttonSize: 10,
-				buttonColor: 11,
-				buttonColorActive: 12
+				buttonSize: 11,
+				buttonColor: 12,
+				buttonColorActive: 13
 			},
 			add_css$d
 		);
@@ -7036,14 +7192,14 @@ function add_css$c(target) {
 
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[11] = list[i];
+	child_ctx[12] = list[i];
 	return child_ctx;
 }
 
-// (52:2) {#each [...Array(count).keys()].map(i => i + 1) as i}
+// (60:2) {#each [...Array(count).keys()].map(i => i + 1) as i}
 function create_each_block$2(ctx) {
 	let div;
-	let t0_value = /*i*/ ctx[11] + "";
+	let t0_value = /*i*/ ctx[12] + "";
 	let t0;
 	let t1;
 	let div_style_value;
@@ -7067,7 +7223,7 @@ function create_each_block$2(ctx) {
 		},
 		h() {
 			attr(div, "class", "rating-button svelte-176k37j");
-			attr(div, "style", div_style_value = /*getTextButtonStyle*/ ctx[4](/*i*/ ctx[11] === /*_value*/ ctx[1]));
+			attr(div, "style", div_style_value = /*getTextButtonStyle*/ ctx[4](/*i*/ ctx[12] === /*_value*/ ctx[1]));
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
@@ -7076,7 +7232,7 @@ function create_each_block$2(ctx) {
 
 			if (!mounted) {
 				dispose = listen(div, "click", function () {
-					if (is_function(/*handleClick*/ ctx[3](/*i*/ ctx[11]))) /*handleClick*/ ctx[3](/*i*/ ctx[11]).apply(this, arguments);
+					if (is_function(/*handleClick*/ ctx[3](/*i*/ ctx[12]))) /*handleClick*/ ctx[3](/*i*/ ctx[12]).apply(this, arguments);
 				});
 
 				mounted = true;
@@ -7084,9 +7240,9 @@ function create_each_block$2(ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty & /*count*/ 1 && t0_value !== (t0_value = /*i*/ ctx[11] + "")) set_data(t0, t0_value);
+			if (dirty & /*count*/ 1 && t0_value !== (t0_value = /*i*/ ctx[12] + "")) set_data(t0, t0_value);
 
-			if (dirty & /*count, _value*/ 3 && div_style_value !== (div_style_value = /*getTextButtonStyle*/ ctx[4](/*i*/ ctx[11] === /*_value*/ ctx[1]))) {
+			if (dirty & /*count, _value*/ 3 && div_style_value !== (div_style_value = /*getTextButtonStyle*/ ctx[4](/*i*/ ctx[12] === /*_value*/ ctx[1]))) {
 				attr(div, "style", div_style_value);
 			}
 		},
@@ -7100,8 +7256,6 @@ function create_each_block$2(ctx) {
 
 function create_fragment$d(ctx) {
 	let div;
-	let link;
-	let t;
 	let each_value = [...Array(/*count*/ ctx[0]).keys()].map(func$1);
 	let each_blocks = [];
 
@@ -7112,8 +7266,6 @@ function create_fragment$d(ctx) {
 	return {
 		c() {
 			div = element("div");
-			link = element("link");
-			t = space();
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
@@ -7124,8 +7276,6 @@ function create_fragment$d(ctx) {
 		l(nodes) {
 			div = claim_element(nodes, "DIV", { class: true });
 			var div_nodes = children(div);
-			link = claim_element(div_nodes, "LINK", { href: true, rel: true });
-			t = claim_space(div_nodes);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].l(div_nodes);
@@ -7135,14 +7285,10 @@ function create_fragment$d(ctx) {
 			this.h();
 		},
 		h() {
-			attr(link, "href", `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=0123456789`);
-			attr(link, "rel", "stylesheet");
 			attr(div, "class", "rating-buttons svelte-176k37j");
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
-			append_hydration(div, link);
-			append_hydration(div, t);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].m(div, null);
@@ -7189,6 +7335,7 @@ function instance$d($$self, $$props, $$invalidate) {
 	let { name = '' } = $$props;
 	let { required = false } = $$props;
 	let { count = 5 } = $$props;
+	let { font = SYSTEM_FONT } = $$props;
 	let { buttonStyle = 'width: 32px; height: 32px; font-size: 12px; font-weight: bold; border-radius: 17px; color: #333; background-color: rgba(0, 16, 14, 0.06); box-shadow: 0px 0px 16px 0px rgba(0, 16, 14, 0);' } = $$props;
 	let { buttonActiveStyle = 'color: #333; background-color: #2aab9f; box-shadow: 0px 8px 16px 0px rgba(0, 16, 14, 0.3);' } = $$props;
 	const { path: statePath } = getStateItemContext();
@@ -7203,7 +7350,7 @@ function instance$d($$self, $$props, $$invalidate) {
 		}
 	});
 
-	component_subscribe($$self, value, value => $$invalidate(9, $value = value));
+	component_subscribe($$self, value, value => $$invalidate(10, $value = value));
 
 	const handleClick = index => event => {
 		value.set([String(index)]);
@@ -7219,12 +7366,17 @@ function instance$d($$self, $$props, $$invalidate) {
 		if ('name' in $$props) $$invalidate(5, name = $$props.name);
 		if ('required' in $$props) $$invalidate(6, required = $$props.required);
 		if ('count' in $$props) $$invalidate(0, count = $$props.count);
-		if ('buttonStyle' in $$props) $$invalidate(7, buttonStyle = $$props.buttonStyle);
-		if ('buttonActiveStyle' in $$props) $$invalidate(8, buttonActiveStyle = $$props.buttonActiveStyle);
+		if ('font' in $$props) $$invalidate(7, font = $$props.font);
+		if ('buttonStyle' in $$props) $$invalidate(8, buttonStyle = $$props.buttonStyle);
+		if ('buttonActiveStyle' in $$props) $$invalidate(9, buttonActiveStyle = $$props.buttonActiveStyle);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*$value*/ 512) {
+		if ($$self.$$.dirty & /*font*/ 128) {
+			addFont(font);
+		}
+
+		if ($$self.$$.dirty & /*$value*/ 1024) {
 			$$invalidate(1, _value = Number($value[0] ?? -1));
 		}
 	};
@@ -7237,6 +7389,7 @@ function instance$d($$self, $$props, $$invalidate) {
 		getTextButtonStyle,
 		name,
 		required,
+		font,
 		buttonStyle,
 		buttonActiveStyle,
 		$value
@@ -7257,8 +7410,9 @@ class FormRatingButtonsNumber extends SvelteComponent {
 				name: 5,
 				required: 6,
 				count: 0,
-				buttonStyle: 7,
-				buttonActiveStyle: 8
+				font: 7,
+				buttonStyle: 8,
+				buttonActiveStyle: 9
 			},
 			add_css$c
 		);
@@ -9740,9 +9894,6 @@ function add_css$2(target) {
 
 function create_fragment$2(ctx) {
 	let div1;
-	let link;
-	let link_href_value;
-	let t;
 	let div0;
 	let rendertext;
 	let div1_class_value;
@@ -9752,8 +9903,6 @@ function create_fragment$2(ctx) {
 	return {
 		c() {
 			div1 = element("div");
-			link = element("link");
-			t = space();
 			div0 = element("div");
 			create_component(rendertext.$$.fragment);
 			this.h();
@@ -9761,8 +9910,6 @@ function create_fragment$2(ctx) {
 		l(nodes) {
 			div1 = claim_element(nodes, "DIV", { class: true, style: true });
 			var div1_nodes = children(div1);
-			link = claim_element(div1_nodes, "LINK", { href: true, rel: true });
-			t = claim_space(div1_nodes);
 			div0 = claim_element(div1_nodes, "DIV", { class: true });
 			var div0_nodes = children(div0);
 			claim_component(rendertext.$$.fragment, div0_nodes);
@@ -9771,25 +9918,17 @@ function create_fragment$2(ctx) {
 			this.h();
 		},
 		h() {
-			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`);
-			attr(link, "rel", "stylesheet");
 			attr(div0, "class", "text-block-inner svelte-11rpuv5");
 			attr(div1, "class", div1_class_value = "" + (null_to_empty(`text-block text-direction-${/*textDirection*/ ctx[1]}`) + " svelte-11rpuv5"));
 			attr(div1, "style", /*style*/ ctx[2]);
 		},
 		m(target, anchor) {
 			insert_hydration(target, div1, anchor);
-			append_hydration(div1, link);
-			append_hydration(div1, t);
 			append_hydration(div1, div0);
 			mount_component(rendertext, div0, null);
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (!current || dirty & /*text*/ 1 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`)) {
-				attr(link, "href", link_href_value);
-			}
-
 			const rendertext_changes = {};
 			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
 			rendertext.$set(rendertext_changes);
@@ -9821,24 +9960,30 @@ function create_fragment$2(ctx) {
 function instance$2($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
+	let { font = SYSTEM_FONT } = $$props;
 	let { _textStyle = 'font-size:12px; line-height:1.5;' } = $$props;
 	let { textDirection = 'horizontal' } = $$props;
 	let { _style = '' } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
-		if ('_textStyle' in $$props) $$invalidate(3, _textStyle = $$props._textStyle);
+		if ('font' in $$props) $$invalidate(3, font = $$props.font);
+		if ('_textStyle' in $$props) $$invalidate(4, _textStyle = $$props._textStyle);
 		if ('textDirection' in $$props) $$invalidate(1, textDirection = $$props.textDirection);
-		if ('_style' in $$props) $$invalidate(4, _style = $$props._style);
+		if ('_style' in $$props) $$invalidate(5, _style = $$props._style);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*_textStyle, _style*/ 24) {
+		if ($$self.$$.dirty & /*font*/ 8) {
+			addFont(font);
+		}
+
+		if ($$self.$$.dirty & /*_textStyle, _style*/ 48) {
 			$$invalidate(2, style = [..._textStyle.split(';'), ..._style.split(';')].join(';'));
 		}
 	};
 
-	return [text, textDirection, style, _textStyle, _style];
+	return [text, textDirection, style, font, _textStyle, _style];
 }
 
 class TextBlock extends SvelteComponent {
@@ -9853,9 +9998,10 @@ class TextBlock extends SvelteComponent {
 			safe_not_equal,
 			{
 				text: 0,
-				_textStyle: 3,
+				font: 3,
+				_textStyle: 4,
 				textDirection: 1,
-				_style: 4
+				_style: 5
 			},
 			add_css$2
 		);
@@ -9870,9 +10016,6 @@ function add_css$1(target) {
 
 function create_fragment$1(ctx) {
 	let div;
-	let link;
-	let link_href_value;
-	let t;
 	let button;
 	let rendertext;
 	let current;
@@ -9883,8 +10026,6 @@ function create_fragment$1(ctx) {
 	return {
 		c() {
 			div = element("div");
-			link = element("link");
-			t = space();
 			button = element("button");
 			create_component(rendertext.$$.fragment);
 			this.h();
@@ -9892,8 +10033,6 @@ function create_fragment$1(ctx) {
 		l(nodes) {
 			div = claim_element(nodes, "DIV", { class: true, style: true });
 			var div_nodes = children(div);
-			link = claim_element(div_nodes, "LINK", { href: true, rel: true });
-			t = claim_space(div_nodes);
 			button = claim_element(div_nodes, "BUTTON", { class: true, style: true });
 			var button_nodes = children(button);
 			claim_component(rendertext.$$.fragment, button_nodes);
@@ -9902,8 +10041,6 @@ function create_fragment$1(ctx) {
 			this.h();
 		},
 		h() {
-			attr(link, "href", link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`);
-			attr(link, "rel", "stylesheet");
 			attr(button, "class", "text-button svelte-1t5i3za");
 			attr(button, "style", /*_buttonStyle*/ ctx[1]);
 			attr(div, "class", "text-button-block svelte-1t5i3za");
@@ -9911,8 +10048,6 @@ function create_fragment$1(ctx) {
 		},
 		m(target, anchor) {
 			insert_hydration(target, div, anchor);
-			append_hydration(div, link);
-			append_hydration(div, t);
 			append_hydration(div, button);
 			mount_component(rendertext, button, null);
 			current = true;
@@ -9923,10 +10058,6 @@ function create_fragment$1(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (!current || dirty & /*text*/ 1 && link_href_value !== (link_href_value = `https://fonts.googleapis.com/css2?${getGoogleFontsParam()}&display=swap&text=${/*text*/ ctx[0]}`)) {
-				attr(link, "href", link_href_value);
-			}
-
 			const rendertext_changes = {};
 			if (dirty & /*text*/ 1) rendertext_changes.text = /*text*/ ctx[0];
 			rendertext.$set(rendertext_changes);
@@ -9970,6 +10101,7 @@ function instance$1($$self, $$props, $$invalidate) {
 	};
 
 	let { eventName = '' } = $$props;
+	let { font = SYSTEM_FONT } = $$props;
 	let { _buttonStyle = 'color:#ffffff; font-size:14px; font-weight:bold; justify-content:center; align-items:center; padding:1px 6px 1px 6px; line-height:1.5;' } = $$props;
 	let { _style = 'background-color: #000000; border-radius:4px;' } = $$props;
 
@@ -9977,11 +10109,18 @@ function instance$1($$self, $$props, $$invalidate) {
 		if ('text' in $$props) $$invalidate(0, text = $$props.text);
 		if ('onClick' in $$props) $$invalidate(4, onClick = $$props.onClick);
 		if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
+		if ('font' in $$props) $$invalidate(6, font = $$props.font);
 		if ('_buttonStyle' in $$props) $$invalidate(1, _buttonStyle = $$props._buttonStyle);
 		if ('_style' in $$props) $$invalidate(2, _style = $$props._style);
 	};
 
-	return [text, _buttonStyle, _style, click, onClick, eventName];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*font*/ 64) {
+			addFont(font);
+		}
+	};
+
+	return [text, _buttonStyle, _style, click, onClick, eventName, font];
 }
 
 class TextButtonBlock extends SvelteComponent {
@@ -9998,6 +10137,7 @@ class TextButtonBlock extends SvelteComponent {
 				text: 0,
 				onClick: 4,
 				eventName: 5,
+				font: 6,
 				_buttonStyle: 1,
 				_style: 2
 			},
@@ -10149,4 +10289,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultFormButtonColor, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, Fonts, FormCheckBoxes, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYOUT_COMPONENT_NAMES, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, resetEventHandlers, resetVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };
+export { ACTION_HOOK_LABEL, Alignments, AnimationStyles, BackgroundSizes, Box, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultFormButtonColor, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexDirections, FlexItem, Fonts, FormCheckBoxes, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYOUT_COMPONENT_NAMES, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, resetEventHandlers, resetVariables, setEventHandlers, setSetting, setState$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };