scorer-ui-kit 3.0.0 → 3.0.1

package/dist/index.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_LineUIVideoBase = require("./LineUIVideoBase-Bs3WCeWl.js");
+const require_LineUIVideoBase = require("./LineUIVideoBase-VxlYHeJG.js");
 let styled_components = require("styled-components");
 styled_components = require_LineUIVideoBase.__toESM(styled_components);
 let react = require("react");
@@ -3509,12 +3509,6 @@ function SvgNoImage() {
 }
 //#endregion
 //#region src/Form/atoms/Checkbox.tsx
-var CheckboxState = /* @__PURE__ */ function(CheckboxState) {
-	CheckboxState["Off"] = "off";
-	CheckboxState["On"] = "on";
-	CheckboxState["Indeterminate"] = "indeterminate";
-	return CheckboxState;
-}(CheckboxState || {});
 var RealInput$1 = styled_components.default.input`
   display: none;
 `;
@@ -3565,7 +3559,7 @@ var Container$67 = styled_components.default.label`
     border: var(--input-toggle-unchecked-border-color) 2px solid;
   }
 
-  ${({ $visualState, $disabled }) => $visualState === CheckboxState.Off && styled_components.css`
+  ${({ $visualState, $disabled }) => $visualState === "off" && styled_components.css`
     /* Unchecked */
     ${CheckboxOuter}{
       background-color: var(--input-toggle-unchecked-background-color);
@@ -3590,7 +3584,7 @@ var Container$67 = styled_components.default.label`
     `}
   `}
 
-  ${({ $visualState, $disabled }) => $visualState === CheckboxState.On && styled_components.css`
+  ${({ $visualState, $disabled }) => $visualState === "on" && styled_components.css`
     /* Checked */
     ${CheckboxOuter}{
       background-color: var(--input-toggle-checked-background-color);
@@ -3616,7 +3610,7 @@ var Container$67 = styled_components.default.label`
     `}
   `}
 
-  ${({ $visualState, $disabled }) => $visualState === CheckboxState.Indeterminate && styled_components.css`
+  ${({ $visualState, $disabled }) => $visualState === "indeterminate" && styled_components.css`
     ${CheckboxOuter}{
       background-color: var(--input-toggle-intermediate-background-color);
       border-color: var(--input-toggle-intermediate-border-color);
@@ -3643,14 +3637,14 @@ var Container$67 = styled_components.default.label`
 `;
 var Checkbox = ({ indeterminate: _indeterminate = false, disabled, checked = false, onChangeCallback }) => {
 	const [isChecked, setIsChecked] = (0, react.useState)(checked);
-	const [visualState, setVisualState] = (0, react.useState)(checked ? CheckboxState.On : CheckboxState.Off);
+	const [visualState, setVisualState] = (0, react.useState)(checked ? "on" : "off");
 	const customOnChange = (e) => {
 		const checked = e.target.checked;
 		setIsChecked(checked);
 		if (onChangeCallback) onChangeCallback(checked);
 	};
 	(0, react.useEffect)(() => {
-		setVisualState(checked ? CheckboxState.On : CheckboxState.Off);
+		setVisualState(checked ? "on" : "off");
 	}, [checked]);
 	(0, react.useEffect)(() => {
 		setIsChecked(checked);
@@ -3660,7 +3654,7 @@ var Checkbox = ({ indeterminate: _indeterminate = false, disabled, checked = fal
 		onChange: customOnChange,
 		$disabled: disabled,
 		$visualState: visualState,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxOuter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxInner, { children: visualState === CheckboxState.On ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconWrapper$3, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxOuter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxInner, { children: visualState === "on" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconWrapper$3, {
 			$color: "input-toggle-icon-color",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckMark, {
 				color: "input-toggle-icon-color",
@@ -4239,7 +4233,7 @@ var SelectField = ({ fieldState = "default", placeholder, label, icon, isCompact
 		if (props.disabled || fieldState === "disabled") return "input-disabled-lead-icon";
 		else return "input-lead-icon";
 	}, [fieldState, props.disabled]);
-	const renderSelect = (0, react.useCallback)((htmlFor) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectWrapper, { children: [
+	const renderSelect = (htmlFor) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectWrapper, { children: [
 		icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubjectIcon, {
 			$isCompact: isCompact,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LineUIVideoBase.Icon, {
@@ -4273,17 +4267,7 @@ var SelectField = ({ fieldState = "default", placeholder, label, icon, isCompact
 				size: isCompact ? 8 : 10
 			})
 		})
-	] }), [
-		children,
-		defaultValue,
-		handleOnChange,
-		placeholder,
-		props,
-		fieldState,
-		icon,
-		iconColor,
-		isCompact
-	]);
+	] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$62, {
 		$isCompact: isCompact,
 		$activePlaceholder: activePlaceholder,
@@ -4675,19 +4659,12 @@ var SmallInput = ({ unit, label, name, type = "text", placeholder = "", defaultV
 };
 //#endregion
 //#region src/Form/atoms/Switch.tsx
-var SwitchPosition = /* @__PURE__ */ function(SwitchPosition) {
-	SwitchPosition[SwitchPosition["Off"] = 0] = "Off";
-	SwitchPosition[SwitchPosition["On"] = 1] = "On";
-	SwitchPosition[SwitchPosition["Neutral"] = 2] = "Neutral";
-	SwitchPosition[SwitchPosition["Locked"] = 3] = "Locked";
-	return SwitchPosition;
-}(SwitchPosition || {});
 var getPositionKey = (switchPos) => {
 	switch (switchPos) {
-		case SwitchPosition.Off: return "off";
-		case SwitchPosition.On: return "on";
-		case SwitchPosition.Neutral: return "neutral";
-		case SwitchPosition.Locked: return "locked";
+		case 0: return "off";
+		case 1: return "on";
+		case 2: return "neutral";
+		case 3: return "locked";
 		default: return "off";
 	}
 };
@@ -4819,7 +4796,7 @@ var Container$60 = (0, styled_components.default)(StyledLabel)`
 
   &:hover {
     ${SwitchInner}{
-      left: ${({ $useIntent, $position }) => $useIntent && $position === SwitchPosition.Off && "calc(var(--position-off) + var(--switch-intent-offset))" || $useIntent && $position === SwitchPosition.On && "calc(var(--position-on) - var(--switch-intent-offset))"};
+      left: ${({ $useIntent, $position }) => $useIntent && $position === 0 && "calc(var(--position-off) + var(--switch-intent-offset))" || $useIntent && $position === 1 && "calc(var(--position-on) - var(--switch-intent-offset))"};
     }
   }
 `;
@@ -4829,7 +4806,7 @@ var isTypeSwitchState = (value) => {
 var Switch = ({ state = "default", leftTheme = "off", rightTheme = "on", labelText, onChangeCallback, checked, defaultChecked = false }) => {
 	const isControlled = checked !== void 0;
 	const initialChecked = isControlled ? checked : defaultChecked;
-	const initialPosition = initialChecked ? SwitchPosition.On : SwitchPosition.Off;
+	const initialPosition = initialChecked ? 1 : 0;
 	const initialTheme = initialChecked ? rightTheme : leftTheme;
 	const [internalChecked, setInternalChecked] = (0, react.useState)(defaultChecked);
 	const inputRef = (0, react.useRef)(null);
@@ -4841,11 +4818,11 @@ var Switch = ({ state = "default", leftTheme = "off", rightTheme = "on", labelTe
 	const [innerSize, setInnerSize] = (0, react.useState)(0);
 	const updateSwitchPositionAndTheme = (0, react.useCallback)(() => {
 		if (isControlled) {
-			setPosition(checked ? SwitchPosition.On : SwitchPosition.Off);
+			setPosition(checked ? 1 : 0);
 			setActiveTheming(checked ? rightTheme : leftTheme);
 		} else if (inputRef.current) {
 			inputRef.current.checked = internalChecked;
-			setPosition(internalChecked ? SwitchPosition.On : SwitchPosition.Off);
+			setPosition(internalChecked ? 1 : 0);
 			setActiveTheming(internalChecked ? rightTheme : leftTheme);
 		}
 	}, [
@@ -4860,10 +4837,10 @@ var Switch = ({ state = "default", leftTheme = "off", rightTheme = "on", labelTe
 	}, [updateSwitchPositionAndTheme]);
 	const positionSwitch = (0, react.useCallback)(() => {
 		if (isControlled) {
-			setPosition(checked ? SwitchPosition.On : SwitchPosition.Off);
+			setPosition(checked ? 1 : 0);
 			setActiveTheming(checked ? rightTheme : leftTheme);
 		} else {
-			setPosition(internalChecked ? SwitchPosition.On : SwitchPosition.Off);
+			setPosition(internalChecked ? 1 : 0);
 			setActiveTheming(internalChecked ? rightTheme : leftTheme);
 		}
 	}, [
@@ -4896,8 +4873,8 @@ var Switch = ({ state = "default", leftTheme = "off", rightTheme = "on", labelTe
 	* things get updated. (i.e. in StoryBook)
 	*/
 	const updateThemeChoice = (0, react.useCallback)(() => {
-		if (position === SwitchPosition.On) setActiveTheming(rightTheme);
-		else if (position === SwitchPosition.Off) setActiveTheming(leftTheme);
+		if (position === 1) setActiveTheming(rightTheme);
+		else if (position === 0) setActiveTheming(leftTheme);
 	}, [
 		position,
 		rightTheme,
@@ -4913,10 +4890,10 @@ var Switch = ({ state = "default", leftTheme = "off", rightTheme = "on", labelTe
 	/** Watch for locking prop. */
 	(0, react.useEffect)(() => {
 		if (state === "locked") {
-			setPosition(SwitchPosition.Locked);
+			setPosition(3);
 			setActiveTheming("locked");
 		} else if (state === "failure") {
-			setPosition(SwitchPosition.Neutral);
+			setPosition(2);
 			setActiveTheming("failure");
 		} else positionSwitch();
 	}, [state, positionSwitch]);
@@ -7547,53 +7524,53 @@ var InputWrap = styled_components.default.div`
     }
   }
 `;
-var DateTimeBlock = ({ allowAfterMidnight = false, title, hasDate, hasTime, isTimeRangeValid = true, date = /* @__PURE__ */ new Date(), setDateCallback = () => {} }) => {
-	/**
-	*
-	* Description of the rules can be found int https://docs.google.com/spreadsheets/d/1POe9uZxKXtLhQFF6DIV-RclUp7T7oXgSeSLlbYmE38g/edit?usp=sharing
-	*/
-	const validHourMin = (textHour, textMin, hasDate, allowAfterMidnight) => {
-		const intHour = Number(textHour.slice(-2));
-		const intMin = Number(textMin.slice(-2));
-		const newHour = intHour > 24 ? Number(textHour.slice(-1)) : intHour;
-		const newMin = intMin > 60 ? Number(textMin.slice(-1)) : intMin;
-		if (newHour >= 24 && newMin !== -1 && allowAfterMidnight) return {
-			newHour: 24,
-			newMin: 0
-		};
-		if (newHour === 0 && newMin === 0 && allowAfterMidnight && !hasDate) return {
-			newHour: 0,
-			newMin: 1
-		};
-		if (newHour === 23 && newMin === 60 && !allowAfterMidnight) return {
-			newHour: 23,
-			newMin: 59
-		};
-		if (newHour >= 24 && !allowAfterMidnight) return {
-			newHour: 23,
-			newMin
-		};
-		if (newMin === 60) return {
-			newHour: newHour + 1,
-			newMin: 0
-		};
-		if (newHour > 0 && newMin === -1) return {
-			newHour: newHour - 1,
-			newMin: 59
-		};
-		if (newHour === 0 && newMin === -1) return {
-			newHour,
-			newMin: 0
-		};
-		if (newHour === -1) return {
-			newHour: 0,
-			newMin
-		};
-		return {
-			newHour,
-			newMin
-		};
+/**
+*
+* Description of the rules can be found int https://docs.google.com/spreadsheets/d/1POe9uZxKXtLhQFF6DIV-RclUp7T7oXgSeSLlbYmE38g/edit?usp=sharing
+*/
+var validHourMin = (textHour, textMin, hasDate, allowAfterMidnight) => {
+	const intHour = Number(textHour.slice(-2));
+	const intMin = Number(textMin.slice(-2));
+	const newHour = intHour > 24 ? Number(textHour.slice(-1)) : intHour;
+	const newMin = intMin > 60 ? Number(textMin.slice(-1)) : intMin;
+	if (newHour >= 24 && newMin !== -1 && allowAfterMidnight) return {
+		newHour: 24,
+		newMin: 0
+	};
+	if (newHour === 0 && newMin === 0 && allowAfterMidnight && !hasDate) return {
+		newHour: 0,
+		newMin: 1
+	};
+	if (newHour === 23 && newMin === 60 && !allowAfterMidnight) return {
+		newHour: 23,
+		newMin: 59
+	};
+	if (newHour >= 24 && !allowAfterMidnight) return {
+		newHour: 23,
+		newMin
 	};
+	if (newMin === 60) return {
+		newHour: newHour + 1,
+		newMin: 0
+	};
+	if (newHour > 0 && newMin === -1) return {
+		newHour: newHour - 1,
+		newMin: 59
+	};
+	if (newHour === 0 && newMin === -1) return {
+		newHour,
+		newMin: 0
+	};
+	if (newHour === -1) return {
+		newHour: 0,
+		newMin
+	};
+	return {
+		newHour,
+		newMin
+	};
+};
+var DateTimeBlock = ({ allowAfterMidnight = false, title, hasDate, hasTime, isTimeRangeValid = true, date = /* @__PURE__ */ new Date(), setDateCallback = () => {} }) => {
 	const [displayHours, setDisplayHours] = (0, react.useState)((0, date_fns.format)(date, "mm"));
 	const [displayMinutes, setDisplayMinutes] = (0, react.useState)((0, date_fns.format)(date, "HH"));
 	const setDateHours = (0, react.useCallback)(({ target: { value } }) => {
@@ -7610,8 +7587,7 @@ var DateTimeBlock = ({ allowAfterMidnight = false, title, hasDate, hasTime, isTi
 		date,
 		displayMinutes,
 		hasDate,
-		setDateCallback,
-		validHourMin
+		setDateCallback
 	]);
 	const setDateMinutes = (0, react.useCallback)(({ target: { value } }) => {
 		if (isNotNumber(value)) return;
@@ -7627,8 +7603,7 @@ var DateTimeBlock = ({ allowAfterMidnight = false, title, hasDate, hasTime, isTi
 		date,
 		displayHours,
 		hasDate,
-		setDateCallback,
-		validHourMin
+		setDateCallback
 	]);
 	(0, react.useEffect)(() => {
 		if (allowAfterMidnight && (0, date_fns.isEqual)(date, (0, date_fns.endOfDay)(date))) {
@@ -7976,22 +7951,64 @@ var CalCellB = (0, styled_components.default)(CalCell)`
 
 `;
 var enDayGuide = [
-	"S",
-	"M",
-	"T",
-	"W",
-	"T",
-	"F",
-	"S"
+	{
+		key: "sun",
+		label: "S"
+	},
+	{
+		key: "mon",
+		label: "M"
+	},
+	{
+		key: "tue",
+		label: "T"
+	},
+	{
+		key: "wed",
+		label: "W"
+	},
+	{
+		key: "thu",
+		label: "T"
+	},
+	{
+		key: "fri",
+		label: "F"
+	},
+	{
+		key: "sat",
+		label: "S"
+	}
 ];
 var jpDayGuide = [
-	"日",
-	"月",
-	"火",
-	"水",
-	"木",
-	"金",
-	"土"
+	{
+		key: "sun",
+		label: "日"
+	},
+	{
+		key: "mon",
+		label: "月"
+	},
+	{
+		key: "tue",
+		label: "火"
+	},
+	{
+		key: "wed",
+		label: "水"
+	},
+	{
+		key: "thu",
+		label: "木"
+	},
+	{
+		key: "fri",
+		label: "金"
+	},
+	{
+		key: "sat",
+		label: "土"
+	}
 ];
 var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUpper = "From", dateTimeTextLower = "To", timeZoneTitle = "Timezone", timeZoneValueTitle = "JST", hasEmptyValue = false, updateCallback = () => {}, initialValue, availableRange, contentDays, lang = "en", cancelText = "Cancel", applyText = "Apply", hasApply = false, disableApply = false, applyCallback = () => {}, cancelCallback = () => {} }) => {
 	const [selectedRange, setSelectedRange] = (0, react.useState)(getInitialValue(hasEmptyValue, initialValue));
@@ -8115,8 +8132,8 @@ var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUp
 				}) })]
 			})
 		] }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalHRow, { children: dayGuide.map((day) => {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalHCell, { children: day }, day);
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalHRow, { children: dayGuide.map(({ key, label }) => {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalHCell, { children: label }, key);
 		}) }),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalBody, { children: weeksOfMonth.map((week) => {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalRow, { children: (0, date_fns.eachDayOfInterval)({
@@ -10739,7 +10756,7 @@ var IntroductionText = ({ children }) => {
 //#region src/Pages/atoms/PageTitle.tsx
 var ICON_SIZE = 24;
 var GAP_LEFT = 20;
-var ICON_MARGIN_LEFT = -GAP_LEFT - ICON_SIZE;
+var ICON_MARGIN_LEFT = -20 - ICON_SIZE;
 var Container$30 = styled_components.default.div`
   position: relative;
   display: flex;