rte-utils 1.2.28 → 1.2.30

package/README.md

@@ -15,23 +15,23 @@ npm install rte-utils
 You need to import both the component and its CSS styles:
 
 ```tsx
-import { Histogram, Chip } from "rte-utils";
-import "rte-utils/dist/index.css"; // Import the CSS styles
+import { Histogram, Chip } from 'rte-utils';
+import 'rte-utils/dist/index.css'; // Import the CSS styles
 ```
 
 ### Basic Example
 
 ```tsx
-import React from "react";
-import { Histogram } from "rte-utils";
-import "rte-utils/dist/index.css";
+import React from 'react';
+import { Histogram } from 'rte-utils';
+import 'rte-utils/dist/index.css';
 
 function App() {
   return (
     <div>
       <Histogram
-        max={{ value: 100, color: "#D3D64E" }}
-        relative={{ value: 56, color: "#C0C402" }}
+        max={{ value: 100, color: '#D3D64E' }}
+        relative={{ value: 56, color: '#C0C402' }}
         barWidth={32}
       >
         <div className="histogram-value-container">
@@ -52,18 +52,18 @@ export default App;
 ### Advanced Example with Animation
 
 ```tsx
-import React, { useState } from "react";
-import { Histogram } from "rte-utils";
-import "rte-utils/dist/index.css";
+import React, { useState } from 'react';
+import { Histogram } from 'rte-utils';
+import 'rte-utils/dist/index.css';
 
 function EnergyDashboard() {
   const [currentValue, setCurrentValue] = useState(45);
 
   return (
-    <div style={{ display: "flex", gap: "1rem" }}>
+    <div style={{ display: 'flex', gap: '1rem' }}>
       <Histogram
-        max={{ value: 100, color: "#D3D64E" }}
-        relative={{ value: currentValue, color: "#C0C402" }}
+        max={{ value: 100, color: '#D3D64E' }}
+        relative={{ value: currentValue, color: '#C0C402' }}
         barHeight={120}
         barWidth={40}
       >
@@ -76,9 +76,7 @@ function EnergyDashboard() {
         </div>
       </Histogram>
 
-      <button onClick={() => setCurrentValue((prev) => prev + 10)}>
-        Increase (+10)
-      </button>
+      <button onClick={() => setCurrentValue((prev) => prev + 10)}>Increase (+10)</button>
     </div>
   );
 }
@@ -87,16 +85,16 @@ function EnergyDashboard() {
 ### Horizontal Orientation Example
 
 ```tsx
-import React from "react";
-import { Histogram } from "rte-utils";
-import "rte-utils/dist/index.css";
+import React from 'react';
+import { Histogram } from 'rte-utils';
+import 'rte-utils/dist/index.css';
 
 function HorizontalChart() {
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
       <Histogram
-        max={{ value: 100, color: "#D3D64E" }}
-        relative={{ value: 75, color: "#C0C402" }}
+        max={{ value: 100, color: '#D3D64E' }}
+        relative={{ value: 75, color: '#C0C402' }}
         barWidth={200} // This becomes height in horizontal mode
         barHeight={24} // This becomes width in horizontal mode
         orientation="horizontal"
@@ -117,17 +115,17 @@ function HorizontalChart() {
 ### Custom Corner Radius Example
 
 ```tsx
-import React from "react";
-import { Histogram } from "rte-utils";
-import "rte-utils/dist/index.css";
+import React from 'react';
+import { Histogram } from 'rte-utils';
+import 'rte-utils/dist/index.css';
 
 function CustomCornerChart() {
   return (
-    <div style={{ display: "flex", gap: "1rem" }}>
+    <div style={{ display: 'flex', gap: '1rem' }}>
       {/* Rounded top corners only */}
       <Histogram
-        max={{ value: 100, color: "#E0E0E0" }}
-        relative={{ value: 60, color: "#4CAF50" }}
+        max={{ value: 100, color: '#E0E0E0' }}
+        relative={{ value: 60, color: '#4CAF50' }}
         barWidth={32}
         barHeight={120}
         cornerRadius={{
@@ -140,8 +138,8 @@ function CustomCornerChart() {
 
       {/* Fully rounded corners */}
       <Histogram
-        max={{ value: 100, color: "#F0F0F0", opacity: 0.5 }}
-        relative={{ value: 80, color: "#2196F3" }}
+        max={{ value: 100, color: '#F0F0F0', opacity: 0.5 }}
+        relative={{ value: 80, color: '#2196F3' }}
         barWidth={32}
         barHeight={120}
         cornerRadius={{
@@ -154,8 +152,8 @@ function CustomCornerChart() {
 
       {/* Asymmetric corners */}
       <Histogram
-        max={{ value: 100, color: "#FFECB3" }}
-        relative={{ value: 45, color: "#FF9800" }}
+        max={{ value: 100, color: '#FFECB3' }}
+        relative={{ value: 45, color: '#FF9800' }}
         barWidth={32}
         barHeight={120}
         cornerRadius={{
@@ -173,15 +171,15 @@ function CustomCornerChart() {
 ### Opacity and Advanced Styling Example
 
 ```tsx
-import React from "react";
-import { Histogram } from "rte-utils";
-import "rte-utils/dist/index.css";
+import React from 'react';
+import { Histogram } from 'rte-utils';
+import 'rte-utils/dist/index.css';
 
 function AdvancedStylingChart() {
   return (
     <Histogram
-      max={{ value: 100, color: "#000000", opacity: 0.1 }}
-      relative={{ value: 65, color: "#E91E63" }}
+      max={{ value: 100, color: '#000000', opacity: 0.1 }}
+      relative={{ value: 65, color: '#E91E63' }}
       barWidth={40}
       barHeight={150}
       orientation="vertical"
@@ -235,9 +233,26 @@ A histogram component with smooth animations for energy data visualization.
 The component uses external CSS classes for styling. Make sure to import the CSS file:
 
 ```tsx
-import "rte-utils/dist/index.css";
+import 'rte-utils/dist/index.css';
 ```
 
+## Scripts
+
+Development & quality commands:
+
+- `npm run build` – build the library (Rollup)
+- `npm run dev` – watch mode build
+- `npm run test` – run tests
+- `npm run lint` – run ESLint (no fixes)
+- `npm run lint:fix` – run ESLint with auto fixes
+- `npm run format` – apply Prettier formatting
+- `npm run format:check` – check formatting (CI)
+- `npm run typecheck` – TypeScript diagnostics (no emit)
+- `npm run storybook` – start Storybook
+- `npm run build-storybook` – build static Storybook
+
+Prettier is integrated with ESLint (plugin:prettier/recommended). Formatting issues will surface as ESLint errors.
+
 You can override the default styles by targeting the CSS classes:
 
 - `.histogram-container` - Main container
@@ -259,35 +274,35 @@ A comprehensive production unit component that combines an image display, status
 
 #### Props
 
-| Prop             | Type                      | Required | Default              | Description                                        |
-| ---------------- | ------------------------- | -------- | -------------------- | -------------------------------------------------- |
-| `onChangeInput`  | `(value: number) => void` | ❌       | -                    | Callback triggered when input value changes        |
-| `onChangeSwitch` | `(checked: boolean) => void` | ❌    | -                    | Callback triggered when switch state changes       |
-| `defaultValue`   | `number`                  | ❌       | -                    | Initial value for the input field                  |
-| `defaultChecked` | `boolean`                 | ❌       | `false`              | Initial state for the switch                       |
-| `unitName`       | `string`                  | ❌       | `"Production Unit"`  | Display name for the production unit               |
-| `energyCost`     | `number`                  | ❌       | `0`                  | Energy cost value displayed in the chip (MW)       |
-| `checkedImage`   | `React.ReactNode`         | ❌       | -                    | Custom image/component displayed when switch is ON |
-| `uncheckedImage` | `React.ReactNode`         | ❌       | -                    | Custom image/component displayed when switch is OFF |
+| Prop             | Type                         | Required | Default             | Description                                         |
+| ---------------- | ---------------------------- | -------- | ------------------- | --------------------------------------------------- |
+| `onChangeInput`  | `(value: number) => void`    | ❌       | -                   | Callback triggered when input value changes         |
+| `onChangeSwitch` | `(checked: boolean) => void` | ❌       | -                   | Callback triggered when switch state changes        |
+| `defaultValue`   | `number`                     | ❌       | -                   | Initial value for the input field                   |
+| `defaultChecked` | `boolean`                    | ❌       | `false`             | Initial state for the switch                        |
+| `unitName`       | `string`                     | ❌       | `"Production Unit"` | Display name for the production unit                |
+| `energyCost`     | `number`                     | ❌       | `0`                 | Energy cost value displayed in the chip (MW)        |
+| `checkedImage`   | `React.ReactNode`            | ❌       | -                   | Custom image/component displayed when switch is ON  |
+| `uncheckedImage` | `React.ReactNode`            | ❌       | -                   | Custom image/component displayed when switch is OFF |
 
 #### Example Usage
 
 ```tsx
-import React from "react";
-import { ProductionUnit } from "rte-utils";
-import "rte-utils/dist/index.css";
+import React from 'react';
+import { ProductionUnit } from 'rte-utils';
+import 'rte-utils/dist/index.css';
 
 function ProductionUnitExample() {
   const handleInputChange = (value: number) => {
-    console.log("Production value changed:", value);
+    console.log('Production value changed:', value);
   };
 
   const handleSwitchChange = (checked: boolean) => {
-    console.log("Production unit is now:", checked ? "ON" : "OFF");
+    console.log('Production unit is now:', checked ? 'ON' : 'OFF');
   };
 
   return (
-    <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
       {/* Basic usage */}
       <ProductionUnit
         unitName="Solar Panel"
@@ -305,16 +320,10 @@ function ProductionUnitExample() {
         defaultChecked={false}
         defaultValue={75}
         checkedImage={
-          <img 
-            src="https://placehold.co/60x60/4CAF50/FFFFFF/png?text=ON" 
-            alt="Wind Turbine On" 
-          />
+          <img src="https://placehold.co/60x60/4CAF50/FFFFFF/png?text=ON" alt="Wind Turbine On" />
         }
         uncheckedImage={
-          <img 
-            src="https://placehold.co/60x60/F44336/FFFFFF/png?text=OFF" 
-            alt="Wind Turbine Off" 
-          />
+          <img src="https://placehold.co/60x60/F44336/FFFFFF/png?text=OFF" alt="Wind Turbine Off" />
         }
         onChangeInput={handleInputChange}
         onChangeSwitch={handleSwitchChange}
@@ -326,32 +335,36 @@ function ProductionUnitExample() {
         energyCost={1000}
         defaultChecked={true}
         checkedImage={
-          <div style={{
-            width: 60,
-            height: 60,
-            borderRadius: '50%',
-            backgroundColor: '#4CAF50',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: 'white',
-            fontWeight: 'bold'
-          }}>
+          <div
+            style={{
+              width: 60,
+              height: 60,
+              borderRadius: '50%',
+              backgroundColor: '#4CAF50',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'white',
+              fontWeight: 'bold',
+            }}
+          >
             ⚡
           </div>
         }
         uncheckedImage={
-          <div style={{
-            width: 60,
-            height: 60,
-            borderRadius: '50%',
-            backgroundColor: '#F44336',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: 'white',
-            fontWeight: 'bold'
-          }}>
+          <div
+            style={{
+              width: 60,
+              height: 60,
+              borderRadius: '50%',
+              backgroundColor: '#F44336',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'white',
+              fontWeight: 'bold',
+            }}
+          >
             ⚠️
           </div>
         }
@@ -393,13 +406,13 @@ A customizable chip component for displaying labels, tags, or status indicators.
 #### Example Usage
 
 ```tsx
-import React from "react";
-import { Chip } from "rte-utils";
-import "rte-utils/dist/index.css";
+import React from 'react';
+import { Chip } from 'rte-utils';
+import 'rte-utils/dist/index.css';
 
 function ChipExample() {
   return (
-    <div style={{ display: "flex", gap: "0.5rem" }}>
+    <div style={{ display: 'flex', gap: '0.5rem' }}>
       {/* Default chip */}
       <Chip label="Default" />
 

package/dist/components/Avatar.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./Avatar.css";
+import React from 'react';
+import './Avatar.css';
 interface AvatarProps {
     children: React.ReactNode;
 }

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

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

package/dist/components/Chip.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-import "./Chip.css";
+import React from 'react';
+import './Chip.css';
 interface ChipProps {
     children: React.ReactNode;
     bgColor?: string;
-    width?: "fit-content" | "full-width";
+    width?: 'fit-content' | 'full-width';
 }
 export declare const Chip: React.FC<ChipProps>;
 export {};

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

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

package/dist/components/Histogram.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./Histogram.css";
+import React from 'react';
+import './Histogram.css';
 interface HistogramProps {
     /** Maximum value configuration with value and color */
     max: {

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

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

package/dist/components/Histogramme.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import "./Histogramme.css";
+interface HistogramProps {
+    /** Maximum value configuration with value and color */
+    max: {
+        value: number;
+        color: string;
+    };
+    /** Relative/current value configuration with value and color */
+    relative: {
+        value: number;
+        color: string;
+    };
+    /** Height of the histogram bar in pixels */
+    barHeight?: number;
+    /** Width of the histogram bar in pixels */
+    barWidth?: number;
+    /** Child components (typically text content) */
+    children?: React.ReactNode;
+}
+export declare const Histogram: React.FC<HistogramProps>;
+export {};

package/dist/components/Input.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./Input.css";
+import React from 'react';
+import './Input.css';
 interface InputNumberProps {
     label: string;
     value?: string;

package/dist/components/InputNumber.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./InputNumber.css";
+import React from 'react';
+import './InputNumber.css';
 interface InputNumberProps {
     label: string;
     value?: string;

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

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

package/dist/components/MwhCost.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./MwhCost.css";
+import React from 'react';
+import './MwhCost.css';
 interface MwhCostProps {
     cost?: number;
     textColor?: string;

package/dist/components/ProductionUnit.d.ts

@@ -1,4 +1,4 @@
-import "./ProductionUnit.css";
+import './ProductionUnit.css';
 type ProductionUnitLimit = {
     value: number;
     label?: string;

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

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

package/dist/components/ProductionUnitContainer.d.ts

@@ -1,4 +1,4 @@
-import "./ProductionUnitContainer.css";
+import './ProductionUnitContainer.css';
 interface ProductionUnitContainerProps {
     bgColor?: string;
     children: React.ReactNode;

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

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

package/dist/components/Switch.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import "./Switch.css";
+import React from 'react';
+import './Switch.css';
 interface SwitchProps {
     checked?: boolean;
     onChange?: (checked: boolean) => void;

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

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

package/dist/components/Timer.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import './Timer.css';
+export interface TimerProps {
+    phases: {
+        duration: number;
+        title?: string;
+    }[];
+    onComplete?: () => void;
+    onPhaseComplete?: (phaseIndex: number, phaseDuration: number) => void;
+    onTick?: (currentTime: number, phaseIndex: number) => void;
+    onStart?: () => void;
+    onPause?: () => void;
+    onFreeze?: (frozen: boolean) => void;
+    onAnonymiseToggle?: (anonymised: boolean) => void;
+    onStop?: () => void;
+    onReset?: () => void;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    onPhaseClick?: (phaseIndex: number) => void;
+    autoStart?: boolean;
+    className?: string;
+    gameActions?: {
+        [phaseIndex: number]: string;
+    };
+    user?: 'actor' | 'admin';
+}
+export interface TimerRef {
+    start: () => void;
+    pause: () => void;
+    freeze: (force?: boolean) => void;
+    toggleAnonymise: (force?: boolean) => void;
+    stop: () => void;
+    reset: () => void;
+    setPhases: (phases: {
+        duration: number;
+        title?: string;
+    }[]) => void;
+    getCurrentTime: () => number;
+    getCurrentPhase: () => number;
+    isRunning: () => boolean;
+    isPaused: () => boolean;
+}
+export declare const Timer: React.ForwardRefExoticComponent<TimerProps & React.RefAttributes<TimerRef>>;

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Timer } from './Timer';
+declare const meta: Meta<typeof Timer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const GameTimer: Story;
+export declare const SinglePhase: Story;
+export declare const MinimalTimer: Story;
+export declare const ProgressOnly: Story;
+export declare const WithPhaseTitles: Story;
+export declare const WithCallbacks: Story;
+export declare const ControlledTimer: Story;
+export declare const FreezeDemo: Story;
+export declare const AdminUser: Story;
+export declare const ActorUser: Story;
+export declare const UserComparison: Story;

package/dist/components/index.d.ts

@@ -1,8 +1,10 @@
-export { ProductionUnit } from "./ProductionUnit";
-export { ProductionUnitContainer } from "./ProductionUnitContainer";
-export { Histogram } from "./Histogram";
-export { Chip } from "./Chip";
-export { Switch } from "./Switch";
-export { InputNumber } from "./InputNumber";
-export { Avatar } from "./Avatar";
-export { MwhCost } from "./MwhCost";
+export { ProductionUnit } from './ProductionUnit';
+export { ProductionUnitContainer } from './ProductionUnitContainer';
+export { Histogram } from './Histogram';
+export { Chip } from './Chip';
+export { Switch } from './Switch';
+export { InputNumber } from './InputNumber';
+export { Avatar } from './Avatar';
+export { MwhCost } from './MwhCost';
+export { Timer } from './Timer';
+export type { TimerProps, TimerRef } from './Timer';

package/dist/index.css

@@ -1 +1 @@
-.input-container,.input-field{position:relative;width:100%}.input-element{background-color:#fff;border:2px solid #e0e0e0;border-radius:4px;box-sizing:border-box;font-size:16px;outline:none;padding:8px 0 8px 12px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.input-constraints{align-items:center;display:flex;gap:8px;justify-content:space-between}.input-max,.input-min{color:#999;font-size:12px;text-align:center}.input-container--focused .input-max,.input-container--focused .input-min{color:#009cdf;font-weight:500}.input-element[type=number]::-webkit-inner-spin-button,.input-element[type=number]::-webkit-outer-spin-button{-webkit-appearance:auto;cursor:pointer;margin:0;opacity:1}.input-element[type=number]{-moz-appearance:textfield}.input-element[type=number]:hover::-webkit-inner-spin-button,.input-element[type=number]:hover::-webkit-outer-spin-button{opacity:1}.switch-container{align-items:center;display:flex;gap:8px}.switch-wrapper{align-items:center;display:flex;flex-direction:column;gap:4px}.switch-icon{height:16px;width:16px}.switch-icon,.switch-label{align-items:center;display:flex;justify-content:center}.switch-label{color:#666;font-size:12px;font-weight:500;min-height:16px;padding:0 2px}.switch-power-icon{height:100%;object-fit:contain;width:100%}.switch{background:none;border:none;cursor:pointer;outline:none;padding:0;transition:all .2s ease}.switch:focus-visible{outline:2px solid #009cdf;outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch-track{background-color:#999fa1;border-radius:60px;display:block;position:relative;transition:background-color .2s ease}.switch--checked .switch-track{background-color:#82d4f6}.switch-wrapper--checked .switch-label{color:#82d4f6}.switch-thumb{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;justify-content:center;left:0;position:absolute;top:-3px;transition:transform .2s ease}.switch-thumb-icon{height:100%;object-fit:contain;width:100%}.switch-track{height:10px;width:32px}.switch-thumb{height:16px;width:16px}.switch--checked .switch-thumb{transform:translateX(16px)}.switch:not(.switch--disabled):hover .switch-track{filter:brightness(1.1)}.switch:not(.switch--disabled):active .switch-thumb{transform:scale(1.1)}.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(16px) scale(1.1)}.switch--small.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(12px) scale(1.1)}.switch--large.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(20px) scale(1.1)}.production-unit-container{align-items:center;display:flex;height:64px;justify-content:space-between;padding-right:24px}.production-unit-content{align-items:center;display:flex;gap:16px}.production-unit-chip{display:flex;flex-direction:column;flex-shrink:0}.production-unit-chip-name{word-wrap:break-word;color:#11161a;font-size:16px;font-weight:600;line-height:24px}.production-unit-switch-container{width:156px}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:4px 8px}.chip-container--fit-content{width:fit-content}.chip-container--full-width{width:100%}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}.production-unit-container-box{border-radius:64px;box-shadow:0 2px 16px 0 rgba(0,0,0,.16);box-sizing:border-box;width:100%}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;justify-content:center;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}.avatar-container{align-items:center;border:1px solid #f5f3ed;border-radius:50%;color:#333;display:inline-flex;font-size:20px;font-weight:500;height:64px;justify-content:center;overflow:hidden;position:relative;user-select:none;width:64px}.avatar-container--clickable{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.avatar-container--clickable:hover{box-shadow:0 2px 8px rgba(0,0,0,.15);transform:scale(1.05)}.avatar-container--clickable:active{transform:scale(.95)}.avatar-content{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar-content img{height:100%;object-fit:cover;width:100%}.avatar-content{line-height:1;text-transform:uppercase}.cost-text-container{align-items:baseline;display:flex;gap:3px}.cost-number{font-size:16px;font-weight:semibold}.cost-unit{font-size:16px;line-height:24px}.cost-unit-per{font-size:12px;font-weight:400;letter-spacing:0;line-height:18px;text-transform:uppercase}
+.input-container,.input-field{position:relative;width:100%}.input-element{background-color:#fff;border:2px solid #e0e0e0;border-radius:4px;box-sizing:border-box;font-size:16px;outline:none;padding:8px 0 8px 12px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.input-constraints{align-items:center;display:flex;gap:8px;justify-content:space-between}.input-max,.input-min{color:#999;font-size:12px;text-align:center}.input-container--focused .input-max,.input-container--focused .input-min{color:#009cdf;font-weight:500}.input-element[type=number]::-webkit-inner-spin-button,.input-element[type=number]::-webkit-outer-spin-button{-webkit-appearance:auto;cursor:pointer;margin:0;opacity:1}.input-element[type=number]{-moz-appearance:textfield}.input-element[type=number]:hover::-webkit-inner-spin-button,.input-element[type=number]:hover::-webkit-outer-spin-button{opacity:1}.switch-container{align-items:center;display:flex;gap:8px}.switch-wrapper{align-items:center;display:flex;flex-direction:column;gap:4px}.switch-icon{height:16px;width:16px}.switch-icon,.switch-label{align-items:center;display:flex;justify-content:center}.switch-label{color:#666;font-size:12px;font-weight:500;min-height:16px;padding:0 2px}.switch-power-icon{height:100%;object-fit:contain;width:100%}.switch{background:none;border:none;cursor:pointer;outline:none;padding:0;transition:all .2s ease}.switch:focus-visible{outline:2px solid #009cdf;outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch-track{background-color:#999fa1;border-radius:60px;display:block;position:relative;transition:background-color .2s ease}.switch--checked .switch-track{background-color:#82d4f6}.switch-wrapper--checked .switch-label{color:#82d4f6}.switch-thumb{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;justify-content:center;left:0;position:absolute;top:-3px;transition:transform .2s ease}.switch-thumb-icon{height:100%;object-fit:contain;width:100%}.switch-track{height:10px;width:32px}.switch-thumb{height:16px;width:16px}.switch--checked .switch-thumb{transform:translateX(16px)}.switch:not(.switch--disabled):hover .switch-track{filter:brightness(1.1)}.switch:not(.switch--disabled):active .switch-thumb{transform:scale(1.1)}.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(16px) scale(1.1)}.switch--small.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(12px) scale(1.1)}.switch--large.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(20px) scale(1.1)}.production-unit-container{align-items:center;display:flex;height:64px;justify-content:space-between;padding-right:24px}.production-unit-content{align-items:center;display:flex;gap:16px}.production-unit-chip{display:flex;flex-direction:column;flex-shrink:0}.production-unit-chip-name{word-wrap:break-word;color:#11161a;font-size:16px;font-weight:600;line-height:24px}.production-unit-switch-container{width:156px}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:4px 8px}.chip-container--fit-content{width:fit-content}.chip-container--full-width{width:100%}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}.production-unit-container-box{border-radius:64px;box-shadow:0 2px 16px 0 rgba(0,0,0,.16);box-sizing:border-box;width:100%}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;justify-content:center;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}.avatar-container{align-items:center;border:1px solid #f5f3ed;border-radius:50%;color:#333;display:inline-flex;font-size:20px;font-weight:500;height:64px;justify-content:center;overflow:hidden;position:relative;user-select:none;width:64px}.avatar-container--clickable{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.avatar-container--clickable:hover{box-shadow:0 2px 8px rgba(0,0,0,.15);transform:scale(1.05)}.avatar-container--clickable:active{transform:scale(.95)}.avatar-content{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar-content img{height:100%;object-fit:cover;width:100%}.avatar-content{line-height:1;text-transform:uppercase}.cost-text-container{align-items:baseline;display:flex;gap:3px}.cost-number{font-size:16px;font-weight:semibold}.cost-unit{font-size:16px;line-height:24px}.cost-unit-per{font-size:12px;font-weight:400;letter-spacing:0;line-height:18px;text-transform:uppercase}.timer-header-control{border:1px solid red;box-sizing:border-box;display:flex;font-family:Open Sans,sans-serif;width:100%}.timer-section{background-color:#fff;border-bottom-left-radius:16px;border-top-left-radius:16px;display:flex;flex-shrink:0;padding:10px 0 10px 16px}.timer-content{align-items:center;display:flex;gap:8px;padding-right:8px}.timer-display-area{display:flex;flex-direction:column;flex-shrink:0;gap:10px}.timer-header{align-items:baseline;color:#11161a;display:flex;justify-content:space-between;width:124px}.timer-title{flex-shrink:0;font-size:12px;font-weight:700;line-height:12px;min-width:64px;text-align:left;text-transform:uppercase}.timer-time,.timer-title{font-family:Open Sans,sans-serif}.timer-time{font-size:20px;font-weight:600;line-height:14px;text-align:right;white-space:nowrap;width:61px}.timer-progress-bar{background:#000;border-radius:4px;height:8px;overflow:hidden;position:relative;width:124px}.timer-progress-fill{background:#009cdf;border-radius:4px;height:100%;transition:width .3s ease}.step-indicators{align-items:center;display:flex;gap:4px}.step-indicator{align-items:center;border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-family:Open Sans,sans-serif;font-size:12px;font-weight:600;height:16px;justify-content:center;line-height:18px;width:16px}.step-indicator--active{background-color:#009cdf}.step-indicator--active.step-indicator--actor{height:40px;margin-right:4px;width:40px}.step-indicator--active.step-indicator--admin{height:16px;width:16px}.step-indicator--completed{background-color:#005896}.step-indicator--upcoming{background-color:#b7bec2}.step-expand{align-items:center;background-color:#292e33;border-radius:50%;color:#fff;display:flex;justify-content:center;margin-left:4px;transform:rotate(90deg)}.timer-controls-section{align-items:center;align-self:stretch;background-color:#fff;display:flex;flex-shrink:0;gap:10px;padding:10px 16px 10px 10px}.control-button{align-items:center;background:none;background:#d9d9d9;border:none;cursor:pointer;display:flex;height:24px;justify-content:center;padding:0;position:relative;width:24px}.control-button,.control-button:before{border-radius:50%;height:32px;width:32px}.control-button:before{background:radial-gradient(circle,rgba(0,0,0,.1) 0,transparent 70%);content:"";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:-1}.control-button:hover:before{background:radial-gradient(circle,rgba(0,0,0,.15) 0,transparent 70%)}.control-button svg{color:#000;height:16px;width:16px}.timer--running .step-indicator--active{animation:pulse 1s ease-in-out infinite alternate}.timer--frozen .timer-progress-fill{background:#7aa6b9}.control-button--anonymise-active{background-color:#444;color:#fff}.control-button--freeze-active{background:#7aa6b9}.control-button--freeze-active svg path{fill:#000}@keyframes pulse{0%{background-color:#009cdf}to{background-color:#0081b8}}.step-indicator--placeholder{background-color:#e9ecef;color:#6c757d;position:relative}.step-indicator--placeholder:after{content:attr(data-step);font-size:10px;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.step-expand.step-expand--end{background-color:#1a7f37;transform:none}.timer-header--block{display:flex;flex-direction:column;gap:10px;margin-right:10px}@media (max-width:480px){.timer-header-control{flex-direction:column}.timer-section{border-radius:16px 16px 0 0}.timer-controls-section{border-radius:0 0 16px 16px;justify-content:center}}.step-indicator--clickable{cursor:pointer;position:relative;transition:background-color .2s ease,box-shadow .2s ease,transform .1s ease}.step-indicator--clickable:focus-visible{box-shadow:0 0 0 2px #11161a;outline:2px solid #fff;outline-offset:2px}.step-indicator--clickable:hover{filter:brightness(1.1)}.step-indicator--clickable:active{transform:scale(.9)}.step-indicator--selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #ffb100}