scorer-ui-kit 3.0.0 → 3.0.1

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { a as Icon, c as animation, d as dimensions, f as fontFamily, i as Spinner, l as deviceMediaQuery, n as LineSet, o as IconSVGs, r as LineSetContext, s as IconWrapper$4, t as LineUIVideoBase, u as deviceSize } from "./LineUIVideoBase-09sEI3pc.mjs";
+import { a as Icon, c as animation, d as dimensions, f as fontFamily, i as Spinner, l as deviceMediaQuery, n as LineSet, o as IconSVGs, r as LineSetContext, s as IconWrapper$4, t as LineUIVideoBase, u as deviceSize } from "./LineUIVideoBase-CJ61ZqPJ.mjs";
 import styled, { createGlobalStyle, css, keyframes } from "styled-components";
 import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -49,473 +49,6 @@ var colors = {
 	input: { border: { default: "var(--grey-7)" } }
 };
 //#endregion
-//#region src/theme/legacy/custom.ts
-var custom = { lines: {
-	primary: {
-		label: { fill: "#fff" },
-		contrastLine: { stroke: "hsla(205deg, 80%, 45%, 100%);" },
-		highlightLine: { stroke: "hsla(205deg, 45%, 90%, 90%);" },
-		highlightLineBorder: { stroke: "hsla(204.8,53.4%,46.3%,100%);" },
-		grabHandle: {
-			fill: "hsla(205deg, 45%, 90%, 100%)",
-			stroke: "hsla(205deg, 45%, 100%, 100%)"
-		},
-		point: { fill: "hsla(205deg, 45%, 90%, 100%)" },
-		grabHandleContrast: { stroke: "hsla(205deg, 80%, 45%, 100%)" },
-		grabHandleText: { fill: "hsla(205deg, 80%, 25%, 100%);" },
-		handleBase: { fill: "hsla(235deg, 100%, 80%, 100%);" },
-		handleRingLayer: { stroke: "hsla(205deg, 100%, 89%, 100%);" },
-		handleReactiveFill: { fill: "hsla(192deg, 100%, 45%, 100%);" },
-		handleReactiveRing: { stroke: "hsla(205deg, 100%, 36%, 27%);" },
-		handleContrastLayer: { stroke: "hsla(205deg, 100%, 36%, 15%);" },
-		stopStart: { stopColor: " hsla(205deg, 100%, 15%, 35%);" },
-		stopEnd: { stopColor: "hsla(205deg, 100%, 15%, 0%)" }
-	},
-	secondary: {
-		label: { fill: "#fff" },
-		contrastLine: { stroke: "hsla(120deg, 80%, 45%, 100%);" },
-		highlightLine: { stroke: "hsla(120deg, 45%, 90%, 90%);" },
-		highlightLineBorder: { stroke: "hsla(120deg, 81%, 70%, 90%);" },
-		grabHandle: {
-			fill: "hsla(120deg, 45%, 90%, 100%)",
-			stroke: "hsla(120deg, 45%, 100%, 100%)"
-		},
-		point: { fill: "hsla(120deg, 45%, 90%, 100%)" },
-		grabHandleContrast: { stroke: "hsla(120deg, 80%, 45%, 100%)" },
-		grabHandleText: { fill: "hsla(120deg, 80%, 25%, 100%);" },
-		handleBase: { fill: "hsla(150deg, 100%, 80%, 100%);" },
-		handleRingLayer: { stroke: "hsla(120deg, 100%, 89%, 100%);" },
-		handleReactiveFill: { fill: "hsla(108deg, 100%, 45%, 100%);" },
-		handleReactiveRing: { stroke: "hsla(120deg, 100%, 36%, 27%);" },
-		handleContrastLayer: { stroke: "hsla(120deg, 100%, 36%, 15%);" },
-		stopStart: { stopColor: " hsla(120deg, 100%, 15%, 35%);" },
-		stopEnd: { stopColor: "hsla(120deg, 100%, 15%, 0%)" }
-	},
-	danger: {
-		label: { fill: "#fff" },
-		contrastLine: { stroke: "hsla(0, 80%, 45%, 100%);" },
-		highlightLine: { stroke: "hsla(0, 45%, 90%, 90%);" },
-		highlightLineBorder: { stroke: "hsla(0deg, 86%, 70%, 100%);" },
-		grabHandle: {
-			fill: "hsla(0, 45%, 90%, 100%)",
-			stroke: "hsla(0, 45%, 100%, 100%)"
-		},
-		point: { fill: "hsla(0, 45%, 90%, 100%)" },
-		grabHandleText: { fill: "hsla(0, 80%, 25%, 100%);" },
-		grabHandleContrast: { stroke: "hsla(0, 80%, 45%, 100%)" },
-		handleBase: { fill: "hsla(30deg, 100%, 80%, 100%);" },
-		handleRingLayer: { stroke: "hsla(0, 100%, 89%, 100%);" },
-		handleReactiveFill: { fill: "hsla(348deg, 100%, 45%, 100%);" },
-		handleReactiveRing: { stroke: "hsla(0deg, 100%, 36%, 27%);" },
-		handleContrastLayer: { stroke: "hsla(0deg, 100%, 36%, 15%);" },
-		stopStart: { stopColor: " hsla(0, 100%, 15%, 35%);" },
-		stopEnd: { stopColor: "hsla(0, 100%, 15%, 0%);" }
-	}
-} };
-//#endregion
-//#region src/theme/legacy/styles.ts
-var styles = {
-	generic: { transparent: {} },
-	form: {
-		input: {
-			default: {
-				normal: {
-					backgroundColor: "var(--grey-1)",
-					borderColor: colors.input.border.default,
-					border: `${colors.input.border.default} 1px solid`
-				},
-				focused: {
-					boxShadow: "0px 3px 7px 0px var(--primary-a2)",
-					backgroundColor: "var(--grey-1)",
-					borderColor: "var(--primary-7)",
-					border: "var(--primary-7) 1px solid"
-				}
-			},
-			disabled: { normal: {
-				backgroundColor: "var(--primary-2)",
-				borderColor: "var(--grey-7)",
-				border: "var(--grey-7) 1px solid"
-			} },
-			subdivision: { backgroundColor: "var(--grey-7)" },
-			required: {
-				focused: {
-					boxShadow: "0px 3px 7px 0px var(--primary-a2)",
-					backgroundColor: "var(--grey-1)",
-					borderColor: "var(--primary-7)",
-					border: "var(--primary-7) 2px solid"
-				},
-				normal: {
-					borderColor: "var(--primary-7)",
-					border: "var(--primary-7) 1px solid",
-					backgroundColor: "var(--grey-1)"
-				}
-			},
-			valid: {
-				focused: {
-					boxShadow: "0px 3px 5px 0px var(--success-a2)",
-					backgroundColor: "var(--grey-1)",
-					borderColor: "var(--success-7)",
-					border: "var(--success-7) 2px solid"
-				},
-				normal: {
-					borderColor: "var(--success-7)",
-					border: "var(--success-7) 1px solid",
-					backgroundColor: "var(--grey-1)"
-				}
-			},
-			invalid: {
-				focused: {
-					boxShadow: "0px 3px 7px 0px var(--warning-a2)",
-					backgroundColor: "var(--grey-1)",
-					borderColor: "var(--warning-8)",
-					border: "var(--warning-8) 2px solid"
-				},
-				normal: {
-					borderColor: "var(--warning-8)",
-					border: "var(--warning-8) 1px solid",
-					backgroundColor: "var(--grey-1)"
-				}
-			},
-			processing: {
-				focused: {
-					boxShadow: "0px 3px 7px 0px var(--primary-a2)",
-					backgroundColor: "var(--grey-1)",
-					borderColor: "var(--primary-7)",
-					border: "var(--primary-7) 2px solid"
-				},
-				normal: {
-					backgroundColor: "var(--grey-1)",
-					borderColor: "var(--primary-7)",
-					border: "var(--primary-7) 1px solid"
-				}
-			},
-			seperatedValues: {
-				background: {
-					backgroundColor: "var(--primary-7)",
-					backgroundImage: "linear-gradient(315.00deg, var(--primary-7) 0%, var(--primary-8) 100%)"
-				},
-				hoverHighlight: { backgroundColor: "var(--primary-7)" }
-			}
-		},
-		button: {
-			primary: {
-				default: {
-					backgroundColor: "var(--primary-9)",
-					backgroundImage: "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
-				},
-				hover: { backgroundColor: "var(--primary-10)" },
-				active: { backgroundColor: "var(--primary-9)" },
-				divider: { backgroundColor: "var(--primary-a8)" },
-				disabled: {
-					backgroundColor: "var(--primary-a10)",
-					backgroundImage: "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
-				},
-				actionArea: {
-					backgroundColor: "var(--primary-9)",
-					backgroundImage: "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
-				}
-			},
-			secondary: {
-				default: { backgroundColor: "var(--grey-9)" },
-				hover: { backgroundColor: "var(--grey-10)" },
-				active: { backgroundColor: "var(--grey-9)" },
-				disabled: { backgroundColor: "var(--grey-a10)" },
-				divider: { backgroundColor: "var(--grey-a8)" },
-				actionArea: {
-					backgroundColor: "var(--grey-9)",
-					backgroundImage: "linear-gradient(135.00deg, var(--grey-9) 0%, var(--grey-8) 100%)"
-				}
-			},
-			danger: {
-				default: {
-					backgroundColor: "var(--warning-9)",
-					backgroundImage: "linear-gradient(317.51deg, var(--warning-9) 0%, var(--warning-8) 100%)"
-				},
-				hover: { backgroundColor: "var(--warning-10)" },
-				active: { backgroundColor: "var(--warning-9)" },
-				disabled: { backgroundColor: "var(--warning-a10)" },
-				divider: { backgroundColor: "var(--warning-8)" },
-				actionArea: {
-					backgroundColor: "var(--warning-9)",
-					backgroundImage: "linear-gradient(317.51deg, var(--warning-9) 0%, var(--warning-8) 100%)"
-				}
-			}
-		},
-		switch: {
-			off: {
-				default: {
-					outer: {
-						backgroundColor: "var(--grey-3)",
-						backgroundImage: "linear-gradient(180.00deg, var(--primary-2) 0%, var(--primary-3) 100%)",
-						borderColor: "var(--grey-a8)",
-						border: "var(--grey-a8) 1px solid"
-					},
-					inner: {
-						backgroundColor: "var(--primary-7)",
-						backgroundImage: "linear-gradient(315.00deg, var(--primary-7) 0%, var(--primary-8) 100%)"
-					}
-				},
-				disabled: {
-					outer: {
-						backgroundColor: "var(--grey-1)",
-						backgroundImage: "linear-gradient(180.00deg, var(--grey-1)0%, var(--grey-1) 100%)",
-						borderColor: "var(--grey-a7)",
-						border: "var(--grey-a7) 1px solid"
-					},
-					inner: { backgroundColor: "var(--grey-7)" }
-				},
-				loading: { outer: {
-					backgroundColor: "var(--grey-3)",
-					backgroundImage: "linear-gradient(180.00deg, var(--grey-3) 0%, var(--primary-3) 100%)",
-					borderColor: "var(--grey-a8)",
-					border: "var(--grey-a8) 1px solid"
-				} }
-			},
-			on: {
-				default: {
-					outer: {
-						backgroundColor: "var(--primary-7)",
-						backgroundImage: "linear-gradient(317.51deg, var(--primary-7) 0%, var(--primary-7) 100%)",
-						borderColor: "var(--primary-8)",
-						border: "var(--primary-8) 1px solid"
-					},
-					inner: { backgroundColor: "var(--white-1)" }
-				},
-				disabled: {
-					outer: {
-						backgroundColor: "var(--primary-5)",
-						backgroundImage: "linear-gradient(180.00deg, var(--primary-5) 0%, var(--primary-5) 100%)",
-						borderColor: "var(--primary-6)",
-						border: "var(--primary-6) 1px solid"
-					},
-					inner: { backgroundColor: "var(--white-1)" }
-				},
-				loading: { outer: {
-					backgroundColor: "var(--primary-a7)",
-					backgroundImage: "linear-gradient(315.00deg, var(--primary-a7) 0%, var(--primary-a7) 100%)",
-					borderColor: "var(--primary-a8)",
-					border: "var(--primary-a8) 1px solid"
-				} }
-			},
-			failure: {
-				default: {
-					outer: {
-						backgroundColor: "var(--warning-9)",
-						backgroundImage: "linear-gradient(317.51deg, var(--warning-9) 0%, var(--warning-8) 100%)",
-						borderColor: "var(--warning-9)",
-						border: "var(--warning-9) 1px solid"
-					},
-					inner: { backgroundColor: "var(--white-1)" }
-				},
-				loading: {
-					outer: {
-						backgroundColor: "var(--warning-8)",
-						backgroundImage: "linear-gradient(317.51deg, var(--warning-8) 0.4%, var(--warning-8) 100%)",
-						borderColor: "var(--warning-8)",
-						border: "var(--warning-8) 1px solid"
-					},
-					inner: { backgroundColor: "var(--white-1)" }
-				}
-			},
-			danger: {
-				default: {
-					outer: {
-						backgroundColor: "var(--warning-11)",
-						backgroundImage: "linear-gradient(317.51deg, var(--warning-11) 0%, var(--warning-8) 100%)",
-						borderColor: "var(--warning-8)",
-						border: "var(--warning-8) 1px solid"
-					},
-					inner: { backgroundColor: "var(--white-1)" }
-				},
-				loading: { outer: {
-					backgroundColor: "var(--warning-8)",
-					backgroundImage: "linear-gradient(317.51deg, var(--warning-8) 0%, var(--warning-7) 100%)",
-					borderColor: "var(--warning-8)",
-					border: "var(--warning-8) 1px solid"
-				} },
-				disabled: {
-					outer: {
-						backgroundColor: "var(--warning-7)",
-						backgroundImage: "linear-gradient(317.51deg, var(--warning-7) 0%, var(--caution-6) 100%)",
-						borderColor: "var(--warning-6)",
-						border: "var(--warning-6) 1px solid"
-					},
-					inner: { backgroundColor: "var(--white-1)" }
-				}
-			},
-			locked: { default: {
-				outer: {
-					backgroundColor: "var(--grey-1) ",
-					backgroundImage: "linear-gradient(180.00deg, var(--grey-1) 0%, var(--grey-1) 100%)",
-					borderColor: "var(--grey-a8)",
-					border: "var(--grey-a8) 1px solid"
-				},
-				inner: { backgroundColor: "var(--grey-8)" }
-			} }
-		},
-		checkbox: {
-			unchecked: {
-				disabled: {
-					backgroundColor: "var(--grey-1)",
-					borderColor: "var(--grey-6)",
-					border: "var(--grey-6) 2px solid"
-				},
-				default: {
-					borderColor: "var(--grey-9)",
-					border: "var(--grey-9) 2px solid"
-				},
-				hover: {
-					borderColor: "var(--primary-8)",
-					border: "var(--primary-8) 2px solid"
-				}
-			},
-			checked: {
-				disabled: {
-					boxShadow: "inset 0px 1px 5px 0px var(--grey-a1)",
-					backgroundColor: "var(--grey-6)"
-				},
-				default: {
-					boxShadow: "inset 0px 1px 5px 0px var(--grey-a1)",
-					backgroundColor: "var(--primary-8)"
-				},
-				hover: {
-					boxShadow: "inset 0px 1px 5px 0px var(--grey-a1)",
-					backgroundColor: "var(--primary-8)"
-				}
-			},
-			indeterminate: {
-				hover: {
-					boxShadow: "inset 0px 1px 5px 0px var(--grey-a1)",
-					backgroundColor: "var(--primary-6)"
-				},
-				default: {
-					boxShadow: "inset 0px 1px 5px 0px var(--grey-a1)",
-					backgroundColor: "var(--primary-6)"
-				}
-			}
-		}
-	},
-	indicators: { spinner: {
-		danger: {
-			base: {
-				borderColor: "var(--warning-8)",
-				border: "var(--warning-8) 3px solid"
-			},
-			top: {
-				borderColor: "var(--white-1)",
-				border: "var(--white-1) 3px solid"
-			}
-		},
-		secondary: {
-			top: {
-				borderColor: "var(--white-1)",
-				border: "var(--white-1) 3px solid"
-			},
-			base: {
-				borderColor: "var(--grey-8)",
-				border: "var(--grey-8) 3px solid"
-			}
-		},
-		primary: {
-			top: {
-				borderColor: "var(--white-1)",
-				border: "var(--white-1) 3px solid"
-			},
-			base: {
-				borderColor: "var(--primary-6)",
-				border: "var(--primary-6) 3px solid"
-			}
-		},
-		simple: {
-			top: {
-				borderColor: "var(--white-1)",
-				border: "var(--white-1) 3px solid"
-			},
-			base: {
-				borderColor: "var(--grey-a8)",
-				border: "var(--grey-a8) 3px solid"
-			}
-		}
-	} },
-	filters: {
-		dropdownContainer: {
-			background: {
-				boxShadow: "0px 5px 25px 0px var(--primary-a1)",
-				backgroundColor: "var(--grey-1)",
-				borderColor: "var(--grey-6)",
-				border: "var(--grey-6) 1px solid"
-			},
-			topBorder: { backgroundColor: "var(--primary-7)" }
-		},
-		filterButton: {
-			default: {
-				boxShadow: "0px 4px 9px 0px var(--primary-a1)",
-				backgroundColor: "var(--grey-1)",
-				borderColor: "var(--grey-7)",
-				border: "var(--grey-7) 1px solid",
-				textColor: "var(--grey-11)"
-			},
-			active: {
-				boxShadow: "0px 4px 9px 0px var(--primary-a1)",
-				backgroundColor: "var(--primary-7)",
-				borderColor: "var(--primary-7)",
-				border: "var(--primary-7) 1px solid",
-				textColor: "var(--white-1)"
-			},
-			hover: {
-				boxShadow: "0px 4px 9px 0px var(--primary-a1)",
-				backgroundColor: "var(--primary-7)",
-				borderColor: "var(--primary-7)",
-				border: "var(--primary-7) 1px solid",
-				textColor: "var(--white-1)"
-			}
-		},
-		searchInput: {
-			default: {
-				boxShadow: "0px 4px 9px 0px var(--primary-a2)",
-				backgroundColor: "var(--grey-1)",
-				borderColor: "var(--grey-7)",
-				border: "var(--grey-7) 1px solid"
-			},
-			focused: {
-				boxShadow: "0px 4px 9px 0px var(--primary-a2)",
-				backgroundColor: "var(--grey-1)",
-				borderColor: "var(--primary-6)",
-				border: "var(--primary-6) 1px solid"
-			}
-		}
-	},
-	tables: {
-		loadingOverlay: {
-			backgroundColor: "var(--grey-2)",
-			backgroundImage: "linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%)"
-		},
-		rows: { divider: { backgroundColor: colors.divider } },
-		header: {
-			groupLine: { backgroundColor: colors.divider },
-			divider: { backgroundColor: colors.divider },
-			sortable: {
-				hover: { backgroundColor: "var(--grey-4)" },
-				default: { backgroundColor: "var(--grey-2)" }
-			}
-		}
-	},
-	general: { divider: { backgroundColor: colors.divider } },
-	feedbackBar: {
-		neutral: { backgroundColor: colors.feedback.neutral },
-		error: { backgroundColor: colors.feedback.error },
-		info: { backgroundColor: colors.feedback.info },
-		success: { backgroundColor: colors.feedback.success },
-		warning: { backgroundColor: colors.feedback.warning }
-	},
-	filterButton: { active: {
-		boxShadow: "0px 4px 9px 0px var(--primary-a1)",
-		backgroundColor: "var(--grey-1)",
-		borderColor: "var(--primary-7)",
-		border: "var(--primary-7) 1px solid"
-	} }
-};
-//#endregion
 //#region src/theme/index.ts
 var theme_default = {
 	fontFamily,
@@ -1197,9 +730,470 @@ var theme_default = {
 		} }
 	},
 	colors,
-	styles,
+	styles: {
+		generic: { transparent: {} },
+		form: {
+			input: {
+				default: {
+					normal: {
+						backgroundColor: "var(--grey-1)",
+						borderColor: colors.input.border.default,
+						border: `${colors.input.border.default} 1px solid`
+					},
+					focused: {
+						boxShadow: "0px 3px 7px 0px var(--primary-a2)",
+						backgroundColor: "var(--grey-1)",
+						borderColor: "var(--primary-7)",
+						border: "var(--primary-7) 1px solid"
+					}
+				},
+				disabled: { normal: {
+					backgroundColor: "var(--primary-2)",
+					borderColor: "var(--grey-7)",
+					border: "var(--grey-7) 1px solid"
+				} },
+				subdivision: { backgroundColor: "var(--grey-7)" },
+				required: {
+					focused: {
+						boxShadow: "0px 3px 7px 0px var(--primary-a2)",
+						backgroundColor: "var(--grey-1)",
+						borderColor: "var(--primary-7)",
+						border: "var(--primary-7) 2px solid"
+					},
+					normal: {
+						borderColor: "var(--primary-7)",
+						border: "var(--primary-7) 1px solid",
+						backgroundColor: "var(--grey-1)"
+					}
+				},
+				valid: {
+					focused: {
+						boxShadow: "0px 3px 5px 0px var(--success-a2)",
+						backgroundColor: "var(--grey-1)",
+						borderColor: "var(--success-7)",
+						border: "var(--success-7) 2px solid"
+					},
+					normal: {
+						borderColor: "var(--success-7)",
+						border: "var(--success-7) 1px solid",
+						backgroundColor: "var(--grey-1)"
+					}
+				},
+				invalid: {
+					focused: {
+						boxShadow: "0px 3px 7px 0px var(--warning-a2)",
+						backgroundColor: "var(--grey-1)",
+						borderColor: "var(--warning-8)",
+						border: "var(--warning-8) 2px solid"
+					},
+					normal: {
+						borderColor: "var(--warning-8)",
+						border: "var(--warning-8) 1px solid",
+						backgroundColor: "var(--grey-1)"
+					}
+				},
+				processing: {
+					focused: {
+						boxShadow: "0px 3px 7px 0px var(--primary-a2)",
+						backgroundColor: "var(--grey-1)",
+						borderColor: "var(--primary-7)",
+						border: "var(--primary-7) 2px solid"
+					},
+					normal: {
+						backgroundColor: "var(--grey-1)",
+						borderColor: "var(--primary-7)",
+						border: "var(--primary-7) 1px solid"
+					}
+				},
+				seperatedValues: {
+					background: {
+						backgroundColor: "var(--primary-7)",
+						backgroundImage: "linear-gradient(315.00deg, var(--primary-7) 0%, var(--primary-8) 100%)"
+					},
+					hoverHighlight: { backgroundColor: "var(--primary-7)" }
+				}
+			},
+			button: {
+				primary: {
+					default: {
+						backgroundColor: "var(--primary-9)",
+						backgroundImage: "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
+					},
+					hover: { backgroundColor: "var(--primary-10)" },
+					active: { backgroundColor: "var(--primary-9)" },
+					divider: { backgroundColor: "var(--primary-a8)" },
+					disabled: {
+						backgroundColor: "var(--primary-a10)",
+						backgroundImage: "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
+					},
+					actionArea: {
+						backgroundColor: "var(--primary-9)",
+						backgroundImage: "linear-gradient(135.00deg, var(--primary-9) 0%, var(--primary-8) 100%)"
+					}
+				},
+				secondary: {
+					default: { backgroundColor: "var(--grey-9)" },
+					hover: { backgroundColor: "var(--grey-10)" },
+					active: { backgroundColor: "var(--grey-9)" },
+					disabled: { backgroundColor: "var(--grey-a10)" },
+					divider: { backgroundColor: "var(--grey-a8)" },
+					actionArea: {
+						backgroundColor: "var(--grey-9)",
+						backgroundImage: "linear-gradient(135.00deg, var(--grey-9) 0%, var(--grey-8) 100%)"
+					}
+				},
+				danger: {
+					default: {
+						backgroundColor: "var(--warning-9)",
+						backgroundImage: "linear-gradient(317.51deg, var(--warning-9) 0%, var(--warning-8) 100%)"
+					},
+					hover: { backgroundColor: "var(--warning-10)" },
+					active: { backgroundColor: "var(--warning-9)" },
+					disabled: { backgroundColor: "var(--warning-a10)" },
+					divider: { backgroundColor: "var(--warning-8)" },
+					actionArea: {
+						backgroundColor: "var(--warning-9)",
+						backgroundImage: "linear-gradient(317.51deg, var(--warning-9) 0%, var(--warning-8) 100%)"
+					}
+				}
+			},
+			switch: {
+				off: {
+					default: {
+						outer: {
+							backgroundColor: "var(--grey-3)",
+							backgroundImage: "linear-gradient(180.00deg, var(--primary-2) 0%, var(--primary-3) 100%)",
+							borderColor: "var(--grey-a8)",
+							border: "var(--grey-a8) 1px solid"
+						},
+						inner: {
+							backgroundColor: "var(--primary-7)",
+							backgroundImage: "linear-gradient(315.00deg, var(--primary-7) 0%, var(--primary-8) 100%)"
+						}
+					},
+					disabled: {
+						outer: {
+							backgroundColor: "var(--grey-1)",
+							backgroundImage: "linear-gradient(180.00deg, var(--grey-1)0%, var(--grey-1) 100%)",
+							borderColor: "var(--grey-a7)",
+							border: "var(--grey-a7) 1px solid"
+						},
+						inner: { backgroundColor: "var(--grey-7)" }
+					},
+					loading: { outer: {
+						backgroundColor: "var(--grey-3)",
+						backgroundImage: "linear-gradient(180.00deg, var(--grey-3) 0%, var(--primary-3) 100%)",
+						borderColor: "var(--grey-a8)",
+						border: "var(--grey-a8) 1px solid"
+					} }
+				},
+				on: {
+					default: {
+						outer: {
+							backgroundColor: "var(--primary-7)",
+							backgroundImage: "linear-gradient(317.51deg, var(--primary-7) 0%, var(--primary-7) 100%)",
+							borderColor: "var(--primary-8)",
+							border: "var(--primary-8) 1px solid"
+						},
+						inner: { backgroundColor: "var(--white-1)" }
+					},
+					disabled: {
+						outer: {
+							backgroundColor: "var(--primary-5)",
+							backgroundImage: "linear-gradient(180.00deg, var(--primary-5) 0%, var(--primary-5) 100%)",
+							borderColor: "var(--primary-6)",
+							border: "var(--primary-6) 1px solid"
+						},
+						inner: { backgroundColor: "var(--white-1)" }
+					},
+					loading: { outer: {
+						backgroundColor: "var(--primary-a7)",
+						backgroundImage: "linear-gradient(315.00deg, var(--primary-a7) 0%, var(--primary-a7) 100%)",
+						borderColor: "var(--primary-a8)",
+						border: "var(--primary-a8) 1px solid"
+					} }
+				},
+				failure: {
+					default: {
+						outer: {
+							backgroundColor: "var(--warning-9)",
+							backgroundImage: "linear-gradient(317.51deg, var(--warning-9) 0%, var(--warning-8) 100%)",
+							borderColor: "var(--warning-9)",
+							border: "var(--warning-9) 1px solid"
+						},
+						inner: { backgroundColor: "var(--white-1)" }
+					},
+					loading: {
+						outer: {
+							backgroundColor: "var(--warning-8)",
+							backgroundImage: "linear-gradient(317.51deg, var(--warning-8) 0.4%, var(--warning-8) 100%)",
+							borderColor: "var(--warning-8)",
+							border: "var(--warning-8) 1px solid"
+						},
+						inner: { backgroundColor: "var(--white-1)" }
+					}
+				},
+				danger: {
+					default: {
+						outer: {
+							backgroundColor: "var(--warning-11)",
+							backgroundImage: "linear-gradient(317.51deg, var(--warning-11) 0%, var(--warning-8) 100%)",
+							borderColor: "var(--warning-8)",
+							border: "var(--warning-8) 1px solid"
+						},
+						inner: { backgroundColor: "var(--white-1)" }
+					},
+					loading: { outer: {
+						backgroundColor: "var(--warning-8)",
+						backgroundImage: "linear-gradient(317.51deg, var(--warning-8) 0%, var(--warning-7) 100%)",
+						borderColor: "var(--warning-8)",
+						border: "var(--warning-8) 1px solid"
+					} },
+					disabled: {
+						outer: {
+							backgroundColor: "var(--warning-7)",
+							backgroundImage: "linear-gradient(317.51deg, var(--warning-7) 0%, var(--caution-6) 100%)",
+							borderColor: "var(--warning-6)",
+							border: "var(--warning-6) 1px solid"
+						},
+						inner: { backgroundColor: "var(--white-1)" }
+					}
+				},
+				locked: { default: {
+					outer: {
+						backgroundColor: "var(--grey-1) ",
+						backgroundImage: "linear-gradient(180.00deg, var(--grey-1) 0%, var(--grey-1) 100%)",
+						borderColor: "var(--grey-a8)",
+						border: "var(--grey-a8) 1px solid"
+					},
+					inner: { backgroundColor: "var(--grey-8)" }
+				} }
+			},
+			checkbox: {
+				unchecked: {
+					disabled: {
+						backgroundColor: "var(--grey-1)",
+						borderColor: "var(--grey-6)",
+						border: "var(--grey-6) 2px solid"
+					},
+					default: {
+						borderColor: "var(--grey-9)",
+						border: "var(--grey-9) 2px solid"
+					},
+					hover: {
+						borderColor: "var(--primary-8)",
+						border: "var(--primary-8) 2px solid"
+					}
+				},
+				checked: {
+					disabled: {
+						boxShadow: "inset 0px 1px 5px 0px var(--grey-a1)",
+						backgroundColor: "var(--grey-6)"
+					},
+					default: {
+						boxShadow: "inset 0px 1px 5px 0px var(--grey-a1)",
+						backgroundColor: "var(--primary-8)"
+					},
+					hover: {
+						boxShadow: "inset 0px 1px 5px 0px var(--grey-a1)",
+						backgroundColor: "var(--primary-8)"
+					}
+				},
+				indeterminate: {
+					hover: {
+						boxShadow: "inset 0px 1px 5px 0px var(--grey-a1)",
+						backgroundColor: "var(--primary-6)"
+					},
+					default: {
+						boxShadow: "inset 0px 1px 5px 0px var(--grey-a1)",
+						backgroundColor: "var(--primary-6)"
+					}
+				}
+			}
+		},
+		indicators: { spinner: {
+			danger: {
+				base: {
+					borderColor: "var(--warning-8)",
+					border: "var(--warning-8) 3px solid"
+				},
+				top: {
+					borderColor: "var(--white-1)",
+					border: "var(--white-1) 3px solid"
+				}
+			},
+			secondary: {
+				top: {
+					borderColor: "var(--white-1)",
+					border: "var(--white-1) 3px solid"
+				},
+				base: {
+					borderColor: "var(--grey-8)",
+					border: "var(--grey-8) 3px solid"
+				}
+			},
+			primary: {
+				top: {
+					borderColor: "var(--white-1)",
+					border: "var(--white-1) 3px solid"
+				},
+				base: {
+					borderColor: "var(--primary-6)",
+					border: "var(--primary-6) 3px solid"
+				}
+			},
+			simple: {
+				top: {
+					borderColor: "var(--white-1)",
+					border: "var(--white-1) 3px solid"
+				},
+				base: {
+					borderColor: "var(--grey-a8)",
+					border: "var(--grey-a8) 3px solid"
+				}
+			}
+		} },
+		filters: {
+			dropdownContainer: {
+				background: {
+					boxShadow: "0px 5px 25px 0px var(--primary-a1)",
+					backgroundColor: "var(--grey-1)",
+					borderColor: "var(--grey-6)",
+					border: "var(--grey-6) 1px solid"
+				},
+				topBorder: { backgroundColor: "var(--primary-7)" }
+			},
+			filterButton: {
+				default: {
+					boxShadow: "0px 4px 9px 0px var(--primary-a1)",
+					backgroundColor: "var(--grey-1)",
+					borderColor: "var(--grey-7)",
+					border: "var(--grey-7) 1px solid",
+					textColor: "var(--grey-11)"
+				},
+				active: {
+					boxShadow: "0px 4px 9px 0px var(--primary-a1)",
+					backgroundColor: "var(--primary-7)",
+					borderColor: "var(--primary-7)",
+					border: "var(--primary-7) 1px solid",
+					textColor: "var(--white-1)"
+				},
+				hover: {
+					boxShadow: "0px 4px 9px 0px var(--primary-a1)",
+					backgroundColor: "var(--primary-7)",
+					borderColor: "var(--primary-7)",
+					border: "var(--primary-7) 1px solid",
+					textColor: "var(--white-1)"
+				}
+			},
+			searchInput: {
+				default: {
+					boxShadow: "0px 4px 9px 0px var(--primary-a2)",
+					backgroundColor: "var(--grey-1)",
+					borderColor: "var(--grey-7)",
+					border: "var(--grey-7) 1px solid"
+				},
+				focused: {
+					boxShadow: "0px 4px 9px 0px var(--primary-a2)",
+					backgroundColor: "var(--grey-1)",
+					borderColor: "var(--primary-6)",
+					border: "var(--primary-6) 1px solid"
+				}
+			}
+		},
+		tables: {
+			loadingOverlay: {
+				backgroundColor: "var(--grey-2)",
+				backgroundImage: "linear-gradient(180.00deg, var(--grey-2) 0%, var(--grey-3) 100%)"
+			},
+			rows: { divider: { backgroundColor: colors.divider } },
+			header: {
+				groupLine: { backgroundColor: colors.divider },
+				divider: { backgroundColor: colors.divider },
+				sortable: {
+					hover: { backgroundColor: "var(--grey-4)" },
+					default: { backgroundColor: "var(--grey-2)" }
+				}
+			}
+		},
+		general: { divider: { backgroundColor: colors.divider } },
+		feedbackBar: {
+			neutral: { backgroundColor: colors.feedback.neutral },
+			error: { backgroundColor: colors.feedback.error },
+			info: { backgroundColor: colors.feedback.info },
+			success: { backgroundColor: colors.feedback.success },
+			warning: { backgroundColor: colors.feedback.warning }
+		},
+		filterButton: { active: {
+			boxShadow: "0px 4px 9px 0px var(--primary-a1)",
+			backgroundColor: "var(--grey-1)",
+			borderColor: "var(--primary-7)",
+			border: "var(--primary-7) 1px solid"
+		} }
+	},
 	animation,
-	custom,
+	custom: { lines: {
+		primary: {
+			label: { fill: "#fff" },
+			contrastLine: { stroke: "hsla(205deg, 80%, 45%, 100%);" },
+			highlightLine: { stroke: "hsla(205deg, 45%, 90%, 90%);" },
+			highlightLineBorder: { stroke: "hsla(204.8,53.4%,46.3%,100%);" },
+			grabHandle: {
+				fill: "hsla(205deg, 45%, 90%, 100%)",
+				stroke: "hsla(205deg, 45%, 100%, 100%)"
+			},
+			point: { fill: "hsla(205deg, 45%, 90%, 100%)" },
+			grabHandleContrast: { stroke: "hsla(205deg, 80%, 45%, 100%)" },
+			grabHandleText: { fill: "hsla(205deg, 80%, 25%, 100%);" },
+			handleBase: { fill: "hsla(235deg, 100%, 80%, 100%);" },
+			handleRingLayer: { stroke: "hsla(205deg, 100%, 89%, 100%);" },
+			handleReactiveFill: { fill: "hsla(192deg, 100%, 45%, 100%);" },
+			handleReactiveRing: { stroke: "hsla(205deg, 100%, 36%, 27%);" },
+			handleContrastLayer: { stroke: "hsla(205deg, 100%, 36%, 15%);" },
+			stopStart: { stopColor: " hsla(205deg, 100%, 15%, 35%);" },
+			stopEnd: { stopColor: "hsla(205deg, 100%, 15%, 0%)" }
+		},
+		secondary: {
+			label: { fill: "#fff" },
+			contrastLine: { stroke: "hsla(120deg, 80%, 45%, 100%);" },
+			highlightLine: { stroke: "hsla(120deg, 45%, 90%, 90%);" },
+			highlightLineBorder: { stroke: "hsla(120deg, 81%, 70%, 90%);" },
+			grabHandle: {
+				fill: "hsla(120deg, 45%, 90%, 100%)",
+				stroke: "hsla(120deg, 45%, 100%, 100%)"
+			},
+			point: { fill: "hsla(120deg, 45%, 90%, 100%)" },
+			grabHandleContrast: { stroke: "hsla(120deg, 80%, 45%, 100%)" },
+			grabHandleText: { fill: "hsla(120deg, 80%, 25%, 100%);" },
+			handleBase: { fill: "hsla(150deg, 100%, 80%, 100%);" },
+			handleRingLayer: { stroke: "hsla(120deg, 100%, 89%, 100%);" },
+			handleReactiveFill: { fill: "hsla(108deg, 100%, 45%, 100%);" },
+			handleReactiveRing: { stroke: "hsla(120deg, 100%, 36%, 27%);" },
+			handleContrastLayer: { stroke: "hsla(120deg, 100%, 36%, 15%);" },
+			stopStart: { stopColor: " hsla(120deg, 100%, 15%, 35%);" },
+			stopEnd: { stopColor: "hsla(120deg, 100%, 15%, 0%)" }
+		},
+		danger: {
+			label: { fill: "#fff" },
+			contrastLine: { stroke: "hsla(0, 80%, 45%, 100%);" },
+			highlightLine: { stroke: "hsla(0, 45%, 90%, 90%);" },
+			highlightLineBorder: { stroke: "hsla(0deg, 86%, 70%, 100%);" },
+			grabHandle: {
+				fill: "hsla(0, 45%, 90%, 100%)",
+				stroke: "hsla(0, 45%, 100%, 100%)"
+			},
+			point: { fill: "hsla(0, 45%, 90%, 100%)" },
+			grabHandleText: { fill: "hsla(0, 80%, 25%, 100%);" },
+			grabHandleContrast: { stroke: "hsla(0, 80%, 45%, 100%)" },
+			handleBase: { fill: "hsla(30deg, 100%, 80%, 100%);" },
+			handleRingLayer: { stroke: "hsla(0, 100%, 89%, 100%);" },
+			handleReactiveFill: { fill: "hsla(348deg, 100%, 45%, 100%);" },
+			handleReactiveRing: { stroke: "hsla(0deg, 100%, 36%, 27%);" },
+			handleContrastLayer: { stroke: "hsla(0deg, 100%, 36%, 15%);" },
+			stopStart: { stopColor: " hsla(0, 100%, 15%, 35%);" },
+			stopEnd: { stopColor: "hsla(0, 100%, 15%, 0%);" }
+		}
+	} },
 	deviceSize,
 	deviceMediaQuery
 };
@@ -3498,12 +3492,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.input`
   display: none;
 `;
@@ -3554,7 +3542,7 @@ var Container$67 = styled.label`
     border: var(--input-toggle-unchecked-border-color) 2px solid;
   }
 
-  ${({ $visualState, $disabled }) => $visualState === CheckboxState.Off && css`
+  ${({ $visualState, $disabled }) => $visualState === "off" && css`
     /* Unchecked */
     ${CheckboxOuter}{
       background-color: var(--input-toggle-unchecked-background-color);
@@ -3579,7 +3567,7 @@ var Container$67 = styled.label`
     `}
   `}
 
-  ${({ $visualState, $disabled }) => $visualState === CheckboxState.On && css`
+  ${({ $visualState, $disabled }) => $visualState === "on" && css`
     /* Checked */
     ${CheckboxOuter}{
       background-color: var(--input-toggle-checked-background-color);
@@ -3605,7 +3593,7 @@ var Container$67 = styled.label`
     `}
   `}
 
-  ${({ $visualState, $disabled }) => $visualState === CheckboxState.Indeterminate && css`
+  ${({ $visualState, $disabled }) => $visualState === "indeterminate" && css`
     ${CheckboxOuter}{
       background-color: var(--input-toggle-intermediate-background-color);
       border-color: var(--input-toggle-intermediate-border-color);
@@ -3632,14 +3620,14 @@ var Container$67 = styled.label`
 `;
 var Checkbox = ({ indeterminate: _indeterminate = false, disabled, checked = false, onChangeCallback }) => {
 	const [isChecked, setIsChecked] = useState(checked);
-	const [visualState, setVisualState] = useState(checked ? CheckboxState.On : CheckboxState.Off);
+	const [visualState, setVisualState] = useState(checked ? "on" : "off");
 	const customOnChange = (e) => {
 		const checked = e.target.checked;
 		setIsChecked(checked);
 		if (onChangeCallback) onChangeCallback(checked);
 	};
 	useEffect(() => {
-		setVisualState(checked ? CheckboxState.On : CheckboxState.Off);
+		setVisualState(checked ? "on" : "off");
 	}, [checked]);
 	useEffect(() => {
 		setIsChecked(checked);
@@ -3649,7 +3637,7 @@ var Checkbox = ({ indeterminate: _indeterminate = false, disabled, checked = fal
 		onChange: customOnChange,
 		$disabled: disabled,
 		$visualState: visualState,
-		children: [/* @__PURE__ */ jsx(CheckboxOuter, { children: /* @__PURE__ */ jsx(CheckboxInner, { children: visualState === CheckboxState.On ? /* @__PURE__ */ jsx(IconWrapper$3, {
+		children: [/* @__PURE__ */ jsx(CheckboxOuter, { children: /* @__PURE__ */ jsx(CheckboxInner, { children: visualState === "on" ? /* @__PURE__ */ jsx(IconWrapper$3, {
 			$color: "input-toggle-icon-color",
 			children: /* @__PURE__ */ jsx(CheckMark, {
 				color: "input-toggle-icon-color",
@@ -4228,7 +4216,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 = useCallback((htmlFor) => /* @__PURE__ */ jsxs(SelectWrapper, { children: [
+	const renderSelect = (htmlFor) => /* @__PURE__ */ jsxs(SelectWrapper, { children: [
 		icon && /* @__PURE__ */ jsx(SubjectIcon, {
 			$isCompact: isCompact,
 			children: /* @__PURE__ */ jsx(Icon, {
@@ -4262,17 +4250,7 @@ var SelectField = ({ fieldState = "default", placeholder, label, icon, isCompact
 				size: isCompact ? 8 : 10
 			})
 		})
-	] }), [
-		children,
-		defaultValue,
-		handleOnChange,
-		placeholder,
-		props,
-		fieldState,
-		icon,
-		iconColor,
-		isCompact
-	]);
+	] });
 	return /* @__PURE__ */ jsx(Container$62, {
 		$isCompact: isCompact,
 		$activePlaceholder: activePlaceholder,
@@ -4664,19 +4642,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";
 	}
 };
@@ -4808,7 +4779,7 @@ var Container$60 = styled(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))"};
     }
   }
 `;
@@ -4818,7 +4789,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] = useState(defaultChecked);
 	const inputRef = useRef(null);
@@ -4830,11 +4801,11 @@ var Switch = ({ state = "default", leftTheme = "off", rightTheme = "on", labelTe
 	const [innerSize, setInnerSize] = useState(0);
 	const updateSwitchPositionAndTheme = 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);
 		}
 	}, [
@@ -4849,10 +4820,10 @@ var Switch = ({ state = "default", leftTheme = "off", rightTheme = "on", labelTe
 	}, [updateSwitchPositionAndTheme]);
 	const positionSwitch = 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);
 		}
 	}, [
@@ -4885,8 +4856,8 @@ var Switch = ({ state = "default", leftTheme = "off", rightTheme = "on", labelTe
 	* things get updated. (i.e. in StoryBook)
 	*/
 	const updateThemeChoice = 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,
@@ -4902,10 +4873,10 @@ var Switch = ({ state = "default", leftTheme = "off", rightTheme = "on", labelTe
 	/** Watch for locking prop. */
 	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]);
@@ -7536,53 +7507,53 @@ var InputWrap = styled.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] = useState(format(date, "mm"));
 	const [displayMinutes, setDisplayMinutes] = useState(format(date, "HH"));
 	const setDateHours = useCallback(({ target: { value } }) => {
@@ -7599,8 +7570,7 @@ var DateTimeBlock = ({ allowAfterMidnight = false, title, hasDate, hasTime, isTi
 		date,
 		displayMinutes,
 		hasDate,
-		setDateCallback,
-		validHourMin
+		setDateCallback
 	]);
 	const setDateMinutes = useCallback(({ target: { value } }) => {
 		if (isNotNumber(value)) return;
@@ -7616,8 +7586,7 @@ var DateTimeBlock = ({ allowAfterMidnight = false, title, hasDate, hasTime, isTi
 		date,
 		displayHours,
 		hasDate,
-		setDateCallback,
-		validHourMin
+		setDateCallback
 	]);
 	useEffect(() => {
 		if (allowAfterMidnight && isEqual(date, endOfDay(date))) {
@@ -7965,22 +7934,64 @@ var CalCellB = styled(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] = useState(getInitialValue(hasEmptyValue, initialValue));
@@ -8104,8 +8115,8 @@ var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUp
 				}) })]
 			})
 		] }),
-		/* @__PURE__ */ jsx(CalHRow, { children: dayGuide.map((day) => {
-			return /* @__PURE__ */ jsx(CalHCell, { children: day }, day);
+		/* @__PURE__ */ jsx(CalHRow, { children: dayGuide.map(({ key, label }) => {
+			return /* @__PURE__ */ jsx(CalHCell, { children: label }, key);
 		}) }),
 		/* @__PURE__ */ jsx(CalBody, { children: weeksOfMonth.map((week) => {
 			return /* @__PURE__ */ jsx(CalRow, { children: eachDayOfInterval({
@@ -10728,7 +10739,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.div`
   position: relative;
   display: flex;