@sensorario/sg-components 0.0.90 → 0.0.94

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+import './App.css';
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/components/Authenticator/Authenticator.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './Authenticator.css';
+type AuthenticatorProps = {
+    isLoggedIn: boolean;
+    handleLogin: () => void;
+    handleLogout: () => void;
+};
+export declare const Authenticator: React.FC<AuthenticatorProps>;
+export default Authenticator;

package/dist/components/Authenticator/Authenticator.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Authenticator from './Authenticator';
+declare const meta: Meta<typeof Authenticator>;
+export default meta;
+type Story = StoryObj<typeof Authenticator>;
+export declare const Default: Story;
+export declare const LoggedIn: Story;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Button.css';
+import { type IconName } from '../Icon/Icon';
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+    icon?: IconName;
+    iconOnly?: boolean;
+};
+export declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/Button/Button.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './ColorPicker.css';
+export interface ColorPickerProps {
+    value: string;
+    onChange: (color: string) => void;
+    swatches: string[];
+}
+export declare const ColorPicker: React.FC<ColorPickerProps>;
+export default ColorPicker;

package/dist/components/ColorPicker/ColorPicker.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ColorPicker from './ColorPicker';
+declare const meta: Meta<typeof ColorPicker>;
+export default meta;
+type Story = StoryObj<typeof ColorPicker>;
+export declare const Default: Story;

package/dist/components/CookieConsent/CookieConsent.d.ts

@@ -0,0 +1,6 @@
+import './cookie-consent.css';
+interface CookieConsentProps {
+    privacyPolicyHref?: string;
+}
+export declare const CookieConsent: ({ privacyPolicyHref, }: CookieConsentProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/CookieConsent/CookieConsent.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CookieConsent } from './CookieConsent';
+declare const meta: Meta<typeof CookieConsent>;
+export default meta;
+type Story = StoryObj<typeof CookieConsent>;
+export declare const Default: Story;

package/dist/components/FontPicker/FontPicker.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './FontPicker.css';
+export interface FontPickerProps {
+    value: string;
+    onChange: (fontFamily: string) => void;
+    options: string[];
+}
+export declare const FontPicker: React.FC<FontPickerProps>;
+export default FontPicker;

package/dist/components/FontPicker/FontPicker.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import FontPicker from './FontPicker';
+declare const meta: Meta<typeof FontPicker>;
+export default meta;
+type Story = StoryObj<typeof FontPicker>;
+export declare const Default: Story;

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,11 @@
+import './footer.css';
+interface FooterProps {
+    copyright?: string;
+    href?: string;
+    links?: {
+        label: string;
+        href: string;
+    }[];
+}
+export declare const Footer: ({ copyright, href, links }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Footer/Footer.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Footer } from './Footer';
+declare const meta: Meta<typeof Footer>;
+export default meta;
+type Story = StoryObj<typeof Footer>;
+export declare const Default: Story;
+export declare const WithLinks: Story;
+export declare const CustomCopyright: Story;

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import './Header.css';
+interface HeaderProps {
+    onNavigate?: (page: string) => void;
+    title?: string;
+    homePageKey?: string;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const Header: ({ onNavigate, title, homePageKey, children, className, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Header/Header.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof Header>;
+export declare const Default: Story;

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './Icon.css';
+export type IconName = 'menu' | 'layout' | 'edit' | 'help-circle' | 'check' | 'x' | 'file-plus' | 'link' | 'share-2' | 'download' | 'book' | 'printer' | 'eye' | 'columns' | 'sidebar-left' | 'sidebar-right' | 'play' | 'pause' | 'volume-2' | 'tech-node' | 'tech-go' | 'tech-php';
+export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
+    name: IconName;
+    size?: number;
+}
+export declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/components/Icon/Icon.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from './Icon';
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Default: Story;
+export declare const AllIcons: Story;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Input.css';
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+    invalid?: boolean;
+};
+declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/components/Input/Input.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Input from './Input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+export declare const Invalid: Story;

package/dist/components/LoginModal/LoginModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './LoginModal.css';
+interface LoginModalProps {
+    open: boolean;
+    onClose: () => void;
+    onLogin: (username: string, password: string) => void;
+}
+declare const LoginModal: React.FC<LoginModalProps>;
+export default LoginModal;

package/dist/components/LoginModal/LoginModal.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LoginModal from './LoginModal';
+declare const meta: Meta<typeof LoginModal>;
+export default meta;
+type Story = StoryObj<typeof LoginModal>;
+export declare const Default: Story;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './Modal.css';
+export type ModalButton = {
+    label: string;
+    onClick: () => void;
+};
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    buttons?: ModalButton[];
+    footer?: React.ReactNode;
+    closeLabel?: string;
+    className?: string;
+}
+export declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export declare const Default: Story;
+export declare const WithIconAndButtons: Story;
+export declare const WithCustomFooter: Story;

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './PasswordInput.css';
+type PasswordInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+};
+declare const PasswordInput: React.FC<PasswordInputProps>;
+export default PasswordInput;

package/dist/components/PasswordInput/PasswordInput.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PasswordInput from './PasswordInput';
+declare const meta: Meta<typeof PasswordInput>;
+export default meta;
+type Story = StoryObj<typeof PasswordInput>;
+export declare const Default: Story;

package/dist/components/Quadrato/Header/QuadratoHeader.d.ts

@@ -0,0 +1,24 @@
+import './QuadratoHeader.css';
+interface QuadratoHeaderProps {
+    title?: string;
+    homePageKey?: string;
+    onNavigate?: (page: string) => void;
+    /** Name of the shared .simonegentili.com auth cookie to check. */
+    cookieName?: string;
+    /** Username to display once authenticated. If omitted, falls back to decoding `usernameJwtField` from the JWT cookie. */
+    username?: string | null;
+    /** JWT claim to use as username when `username` prop is not provided. Default: 'sub' */
+    usernameJwtField?: string;
+    /** Delegated login call, e.g. AjaxRepository.authenticate. Must set the auth cookie on success. */
+    onLogin: (username: string, password: string) => void | Promise<void>;
+    /** Delegated logout call. Must clear the auth cookie. */
+    onLogout?: () => void;
+    /** Notified on mount and after every login/logout with the current auth state. */
+    onUserAuthenticated?: (isAuthenticated: boolean, username: string | null) => void;
+}
+export interface QuadratoHeaderHandle {
+    /** Forces the login modal open, e.g. when a consumer action requires auth first. */
+    openLoginModal: () => void;
+}
+export declare const QuadratoHeader: import("react").ForwardRefExoticComponent<QuadratoHeaderProps & import("react").RefAttributes<QuadratoHeaderHandle>>;
+export {};

package/dist/components/Quadrato/Header/QuadratoHeader.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { QuadratoHeader } from './QuadratoHeader';
+declare const meta: Meta<typeof QuadratoHeader>;
+export default meta;
+type Story = StoryObj<typeof QuadratoHeader>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/components/SG/Footer/SGFooter.d.ts

@@ -0,0 +1 @@
+export declare const SGFooter: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/SG/Footer/SGFooter.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SGFooter } from './SGFooter';
+declare const meta: Meta<typeof SGFooter>;
+export default meta;
+type Story = StoryObj<typeof SGFooter>;
+export declare const Default: Story;

package/dist/components/SG/Header/SGHeader.d.ts

@@ -0,0 +1,5 @@
+interface SGHeaderProps {
+    onNavigate?: (page: string) => void;
+}
+export declare const SGHeader: ({ onNavigate }: SGHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SG/Header/SGHeader.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SGHeader } from './SGHeader';
+declare const meta: Meta<typeof SGHeader>;
+export default meta;
+type Story = StoryObj<typeof SGHeader>;
+export declare const Default: Story;

package/dist/components/SetPasswordModal/SetPasswordModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './SetPasswordModal.css';
+interface SetPasswordModalProps {
+    open: boolean;
+    onClose: () => void;
+    onSubmit: (newPassword: string) => void;
+}
+export declare const SetPasswordModal: React.FC<SetPasswordModalProps>;
+export default SetPasswordModal;

package/dist/components/SetPasswordModal/SetPasswordModal.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SetPasswordModal } from './SetPasswordModal';
+declare const meta: Meta<typeof SetPasswordModal>;
+export default meta;
+type Story = StoryObj<typeof SetPasswordModal>;
+export declare const Default: Story;

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './Toggle.css';
+export interface ToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label: string;
+}
+export declare const Toggle: React.FC<ToggleProps>;
+export default Toggle;

package/dist/components/Toggle/Toggle.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Toggle from './Toggle';
+declare const meta: Meta<typeof Toggle>;
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+export declare const Default: Story;

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export * from './components/Button/Button';
+export * from './components/Icon/Icon';
+export * from './components/Footer/Footer';
+export * from './components/SG/Footer/SGFooter';
+export * from './components/CookieConsent/CookieConsent';
+export * from './components/Header/Header';
+export * from './components/SG/Header/SGHeader';
+export * from './components/Quadrato/Header/QuadratoHeader';
+export * from './components/Authenticator/Authenticator';
+export * from './components/LoginModal/LoginModal';
+export * from './components/SetPasswordModal/SetPasswordModal';
+export * from './components/Modal/Modal';
+export * from './components/ColorPicker/ColorPicker';
+export * from './components/FontPicker/FontPicker';
+export * from './components/Toggle/Toggle';

package/dist/index.es.js

@@ -1,169 +1,218 @@
-import e, { forwardRef as t, useEffect as n, useImperativeHandle as r, useState as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import e, { forwardRef as t, useEffect as n, useImperativeHandle as r, useRef as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/Icon/Icon.tsx
-var c = {
-	menu: /* @__PURE__ */ s(a, { children: [
-		/* @__PURE__ */ o("line", {
+var l = {
+	menu: /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("line", {
 			x1: "3",
 			y1: "6",
 			x2: "21",
 			y2: "6"
 		}),
-		/* @__PURE__ */ o("line", {
+		/* @__PURE__ */ s("line", {
 			x1: "3",
 			y1: "12",
 			x2: "21",
 			y2: "12"
 		}),
-		/* @__PURE__ */ o("line", {
+		/* @__PURE__ */ s("line", {
 			x1: "3",
 			y1: "18",
 			x2: "21",
 			y2: "18"
 		})
 	] }),
-	layout: /* @__PURE__ */ s(a, { children: [
-		/* @__PURE__ */ o("rect", {
+	layout: /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("rect", {
 			x: "3",
 			y: "3",
 			width: "18",
 			height: "18",
 			rx: "2"
 		}),
-		/* @__PURE__ */ o("line", {
+		/* @__PURE__ */ s("line", {
 			x1: "3",
 			y1: "9",
 			x2: "21",
 			y2: "9"
 		}),
-		/* @__PURE__ */ o("line", {
+		/* @__PURE__ */ s("line", {
 			x1: "9",
 			y1: "9",
 			x2: "9",
 			y2: "21"
 		})
 	] }),
-	edit: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("path", { d: "M4 20l1-4L16 5l3 3L8 19l-4 1z" }), /* @__PURE__ */ o("line", {
+	edit: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("path", { d: "M4 20l1-4L16 5l3 3L8 19l-4 1z" }), /* @__PURE__ */ s("line", {
 		x1: "14",
 		y1: "7",
 		x2: "17",
 		y2: "10"
 	})] }),
-	"help-circle": /* @__PURE__ */ s(a, { children: [
-		/* @__PURE__ */ o("circle", {
+	"help-circle": /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("circle", {
 			cx: "12",
 			cy: "12",
 			r: "9"
 		}),
-		/* @__PURE__ */ o("path", { d: "M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4" }),
-		/* @__PURE__ */ o("line", {
+		/* @__PURE__ */ s("path", { d: "M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4" }),
+		/* @__PURE__ */ s("line", {
 			x1: "12",
 			y1: "17",
 			x2: "12",
 			y2: "17.01"
 		})
 	] }),
-	check: /* @__PURE__ */ o("polyline", { points: "4 12 9 17 20 6" }),
-	x: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("line", {
+	check: /* @__PURE__ */ s("polyline", { points: "4 12 9 17 20 6" }),
+	x: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("line", {
 		x1: "6",
 		y1: "6",
 		x2: "18",
 		y2: "18"
-	}), /* @__PURE__ */ o("line", {
+	}), /* @__PURE__ */ s("line", {
 		x1: "18",
 		y1: "6",
 		x2: "6",
 		y2: "18"
 	})] }),
-	"file-plus": /* @__PURE__ */ s(a, { children: [
-		/* @__PURE__ */ o("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
-		/* @__PURE__ */ o("polyline", { points: "14 3 14 8 19 8" }),
-		/* @__PURE__ */ o("line", {
+	"file-plus": /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+		/* @__PURE__ */ s("polyline", { points: "14 3 14 8 19 8" }),
+		/* @__PURE__ */ s("line", {
 			x1: "12",
 			y1: "12",
 			x2: "12",
 			y2: "17"
 		}),
-		/* @__PURE__ */ o("line", {
+		/* @__PURE__ */ s("line", {
 			x1: "9.5",
 			y1: "14.5",
 			x2: "14.5",
 			y2: "14.5"
 		})
 	] }),
-	link: /* @__PURE__ */ s(a, { children: [
-		/* @__PURE__ */ o("path", { d: "M9 15l6-6" }),
-		/* @__PURE__ */ o("path", { d: "M8 13.5 5.5 16a3 3 0 0 0 4.24 4.24l2.5-2.5" }),
-		/* @__PURE__ */ o("path", { d: "M16 10.5 18.5 8a3 3 0 0 0-4.24-4.24l-2.5 2.5" })
+	link: /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("path", { d: "M9 15l6-6" }),
+		/* @__PURE__ */ s("path", { d: "M8 13.5 5.5 16a3 3 0 0 0 4.24 4.24l2.5-2.5" }),
+		/* @__PURE__ */ s("path", { d: "M16 10.5 18.5 8a3 3 0 0 0-4.24-4.24l-2.5 2.5" })
 	] }),
-	"share-2": /* @__PURE__ */ s(a, { children: [
-		/* @__PURE__ */ o("circle", {
+	"share-2": /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("circle", {
 			cx: "6",
 			cy: "12",
 			r: "2.4"
 		}),
-		/* @__PURE__ */ o("circle", {
+		/* @__PURE__ */ s("circle", {
 			cx: "18",
 			cy: "6",
 			r: "2.4"
 		}),
-		/* @__PURE__ */ o("circle", {
+		/* @__PURE__ */ s("circle", {
 			cx: "18",
 			cy: "18",
 			r: "2.4"
 		}),
-		/* @__PURE__ */ o("line", {
+		/* @__PURE__ */ s("line", {
 			x1: "8.2",
 			y1: "10.8",
 			x2: "15.8",
 			y2: "7.2"
 		}),
-		/* @__PURE__ */ o("line", {
+		/* @__PURE__ */ s("line", {
 			x1: "8.2",
 			y1: "13.2",
 			x2: "15.8",
 			y2: "16.8"
 		})
 	] }),
-	download: /* @__PURE__ */ s(a, { children: [
-		/* @__PURE__ */ o("path", { d: "M12 3v12" }),
-		/* @__PURE__ */ o("polyline", { points: "7 11 12 16 17 11" }),
-		/* @__PURE__ */ o("path", { d: "M5 19h14" })
+	download: /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("path", { d: "M12 3v12" }),
+		/* @__PURE__ */ s("polyline", { points: "7 11 12 16 17 11" }),
+		/* @__PURE__ */ s("path", { d: "M5 19h14" })
 	] }),
-	book: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("path", { d: "M4 5.5A2.5 2.5 0 0 1 6.5 3H12v18H6.5A2.5 2.5 0 0 1 4 18.5z" }), /* @__PURE__ */ o("path", { d: "M20 5.5A2.5 2.5 0 0 0 17.5 3H12v18h5.5a2.5 2.5 0 0 0 2.5-2.5z" })] }),
-	printer: /* @__PURE__ */ s(a, { children: [
-		/* @__PURE__ */ o("path", { d: "M6 9V3h12v6" }),
-		/* @__PURE__ */ o("rect", {
+	book: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("path", { d: "M4 5.5A2.5 2.5 0 0 1 6.5 3H12v18H6.5A2.5 2.5 0 0 1 4 18.5z" }), /* @__PURE__ */ s("path", { d: "M20 5.5A2.5 2.5 0 0 0 17.5 3H12v18h5.5a2.5 2.5 0 0 0 2.5-2.5z" })] }),
+	printer: /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("path", { d: "M6 9V3h12v6" }),
+		/* @__PURE__ */ s("rect", {
 			x: "4",
 			y: "9",
 			width: "16",
 			height: "8",
 			rx: "1.5"
 		}),
-		/* @__PURE__ */ o("path", { d: "M6 17v4h12v-4" })
+		/* @__PURE__ */ s("path", { d: "M6 17v4h12v-4" })
 	] }),
-	eye: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("path", { d: "M2 12c2.5-5 7-8 10-8s7.5 3 10 8c-2.5 5-7 8-10 8s-7.5-3-10-8z" }), /* @__PURE__ */ o("circle", {
+	eye: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("path", { d: "M2 12c2.5-5 7-8 10-8s7.5 3 10 8c-2.5 5-7 8-10 8s-7.5-3-10-8z" }), /* @__PURE__ */ s("circle", {
 		cx: "12",
 		cy: "12",
 		r: "3"
 	})] }),
-	columns: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("rect", {
+	columns: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
 		x: "3",
 		y: "4",
 		width: "8",
 		height: "16",
 		rx: "1.5"
-	}), /* @__PURE__ */ o("rect", {
+	}), /* @__PURE__ */ s("rect", {
 		x: "13",
 		y: "4",
 		width: "8",
 		height: "16",
 		rx: "1.5"
 	})] }),
-	"tech-node": /* @__PURE__ */ o("polygon", { points: "12,3 19.8,7.5 19.8,16.5 12,21 4.2,16.5 4.2,7.5" }),
-	"tech-go": /* @__PURE__ */ o("polygon", { points: "12,3 21,12 12,21 3,12" }),
-	"tech-php": /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("path", { d: "M9 4c-1.5 0-2.5 1-2.5 2.5v3c0 1-.5 1.5-1.5 2.5 1 1 1.5 1.5 1.5 2.5v3c0 1.5 1 2.5 2.5 2.5" }), /* @__PURE__ */ o("path", { d: "M15 4c1.5 0 2.5 1 2.5 2.5v3c0 1 .5 1.5 1.5 2.5-1 1-1.5 1.5-1.5 2.5v3c0 1.5-1 2.5-2.5 2.5" })] })
-}, l = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ o("svg", {
+	"sidebar-left": /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
+		x: "3",
+		y: "4",
+		width: "18",
+		height: "16",
+		rx: "2"
+	}), /* @__PURE__ */ s("rect", {
+		x: "4",
+		y: "5",
+		width: "6",
+		height: "14",
+		rx: "1",
+		fill: "currentColor",
+		stroke: "none"
+	})] }),
+	"sidebar-right": /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
+		x: "3",
+		y: "4",
+		width: "18",
+		height: "16",
+		rx: "2"
+	}), /* @__PURE__ */ s("rect", {
+		x: "14",
+		y: "5",
+		width: "6",
+		height: "14",
+		rx: "1",
+		fill: "currentColor",
+		stroke: "none"
+	})] }),
+	play: /* @__PURE__ */ s("polygon", { points: "5 3 19 12 5 21 5 3" }),
+	pause: /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("rect", {
+		x: "6",
+		y: "4",
+		width: "4",
+		height: "16",
+		rx: "1"
+	}), /* @__PURE__ */ s("rect", {
+		x: "14",
+		y: "4",
+		width: "4",
+		height: "16",
+		rx: "1"
+	})] }),
+	"volume-2": /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+		/* @__PURE__ */ s("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" }),
+		/* @__PURE__ */ s("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" })
+	] }),
+	"tech-node": /* @__PURE__ */ s("polygon", { points: "12,3 19.8,7.5 19.8,16.5 12,21 4.2,16.5 4.2,7.5" }),
+	"tech-go": /* @__PURE__ */ s("polygon", { points: "12,3 21,12 12,21 3,12" }),
+	"tech-php": /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("path", { d: "M9 4c-1.5 0-2.5 1-2.5 2.5v3c0 1-.5 1.5-1.5 2.5 1 1 1.5 1.5 1.5 2.5v3c0 1.5 1 2.5 2.5 2.5" }), /* @__PURE__ */ s("path", { d: "M15 4c1.5 0 2.5 1 2.5 2.5v3c0 1 .5 1.5 1.5 2.5-1 1-1.5 1.5-1.5 2.5v3c0 1.5-1 2.5-2.5 2.5" })] })
+}, u = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ s("svg", {
 	className: "sg-icon",
 	width: t,
 	height: t,
@@ -175,8 +224,8 @@ var c = {
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
 	...n,
-	children: c[e]
-}), u = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...a }) => /* @__PURE__ */ s("button", {
+	children: l[e]
+}), d = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...a }) => /* @__PURE__ */ c("button", {
 	className: [
 		"custom-button",
 		t ? "custom-button-with-icon" : "",
@@ -184,41 +233,41 @@ var c = {
 	].filter(Boolean).join(" "),
 	title: i ?? (n ? e : void 0),
 	...a,
-	children: [t && /* @__PURE__ */ o(l, { name: t }), /* @__PURE__ */ o("span", {
+	children: [t && /* @__PURE__ */ s(u, { name: t }), /* @__PURE__ */ s("span", {
 		className: n ? "custom-button-label-visually-hidden" : void 0,
 		children: e
 	})]
-}), d = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ s("footer", {
+}), f = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ c("footer", {
 	className: "footer",
-	children: [/* @__PURE__ */ o("span", { children: /* @__PURE__ */ o("a", {
+	children: [/* @__PURE__ */ s("span", { children: /* @__PURE__ */ s("a", {
 		href: t,
 		children: e
-	}) }), n.length > 0 && /* @__PURE__ */ o("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ o("a", {
+	}) }), n.length > 0 && /* @__PURE__ */ s("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ s("a", {
 		href: t,
 		style: { marginLeft: "16px" },
 		children: e
 	}, t)) })]
-}), f = "simonegentili.com-cookie-consent", p = 3600 * 24 * 365;
-function m() {
-	return document.cookie.split("; ").some((e) => e.startsWith(`${f}=`));
-}
+}), p = "simonegentili.com-cookie-consent", m = 3600 * 24 * 365;
 function h() {
-	document.cookie = `${f}=accepted; path=/; domain=.simonegentili.com; max-age=${p}; secure; samesite=strict`;
+	return document.cookie.split("; ").some((e) => e.startsWith(`${p}=`));
 }
-var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
-	let [t, r] = i(!1);
+function g() {
+	document.cookie = `${p}=accepted; path=/; domain=.simonegentili.com; max-age=${m}; secure; samesite=strict`;
+}
+var _ = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
+	let [t, r] = a(!1);
 	return n(() => {
-		r(!m());
-	}, []), t ? /* @__PURE__ */ s("div", {
+		r(!h());
+	}, []), t ? /* @__PURE__ */ c("div", {
 		className: "cookie-consent",
 		role: "region",
 		"aria-label": "Informativa sui cookie",
-		children: [/* @__PURE__ */ s("p", {
+		children: [/* @__PURE__ */ c("p", {
 			className: "cookie-consent-text",
 			children: [
 				"Questo sito utilizza esclusivamente cookie tecnici necessari al funzionamento (es. autenticazione). Non sono presenti cookie di profilazione o di terze parti. Per saperne di più consulta la",
 				" ",
-				/* @__PURE__ */ o("a", {
+				/* @__PURE__ */ s("a", {
 					href: e,
 					target: "_blank",
 					rel: "noopener noreferrer",
@@ -226,15 +275,15 @@ var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 				}),
 				"."
 			]
-		}), /* @__PURE__ */ o(u, {
+		}), /* @__PURE__ */ s(d, {
 			label: "Accetta",
 			onClick: () => {
-				h(), r(!1);
+				g(), r(!1);
 			},
 			className: "cookie-consent-accept"
 		})]
 	}) : null;
-}, _ = [
+}, v = [
 	{
 		label: "guitar",
 		href: "https://guitar.simonegentili.com"
@@ -255,63 +304,63 @@ var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 		label: "code2image",
 		href: "https://code2image.simonegentili.com"
 	}
-], v = () => /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(d, {
+], y = () => /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(f, {
 	href: "https://simonegentili.com",
 	copyright: "© 2026 simonegentili.com",
-	links: _
-}), /* @__PURE__ */ o(g, {})] }), y = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ o("header", {
+	links: v
+}), /* @__PURE__ */ s(_, {})] }), b = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ s("header", {
 	className: i ? `header ${i}` : "header",
-	children: /* @__PURE__ */ s("div", {
+	children: /* @__PURE__ */ c("div", {
 		className: "header-container",
-		children: [/* @__PURE__ */ o("div", {
+		children: [/* @__PURE__ */ s("div", {
 			className: "logo",
 			onClick: () => {
 				e?.(n);
 			},
-			children: /* @__PURE__ */ o("h1", {
+			children: /* @__PURE__ */ s("h1", {
 				className: "logo-text",
 				children: t
 			})
-		}), r && /* @__PURE__ */ o("div", {
+		}), r && /* @__PURE__ */ s("div", {
 			className: "header-actions",
 			children: r
 		})]
 	})
-}), b = ({ onNavigate: e }) => /* @__PURE__ */ o(y, {
+}), x = ({ onNavigate: e }) => /* @__PURE__ */ s(b, {
 	onNavigate: e,
 	title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
 	homePageKey: "home"
-}), x = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ o(a, { children: e ? /* @__PURE__ */ o("button", {
+}), S = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ s(o, { children: e ? /* @__PURE__ */ s("button", {
 	onClick: n,
 	style: {
 		fontSize: "0.9rem",
 		padding: "0.4rem 1rem"
 	},
 	children: "logout"
-}) : /* @__PURE__ */ o("button", {
+}) : /* @__PURE__ */ s("button", {
 	onClick: t,
 	style: {
 		fontSize: "0.9rem",
 		padding: "0.4rem 1rem"
 	},
 	children: "Login"
-}) }), S = 220, C = ({ open: t, onClose: r, title: a, icon: c, children: l, buttons: d, footer: f, closeLabel: p = "Close", className: m }) => {
-	let [h, g] = i(!1), [_, v] = i({
+}) }), C = 220, w = ({ open: t, onClose: r, title: i, icon: o, children: l, buttons: u, footer: f, closeLabel: p = "Close", className: m }) => {
+	let [h, g] = a(!1), [_, v] = a({
 		x: 0,
 		y: 0
-	}), y = e.useRef(null), [b, x] = i(!1), C = (e) => {
+	}), y = e.useRef(null), [b, x] = a(!1), S = (e) => {
 		h || (g(!0), setTimeout(() => {
 			g(!1), e();
-		}, S));
+		}, C));
 	};
 	n(() => {
 		if (!t) return;
 		let e = (e) => {
-			e.key === "Escape" && C(r);
+			e.key === "Escape" && S(r);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [t, r]);
-	let [w, T] = i(t);
+	let [w, T] = a(t);
 	if (t !== w && (T(t), t && v({
 		x: 0,
 		y: 0
@@ -335,10 +384,10 @@ var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 	function O() {
 		y.current = null, x(!1);
 	}
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ s("div", {
 		className: `modal-overlay${h ? " modal-overlay-closing" : ""}`,
-		onClick: () => C(r),
-		children: /* @__PURE__ */ s("div", {
+		onClick: () => S(r),
+		children: /* @__PURE__ */ c("div", {
 			className: `modal-content${m ? ` ${m}` : ""}${h ? " modal-content-closing" : ""}`,
 			style: {
 				"--drag-x": `${_.x}px`,
@@ -346,92 +395,92 @@ var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 			},
 			onClick: (e) => e.stopPropagation(),
 			children: [
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ c("div", {
 					className: `modal-header${b ? " modal-header-dragging" : ""}`,
 					onPointerDown: E,
 					onPointerMove: D,
 					onPointerUp: O,
 					onPointerCancel: O,
 					children: [
-						c && /* @__PURE__ */ o("span", {
+						o && /* @__PURE__ */ s("span", {
 							className: "modal-icon",
-							children: c
+							children: o
 						}),
-						a && /* @__PURE__ */ o("h2", {
+						i && /* @__PURE__ */ s("h2", {
 							className: "modal-title",
-							children: a
+							children: i
 						}),
-						/* @__PURE__ */ o("button", {
+						/* @__PURE__ */ s("button", {
 							type: "button",
 							className: "modal-close",
 							"aria-label": p,
-							onClick: () => C(r),
+							onClick: () => S(r),
 							disabled: h,
 							children: "×"
 						})
 					]
 				}),
-				/* @__PURE__ */ o("div", {
+				/* @__PURE__ */ s("div", {
 					className: "modal-children",
 					children: l
 				}),
-				d && /* @__PURE__ */ o("div", {
+				u && /* @__PURE__ */ s("div", {
 					className: "modal-footer",
-					children: d.map((e, t) => /* @__PURE__ */ o(u, {
+					children: u.map((e, t) => /* @__PURE__ */ s(d, {
 						label: e.label,
-						onClick: () => C(e.onClick),
+						onClick: () => S(e.onClick),
 						disabled: h
 					}, t))
 				}),
-				f && /* @__PURE__ */ o("div", {
+				f && /* @__PURE__ */ s("div", {
 					className: "modal-footer",
 					children: f
 				})
 			]
 		})
 	});
-}, w = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ s("div", {
+}, T = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ c("div", {
 	className: "input-wrapper",
-	children: [e && /* @__PURE__ */ o("label", {
+	children: [e && /* @__PURE__ */ s("label", {
 		className: "input-label",
 		children: e
-	}), /* @__PURE__ */ o("input", {
+	}), /* @__PURE__ */ s("input", {
 		className: `input-field${t ? " input-field--invalid" : ""}`,
 		...n
 	})]
-}), T = ({ label: e, ...t }) => /* @__PURE__ */ s("div", {
+}), E = ({ label: e, ...t }) => /* @__PURE__ */ c("div", {
 	className: "input-wrapper",
-	children: [e && /* @__PURE__ */ o("label", {
+	children: [e && /* @__PURE__ */ s("label", {
 		className: "input-label",
 		children: e
-	}), /* @__PURE__ */ o("input", {
+	}), /* @__PURE__ */ s("input", {
 		type: "password",
 		className: "input-field",
 		...t
 	})]
-}), E = ({ open: e, onClose: t, onLogin: n }) => {
-	let [r, a] = i(""), [c, l] = i("");
-	return /* @__PURE__ */ o(C, {
+}), D = ({ open: e, onClose: t, onLogin: n }) => {
+	let [r, i] = a(""), [o, l] = a("");
+	return /* @__PURE__ */ s(w, {
 		open: e,
 		onClose: t,
 		title: "Login",
-		children: /* @__PURE__ */ s("form", {
+		children: /* @__PURE__ */ c("form", {
 			onSubmit: (e) => {
-				e.preventDefault(), n(r, c);
+				e.preventDefault(), n(r, o);
 			},
 			children: [
-				/* @__PURE__ */ o(w, {
+				/* @__PURE__ */ s(T, {
 					label: "Username",
 					value: r,
-					onChange: (e) => a(e.target.value),
+					onChange: (e) => i(e.target.value),
 					autoFocus: !0
 				}),
-				/* @__PURE__ */ o(T, {
+				/* @__PURE__ */ s(E, {
 					label: "Password",
-					value: c,
+					value: o,
 					onChange: (e) => l(e.target.value)
 				}),
-				/* @__PURE__ */ o(u, {
+				/* @__PURE__ */ s(d, {
 					label: "Login",
 					type: "submit",
 					style: { width: "100%" }
@@ -439,90 +488,90 @@ var g = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 			]
 		})
 	});
-}, D = "simonegentili.com-access-token", O = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), k = (e) => {
+}, O = "simonegentili.com-access-token", k = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), A = (e) => {
 	let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
 	return t ? t.slice(e.length + 1) : null;
-}, A = (e, t) => {
+}, j = (e, t) => {
 	try {
 		return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
 	} catch {
 		return null;
 	}
-}, j = t(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: c, cookieName: l = D, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: p, onUserAuthenticated: m }, h) => {
-	let [g, _] = i(() => O(l)), [v, b] = i(!1);
-	r(h, () => ({ openLoginModal: () => b(!0) }));
-	let S = u ?? (g ? A(k(l) ?? "", d) : null);
+}, M = t(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: i, cookieName: l = O, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: p, onUserAuthenticated: m }, h) => {
+	let [g, _] = a(() => k(l)), [v, y] = a(!1);
+	r(h, () => ({ openLoginModal: () => y(!0) }));
+	let x = u ?? (g ? j(A(l) ?? "", d) : null);
 	return n(() => {
-		m?.(g, g ? S : null);
-	}, []), /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(y, {
-		onNavigate: c,
+		m?.(g, g ? x : null);
+	}, []), /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(b, {
+		onNavigate: i,
 		title: e,
 		homePageKey: t,
 		className: "quadrato-header",
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ c("div", {
 			className: "quadrato-header-auth",
-			children: [g && S && /* @__PURE__ */ o("span", {
+			children: [g && x && /* @__PURE__ */ s("span", {
 				className: "quadrato-header-username",
-				children: S
-			}), /* @__PURE__ */ o(x, {
+				children: x
+			}), /* @__PURE__ */ s(S, {
 				isLoggedIn: g,
-				handleLogin: () => b(!0),
+				handleLogin: () => y(!0),
 				handleLogout: () => {
 					p?.();
-					let e = O(l);
+					let e = k(l);
 					_(e), m?.(e, null);
 				}
 			})]
 		})
-	}), /* @__PURE__ */ o(E, {
+	}), /* @__PURE__ */ s(D, {
 		open: v,
-		onClose: () => b(!1),
+		onClose: () => y(!1),
 		onLogin: async (e, t) => {
 			await f(e, t);
-			let n = O(l);
-			_(n), b(!1), m?.(n, n ? u ?? e : null);
+			let n = k(l);
+			_(n), y(!1), m?.(n, n ? u ?? e : null);
 		}
 	})] });
 });
-j.displayName = "QuadratoHeader";
+M.displayName = "QuadratoHeader";
 //#endregion
 //#region src/components/SetPasswordModal/SetPasswordModal.tsx
-var M = ({ open: e, onClose: t, onSubmit: n }) => {
-	let [r, a] = i(""), [c, l] = i(""), [d, f] = i("");
-	return /* @__PURE__ */ o(C, {
+var N = ({ open: e, onClose: t, onSubmit: n }) => {
+	let [r, i] = a(""), [o, l] = a(""), [u, f] = a("");
+	return /* @__PURE__ */ s(w, {
 		open: e,
 		onClose: t,
 		title: "Imposta una nuova password",
-		children: /* @__PURE__ */ s("form", {
+		children: /* @__PURE__ */ c("form", {
 			className: "set-password-modal-form",
 			onSubmit: (e) => {
-				if (e.preventDefault(), r === "" || c === "") {
+				if (e.preventDefault(), r === "" || o === "") {
 					f("Inserisci ed conferma la nuova password.");
 					return;
 				}
-				if (r !== c) {
+				if (r !== o) {
 					f("Le password non coincidono.");
 					return;
 				}
 				f(""), n(r);
 			},
 			children: [
-				/* @__PURE__ */ o(T, {
+				/* @__PURE__ */ s(E, {
 					label: "Nuova password",
 					value: r,
-					onChange: (e) => a(e.target.value),
+					onChange: (e) => i(e.target.value),
 					autoFocus: !0
 				}),
-				/* @__PURE__ */ o(T, {
+				/* @__PURE__ */ s(E, {
 					label: "Conferma password",
-					value: c,
+					value: o,
 					onChange: (e) => l(e.target.value)
 				}),
-				d && /* @__PURE__ */ o("p", {
+				u && /* @__PURE__ */ s("p", {
 					className: "set-password-modal-error",
-					children: d
+					children: u
 				}),
-				/* @__PURE__ */ o(u, {
+				/* @__PURE__ */ s(d, {
 					label: "Salva password",
 					type: "submit",
 					style: { width: "100%" }
@@ -530,6 +579,113 @@ var M = ({ open: e, onClose: t, onSubmit: n }) => {
 			]
 		})
 	});
-};
+}, P = ({ value: e, onChange: t, swatches: r }) => {
+	let [o, l] = a(!1), u = i(null);
+	return n(() => {
+		if (!o) return;
+		let e = (e) => {
+			u.current && !u.current.contains(e.target) && l(!1);
+		}, t = (e) => {
+			e.key === "Escape" && l(!1);
+		};
+		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		};
+	}, [o]), /* @__PURE__ */ c("div", {
+		ref: u,
+		className: "sg-color-picker",
+		children: [/* @__PURE__ */ c("button", {
+			type: "button",
+			className: "sg-color-picker-toggle",
+			onClick: () => l((e) => !e),
+			children: [/* @__PURE__ */ s("span", {
+				className: "sg-color-picker-swatch",
+				style: { background: e }
+			}), /* @__PURE__ */ s("span", {
+				className: "sg-color-picker-toggle-label",
+				children: e
+			})]
+		}), o && /* @__PURE__ */ c("div", {
+			className: "sg-color-picker-popover",
+			children: [/* @__PURE__ */ s("div", {
+				className: "sg-color-picker-grid",
+				children: r.map((n) => /* @__PURE__ */ s("button", {
+					type: "button",
+					title: n,
+					className: `sg-color-picker-swatch-button${n.toLowerCase() === e?.toLowerCase() ? " active" : ""}`,
+					style: { background: n },
+					onClick: () => {
+						t(n), l(!1);
+					}
+				}, n))
+			}), /* @__PURE__ */ c("label", {
+				className: "sg-color-picker-custom",
+				children: ["Colore personalizzato", /* @__PURE__ */ s("input", {
+					type: "color",
+					value: e,
+					onChange: (e) => t(e.target.value)
+				})]
+			})]
+		})]
+	});
+}, F = (e) => e.split(",")[0].replace(/'/g, ""), I = ({ value: e, onChange: t, options: r }) => {
+	let [o, l] = a(!1), u = i(null);
+	return n(() => {
+		if (!o) return;
+		let e = (e) => {
+			u.current && !u.current.contains(e.target) && l(!1);
+		}, t = (e) => {
+			e.key === "Escape" && l(!1);
+		};
+		return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		};
+	}, [o]), /* @__PURE__ */ c("div", {
+		ref: u,
+		className: "sg-font-picker",
+		children: [/* @__PURE__ */ c("button", {
+			type: "button",
+			className: "sg-font-picker-toggle",
+			onClick: () => l((e) => !e),
+			style: { fontFamily: e },
+			children: [/* @__PURE__ */ s("span", {
+				className: "sg-font-picker-toggle-label",
+				children: F(e)
+			}), /* @__PURE__ */ s("span", {
+				className: "sg-font-picker-toggle-caret",
+				children: o ? "▲" : "▼"
+			})]
+		}), o && /* @__PURE__ */ s("ul", {
+			className: "sg-font-picker-list",
+			children: r.map((n) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("button", {
+				type: "button",
+				className: `sg-font-picker-option${n === e ? " active" : ""}`,
+				onClick: () => {
+					t(n), l(!1);
+				},
+				style: { fontFamily: n },
+				children: F(n)
+			}) }, n))
+		})]
+	});
+}, L = ({ checked: e, onChange: t, label: n }) => /* @__PURE__ */ c("label", {
+	className: "sg-toggle",
+	children: [
+		/* @__PURE__ */ s("input", {
+			type: "checkbox",
+			checked: e,
+			onChange: (e) => t(e.target.checked),
+			className: "sg-toggle-input"
+		}),
+		/* @__PURE__ */ s("span", {
+			className: "sg-toggle-track",
+			children: /* @__PURE__ */ s("span", { className: "sg-toggle-thumb" })
+		}),
+		/* @__PURE__ */ s("span", {
+			className: "sg-toggle-label",
+			children: n
+		})
+	]
+});
 //#endregion
-export { x as Authenticator, u as Button, g as CookieConsent, d as Footer, y as Header, l as Icon, C as Modal, j as QuadratoHeader, v as SGFooter, b as SGHeader, M as SetPasswordModal };
+export { S as Authenticator, d as Button, P as ColorPicker, _ as CookieConsent, I as FontPicker, f as Footer, b as Header, u as Icon, w as Modal, M as QuadratoHeader, y as SGFooter, x as SGHeader, N as SetPasswordModal, L as Toggle };

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/sg-components.css

@@ -1,2 +1,2 @@
-.custom-button{border-radius:var(--button-radius);background:var(--button-bg);color:var(--button-color);cursor:pointer;font-size:var(--primary-font);font-weight:600;font-family:var(--font-family);box-shadow:var(--button-shadow);transition:background .15s var(--button-ease-standard), transform var(--button-ease-bounce) .2s;border:none;padding:8px 20px}.custom-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px)}.custom-button:active:not(:disabled){transform:scale(.97)}.custom-button:disabled{opacity:.6;cursor:default}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.cookie-consent{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;z-index:1000;box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.cookie-consent-text{flex:320px;margin:0}.cookie-consent a{color:#1ea7fd;text-decoration:none}.cookie-consent a:hover{text-decoration:underline}.cookie-consent-accept{flex:none}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;animation:.3s ease-out sg-modal-slide-in;display:flex;overflow:hidden;box-shadow:0 2px 16px #00000026}.modal-content.modal-content-closing{animation:.22s ease-in forwards sg-modal-slide-out}@keyframes sg-modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sg-modal-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sg-modal-slide-in{0%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.modal-icon{color:var(--modal-title-color);display:inline-flex}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);font-size:var(--primary-font);flex:1;margin:0}.modal-close{cursor:pointer;color:var(--modal-title-color);background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.modal-close:disabled{cursor:default;opacity:.6}.modal-children{font-family:var(--font-family);padding:16px;overflow-y:auto}.modal-footer{border-top:1px solid var(--primary-border);flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{border-radius:var(--radius);width:calc(100% - 16px);font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5);--button-bg:#6f9cf7;--button-bg-hover:#5480e6;--button-color:#fff;--button-radius:999px;--button-shadow:0 1px 2px #5480e61f, 0 1px 3px #5480e61a;--button-ease-standard:cubic-bezier(.4, 0, .2, 1);--button-ease-bounce:cubic-bezier(.34, 1.56, .64, 1)}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem;--button-bg:#6f9cf7;--button-bg-hover:#86aefc;--button-color:#fff}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}
+.custom-button{border-radius:var(--button-radius);background:var(--button-bg);color:var(--button-color);cursor:pointer;font-size:var(--primary-font);font-weight:600;font-family:var(--font-family);box-shadow:var(--button-shadow);transition:background .15s var(--button-ease-standard), transform var(--button-ease-bounce) .2s;border:none;padding:8px 20px}.custom-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px)}.custom-button:active:not(:disabled){transform:scale(.97)}.custom-button:disabled{opacity:.6;cursor:default}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.cookie-consent{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;z-index:1000;box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.cookie-consent-text{flex:320px;margin:0}.cookie-consent a{color:#1ea7fd;text-decoration:none}.cookie-consent a:hover{text-decoration:underline}.cookie-consent-accept{flex:none}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;animation:.3s ease-out sg-modal-slide-in;display:flex;overflow:hidden;box-shadow:0 2px 16px #00000026}.modal-content.modal-content-closing{animation:.22s ease-in forwards sg-modal-slide-out}@keyframes sg-modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sg-modal-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sg-modal-slide-in{0%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.modal-icon{color:var(--modal-title-color);display:inline-flex}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);font-size:var(--primary-font);flex:1;margin:0}.modal-close{cursor:pointer;color:var(--modal-title-color);background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.modal-close:disabled{cursor:default;opacity:.6}.modal-children{font-family:var(--font-family);padding:16px;overflow-y:auto}.modal-footer{border-top:1px solid var(--primary-border);flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{border-radius:var(--radius);width:calc(100% - 16px);font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}.sg-color-picker{font-family:var(--font-family);position:relative}.sg-color-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-family:inherit;font-size:13px;display:flex}.sg-color-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-color-picker-swatch{border:1px solid #00000026;border-radius:4px;flex:none;width:18px;height:18px}.sg-color-picker-popover{z-index:30;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--shadow-1);width:170px;padding:10px;position:absolute;top:calc(100% + 4px);left:0}.sg-color-picker-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.sg-color-picker-swatch-button{cursor:pointer;border:1px solid #00000026;border-radius:4px;width:20px;height:20px;padding:0}.sg-color-picker-swatch-button.active{border:2px solid var(--accent)}.sg-color-picker-custom{border-top:1px solid var(--input-border);color:var(--ink-muted);cursor:pointer;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;font-size:11px;display:flex}.sg-color-picker-custom input[type=color]{cursor:pointer;border:none;width:26px;height:20px;padding:0}.sg-font-picker{font-family:var(--font-family);position:relative}.sg-font-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-size:13px;display:flex}.sg-font-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-font-picker-toggle-caret{opacity:.5;flex:none;font-size:10px}.sg-font-picker-list{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);max-height:260px;box-shadow:var(--shadow-1);z-index:30;margin:0;padding:4px 0;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.sg-font-picker-option{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;padding:8px 10px;font-size:15px;display:block}.sg-font-picker-option.active{background:var(--accent-soft)}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5);--button-bg:#6f9cf7;--button-bg-hover:#5480e6;--button-color:#fff;--button-radius:999px;--button-shadow:0 1px 2px #5480e61f, 0 1px 3px #5480e61a;--button-ease-standard:cubic-bezier(.4, 0, .2, 1);--button-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--accent:#3d5fc4;--accent-strong:#2e4aa0;--accent-soft:#e2e7f8;--ink-muted:#647089;--shadow-1:0 1px 2px #0f172a14, 0 1px 3px #0f172a0f;--shadow-2:0 4px 12px #0f172a1f}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem;--button-bg:#6f9cf7;--button-bg-hover:#86aefc;--button-color:#fff;--accent:#6f9cf7;--accent-strong:#86aefc;--accent-soft:#6f9cf72e;--ink-muted:#9aa3b5;--shadow-1:0 1px 2px #0000004d, 0 1px 3px #0000003d;--shadow-2:0 4px 12px #0006}.sg-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family);align-items:center;gap:6px;display:flex}.sg-toggle-input{opacity:0;width:1px;height:1px;position:absolute}.sg-toggle-track{background:var(--input-border);border-radius:999px;flex:none;width:34px;height:20px;transition:background .15s cubic-bezier(.4,0,.2,1);position:relative}.sg-toggle-input:checked+.sg-toggle-track{background:var(--accent)}.sg-toggle-thumb{background:var(--input-bg);width:16px;height:16px;box-shadow:var(--shadow-1);border-radius:50%;transition:left .15s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px}.sg-toggle-input:checked+.sg-toggle-track .sg-toggle-thumb{left:16px}.sg-toggle-input:focus-visible+.sg-toggle-track{outline:2px solid var(--accent-strong);outline-offset:2px}.sg-toggle-label{color:var(--ink-muted);white-space:nowrap;font-size:13px}
 /*$vite$:1*/

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@sensorario/sg-components",
-  "version": "0.0.90",
+  "version": "0.0.94",
   "type": "module",
   "private": false,
   "scripts": {
     "dev": "vite",
-    "build": "npm version patch --no-git-tag-version && tsc -b && vite build",
+    "build": "npm version patch --no-git-tag-version && tsc -b && vite build && tsc -p tsconfig.build.json",
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",