diff --git a/semcore/core/__tests__/decorators.test.ts b/semcore/core/__tests__/decorators.test.ts
new file mode 100644
index 0000000000..103e137ca7
--- /dev/null
+++ b/semcore/core/__tests__/decorators.test.ts
@@ -0,0 +1,509 @@
+import { describe, it, expect, vi, Test } from '@semcore/testing-utils/vitest';
+
+import propsObserver from '../src/decorators/propsObserver';
+import reactive from '../src/decorators/reactive';
+
+interface TestProps {
+  name: string;
+  age: number;
+}
+
+describe('@reactive', () => {
+  describe('primitive values', () => {
+    it('should call callback when primitive value changes', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(callback)
+        counter = 0;
+      }
+
+      const instance = new TestClass();
+      instance.counter = 5;
+
+      expect(callback).toHaveBeenCalledWith('counter', 5);
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call callback with correct "this" context', () => {
+      let capturedThis: any;
+
+      class TestClass {
+        name = 'TestInstance';
+
+        @reactive(function () {
+          capturedThis = this;
+        })
+        value = 10;
+      }
+
+      const instance = new TestClass();
+      instance.value = 20;
+
+      expect(capturedThis).toBe(instance);
+      expect(capturedThis.name).toBe('TestInstance');
+    });
+
+    it('should call callback multiple times on multiple changes', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(callback)
+        counter = 0;
+      }
+
+      const instance = new TestClass();
+      instance.counter = 1;
+      instance.counter = 2;
+      instance.counter = 3;
+
+      expect(callback).toHaveBeenCalledTimes(3);
+      expect(callback).toHaveBeenNthCalledWith(1, 'counter', 1);
+      expect(callback).toHaveBeenNthCalledWith(2, 'counter', 2);
+      expect(callback).toHaveBeenNthCalledWith(3, 'counter', 3);
+    });
+  });
+  describe('non-primitive values (objects)', () => {
+    it('should call callback when watched field changes in object', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(['name'], callback)
+        readonly user = { name: 'John', age: 30 };
+      }
+
+      const instance = new TestClass();
+      instance.user.name = 'Jane';
+
+      expect(callback).toHaveBeenCalledWith('name', 'Jane');
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it('should NOT call callback when non-watched field changes', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(['name'], callback)
+        readonly user = { name: 'John', age: 30 };
+      }
+
+      const instance = new TestClass();
+      instance.user.age = 31;
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    it('should watch multiple fields in object', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(['name', 'age'], callback)
+        readonly user = { name: 'John', age: 30, city: 'NYC' };
+      }
+
+      const instance = new TestClass();
+
+      instance.user.name = 'Jane';
+      expect(callback).toHaveBeenCalledWith('name', 'Jane');
+
+      instance.user.age = 31;
+      expect(callback).toHaveBeenCalledWith('age', 31);
+
+      instance.user.city = 'LA';
+      expect(callback).toHaveBeenCalledTimes(2); // city is not watched
+    });
+
+    it('should call callback with correct "this" context for objects', () => {
+      let capturedThis: any;
+
+      class TestClass {
+        id = 'test-123';
+
+        @reactive(['value'], function () {
+          capturedThis = this;
+        })
+        readonly data = { value: 0 };
+      }
+
+      const instance = new TestClass();
+      instance.data.value = 42;
+
+      expect(capturedThis).toBe(instance);
+      expect(capturedThis.id).toBe('test-123');
+    });
+
+    it('should work with arrays', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(['0', '1'], callback)
+        readonly items = ['a', 'b', 'c'];
+      }
+
+      const instance = new TestClass();
+
+      instance.items[0] = 'x';
+      expect(callback).toHaveBeenCalledWith('0', 'x');
+
+      instance.items[1] = 'y';
+      expect(callback).toHaveBeenCalledWith('1', 'y');
+
+      instance.items[2] = 'z';
+      expect(callback).toHaveBeenCalledTimes(2); // index 2 not watched
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty watchedFields array for objects', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive([], callback)
+        readonly data = { value: 0, name: 'test' };
+      }
+
+      const instance = new TestClass();
+      instance.data.value = 42;
+      instance.data.name = 'updated name';
+
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it('should call only once for the same value', () => {
+      const callback = vi.fn();
+
+      class TestClass {
+        @reactive(callback)
+        value = 0;
+      }
+
+      const instance = new TestClass();
+      instance.value = 5;
+      instance.value = 5;
+      instance.value = 5;
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+  });
+});
+
+describe('@propsObserver', () => {
+  describe('Basic functionality', () => {
+    it('should track specified props changes', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      @propsObserver(['name', 'age'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+
+      component.render();
+      expect(onPropsChangeSpy).not.toHaveBeenCalled();
+
+      component.props = { name: 'Jane', age: 30 };
+      component.render();
+
+      expect(onPropsChangeSpy).toHaveBeenCalledWith({ name: 'Jane' });
+      expect(onPropsChangeSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should detect multiple props changes', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      @propsObserver(['name', 'age'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+      component.render();
+
+      component.props = { name: 'Jane', age: 25 };
+      component.render();
+
+      expect(onPropsChangeSpy).toHaveBeenCalledWith({ name: 'Jane', age: 25 });
+    });
+
+    it('should not call onPropsChange when no tracked props changed', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      @propsObserver(['name'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+      component.render();
+
+      component.props = { name: 'John', age: 25 };
+      component.render();
+
+      expect(onPropsChangeSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Reference equality for objects and arrays', () => {
+    it('should detect object reference changes', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      interface ObjectProps {
+        user: { name: string };
+      }
+
+      @propsObserver(['user'])
+      class TestComponent {
+        props: ObjectProps;
+
+        constructor(props: ObjectProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<ObjectProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const user = { name: 'John' };
+      const component = new TestComponent({ user });
+      component.render();
+
+      component.props = { user };
+      component.render();
+      expect(onPropsChangeSpy).not.toHaveBeenCalled();
+
+      component.props = { user: { name: 'John' } };
+      component.render();
+      expect(onPropsChangeSpy).toHaveBeenCalledWith({ user: { name: 'John' } });
+    });
+
+    it('should detect array reference changes', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      interface ArrayProps {
+        items: string[];
+      }
+
+      @propsObserver(['items'])
+      class TestComponent {
+        props: ArrayProps;
+
+        constructor(props: ArrayProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<ArrayProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const items = ['a', 'b'];
+      const component = new TestComponent({ items });
+      component.render();
+
+      component.props = { items: ['a', 'b'] };
+      component.render();
+
+      expect(onPropsChangeSpy).toHaveBeenCalledWith({ items: ['a', 'b'] });
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle empty propsToWatch array', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      @propsObserver([])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+      component.render();
+
+      component.props = { name: 'Jane', age: 25 };
+      component.render();
+
+      expect(onPropsChangeSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should work with multiple renders without prop changes', () => {
+      const onPropsChangeSpy = vi.fn();
+
+      @propsObserver(['name'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          onPropsChangeSpy(changedProps);
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+
+      component.render();
+      component.render();
+      component.render();
+
+      expect(onPropsChangeSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Render behavior', () => {
+    it('should call onPropsChange before parent render', () => {
+      const callOrder: string[] = [];
+
+      @propsObserver(['name'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {
+          callOrder.push('onPropsChange');
+        }
+
+        render() {
+          callOrder.push('render');
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+      component.render();
+
+      component.props = { name: 'Jane', age: 30 };
+      component.render();
+
+      expect(callOrder).toEqual(['render', 'onPropsChange', 'render']);
+    });
+  });
+
+  describe('Unmount behavior', () => {
+    it('should call decorated componentWillUnmount', () => {
+      const onComponentWillUnmountSpy = vi.fn();
+
+      @propsObserver(['name', 'age'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {}
+
+        componentWillUnmount() {
+          onComponentWillUnmountSpy();
+        }
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+
+      component.render();
+      expect(onComponentWillUnmountSpy).not.toHaveBeenCalled();
+
+      component.componentWillUnmount();
+      expect(onComponentWillUnmountSpy).toHaveBeenCalledOnce();
+    });
+
+    it('should set observable props to undefined', () => {
+      @propsObserver(['name', 'age'])
+      class TestComponent {
+        props: TestProps;
+
+        constructor(props: TestProps) {
+          this.props = props;
+        }
+
+        onPropsChange(changedProps: Partial<TestProps>) {}
+
+        componentWillUnmount() {}
+
+        render() {
+          return 'rendered';
+        }
+      }
+
+      const component = new TestComponent({ name: 'John', age: 30 });
+
+      component.render();
+      // @ts-expect-error
+      expect(component.__observableProps).toEqual({ name: 'John', age: 30 });
+
+      component.componentWillUnmount();
+      // @ts-expect-error
+      expect(component.__observableProps).toEqual({ name: undefined, age: undefined });
+    });
+  });
+});
diff --git a/semcore/core/package.json b/semcore/core/package.json
index d8551d152b..a70efca789 100644
--- a/semcore/core/package.json
+++ b/semcore/core/package.json
@@ -295,6 +295,16 @@
       "require": "./lib/utils/use/useScrollBarWidth.js",
       "import": "./lib/utils/use/useScrollBarWidth.mjs",
       "types": "./lib/utils/use/useScrollBarWidth.d.ts"
+    },
+    "./lib/decorators/reactive": {
+      "require": "./lib/decorators/reactive.js",
+      "import": "./lib/decorators/reactive.mjs",
+      "types": "./lib/decorators/reactive.d.ts"
+    },
+    "./lib/decorators/propsObserver": {
+      "require": "./lib/decorators/propsObserver.js",
+      "import": "./lib/decorators/propsObserver.mjs",
+      "types": "./lib/decorators/propsObserver.d.ts"
     }
   },
   "dependencies": {
diff --git a/semcore/core/src/decorators/propsObserver.ts b/semcore/core/src/decorators/propsObserver.ts
new file mode 100644
index 0000000000..5b58e09bb9
--- /dev/null
+++ b/semcore/core/src/decorators/propsObserver.ts
@@ -0,0 +1,67 @@
+type WatchedProps<Props> = { [key in keyof Props]?: unknown };
+
+type Constructor<Props> = new (...args: any[]) => {
+  props: Props;
+  onPropsChange(changedProps: WatchedProps<Props>): void;
+  render(): React.ReactNode;
+  componentWillUnmount?(): void;
+};
+
+function propsObserver<
+  P extends Record<string, any>,
+  C extends Constructor<P>,
+>(propsToWatch: Array<keyof P>) {
+  return function (Class: C): C & Constructor<P> {
+    return class extends Class {
+      __observableProps: WatchedProps<P> = {};
+
+      constructor(...args: any[]) {
+        super(...args);
+
+        if (!this.props) return;
+
+        const observablePropKeys = propsToWatch.length === 0 ? Object.keys(this.props) : [...propsToWatch];
+
+        observablePropKeys.forEach((key) => {
+          this.__observableProps[key] = this.props[key];
+        });
+      }
+
+      onPropsChange(_?: WatchedProps<P>) {
+        let shouldEmitChanges = false;
+        const changedProps: WatchedProps<P> = {};
+
+        Object.entries(this.__observableProps).forEach(([key, value]: [key: keyof P, value: unknown]) => {
+          const arePropsEqual = Object.is(value, this.props[key]);
+
+          if (!arePropsEqual) {
+            this.__observableProps[key] = this.props[key];
+            changedProps[key] = this.props[key];
+
+            shouldEmitChanges = true;
+          }
+        });
+
+        if (!shouldEmitChanges) return;
+
+        super.onPropsChange(changedProps);
+      }
+
+      componentWillUnmount() {
+        super.componentWillUnmount?.();
+
+        Object.keys(this.__observableProps).forEach((key: keyof P) => {
+          this.__observableProps[key] = undefined;
+        });
+      }
+
+      render() {
+        this.onPropsChange();
+
+        return super.render();
+      }
+    };
+  };
+}
+
+export default propsObserver;
diff --git a/semcore/core/src/decorators/reactive.ts b/semcore/core/src/decorators/reactive.ts
new file mode 100644
index 0000000000..f87cfe9189
--- /dev/null
+++ b/semcore/core/src/decorators/reactive.ts
@@ -0,0 +1,82 @@
+type Primitive = string | number | boolean | symbol | bigint | null | undefined;
+type IsReadonly<This, Property extends keyof This> =
+  (<F>() => F extends { [P in Property]: This[Property] } ? 1 : 2) extends
+  (<F>() => F extends { -readonly [P in Property]: This[Property] } ? 1 : 2)
+    ? false
+    : true;
+type Callback<This> = (this: This, field: string | symbol, newValue: unknown) => void;
+type ReturnType<
+  This,
+  Property extends keyof This = keyof This,
+> = IsReadonly<This, Property> extends true
+  ? (_: undefined, ctx: ClassFieldDecoratorContext<This, This[Property]>) => void
+  : This[Property] extends Primitive
+    ? (_: undefined, ctx: ClassFieldDecoratorContext<This, This[Property]>) => void
+    : never;
+
+const isPrimitiveValue = (value: unknown) => value !== Object(value);
+
+function reactive<
+  This,
+  Property extends keyof This,
+  Value = This[Property],
+>(cb: Value extends Primitive ? Callback<This> : never): ReturnType<This>;
+function reactive<
+  This,
+  Property extends keyof This,
+  Value = This[Property],
+>(watchedFields: Value extends Primitive ? never : Array<keyof Value>, cb: Callback<This>): ReturnType<This>;
+
+function reactive<
+  This,
+  Property extends keyof This,
+>(watchedFieldsOrCb: Array<keyof This[Property]> | Callback<This>, cb?: Callback<This>) {
+  return function (_: undefined, ctx: ClassFieldDecoratorContext<This, This[Property]>) {
+    const { addInitializer, name } = ctx;
+
+    addInitializer(function (this: This) {
+      const thisRoot = this;
+
+      const isPrimitive = isPrimitiveValue(this[name as Property]);
+
+      const callback = typeof watchedFieldsOrCb === 'function' ? watchedFieldsOrCb : cb!;
+      const fields = Array.isArray(watchedFieldsOrCb) ? watchedFieldsOrCb : null;
+
+      if (isPrimitive) {
+        let value = this[name as Property];
+
+        Object.defineProperty(this, name, {
+          get() {
+            return value;
+          },
+          set(newValue) {
+            const oldValue = value;
+
+            value = newValue;
+
+            if (oldValue !== newValue) {
+              callback.call(thisRoot, name, newValue);
+            }
+          },
+          enumerable: true,
+          configurable: true,
+        });
+      } else {
+        // @ts-ignore
+        this[name] = new Proxy(this[name], {
+          set(target, p, newValue) {
+            target[p] = newValue;
+
+            if (fields?.length === 0 || fields?.includes(p as keyof This[Property])) {
+              callback.call(thisRoot, p, newValue);
+            }
+
+            return true;
+          },
+        });
+      }
+    });
+  };
+}
+
+export default reactive;
diff --git a/semcore/time-picker/__tests__/index.test.jsx b/semcore/time-picker/__tests__/index.test.jsx
deleted file mode 100644
index 990bcdbcc1..0000000000
--- a/semcore/time-picker/__tests__/index.test.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
-import { describe } from '@semcore/testing-utils/vitest';
-
-describe('time-picker Dependency imports', () => {
-  runDependencyCheckTests('time-picker');
-});
diff --git a/semcore/time-picker/__tests__/index.test.tsx b/semcore/time-picker/__tests__/index.test.tsx
new file mode 100644
index 0000000000..3183ca600e
--- /dev/null
+++ b/semcore/time-picker/__tests__/index.test.tsx
@@ -0,0 +1,181 @@
+import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
+import { describe, it, expect } from '@semcore/testing-utils/vitest';
+
+import TimePickerEntity from '../src/entity/TimePickerEntity';
+
+describe('time-picker Dependency imports', () => {
+  runDependencyCheckTests('time-picker');
+});
+
+describe('TimePickerEntity', () => {
+  describe('constructor', () => {
+    it('should initialize with default empty time when no value provided', () => {
+      const entity = new TimePickerEntity(':');
+
+      expect(entity.hours).toBe('');
+      expect(entity.minutes).toBe('');
+    });
+
+    it('should parse hours and minutes from value string', () => {
+      const entity = new TimePickerEntity('14:30');
+
+      expect(entity.hours).toBe('14');
+      expect(entity.minutes).toBe('30');
+    });
+
+    it('should handle single digit hours and minutes', () => {
+      const entity = new TimePickerEntity('9:5');
+
+      expect(entity.hours).toBe('09');
+      expect(entity.minutes).toBe('05');
+    });
+
+    it('should initialize with AM meridiem by default', () => {
+      const entity = new TimePickerEntity('10:00', true);
+
+      expect(entity.meridiem).toBe('AM');
+    });
+  });
+
+  describe('12-hour format', () => {
+    it('should format midnight (00:00) as 12:00 AM', () => {
+      const entity = new TimePickerEntity('0:00', true);
+
+      expect(entity.hours).toBe('12');
+      expect(entity.minutes).toBe('00');
+    });
+
+    it('should format hours 1-11 AM correctly', () => {
+      const entity = new TimePickerEntity('9:30', true);
+
+      expect(entity.hours).toBe('09');
+    });
+
+    it('should format noon (12:00) as 12:00', () => {
+      const entity = new TimePickerEntity('12:00', true);
+
+      expect(entity.hours).toBe('12');
+    });
+
+    it('should format hours 13-23 as 1-11 PM', () => {
+      const entity = new TimePickerEntity('14:45', true);
+
+      expect(entity.hours).toBe('02');
+    });
+  });
+
+  describe('24-hour format', () => {
+    it('should format hours with leading zero in 24-hour mode', () => {
+      const entity = new TimePickerEntity('9:30');
+
+      expect(entity.hours).toBe('09');
+    });
+
+    it('should handle midnight in 24-hour format', () => {
+      const entity = new TimePickerEntity('0:00');
+
+      expect(entity.hours).toBe('00');
+    });
+
+    it('should convert 12 AM to 00:00 in 24-hour format', () => {
+      const entity = new TimePickerEntity('12:00');
+
+      expect(entity.hours).toBe('00');
+    });
+
+    it('should convert 12 PM to 12:00 in 24-hour format', () => {
+      const entity = new TimePickerEntity('12:00');
+      entity.toggleMeridiem();
+
+      expect(entity.hours).toBe('12');
+    });
+
+    it('should convert PM hours correctly', () => {
+      const entity = new TimePickerEntity('3:00');
+      entity.toggleMeridiem();
+
+      expect(entity.hours).toBe('15');
+    });
+
+    it('should keep AM hours unchanged (except 12)', () => {
+      const entity = new TimePickerEntity('9:00');
+
+      expect(entity.hours).toBe('09');
+    });
+  });
+
+  describe('toggleMeridiem', () => {
+    it('should toggle multiple times correctly', () => {
+      const entity = new TimePickerEntity('10:00', true);
+
+      entity.toggleMeridiem();
+      expect(entity.meridiem).toBe('PM');
+
+      entity.toggleMeridiem();
+      expect(entity.meridiem).toBe('AM');
+
+      entity.toggleMeridiem();
+      expect(entity.meridiem).toBe('PM');
+    });
+  });
+
+  describe('toString', () => {
+    it('should return 24-hour format string when is12Hour is false', () => {
+      const entity = new TimePickerEntity('14:30');
+
+      expect(entity.toString()).toBe('14:30');
+    });
+
+    it('should convert to 24-hour format string when is12Hour is true', () => {
+      const entity = new TimePickerEntity('2:30', true);
+      entity.toggleMeridiem();
+
+      expect(entity.toString()).toBe('14:30');
+    });
+
+    it('should handle midnight (12 AM) conversion', () => {
+      const entity = new TimePickerEntity('12:00', true);
+
+      expect(entity.toString()).toBe('00:00');
+    });
+
+    it('should handle noon (12 PM) conversion', () => {
+      const entity = new TimePickerEntity('12:00', true);
+      entity.toggleMeridiem();
+
+      expect(entity.toString()).toBe('12:00');
+    });
+
+    it('should add leading zeros to output', () => {
+      const entity = new TimePickerEntity('9:5');
+
+      expect(entity.toString()).toBe('09:05');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle invalid hours gracefully', () => {
+      const entity = new TimePickerEntity('invalid:30');
+
+      expect(entity.hours).toBe('invalid');
+    });
+
+    it('should handle empty minutes', () => {
+      const entity = new TimePickerEntity('10:');
+
+      expect(entity.minutes).toBe('');
+    });
+
+    it('should handle empty hours', () => {
+      const entity = new TimePickerEntity(':30');
+
+      expect(entity.hours).toBe('');
+    });
+
+    it('should preserve non-numeric hour values in 12-hour format', () => {
+      const entity = new TimePickerEntity('invalid:30', true);
+
+      expect(entity.hours).toBe('invalid');
+    });
+  });
+});
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-chromium-linux.png
index fb17b8fc22..9a3ec955ce 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-firefox-linux.png
index ccb7dd72c9..14a8424ff9 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-webkit-linux.png
index 09c4f38d89..f59a8e489a 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-chromium-linux.png
index 59cdf50761..6ff0bc62c9 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-firefox-linux.png
index 30ffaacdb7..031116b599 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-webkit-linux.png
index 4f2206b84f..d392e7af0f 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-2-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-chromium-linux.png
index f2737aaef3..f8f174c320 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-firefox-linux.png
index 05d95c6f30..890a7357f9 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-webkit-linux.png
index d3b328bd23..e76e999975 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-3-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-chromium-linux.png
index f2737aaef3..53922c6577 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-firefox-linux.png
index 05d95c6f30..652db53402 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-webkit-linux.png
index d3b328bd23..000f1fddda 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-invalid-size-l-4-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-chromium-linux.png
index 98c1d6b9de..076a07b0b9 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-firefox-linux.png
index 55ac097f28..ac4b6f74b6 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-webkit-linux.png
index 0a1ea29bdc..ad8ebe6227 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-chromium-linux.png
index cdeb00e5be..95b25da86c 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-firefox-linux.png
index 2a511ca641..e7070bb96b 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-webkit-linux.png
index 0a3ce7ec9d..c1c3d7dbb8 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-2-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-chromium-linux.png
index 4a526523d4..f5b41e0a2e 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-firefox-linux.png
index 93a700734b..bf02b82fc5 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-webkit-linux.png
index 4b88f11826..c4d9c37584 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-3-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-chromium-linux.png
index 4a526523d4..ef46db9691 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-firefox-linux.png
index 93a700734b..ad176dbbdd 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-webkit-linux.png
index 4b88f11826..93be3a820e 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-normal-size-l-4-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-chromium-linux.png
index 2eafa41aed..b8ec6dab4f 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-firefox-linux.png
index 478c961476..1add8dcea2 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-webkit-linux.png
index 8b359117d6..b9b2195494 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-chromium-linux.png
index 9896869105..3ec4ec57a0 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-firefox-linux.png
index 577a333c59..5dc51c1765 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-webkit-linux.png
index f91064ee85..fb8e942b83 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-2-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-chromium-linux.png
index dd3ecf2fd9..fdffb5955c 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-firefox-linux.png
index db88339ce4..8c665b702c 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-webkit-linux.png
index 738f06db23..a0a5f45b38 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-3-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-chromium-linux.png
index dd3ecf2fd9..a7f3e94b25 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-firefox-linux.png
index db88339ce4..eb5b27aafd 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-webkit-linux.png
index 738f06db23..b3261a2732 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-false-state-valid-size-m-4-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-chromium-linux.png
index c9a37e6a86..d1f2a1f40e 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-firefox-linux.png
index e8843cee9f..810534547e 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-webkit-linux.png
index a77d81ca36..72ca2d401f 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-chromium-linux.png
index 2e20aea74d..d997b35c4c 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-firefox-linux.png
index eb9ff43193..779a2b1c41 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-webkit-linux.png
index 68e87bf81f..1810081348 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-2-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-chromium-linux.png
index a3539271ab..a7b8017c57 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-firefox-linux.png
index 122e604568..5b04f745eb 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-webkit-linux.png
index 88b3630da4..2fff920f80 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-3-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-chromium-linux.png
index a3539271ab..4f0db898ab 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-firefox-linux.png
index 122e604568..07b38dd7c4 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-webkit-linux.png
index 88b3630da4..c7eaf69fb4 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-invalid-size-m-4-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-chromium-linux.png
index 6f1cc0fdf2..525d136e21 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-firefox-linux.png
index 0a54f0904e..cf176eb86f 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-webkit-linux.png
index 7fd16b1715..f2707de108 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-chromium-linux.png
index 55bfb31ed3..3bed3d3268 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-firefox-linux.png
index 3d7587cc50..7a0945b08f 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-webkit-linux.png
index 43da1d1b46..7936b2defb 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-2-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-chromium-linux.png
index a87947f644..2f0ed66fb0 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-firefox-linux.png
index 84d4fb86b6..8c2f6d5df8 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-webkit-linux.png
index 5b7e425bc5..e0faba6075 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-3-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-chromium-linux.png
index a87947f644..5336752736 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-firefox-linux.png
index 84d4fb86b6..28a49be4bc 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-webkit-linux.png
index 5b7e425bc5..51d8fdeda8 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-normal-size-m-4-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-chromium-linux.png
index 97cacf01cf..955684f821 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-firefox-linux.png
index 14a2b4b420..0beeda64d8 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-webkit-linux.png
index 3be4527598..9c2f95061d 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-chromium-linux.png
index bcee16a450..c84618bcb4 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-firefox-linux.png
index 2e49627bf0..46956495d9 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-webkit-linux.png
index e848ad12d9..d55398f7d0 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-2-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-chromium-linux.png
index 2c134c7d2f..879487de41 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-firefox-linux.png
index 610dab556a..c713f07155 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-webkit-linux.png
index 1ea5e80ec3..33f192e7e0 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-3-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-chromium-linux.png
index 2c134c7d2f..b8abc15f77 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-firefox-linux.png
index 610dab556a..6b3cfd97d7 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-webkit-linux.png
index 1ea5e80ec3..f72e7e24f8 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-is12Hour-true-state-valid-size-l-4-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-chromium-linux.png
index 6dc766d1d5..de7c0fabcf 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-firefox-linux.png
index e421f4b676..ebc607ce16 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-webkit-linux.png
index 48d03855ca..78d29d24e3 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-32-defaultValue-undefined-is12Hour-true-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-chromium-linux.png
index 72f9ed375b..7ae5ed382f 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-firefox-linux.png
index e9e5662ba0..3c06bfcf91 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-webkit-linux.png
index 994a6998bd..c1372acb11 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-12-44-defaultValue-undefined-is12Hour-false-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-chromium-linux.png
index 89bd2bf9a2..2ee15708b5 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-firefox-linux.png
index fb7eba6b54..8d03ad55c0 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-webkit-linux.png
index 5e9fcd8efa..4c68e12701 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-08-19-is12Hour-true-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-chromium-linux.png
index 53bd77b34d..a2e23cb528 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-firefox-linux.png
index 04219acac1..8360549ec6 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-webkit-linux.png
index c8da79bf7c..dd5be9ae01 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-TimePicker-with-value-undefined-defaultValue-23-59-is12Hour-false-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-chromium-linux.png
index d47e7ef5a3..8641b759de 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-firefox-linux.png
index b860efc991..acfbc93726 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-webkit-linux.png
index 00ddf80a5f..26ed9d8ad9 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-invalid-size-l-is12Hour-false-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-chromium-linux.png
index 057abd8e23..b6f01be7de 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-firefox-linux.png
index 9f90bbf060..6c3f56a9b6 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-webkit-linux.png
index 290b32deaf..29eb68d941 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-normal-size-l-is12Hour-false-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-chromium-linux.png
index 6fc2f4cc50..d9312f365e 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-firefox-linux.png
index 3827b9d223..c6716583cb 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-webkit-linux.png
index 0e2bdd1147..4082f0946d 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-disabled-TimePicker-with-state-valid-size-m-is12Hour-false-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-chromium-linux.png
index 9c7448591a..26d145a6d6 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-firefox-linux.png
index be168780c2..782af547f4 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-webkit-linux.png
index a7e3f379ab..0a33b2f2d3 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-chromium-linux.png
index 0eddafb482..44153e86f1 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-firefox-linux.png
index 1cb51a01e7..413efe02d0 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-webkit-linux.png
index 002a742582..eb632acac9 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-2-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-chromium-linux.png
index 527dbb0af5..549609c9cf 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-firefox-linux.png
index c2747b1e13..6c7cff694a 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-webkit-linux.png
index db4aaa6133..d09af020e9 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-3-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-chromium-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-chromium-linux.png
index d6c9f38e87..7fd1f7f66d 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-chromium-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-firefox-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-firefox-linux.png
index 736f4c2f39..667b59e73f 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-firefox-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-webkit-linux.png b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-webkit-linux.png
index 33d46b5bd1..8b58ce516f 100644
Binary files a/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-webkit-linux.png and b/semcore/time-picker/__tests__/time-picker.browser-test.tsx-snapshots/-visual-Verify-hours-and-minutes-listboxes-with-and-without-step-4-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-chromium-linux.png b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-chromium-linux.png
index ca8160a597..647433b6c0 100644
Binary files a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-chromium-linux.png and b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-firefox-linux.png b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-firefox-linux.png
index 6b5a0494ce..5df798e47c 100644
Binary files a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-firefox-linux.png and b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-webkit-linux.png b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-webkit-linux.png
index 443ec4e511..dbb1ea6116 100644
Binary files a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-webkit-linux.png and b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-1-webkit-linux.png differ
diff --git a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-chromium-linux.png b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-chromium-linux.png
index 6d3103ee8c..5365332d5c 100644
Binary files a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-chromium-linux.png and b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-chromium-linux.png differ
diff --git a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-firefox-linux.png b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-firefox-linux.png
index cfda6f99b6..54b994cd1b 100644
Binary files a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-firefox-linux.png and b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-firefox-linux.png differ
diff --git a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-webkit-linux.png b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-webkit-linux.png
index 850b1df51c..c43beb0d60 100644
Binary files a/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-webkit-linux.png and b/semcore/time-picker/__tests__/ux-patterns-with-date-picker/time-date-picker.browser-test.tsx-snapshots/-visual-Verify-pattern-with-Time-Picker-and-Date-picker-2-webkit-linux.png differ
diff --git a/semcore/time-picker/package.json b/semcore/time-picker/package.json
index 70378ffa59..cc573b0c75 100644
--- a/semcore/time-picker/package.json
+++ b/semcore/time-picker/package.json
@@ -9,7 +9,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "pnpm semcore-builder --source=js && pnpm vite build"
+    "build": "pnpm semcore-builder && pnpm vite build"
   },
   "exports": {
     "require": "./lib/cjs/index.js",
diff --git a/semcore/time-picker/src/TimePicker.jsx b/semcore/time-picker/src/TimePicker.jsx
deleted file mode 100644
index 288b40da13..0000000000
--- a/semcore/time-picker/src/TimePicker.jsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import { Box } from '@semcore/base-components';
-import { createComponent, Component, sstyled, Root } from '@semcore/core';
-import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
-import Input from '@semcore/input';
-import React from 'react';
-
-import Format from './PickerFormat';
-import { Hours, Minutes } from './PickerInput';
-import style from './style/time-picker.shadow.css';
-import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
-
-const MAP_MERIDIEM = {
-  AM: 'PM',
-  PM: 'AM',
-};
-const MAP_FIELD_TO_TIME = {
-  hours: 0,
-  minutes: 1,
-};
-
-export function intOrDefault(value, def = 0) {
-  const number = Number.parseInt(value);
-  return Number.isNaN(number) ? def : number;
-}
-
-export function withLeadingZero(value) {
-  value = String(value);
-  if (value.length === 1) return `0${value}`;
-  return String(value);
-}
-
-export function meridiemByHours(hours) {
-  return hours >= 12 ? 'PM' : 'AM';
-}
-
-export function formatHoursTo12(hours /* hours by 24 */) {
-  const nHours = intOrDefault(hours, Number.NaN); // if not (:00)
-  if (Number.isNaN(nHours)) return hours;
-
-  // if not (HH:00)
-  if (nHours === 0) return 12; // 0 => 12 PM
-  if (nHours > 12) return nHours - 12; // 22 => 10 PM
-
-  return hours;
-}
-
-export function formatHoursTo24(hours /* hours by 12 */, meridiem) {
-  const nHours = intOrDefault(hours, Number.NaN); // if not (:00)
-
-  if (Number.isNaN(nHours)) return hours;
-
-  if (meridiem === 'AM') {
-    if (nHours === 12) return 0; // 12 AM => 0
-  }
-
-  if (meridiem === 'PM') {
-    if (nHours < 12) return nHours + 12; // 10 PM => 22
-  }
-
-  return hours;
-}
-
-class TimePickerRoot extends Component {
-  static displayName = 'TimePicker';
-  static style = style;
-  static enhance = [i18nEnhance(localizedMessages)];
-  static defaultProps = ({ is12Hour }) => ({
-    defaultValue: '',
-    size: 'm',
-    children: (
-      <>
-        <TimePicker.Hours />
-        <TimePicker.Separator />
-        <TimePicker.Minutes />
-        {is12Hour && <TimePicker.Format />}
-      </>
-    ),
-    i18n: localizedMessages,
-    locale: 'en',
-    defaultTitle: '',
-  });
-
-  hoursInputRef = React.createRef();
-  minutesInputRef = React.createRef();
-
-  _lastMeridiem = 'AM'; // default AM
-
-  uncontrolledProps() {
-    return {
-      value: null,
-      title: null,
-    };
-  }
-
-  componentDidMount() {
-    const { id, 'aria-describedby': ariaDescribedBy } = this.asProps;
-    const selector = `[for=${id}]`;
-    const titleElement =
-      document.querySelector(selector) ?? document.querySelector(`#${ariaDescribedBy}`);
-
-    if (titleElement) {
-      this.handlers.title(titleElement.textContent);
-    }
-  }
-
-  get value() {
-    const { value } = this.asProps;
-    return value === null || value === undefined ? ':' : value;
-  }
-
-  get meridiem() {
-    const { value } = this.asProps;
-    const [hours = ''] = value.split(':');
-
-    const nHours = intOrDefault(hours, Number.NaN);
-
-    if (!Number.isNaN(nHours)) {
-      this._lastMeridiem = meridiemByHours(nHours);
-    }
-
-    return this._lastMeridiem;
-  }
-
-  valueToTime(value) {
-    const { is12Hour } = this.asProps;
-    let [hours = '', minutes = ''] = value.split(':');
-
-    if (is12Hour) hours = formatHoursTo12(hours);
-
-    hours = withLeadingZero(hours);
-    minutes = withLeadingZero(minutes);
-
-    return [hours, minutes];
-  }
-
-  timeToValue(time, meridiem) {
-    const { is12Hour } = this.asProps;
-    let [hours = '', minutes = ''] = time;
-
-    hours = intOrDefault(hours, hours); // 03 => 3
-    minutes = intOrDefault(minutes, minutes); // MM => MM
-
-    if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0
-
-    return `${hours}:${minutes}`;
-  }
-
-  handleValueChange = (value, field, event) => {
-    const { is12Hour } = this.asProps;
-    const { meridiem } = this;
-
-    let time;
-    if (field) {
-      time = this.value.split(':');
-      time[MAP_FIELD_TO_TIME[field]] = value;
-    } else {
-      time = value.split(':');
-    }
-
-    let [hours = '', minutes = ''] = time;
-
-    if (is12Hour) hours = String(formatHoursTo12(hours));
-
-    value = this.timeToValue([hours, minutes], meridiem);
-    this.handlers.value(value, event);
-  };
-
-  handleMeridiemClick = (event) => {
-    const { is12Hour } = this.asProps;
-    let { value, meridiem } = this;
-    let [hours = '', minutes = ''] = value.split(':');
-
-    if (is12Hour) hours = String(formatHoursTo12(hours));
-
-    value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);
-    this.handlers.value(value, event);
-  };
-
-  _getHoursAndMinutesProps = () => {
-    const { is12Hour, size, disabled, getI18nText } = this.asProps;
-    const time = this.valueToTime(this.value);
-
-    return {
-      time,
-      size,
-      is12Hour,
-      disabled,
-      $onValueChange: this.handleValueChange,
-      minutesInputRef: this.minutesInputRef,
-      hoursInputRef: this.hoursInputRef,
-      _getI18nText: getI18nText,
-    };
-  };
-
-  getHoursProps = () => {
-    return { ...this._getHoursAndMinutesProps(), ref: this.hoursInputRef };
-  };
-
-  getMinutesProps = () => {
-    return { ...this._getHoursAndMinutesProps(), ref: this.minutesInputRef };
-  };
-
-  getSeparatorProps() {
-    return {
-      disabled: this.asProps.disabled,
-      hoursInputRef: this.hoursInputRef,
-    };
-  }
-
-  getFormatProps() {
-    const { size, disabled, disablePortal, getI18nText } = this.asProps;
-
-    return {
-      size,
-      disabled,
-      disablePortal,
-      meridiem: this.meridiem,
-      onClick: this.handleMeridiemClick,
-      getI18nText,
-    };
-  }
-
-  render() {
-    const STimePicker = Root;
-    const { styles, Children, value, is12Hour, getI18nText, title } = this.asProps;
-    const [hours, minutes] = this.valueToTime(this.value);
-
-    const label = value
-      ? `${title} ${getI18nText('title', {
-        time: `${hours}:${withLeadingZero(minutes)}`,
-        meridiem: is12Hour ? this.meridiem : '',
-      })}`
-      : `${title} ${getI18nText('titleEmpty')}`;
-
-    return sstyled(styles)(
-      <>
-        <STimePicker
-          render={Input}
-          role='group'
-          aria-label={label}
-          __excludeProps={['value', 'title']}
-        >
-          <Children />
-        </STimePicker>
-      </>,
-    );
-  }
-}
-
-class Separator extends Component {
-  static defaultProps = {
-    children: ':',
-  };
-
-  handlerClick = () => {
-    if (this.asProps.hoursInputRef.current) {
-      this.asProps.hoursInputRef.current?.focus();
-    }
-  };
-
-  render() {
-    const STimePickerSeparator = Root;
-    const { styles } = this.asProps;
-
-    return sstyled(styles)(
-      <STimePickerSeparator render={Box} onClick={this.handlerClick} aria-hidden='true' />,
-    );
-  }
-}
-
-const TimePicker = createComponent(TimePickerRoot, {
-  Hours,
-  Minutes,
-  Separator,
-  Format,
-});
-
-export default TimePicker;
diff --git a/semcore/time-picker/src/PickerFormat.jsx b/semcore/time-picker/src/component/PickerFormat/PickerFormat.tsx
similarity index 80%
rename from semcore/time-picker/src/PickerFormat.jsx
rename to semcore/time-picker/src/component/PickerFormat/PickerFormat.tsx
index 4c3c04ad2e..21595d17b8 100644
--- a/semcore/time-picker/src/PickerFormat.jsx
+++ b/semcore/time-picker/src/component/PickerFormat/PickerFormat.tsx
@@ -3,8 +3,12 @@ import { Component, sstyled, Root } from '@semcore/core';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
 import React from 'react';
 
-class TimePickerFormat extends Component {
-  static enhance = [uniqueIDEnhancement()];
+import style from './picker-format.shadow.css';
+import type { TimePickerFormatProps, TimePickerFormatPropsInternal } from './PickerFormat.type';
+
+class TimePickerFormat extends Component<TimePickerFormatProps, typeof TimePickerFormat.enhance, {}, TimePickerFormatPropsInternal> {
+  static style = style;
+  static enhance = [uniqueIDEnhancement()] as const;
 
   state = {
     changedFormatNotice: '',
diff --git a/semcore/time-picker/src/component/PickerFormat/PickerFormat.type.ts b/semcore/time-picker/src/component/PickerFormat/PickerFormat.type.ts
new file mode 100644
index 0000000000..1da2e26e45
--- /dev/null
+++ b/semcore/time-picker/src/component/PickerFormat/PickerFormat.type.ts
@@ -0,0 +1,19 @@
+import type { BoxProps } from '@semcore/base-components';
+import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n';
+
+import type { TimePickerMeridiem } from '../TimePicker/TimePicker.type';
+
+export type TimePickerFormatProps = BoxProps & {};
+
+export type TimePickerFormatPropsInternal = {
+  /** @Internal */
+  getI18nText: ReturnType<typeof useI18n>;
+  /** @Internal */
+  size: 'm' | 'l';
+  /** @Internal */
+  disabled: boolean;
+  /** @Internal */
+  meridiem: TimePickerMeridiem;
+  /** @Internal */
+  onClick: (event: React.SyntheticEvent) => void;
+};
diff --git a/semcore/time-picker/src/style/time-picker.shadow.css b/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css
similarity index 60%
rename from semcore/time-picker/src/style/time-picker.shadow.css
rename to semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css
index bca1b0de4a..6c3e895d28 100644
--- a/semcore/time-picker/src/style/time-picker.shadow.css
+++ b/semcore/time-picker/src/component/PickerFormat/picker-format.shadow.css
@@ -1,45 +1,3 @@
-STimePicker {
-  position: relative;
-  width: auto;
-  outline: none;
-
-  SPickerInput {
-    box-sizing: content-box;
-    text-align: center;
-    z-index: 1;
-    height: 1.5em;
-
-    &[placeholder] {
-      text-overflow: initial;
-    }
-    &:focus {
-      outline: none;
-      background-color: var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2));
-    }
-  }
-}
-
-/*STimePicker[keyboardFocused]:focus {*/
-/*  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));*/
-/*}*/
-
-STimePicker[disabled] {
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  cursor: default;
-}
-
-SPickerInput[size='m'] {
-  width: 19px;
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  padding: 0;
-}
-
-SPickerInput[size='l'] {
-  width: 21px;
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  padding: 0;
-}
-
 SPickerFormat {
   flex-shrink: 0;
   position: relative;
@@ -100,17 +58,4 @@ SPickerFormat[disabled] {
   cursor: default;
   pointer-events: none;
   border-color: transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf);
-}
-
-/*SPickerFormat[keyboardFocused] {*/
-/*  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));*/
-/*}*/
-
-STimePickerSeparator {
-  color: var(--intergalactic-text-primary, #191b23);
-}
-
-STimePickerSeparator[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
-  pointer-events: none;
-}
+}
\ No newline at end of file
diff --git a/semcore/time-picker/src/PickerInput.jsx b/semcore/time-picker/src/component/PickerInput/PickerInput.tsx
similarity index 59%
rename from semcore/time-picker/src/PickerInput.jsx
rename to semcore/time-picker/src/component/PickerInput/PickerInput.tsx
index e1d6410bab..073d9ebfd7 100644
--- a/semcore/time-picker/src/PickerInput.jsx
+++ b/semcore/time-picker/src/component/PickerInput/PickerInput.tsx
@@ -4,25 +4,19 @@ import Input from '@semcore/input';
 import Select from '@semcore/select';
 import React from 'react';
 
-import { intOrDefault, withLeadingZero } from './TimePicker';
+import style from './picker-input.shadow.css';
+import type { PickerInputMinMax, PickerInputProps } from './PickerInput.type';
+import type { TimePickerField } from '../TimePicker/TimePicker.type';
 
-const MAP_FIELD_TO_TIME = {
-  hours: 0,
-  minutes: 1,
-};
-
-const MAP_SIZE_SELECT = {
-  m: 'm',
-  l: 'l',
-};
-
-function getOptions(min, max, step = 1) {
+function getOptions(minMax: PickerInputMinMax, step = 1) {
+  const [min, max] = minMax;
   const length = Number(((max + 1 - min) / step).toFixed(0));
   const options = Array(length).fill('');
   let numValue = min;
   return options.map((_i, index) => {
     numValue = index === 0 ? numValue : numValue + step;
-    const value = withLeadingZero(String(numValue));
+    const value = String(numValue).padStart(2, '0');
+
     return (
       <Select.Option value={value} key={value}>
         {value}
@@ -31,36 +25,41 @@ function getOptions(min, max, step = 1) {
   });
 }
 
-const defaultPopperOffset = [-8, 4];
+type State = {
+  dirtyValue?: string;
+  visible: boolean;
+};
 
-class ItemPicker extends Component {
-  static defaultProps = {
+abstract class AbstractPickerInput extends Component<PickerInputProps, [], {}, {}, State> {
+  static style = style;
+  static defaultProps = (_: PickerInputProps) => ({
     placeholder: '00',
-    offset: defaultPopperOffset,
+    offset: [-8, 4],
+  });
+
+  state: State = {
+    dirtyValue: undefined,
+    visible: false,
   };
 
   inputRef = React.createRef();
 
-  minMax() {
-    return [];
-  }
+  abstract get field(): TimePickerField;
+  abstract get minMax(): PickerInputMinMax;
+  abstract handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
 
-  state = {
-    dirtyValue: undefined,
-    visible: false,
-  };
+  parseValueWithMinMax = (value: string) => {
+    const [min, max] = this.minMax;
 
-  parseValueWithMinMax = (value) => {
-    const [min, max] = this.minMax();
-    return String(Math.max(min, Math.min(max, value)));
+    return String(Math.max(min, Math.min(max, Number(value))));
   };
 
-  dispatchOnChange(value, event) {
+  dispatchOnChange(value: string, event: React.SyntheticEvent) {
     this.setState({ dirtyValue: undefined });
     this.asProps.$onValueChange(value, this.field, event);
   }
 
-  submitChanges(event) {
+  submitChanges(event: React.SyntheticEvent) {
     let { dirtyValue } = this.state;
     if (dirtyValue !== undefined) {
       // if changes value
@@ -69,52 +68,39 @@ class ItemPicker extends Component {
     }
   }
 
-  handleChange = (value, event) => {
+  handleChange = (value: string, event: React.SyntheticEvent) => {
     /* hide props for bubbling events */
     event.stopPropagation();
-    const numberValue = intOrDefault(Number(value), Number.NaN);
+    const numberValue = Number.parseInt(value);
 
     if (!Number.isNaN(numberValue)) {
       this.setState({ dirtyValue: value.slice(-2) });
     }
   };
 
-  handleBlur = (event) => this.submitChanges(event);
-
-  /* rewrite method */
-  handleKeyDown = () => {};
+  handleBlur = (event: React.SyntheticEvent) => this.submitChanges(event);
 
-  handleSelect = (value, event) => {
+  handleSelect = (value: string, event: React.SyntheticEvent) => {
     this.dispatchOnChange(value, event);
   };
 
-  handleVisibleChange = (visible) => this.setState({ visible });
-
-  getAriaLabel = () => {
-    const { _getI18nText: getI18nText } = this.asProps;
-    if (this.field === 'hours') return getI18nText('hours');
-    if (this.field === 'minutes') return getI18nText('minutes');
-    return undefined;
-  };
+  handleVisibleChange = (visible: boolean) => this.setState({ visible });
 
   render() {
     const SPickerInput = Root;
-    const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =
-      this.asProps;
+    const { styles, step, onSelect, time, size, disabled, onVisibleChange, ariaLabel, ...other } = this.asProps;
     const { dirtyValue, visible } = this.state;
-    const timeValue = time[MAP_FIELD_TO_TIME[this.field]];
-    const value = dirtyValue === undefined ? timeValue : dirtyValue;
-    const [min, max] = this.minMax();
+    const value = dirtyValue === undefined ? time : dirtyValue;
 
     return sstyled(styles)(
       <Select
         {...other}
         interaction='focus'
-        size={size ? MAP_SIZE_SELECT[size] : false}
+        size={size}
         onChange={callAllEventHandlers(onSelect, this.handleSelect)}
         onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}
         visible={visible}
-        value={timeValue}
+        value={time}
       >
         <SPickerInput
           render={Select.Trigger}
@@ -125,31 +111,31 @@ class ItemPicker extends Component {
           disabled={disabled}
           neighborLocation={false}
           value={value}
-          aria-label={this.getAriaLabel()}
+          aria-label={ariaLabel}
           onChange={this.handleChange}
           onBlur={this.handleBlur}
           onKeyDown={this.handleKeyDown}
         />
-        <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>
+        <Select.Menu hMax={180}>{getOptions(this.minMax, step)}</Select.Menu>
       </Select>,
     );
   }
 }
 
-class Hours extends ItemPicker {
-  field = 'hours';
-  static defaultProps = ({ size }) => ({
-    ...ItemPicker.defaultProps,
-    ml: size === 'l' ? 3 : undefined,
+class Hours extends AbstractPickerInput {
+  static defaultProps = (props: PickerInputProps) => ({
+    ...AbstractPickerInput.defaultProps(props),
+    ml: props.size === 'l' ? 3 : undefined,
   });
 
-  minMax() {
+  get field(): TimePickerField {
+    return 'hours';
+  }
+
+  get minMax(): PickerInputMinMax {
     const { is12Hour } = this.asProps;
-    if (is12Hour) {
-      return [1, 12];
-    } else {
-      return [0, 23];
-    }
+
+    return is12Hour ? [1, 12] : [0, 23];
   }
 
   focusNext() {
@@ -159,13 +145,14 @@ class Hours extends ItemPicker {
     }
   }
 
-  handleKeyDown = (event) => {
+  handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const { currentTarget } = event;
     if (event.key === 'Enter') {
       this.submitChanges(event);
     }
     if (event.key === 'ArrowRight') {
       if (
+        currentTarget.selectionStart &&
         currentTarget.selectionStart >= currentTarget.value.length &&
         currentTarget.selectionStart === currentTarget.selectionEnd
       ) {
@@ -175,7 +162,7 @@ class Hours extends ItemPicker {
     }
   };
 
-  componentDidUpdate(_prevProps, prevState) {
+  componentDidUpdate(_: PickerInputProps, prevState: State) {
     const { dirtyValue } = this.state;
     if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;
 
@@ -185,14 +172,17 @@ class Hours extends ItemPicker {
   }
 }
 
-class Minutes extends ItemPicker {
-  field = 'minutes';
-  static defaultProps = ({ size }) => ({
-    ...ItemPicker.defaultProps,
-    mr: size === 'l' ? 3 : undefined,
+class Minutes extends AbstractPickerInput {
+  static defaultProps = (props: PickerInputProps) => ({
+    ...AbstractPickerInput.defaultProps(props),
+    mr: props.size === 'l' ? 3 : undefined,
   });
 
-  minMax() {
+  get field(): TimePickerField {
+    return 'minutes';
+  }
+
+  get minMax(): PickerInputMinMax {
     return [0, 59];
   }
 
@@ -203,10 +193,11 @@ class Minutes extends ItemPicker {
     }
   }
 
-  handleKeyDown = (event) => {
+  handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const { currentTarget } = event;
     if (event.key === 'ArrowLeft') {
       if (
+        currentTarget.selectionStart &&
         currentTarget.selectionStart <= 0 &&
         currentTarget.selectionStart === currentTarget.selectionEnd
       ) {
diff --git a/semcore/time-picker/src/component/PickerInput/PickerInput.type.ts b/semcore/time-picker/src/component/PickerInput/PickerInput.type.ts
new file mode 100644
index 0000000000..a1540015b1
--- /dev/null
+++ b/semcore/time-picker/src/component/PickerInput/PickerInput.type.ts
@@ -0,0 +1,16 @@
+import type { SelectProps } from '@semcore/select';
+
+import type { TimePickerField, TimePickerItemProps } from '../TimePicker/TimePicker.type';
+
+export type PickerInputProps = SelectProps & TimePickerItemProps & {
+  time: string;
+  size?: 'm' | 'l';
+  is12Hour?: boolean;
+  disabled?: boolean;
+  $onValueChange: (value: string, field: TimePickerField, event: React.SyntheticEvent) => void;
+  minutesInputRef: React.RefObject<HTMLElement>;
+  hoursInputRef: React.RefObject<HTMLElement>;
+  ariaLabel: string;
+};
+
+export type PickerInputMinMax = [number, number];
diff --git a/semcore/time-picker/src/component/PickerInput/picker-input.shadow.css b/semcore/time-picker/src/component/PickerInput/picker-input.shadow.css
new file mode 100644
index 0000000000..6d2ff7be75
--- /dev/null
+++ b/semcore/time-picker/src/component/PickerInput/picker-input.shadow.css
@@ -0,0 +1,11 @@
+SPickerInput[size='m'] {
+  width: 19px;
+  margin: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0;
+}
+
+SPickerInput[size='l'] {
+  width: 21px;
+  margin: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0;
+}
\ No newline at end of file
diff --git a/semcore/time-picker/src/component/TimePicker/TimePicker.tsx b/semcore/time-picker/src/component/TimePicker/TimePicker.tsx
new file mode 100644
index 0000000000..d87c50b768
--- /dev/null
+++ b/semcore/time-picker/src/component/TimePicker/TimePicker.tsx
@@ -0,0 +1,170 @@
+import { Box } from '@semcore/base-components';
+import { createComponent, Component, sstyled, Root } from '@semcore/core';
+import propsObserver from '@semcore/core/lib/decorators/propsObserver';
+import reactive from '@semcore/core/lib/decorators/reactive';
+import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
+import Input from '@semcore/input';
+import React from 'react';
+
+import style from './time-picker.shadow.css';
+import type {
+  TimePickerComponent,
+  TimePickerProps,
+  TimePickerField,
+  TimePickerSeparatorProps,
+} from './TimePicker.type';
+import TimePickerEntity from '../../entity/TimePickerEntity';
+import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
+import Format from '../PickerFormat/PickerFormat';
+import { Hours, Minutes } from '../PickerInput/PickerInput';
+
+@propsObserver(['value'])
+class TimePickerRoot extends Component<TimePickerProps, typeof TimePickerRoot.enhance, { value: null }> {
+  static displayName = 'TimePicker';
+  static style = style;
+  static enhance = [i18nEnhance(localizedMessages)] as const;
+  static defaultProps = ({ is12Hour }: TimePickerProps) => ({
+    defaultValue: '',
+    size: 'm',
+    children: (
+      <>
+        <TimePicker.Hours />
+        <TimePicker.Separator />
+        <TimePicker.Minutes />
+        {is12Hour && <TimePicker.Format />}
+      </>
+    ),
+    locale: 'en',
+  });
+
+  hoursInputRef = React.createRef<HTMLElement>();
+  minutesInputRef = React.createRef<HTMLElement>();
+
+  @reactive(['meridiem'], function () {
+    this.forceUpdate();
+  })
+  readonly entity = new TimePickerEntity(this.props.value ?? this.props.defaultValue, this.props.is12Hour);
+
+  onPropsChange(changedProps: TimePickerProps) {
+    const { value } = changedProps;
+
+    if (!value) return;
+
+    const [hours = '', minutes = ''] = value.split(':');
+
+    this.entity.hours = hours;
+    this.entity.minutes = minutes;
+  }
+
+  uncontrolledProps() {
+    return {
+      value: null,
+    };
+  }
+
+  handleValueChange = (value: string, field: TimePickerField, event: React.SyntheticEvent) => {
+    this.entity[field] = value;
+
+    this.handlers.value(this.entity.toString(), event);
+  };
+
+  handleMeridiemClick = (event: React.SyntheticEvent) => {
+    this.entity.toggleMeridiem();
+
+    this.handlers.value(this.entity.toString(), event);
+  };
+
+  private getCommonPickerInputProps = () => {
+    const { is12Hour, size, disabled } = this.asProps;
+
+    return {
+      size,
+      is12Hour,
+      disabled,
+      $onValueChange: this.handleValueChange,
+      minutesInputRef: this.minutesInputRef,
+      hoursInputRef: this.hoursInputRef,
+    };
+  };
+
+  getHoursProps = () => {
+    return {
+      ...this.getCommonPickerInputProps(),
+      time: this.entity.hours,
+      ariaLabel: this.asProps.getI18nText('hours'),
+      ref: this.hoursInputRef,
+    };
+  };
+
+  getMinutesProps = () => {
+    return {
+      ...this.getCommonPickerInputProps(),
+      time: this.entity.minutes,
+      ariaLabel: this.asProps.getI18nText('minutes'),
+      ref: this.minutesInputRef,
+    };
+  };
+
+  getSeparatorProps() {
+    return {
+      disabled: this.asProps.disabled,
+      hoursInputRef: this.hoursInputRef,
+    };
+  }
+
+  getFormatProps() {
+    const { size, disabled, getI18nText } = this.asProps;
+    return {
+      size,
+      disabled,
+      meridiem: this.entity.meridiem,
+      onClick: this.handleMeridiemClick,
+      getI18nText,
+    };
+  }
+
+  render() {
+    const STimePicker = Root;
+    const { styles, Children, value, is12Hour, getI18nText } = this.asProps;
+    const label = value
+      ? `${getI18nText('title', {
+        time: this.entity.toString(),
+        meridiem: is12Hour ? this.entity.meridiem : '',
+      })}`
+      : `${getI18nText('titleEmpty')}`;
+
+    return sstyled(styles)(
+      <>
+        <STimePicker render={Input} role='group' aria-label={label} __excludeProps={['value']}>
+          <Children />
+        </STimePicker>
+      </>,
+    );
+  }
+}
+class Separator extends Component<TimePickerSeparatorProps> {
+  static defaultProps = {
+    children: ':',
+  };
+
+  handlerClick = () => {
+    if (this.asProps.hoursInputRef.current) {
+      this.asProps.hoursInputRef.current?.focus();
+    }
+  };
+
+  render() {
+    const STimePickerSeparator = Root;
+    const { styles } = this.asProps;
+    return sstyled(styles)(<STimePickerSeparator render={Box} onClick={this.handlerClick} aria-hidden='true' />);
+  }
+}
+
+const TimePicker = createComponent(TimePickerRoot, {
+  Hours,
+  Minutes,
+  Separator,
+  Format,
+}) as TimePickerComponent;
+
+export default TimePicker;
diff --git a/semcore/time-picker/src/index.d.ts b/semcore/time-picker/src/component/TimePicker/TimePicker.type.ts
similarity index 73%
rename from semcore/time-picker/src/index.d.ts
rename to semcore/time-picker/src/component/TimePicker/TimePicker.type.ts
index 4853ea09e6..683148121c 100644
--- a/semcore/time-picker/src/index.d.ts
+++ b/semcore/time-picker/src/component/TimePicker/TimePicker.type.ts
@@ -1,7 +1,8 @@
-import type { Box, BoxProps } from '@semcore/base-components';
+import type { Box } from '@semcore/base-components';
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
 import type { InputProps, InputValueProps } from '@semcore/input';
-import type React from 'react';
+
+import type { TimePickerFormatProps } from '../PickerFormat/PickerFormat.type';
 
 export type TimePickerProps = Omit<InputProps, 'size'> & {
   /** Time in the hh:mm format */
@@ -21,24 +22,34 @@ export type TimePickerProps = Omit<InputProps, 'size'> & {
   locale?: string;
 };
 
+export type TimePickerSeparatorProps = {
+  /** @Internal */
+  hoursInputRef: React.RefObject<HTMLElement>;
+  /** @Internal */
+  disabled?: boolean;
+};
+
 export type TimePickerItemProps = InputValueProps & {
   /** Step for changing of the values in the dropdown list */
   step?: number;
 };
 
-export type TimePickerFormatProps = BoxProps & {};
-
 export type TimePickerContext = {
   getHoursProps: PropGetterFn;
   getFormatProps: PropGetterFn;
   getMinutesProps: PropGetterFn;
+  getSeparatorProps: PropGetterFn;
 };
 
 export type TimePickerHandlers = {
   value: (value: string) => void;
 };
 
-declare const TimePicker: Intergalactic.Component<
+export type TimePickerMeridiem = 'AM' | 'PM';
+
+export type TimePickerField = 'hours' | 'minutes';
+
+export type TimePickerComponent = Intergalactic.Component<
   'div',
   TimePickerProps,
   TimePickerContext,
@@ -49,5 +60,3 @@ declare const TimePicker: Intergalactic.Component<
   Separator: typeof Box;
   Format: Intergalactic.Component<'div', TimePickerFormatProps>;
 };
-
-export default TimePicker;
diff --git a/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css b/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css
new file mode 100644
index 0000000000..9c6520513d
--- /dev/null
+++ b/semcore/time-picker/src/component/TimePicker/time-picker.shadow.css
@@ -0,0 +1,34 @@
+STimePicker {
+  position: relative;
+  width: auto;
+  outline: none;
+
+  SPickerInput {
+    box-sizing: content-box;
+    text-align: center;
+    z-index: 1;
+    height: 1.5em;
+
+    &[placeholder] {
+      text-overflow: initial;
+    }
+    &:focus {
+      outline: none;
+      background-color: var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2));
+    }
+  }
+}
+
+STimePicker[disabled] {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  cursor: default;
+}
+
+STimePickerSeparator {
+  color: var(--intergalactic-text-primary, #191b23);
+}
+
+STimePickerSeparator[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/semcore/time-picker/src/entity/TimePickerEntity.ts b/semcore/time-picker/src/entity/TimePickerEntity.ts
new file mode 100644
index 0000000000..7907b42242
--- /dev/null
+++ b/semcore/time-picker/src/entity/TimePickerEntity.ts
@@ -0,0 +1,85 @@
+import type { TimePickerMeridiem } from '../component/TimePicker/TimePicker.type';
+
+class TimePickerEntity {
+  private _hours: string = '';
+  private _minutes: string = '';
+  private is12Hour: boolean;
+  private _meridiem: TimePickerMeridiem = 'AM';
+
+  constructor(
+    value: string = ':', // should be in the format 'HH:mm'
+    is12Hour: boolean = false,
+  ) {
+    const [hours = '', minutes = ''] = value.split(':');
+
+    this.is12Hour = is12Hour;
+    this._hours = hours;
+    this._minutes = minutes;
+  }
+
+  get meridiem() {
+    return this._meridiem;
+  }
+
+  get hours() {
+    return this.is12Hour ? this.formatHoursTo12(this._hours) : this.formatHoursTo24(this._hours);
+  }
+
+  get minutes() {
+    return this._minutes && this.withLeadingZero(this._minutes);
+  }
+
+  set hours(newHours) {
+    this._hours = newHours;
+  }
+
+  set minutes(newMinutes) {
+    this._minutes = newMinutes;
+  }
+
+  private set meridiem(newMeridiem) {
+    this._meridiem = newMeridiem;
+  }
+
+  private withLeadingZero(value: string | number) {
+    return String(value).padStart(2, '0');
+  }
+
+  private formatHoursTo12(hours: string) {
+    const numberHours = Number.parseInt(hours, 10);
+
+    if (Number.isNaN(numberHours)) return hours;
+
+    if (numberHours === 0) {
+      return '12';
+    } else if (numberHours > 12) {
+      return this.withLeadingZero(numberHours - 12);
+    }
+
+    return this.withLeadingZero(numberHours);
+  }
+
+  private formatHoursTo24(hours: string) {
+    const numberHours = Number.parseInt(hours, 10);
+
+    if (Number.isNaN(numberHours)) return hours;
+
+    if (this.meridiem === 'AM') {
+      return this.withLeadingZero(numberHours === 12 ? 0 : numberHours);
+    }
+
+    return this.withLeadingZero(numberHours < 12 ? numberHours + 12 : numberHours);
+  }
+
+  toggleMeridiem() {
+    this.meridiem = this._meridiem === 'AM' ? 'PM' : 'AM';
+  }
+
+  toString() {
+    const hours = this.is12Hour ? this.formatHoursTo24(this.hours) : this.hours;
+
+    return `${hours}:${this.minutes}`;
+  }
+}
+
+export default TimePickerEntity;
diff --git a/semcore/time-picker/src/index.js b/semcore/time-picker/src/index.js
deleted file mode 100644
index b6cfc0eb76..0000000000
--- a/semcore/time-picker/src/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './TimePicker';
-export * from './TimePicker';
diff --git a/semcore/time-picker/src/index.ts b/semcore/time-picker/src/index.ts
new file mode 100644
index 0000000000..f41fe19eb9
--- /dev/null
+++ b/semcore/time-picker/src/index.ts
@@ -0,0 +1,2 @@
+export { default } from './component/TimePicker/TimePicker';
+export * from './component/TimePicker/TimePicker.type';
diff --git a/semcore/time-picker/vite.config.ts b/semcore/time-picker/vite.config.ts
index 0991a16528..3d4c534132 100644
--- a/semcore/time-picker/vite.config.ts
+++ b/semcore/time-picker/vite.config.ts
@@ -7,10 +7,7 @@ export default mergeConfig(
   defineConfig({
     build: {
       lib: {
-        entry: './src/index.js',
-      },
-      rollupOptions: {
-        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
+        entry: './src/index.ts',
       },
     },
   }),
diff --git a/tsconfig.json b/tsconfig.json
index 7713e96e7a..a81c7f89b0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,8 +13,6 @@
     "importHelpers": false,
     "noEmitHelpers": true,
     "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
     "resolveJsonModule": true,
     "baseUrl": "./semcore",
     "typeRoots": ["node_modules/@types", "tools/@types"],