scorer-ui-kit 3.0.4 → 3.0.6

package/dist/index.modern.js

@@ -1,8 +1,8 @@
-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 { 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-Bo0pvCP-.mjs";
 import styled, { createGlobalStyle, css, keyframes } from "styled-components";
 import React, { Children, Fragment, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import ReactDom from "react-dom";
+import ReactDOM from "react-dom";
 import { add, addMonths, eachDayOfInterval, eachWeekOfInterval, endOfDay, endOfMonth, endOfWeek, format, intervalToDuration, isAfter, isEqual, isSameDay, isSameMonth, isToday, isWithinInterval, min, set, startOfDay, startOfMonth } from "date-fns";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { enUS, ja } from "date-fns/locale";
@@ -49,6 +49,473 @@ 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,
@@ -730,470 +1197,9 @@ var theme_default = {
 		} }
 	},
 	colors,
-	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"
-		} }
-	},
+	styles,
 	animation,
-	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%);" }
-		}
-	} },
+	custom,
 	deviceSize,
 	deviceMediaQuery
 };
@@ -2133,10 +2139,8 @@ var colorVariables = css`
 
 `;
 //#endregion
-//#region src/theme/ThemeVariables.ts
-var ThemeVariables = createGlobalStyle`
-
-  ${css`
+//#region src/theme/variables/Layout.ts
+var layoutVariables = css`
   /** Layouts */
   :root {
     --max-content-width: 1840px;
@@ -2186,7 +2190,12 @@ var ThemeVariables = createGlobalStyle`
       --max-content-width: none;
     }
   }
-`};
+`;
+//#endregion
+//#region src/theme/ThemeVariables.ts
+var ThemeVariables = createGlobalStyle`
+
+  ${layoutVariables};
   ${animationVariables};
   ${colorVariables};
 
@@ -2726,7 +2735,7 @@ var Notification = ({ id, type = "info", message, icon = "", isPinned = false, a
 			}
 		};
 	}, []);
-	return message && !dismiss ? ReactDom.createPortal(/* @__PURE__ */ jsxs(Container$71, {
+	return message && !dismiss ? ReactDOM.createPortal(/* @__PURE__ */ jsxs(Container$71, {
 		$type: type,
 		$isClosing: slideUp,
 		$isVisible: isVisible,
@@ -2955,7 +2964,10 @@ var Tooltip = ({ icon, message, type, tooltipFor, tooltipPosition, maxWidth }) =
 		setVisible(false);
 	}, []);
 	const updateCoords = useCallback(() => {
-		if (tooltipFor?.current) setCoords(tooltipFor.current.getBoundingClientRect());
+		if (tooltipFor?.current) {
+			const rect = tooltipFor.current.getBoundingClientRect();
+			setCoords(rect);
+		}
 	}, [tooltipFor]);
 	useEffect(() => {
 		let currentRef = null;
@@ -2978,7 +2990,7 @@ var Tooltip = ({ icon, message, type, tooltipFor, tooltipPosition, maxWidth }) =
 		updateCoords
 	]);
 	if (!visible || !coords) return null;
-	return ReactDom.createPortal(/* @__PURE__ */ jsxs(TooltipWrapper, {
+	return ReactDOM.createPortal(/* @__PURE__ */ jsxs(TooltipWrapper, {
 		ref: tooltipRef,
 		$maxWidth: maxWidth,
 		$directionStyle: getDirectionStyle(tooltipPosition || dynamicPosition, coords),
@@ -4424,8 +4436,10 @@ var nearMark = (value, marks) => {
 */
 var getValidMin = (max, min) => {
 	if (!max && !min) return 0;
-	if (!min) if (max > 0) return 0;
-	else return max - 1;
+	if (!min) {
+		if (max > 0) return 0;
+		else return max - 1;
+	}
 	return min;
 };
 /**
@@ -4448,7 +4462,7 @@ var getMarkAlignment = (value, min, max) => {
 };
 var renderMarks = (markList, min, max, listTag, allMarkCentered) => {
 	const listOptions = [];
-	return /* @__PURE__ */ jsxs(Fragment, { children: [markList.map(({ value, label }, index) => {
+	const marksElements = markList.map(({ value, label }, index) => {
 		const left = index === markList.length - 1 ? 100 : valueToPercent(value, min, max);
 		listOptions.push(/* @__PURE__ */ jsx("option", { children: value }, `option-${value}`));
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Mark, {
@@ -4459,7 +4473,8 @@ var renderMarks = (markList, min, max, listTag, allMarkCentered) => {
 			$alignment: allMarkCentered ? "center" : getMarkAlignment(value, min, max),
 			children: label
 		})] }, `mark-${value}`);
-	}), /* @__PURE__ */ jsx("datalist", {
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [marksElements, /* @__PURE__ */ jsx("datalist", {
 		id: listTag,
 		children: listOptions
 	})] });
@@ -4468,7 +4483,8 @@ var ghostThumbValue = 0;
 var SliderInput = ({ min, max, marks, defaultValue, thumbColor = "info", disabled = false, onlyMarkSelect = false, inputCallback = () => {}, onChangeCallback = () => {}, allMarkCentered = false, showValue: _showValue, children, formAction, ...props }) => {
 	const maxValid = getValidMax(max, min);
 	const minValid = getValidMin(max, min);
-	const [selectedValue, setSelectedValue] = useState(defaultValue && isInsideRange(defaultValue, minValid, maxValid) ? defaultValue : minValid);
+	const initValue = defaultValue && isInsideRange(defaultValue, minValid, maxValid) ? defaultValue : minValid;
+	const [selectedValue, setSelectedValue] = useState(initValue);
 	const [isGhostActive, setIsGhostActive] = useState(false);
 	const thumbValueRef = useRef(thumbLeftPosition(selectedValue, minValid, maxValid));
 	if (marks && onlyMarkSelect) ghostThumbValue = thumbLeftPosition(nearMark(selectedValue, marks), minValid, maxValid);
@@ -5162,13 +5178,15 @@ var ButtonsStack = ({ buttons }) => {
 //#region src/helpers/cropToolHelpers.ts
 var updateCursorStyle = (left, top, width, height, clientX, clientY) => {
 	let cursorStyle = "default";
-	if (clientY - top < 5) if (width - (clientX - left) < 5) cursorStyle = "ne-resize";
-	else if (clientX - left < 5) cursorStyle = "nw-resize";
-	else cursorStyle = "n-resize";
-	else if (height - (clientY - top) < 5) if (width - (clientX - left) < 5) cursorStyle = "se-resize";
-	else if (clientX - left < 5) cursorStyle = "sw-resize";
-	else cursorStyle = "s-resize";
-	else if (width - (clientX - left) < 5) cursorStyle = "e-resize";
+	if (clientY - top < 5) {
+		if (width - (clientX - left) < 5) cursorStyle = "ne-resize";
+		else if (clientX - left < 5) cursorStyle = "nw-resize";
+		else cursorStyle = "n-resize";
+	} else if (height - (clientY - top) < 5) {
+		if (width - (clientX - left) < 5) cursorStyle = "se-resize";
+		else if (clientX - left < 5) cursorStyle = "sw-resize";
+		else cursorStyle = "s-resize";
+	} else if (width - (clientX - left) < 5) cursorStyle = "e-resize";
 	else if (clientX - left < 5) cursorStyle = "w-resize";
 	else cursorStyle = "move";
 	return cursorStyle;
@@ -5260,8 +5278,6 @@ var updateCropValues = (oldSelection, newX, newY) => {
 		case "move":
 			updatedTop = oldSelection.cropTop + diffY;
 			updatedLeft = oldSelection.cropLeft + diffX;
-			break;
-		default: break;
 	}
 	const width = clamp(updatedWidth, 0, oldSelection.imgWidth);
 	const height = clamp(updatedHeight, 0, oldSelection.imgHeight);
@@ -5314,8 +5330,6 @@ var updateCropWithAspect = (oldSelection, newX, newY, aspectRatio) => {
 		case "move":
 			updatedTop = oldSelection.cropTop + diffY;
 			updatedLeft = oldSelection.cropLeft + diffX;
-			break;
-		default: break;
 	}
 	/**img values only change if the image is updated */
 	const imgBoundLeft = clamp(updatedLeft, oldSelection.imgLeft, oldSelection.imgWidth - oldSelection.cropWidth + oldSelection.imgLeft);
@@ -5724,7 +5738,7 @@ var CropTool = ({ title = "Crop Image", cancelBtnTxt = "Cancel", cropBtnTxt = "C
 		if (!viewDimensions.isResizing) return;
 		viewDimensions.isResizing = false;
 	}, []);
-	return ReactDom.createPortal(/* @__PURE__ */ jsx(Container$57, { children: /* @__PURE__ */ jsxs(InnerContainer$1, { children: [/* @__PURE__ */ jsxs(ToolHeader, { children: [/* @__PURE__ */ jsxs(TextGroup$1, { children: [/* @__PURE__ */ jsx(Icon, {
+	return ReactDOM.createPortal(/* @__PURE__ */ jsx(Container$57, { children: /* @__PURE__ */ jsxs(InnerContainer$1, { children: [/* @__PURE__ */ jsxs(ToolHeader, { children: [/* @__PURE__ */ jsxs(TextGroup$1, { children: [/* @__PURE__ */ jsx(Icon, {
 		icon: "Crop",
 		size: 20,
 		color: "mono"
@@ -5849,7 +5863,7 @@ var getValueTitle = (value, timeUnit, timeFormat) => {
 		}), /* @__PURE__ */ jsx(Unit, { children: unit })] });
 	}
 	const timeValues = getTimeValues(value, timeUnit);
-	return /* @__PURE__ */ jsx(ValueTitle$1, { children: /* @__PURE__ */ jsx(TitleTemplate, { children: timeFormat.split(/(\[H+\]|\[M+\]|\[S+\])/).map((part, index) => {
+	const updatedTitle = timeFormat.split(/(\[H+\]|\[M+\]|\[S+\])/).map((part, index) => {
 		switch (part) {
 			case "[HH]": return /* @__PURE__ */ jsx("span", { children: timeValues.hours.toString().padStart(2, "0") }, index);
 			case "[H]": return /* @__PURE__ */ jsx("span", { children: timeValues.hours }, index);
@@ -5859,7 +5873,8 @@ var getValueTitle = (value, timeUnit, timeFormat) => {
 			case "[S]": return /* @__PURE__ */ jsx("span", { children: timeValues.seconds }, index);
 			default: return part.replace(/\s+/g, "\xA0");
 		}
-	}) }) });
+	});
+	return /* @__PURE__ */ jsx(ValueTitle$1, { children: /* @__PURE__ */ jsx(TitleTemplate, { children: updatedTitle }) });
 };
 var DurationSlider = ({ max, min, defaultValue = 0, title = "", timeUnit, controlledValue, inputCallback, timeFormat, ...props }) => {
 	const [selectedValue, setSelectedValue] = useState(defaultValue);
@@ -6208,7 +6223,7 @@ var Modal = ({ isOpen = false, isCloseEnable = true, closeText = "", width = "",
 		if (dismissCallback) dismissCallback();
 		onDismiss();
 	}, [onDismiss, dismissCallback]);
-	return isOpen ? ReactDom.createPortal(/* @__PURE__ */ jsx(Container$55, { children: /* @__PURE__ */ jsxs(LightBox, {
+	return isOpen ? ReactDOM.createPortal(/* @__PURE__ */ jsx(Container$55, { children: /* @__PURE__ */ jsxs(LightBox, {
 		ref: lightBoxRef,
 		$width: width,
 		$padding: padding,
@@ -6255,10 +6270,11 @@ var useModal = () => {
 	const { modalProps, setModalProps } = useContext(ModalContext);
 	const setModalOpen = useCallback((newStatus) => {
 		if (newStatus === void 0) return;
-		setModalProps({
+		const updateProps = {
 			...modalProps,
 			isOpen: newStatus
-		});
+		};
+		setModalProps(updateProps);
 	}, [modalProps, setModalProps]);
 	const onDismiss = useCallback(() => {
 		setModalOpen(false);
@@ -6269,7 +6285,7 @@ var useModal = () => {
 				isOpen: true,
 				onDismiss
 			});
-			setModalProps({
+			const updateProps = {
 				isOpen: true,
 				closeText: modal?.closeText,
 				isCloseEnable: modal?.isCloseEnable,
@@ -6278,7 +6294,8 @@ var useModal = () => {
 				dismissCallback: modal?.dismissCallback,
 				customComponent: modal?.customComponent,
 				onDismiss
-			});
+			};
+			setModalProps(updateProps);
 		}, [onDismiss, setModalProps]),
 		isModalOpen: modalProps.isOpen,
 		setModalOpen
@@ -6368,10 +6385,11 @@ var NotificationProvider = ({ children }) => {
 			setActiveNotification(null);
 			showNotification();
 		};
-		setActiveNotification({
+		const displayedNotification = {
 			...nextNotification,
 			closeCallback: updateOnClose
-		});
+		};
+		setActiveNotification(displayedNotification);
 	}, []);
 	const sendNotification = useCallback(async (newNotification) => {
 		const validNotification = {
@@ -8274,11 +8292,14 @@ var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUp
 	*/
 	const onCellClick = useCallback((day) => {
 		const validRange = selectedRange ? selectedRange : TODAY_INTERVAL;
-		if (dateMode === "single") setSelectedRange({
-			start: updateDay(validRange.start, day),
-			end: updateDay(validRange.end, day)
-		});
-		else if (targetedDate === "end" && isAfter(day, validRange.start)) {
+		if (dateMode === "single") {
+			const start = updateDay(validRange.start, day);
+			const end = updateDay(validRange.end, day);
+			setSelectedRange({
+				start,
+				end
+			});
+		} else if (targetedDate === "end" && isAfter(day, validRange.start)) {
 			const end = updateDay(validRange.end, day);
 			setSelectedRange({
 				...validRange,
@@ -8286,9 +8307,11 @@ var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUp
 			});
 			setTargetedDate("done");
 		} else if (targetedDate === "start" || targetedDate === "end" || targetedDate === "done") {
+			const start = updateDay(validRange.start, day);
+			const end = updateDay(validRange.end, day);
 			setSelectedRange({
-				start: updateDay(validRange.start, day),
-				end: updateDay(validRange.end, day)
+				start,
+				end
 			});
 			setTargetedDate("end");
 		}
@@ -8299,9 +8322,10 @@ var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUp
 	]);
 	useEffect(() => {
 		const { start, end } = selectedRange ? selectedRange : TODAY_INTERVAL;
-		if (timeMode === "interval" && isAfter(add(start, { minutes: 1 }), end)) if (isEqual(end, endOfDay(start)) && end.getSeconds() > 0) setIsTimeRangeValid(true);
-		else setIsTimeRangeValid(false);
-		else setIsTimeRangeValid(true);
+		if (timeMode === "interval" && isAfter(add(start, { minutes: 1 }), end)) {
+			if (isEqual(end, endOfDay(start)) && end.getSeconds() > 0) setIsTimeRangeValid(true);
+			else setIsTimeRangeValid(false);
+		} else setIsTimeRangeValid(true);
 	}, [selectedRange, timeMode]);
 	const updateStartDate = useCallback((start) => {
 		const { end } = selectedRange ? selectedRange : TODAY_INTERVAL;
@@ -8364,10 +8388,11 @@ var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUp
 			return /* @__PURE__ */ jsx(CalHCell, { children: label }, key);
 		}) }),
 		/* @__PURE__ */ jsx(CalBody, { children: weeksOfMonth.map((week) => {
-			return /* @__PURE__ */ jsx(CalRow, { children: eachDayOfInterval({
+			const days = eachDayOfInterval({
 				start: week,
 				end: endOfWeek(week)
-			}).map((day) => {
+			});
+			return /* @__PURE__ */ jsx(CalRow, { children: days.map((day) => {
 				const dayState = cellState(day, selectedRange);
 				const isTodayValue = isToday(day);
 				return /* @__PURE__ */ jsxs(CalCellB, {
@@ -8411,10 +8436,12 @@ var cellState = (day, interval, _hoverDate) => {
 	} catch (_error) {
 		isInsideInterval = false;
 	}
-	if (isInsideInterval || isSameDay(interval.start, day)) if (singleDayRange) state = "single";
-	else if (isSameDay(interval.start, day)) state = "start";
-	else if (isSameDay(interval.end, day)) state = "end";
-	else state = "inside";
+	if (isInsideInterval || isSameDay(interval.start, day)) {
+		if (singleDayRange) state = "single";
+		else if (isSameDay(interval.start, day)) state = "start";
+		else if (isSameDay(interval.end, day)) state = "end";
+		else state = "inside";
+	}
 	return state;
 };
 var updateDay = (date, target) => {
@@ -9163,7 +9190,8 @@ var FilterDropdown = ({ buttonIcon, buttonText, list, selected = null, disabled
 			setVisibleList(selectedOrderList(list, maxDisplayedItems, tempSelected, isSortAscending));
 			return;
 		}
-		setVisibleList(selectedOrderList(getFilteredList(list, value), maxDisplayedItems, null, isSortAscending));
+		const newList = getFilteredList(list, value);
+		setVisibleList(selectedOrderList(newList, maxDisplayedItems, null, isSortAscending));
 	}, [
 		isSortAscending,
 		list,
@@ -9465,8 +9493,13 @@ var FilterInputs = ({ hasShowMore = false, searchFilters = [], datePickerFilters
 		setShowMoreDropdowns((prev) => !prev);
 	}, []);
 	const handleVisibleSearch = useCallback((searchId) => {
-		if (visibleSearchInputs.includes(searchId)) setVisibleSearchInputs(visibleSearchInputs.filter((id) => searchId !== id));
-		else setVisibleSearchInputs([...visibleSearchInputs, searchId]);
+		if (visibleSearchInputs.includes(searchId)) {
+			const newVisible = visibleSearchInputs.filter((id) => searchId !== id);
+			setVisibleSearchInputs(newVisible);
+		} else {
+			const newVisible = [...visibleSearchInputs, searchId];
+			setVisibleSearchInputs(newVisible);
+		}
 	}, [visibleSearchInputs]);
 	return /* @__PURE__ */ jsxs(Container$39, {
 		...props,
@@ -10873,7 +10906,7 @@ var LineUI$1 = ({ ws, onSizeChange = () => {}, onLineMoveEnd = () => {}, onLineC
 	useEffect(() => {
 		if (!frame.current || !loaded) return;
 		const { viewBox } = frame.current;
-		setBoundaries({
+		const bounds = {
 			x: {
 				min: viewBox.baseVal.x + boundaryOffset,
 				max: viewBox.baseVal.x + viewBox.baseVal.width - boundaryOffset
@@ -10882,7 +10915,8 @@ var LineUI$1 = ({ ws, onSizeChange = () => {}, onLineMoveEnd = () => {}, onLineC
 				min: viewBox.baseVal.y + boundaryOffset,
 				max: viewBox.baseVal.y + viewBox.baseVal.height - boundaryOffset
 			}
-		});
+		};
+		setBoundaries(bounds);
 	}, [loaded, boundaryOffset]);
 	const onLoadedMetadata = useCallback(({ target }) => {
 		if (target) {
@@ -10984,7 +11018,7 @@ var IntroductionText = ({ children }) => {
 //#region src/Pages/atoms/PageTitle.tsx
 var ICON_SIZE = 24;
 var GAP_LEFT = 20;
-var ICON_MARGIN_LEFT = -20 - ICON_SIZE;
+var ICON_MARGIN_LEFT = -44;
 var Container$30 = styled.div`
   position: relative;
   display: flex;
@@ -11761,8 +11795,9 @@ var TypeTableRow = ({ selectable = false, selectCallback, hasStatus, hasThumbnai
 	const wrappedSelectCallback = useCallback((checked) => {
 		if (selectCallback) selectCallback(checked, rowData.id);
 	}, [rowData.id, selectCallback]);
+	const isEmpty = rowData.columns.length === 0;
 	return /* @__PURE__ */ jsxs(RowContainer, {
-		$isEmpty: rowData.columns.length === 0,
+		$isEmpty: isEmpty,
 		children: [
 			selectable ? /* @__PURE__ */ jsx(TypeTableCell, {
 				hideDivider: true,
@@ -12071,9 +12106,10 @@ var TypeTable = ({ columnConfig, selectable, rows = [], closeText, hasStatus = f
 		}), /* @__PURE__ */ jsx(LoadingText, { children: loadingText })] }) : null,
 		isEmptyTable ? /* @__PURE__ */ jsxs(EmptyTableBox, { children: [/* @__PURE__ */ jsx("h3", { children: emptyTableTitle }), /* @__PURE__ */ jsx("p", { children: emptyTableText })] }) : null,
 		rows.map((rowData, key) => {
+			const isLastRow = rows.length - 1 === key;
 			return /* @__PURE__ */ jsx(TypeTableRow, {
 				rowData,
-				isLastRow: rows.length - 1 === key,
+				isLastRow,
 				selectable,
 				selectCallback,
 				columnConfig,
@@ -12822,19 +12858,20 @@ var Menu = styled.div`
   flex-direction: column;
   align-items: stretch;
   min-width: 216px;
-  padding: 4px 0;
+  padding: 0;
+  overflow: hidden;
   background: var(--grey-1);
-  border: 1px solid var(--grey-4);
+  border: 1px solid var(--grey-7);
   border-radius: 4px;
   box-shadow: 0px 5px 25px 0px var(--filter-button-shadow-color);
 `;
 var MenuItem = styled.button`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 12px;
   width: 100%;
   height: var(--button-height, 32px);
-  padding: 3px 8px;
+  padding: 0 8px;
   border: none;
   border-bottom: 1px solid var(--grey-7);
   background: transparent;
@@ -12847,11 +12884,15 @@ var MenuItem = styled.button`
   text-align: left;
   transition: background-color var(--speed-fast) var(--easing-primary-in-out);
 
-  & svg [stroke] { stroke: var(--grey-12); }
+  & svg [stroke] { stroke: var(--grey-10); }
 
   &:last-child { border-bottom: none; }
   &:hover:enabled { background-color: var(--grey-3); }
-  &:disabled { cursor: not-allowed; opacity: 0.5; }
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--grey-7);
+    & svg [stroke] { stroke: var(--grey-7); }
+  }
 
   ${({ $current }) => $current && css`
     background-color: var(--grey-4);
@@ -12861,6 +12902,8 @@ var MenuItem = styled.button`
 var CheckSlot = styled.span`
   display: flex;
   margin-left: auto;
+
+  & svg [stroke] { stroke: var(--primary-11); }
 `;
 var ChipDropdown = ({ items, icon = "FilterEllipsis", label, selectedId, checkIcon = "Success", triggerLabel, noDivider = false, disabled = false, onOpenChange, onKeyDown, ...props }) => {
 	const [isOpen, setIsOpen] = useState(false);
@@ -13572,13 +13615,16 @@ var SplitLayout = ({ mainArea, sideArea, layout = "horizontal", reverse, divider
 		};
 	}, [handleMouseLeaveViewport]);
 	const resizeLineArrowDirection = () => {
-		if (sideAreaState === "collapsed" || sideAreaState === "peeking") if (layout === "horizontal") if (!reverse) return "left";
-		else return "right";
-		else if (!reverse) return "up";
-		else return "down";
-		else if (layout === "horizontal") if (!reverse) return "right";
-		else return "left";
-		else if (!reverse) return "down";
+		if (sideAreaState === "collapsed" || sideAreaState === "peeking") {
+			if (layout === "horizontal") {
+				if (!reverse) return "left";
+				else return "right";
+			} else if (!reverse) return "up";
+			else return "down";
+		} else if (layout === "horizontal") {
+			if (!reverse) return "right";
+			else return "left";
+		} else if (!reverse) return "down";
 		else return "up";
 	};
 	const resizeLineState = () => {
@@ -14030,8 +14076,9 @@ var Content$1 = styled.div`
 `;
 var ContentLayout = ({ layout = "default", HeaderContent = {}, children }) => {
 	const { PageHeaderArea, TabsElementArea, UtilityHeaderOptions } = HeaderContent;
+	const containerClass = `content-layout-${layout}`;
 	return /* @__PURE__ */ jsxs(Container$16, {
-		className: `content-layout-${layout}`,
+		className: containerClass,
 		children: [
 			UtilityHeaderOptions ? /* @__PURE__ */ jsx(UtilityHeader, { ...UtilityHeaderOptions }) : null,
 			PageHeaderArea ? /* @__PURE__ */ jsx(HeaderArea, { children: PageHeaderArea }) : null,
@@ -14102,6 +14149,7 @@ var CoreStyle = css`
   font-weight: 500;
   line-height: 12px; /* 85.714% */
   white-space: nowrap;
+  user-select: none;
 
   transition: opacity var(--speed-fast) var(--easing-primary-out);
 
@@ -14208,46 +14256,47 @@ var TopBarBadge = ({ text, color, linkHref, linkTo, linkText, onClick }) => {
 		defaultTextElement,
 		linkTextElement
 	]);
+	const badgeComponent = useMemo(() => {
+		if (onClick) return /* @__PURE__ */ jsx(ContainerButton, {
+			$themeColor: color,
+			children: /* @__PURE__ */ jsx("button", {
+				onClick,
+				type: "button",
+				children: renderContent
+			})
+		});
+		else if (linkTo) return /* @__PURE__ */ jsx(ContainerLinked, {
+			$themeColor: color,
+			children: /* @__PURE__ */ jsx(Link, {
+				to: linkTo,
+				children: renderContent
+			})
+		});
+		else if (linkHref) return /* @__PURE__ */ jsx(ContainerLinked, {
+			$themeColor: color,
+			children: /* @__PURE__ */ jsx("a", {
+				href: linkHref,
+				children: renderContent
+			})
+		});
+		else return /* @__PURE__ */ jsx(ContainerStatic, {
+			$themeColor: color,
+			children: defaultTextElement
+		});
+	}, [
+		onClick,
+		linkTo,
+		linkHref,
+		color,
+		renderContent,
+		defaultTextElement
+	]);
 	return /* @__PURE__ */ jsx(Container$15, {
 		$ready: ready,
 		$minWidth: minWidth,
 		onPointerEnter: () => ready && setHover(true),
 		onPointerLeave: () => ready && setHover(false),
-		children: useMemo(() => {
-			if (onClick) return /* @__PURE__ */ jsx(ContainerButton, {
-				$themeColor: color,
-				children: /* @__PURE__ */ jsx("button", {
-					onClick,
-					type: "button",
-					children: renderContent
-				})
-			});
-			else if (linkTo) return /* @__PURE__ */ jsx(ContainerLinked, {
-				$themeColor: color,
-				children: /* @__PURE__ */ jsx(Link, {
-					to: linkTo,
-					children: renderContent
-				})
-			});
-			else if (linkHref) return /* @__PURE__ */ jsx(ContainerLinked, {
-				$themeColor: color,
-				children: /* @__PURE__ */ jsx("a", {
-					href: linkHref,
-					children: renderContent
-				})
-			});
-			else return /* @__PURE__ */ jsx(ContainerStatic, {
-				$themeColor: color,
-				children: defaultTextElement
-			});
-		}, [
-			onClick,
-			linkTo,
-			linkHref,
-			color,
-			renderContent,
-			defaultTextElement
-		])
+		children: badgeComponent
 	});
 };
 //#endregion
@@ -14996,7 +15045,7 @@ var TopBar = ({ hasNotifications = false, hasLanguage = false, selectedLanguageT
 			})
 		] })] })] }),
 		bottomAreaElement ? /* @__PURE__ */ jsx(BottomArea, { children: bottomAreaElement }) : null,
-		ReactDom.createPortal(/* @__PURE__ */ jsxs(DrawerPortalWrapper, { children: [
+		ReactDOM.createPortal(/* @__PURE__ */ jsxs(DrawerPortalWrapper, { children: [
 			/* @__PURE__ */ jsx(Drawer, {
 				$isOpen: openDrawer === "user",
 				children: /* @__PURE__ */ jsx(UserMenu, {
@@ -15501,27 +15550,28 @@ var generateSubmenus = (submenu, onClickCallback) => {
 	grouping.push([]);
 	submenu.forEach((item, key) => {
 		const { title, href, isExternalLink } = item;
-		if (href) if (isExternalLink) grouping[grouping.length - 1].push(/* @__PURE__ */ jsx(SubmenuItem, {
-			$isActive: false,
-			children: /* @__PURE__ */ jsxs(SubmenuItemAnchor, {
-				href,
-				target: "_blank",
-				children: [title, /* @__PURE__ */ jsx(ExternalIconWrapper, { children: /* @__PURE__ */ jsx(Icon, {
-					icon: "ExternalLink",
-					color: "dimmed",
-					size: 10
-				}) })]
-			})
-		}, key));
-		else grouping[grouping.length - 1].push(/* @__PURE__ */ jsx(SubmenuItem, {
-			$isActive: false,
-			children: /* @__PURE__ */ jsx(SubmenuItemLink, {
-				to: href,
-				onClick: () => onClickCallback?.(-1),
-				children: title
-			})
-		}, key));
-		else {
+		if (href) {
+			if (isExternalLink) grouping[grouping.length - 1].push(/* @__PURE__ */ jsx(SubmenuItem, {
+				$isActive: false,
+				children: /* @__PURE__ */ jsxs(SubmenuItemAnchor, {
+					href,
+					target: "_blank",
+					children: [title, /* @__PURE__ */ jsx(ExternalIconWrapper, { children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ExternalLink",
+						color: "dimmed",
+						size: 10
+					}) })]
+				})
+			}, key));
+			else grouping[grouping.length - 1].push(/* @__PURE__ */ jsx(SubmenuItem, {
+				$isActive: false,
+				children: /* @__PURE__ */ jsx(SubmenuItemLink, {
+					to: href,
+					onClick: () => onClickCallback?.(-1),
+					children: title
+				})
+			}, key));
+		} else {
 			if (grouping[grouping.length - 1].length > 1) grouping.push([]);
 			grouping[grouping.length - 1].push(/* @__PURE__ */ jsx(SubmenuHeader, { children: /* @__PURE__ */ jsx(SubmenuItemTitle, { children: title }) }, key));
 		}
@@ -15641,7 +15691,7 @@ var MainMenu = ({ content, home = "/", logoMark, logoText, keepOpenText = "Keep
 	}, [focusedContext]);
 	return /* @__PURE__ */ jsx(PushContainer, {
 		$isPinned: menuState.isMenuPinned,
-		children: ReactDom.createPortal(/* @__PURE__ */ jsx(Container$9, {
+		children: ReactDOM.createPortal(/* @__PURE__ */ jsx(Container$9, {
 			$open: menuState.isMenuOpen,
 			$desktopSize: menuState.desktopSize,
 			onPointerEnter: menuState.isMenuPinned ? () => {} : autoMenuOpen,