@ornikar/kitt-universal 9.43.0 → 9.44.1

package/dist/definitions/forms/DatePicker/components/KeyboardDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardDatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/forms/DatePicker/components/KeyboardDatePicker.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAI7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAMrD,UAAU,uBAAwB,SAAQ,eAAe;IACvD,eAAe,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,kBAAkB,iHAuH9B,CAAC"}
+{"version":3,"file":"KeyboardDatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/forms/DatePicker/components/KeyboardDatePicker.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAI7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AASrD,UAAU,uBAAwB,SAAQ,eAAe;IACvD,eAAe,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,kBAAkB,iHA8I9B,CAAC"}

package/dist/definitions/forms/DatePicker/reducers/keyboardDatePickerReducer.d.ts

@@ -10,21 +10,18 @@ export interface State {
     displayedYear?: string;
     minDate: DatePickerProps['minDate'];
     maxDate: DatePickerProps['maxDate'];
-    onChange: DatePickerProps['onChange'];
-    onBlur: DatePickerProps['onBlur'];
-    onFocus: DatePickerProps['onFocus'];
 }
 interface DayChangeAction {
     type: 'day-change';
-    nextDay?: string;
+    nextDay?: number;
 }
 interface MonthChangeAction {
     type: 'month-change';
-    nextMonth?: string;
+    nextMonth?: number;
 }
 interface YearChangeAction {
     type: 'year-change';
-    nextYear?: string;
+    nextYear?: number;
 }
 interface DayBlurAction {
     type: 'day-blur';

package/dist/definitions/forms/DatePicker/reducers/keyboardDatePickerReducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboardDatePickerReducer.d.ts","sourceRoot":"","sources":["../../../../../src/forms/DatePicker/reducers/keyboardDatePickerReducer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAOrD,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,KAAK,OAAO,GACR,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,CAwG7D,CAAC"}
+{"version":3,"file":"keyboardDatePickerReducer.d.ts","sourceRoot":"","sources":["../../../../../src/forms/DatePicker/reducers/keyboardDatePickerReducer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,aAAa;IACrB,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,KAAK,OAAO,GACR,eAAe,GACf,iBAAiB,GACjB,gBAAgB,GAChB,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,CAoE7D,CAAC"}

package/dist/definitions/story-components/Story.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-import type { ScrollViewProps } from 'react-native';
+import type { ScrollViewProps } from '../native-base/primitives';
 export interface StoryProps {
     title: ReactNode;
     children: ReactNode;

package/dist/definitions/story-components/Story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Story.d.ts","sourceRoot":"","sources":["../../../src/story-components/Story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAKpD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAC;CAClE;AAMD,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,QAAQ,EAAE,EAAE,UAAU,GAAG,YAAY,CAO1F"}
+{"version":3,"file":"Story.d.ts","sourceRoot":"","sources":["../../../src/story-components/Story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAKjE,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAC;CAClE;AAED,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,QAAQ,EAAE,EAAE,UAAU,GAAG,YAAY,CAO1F"}

package/dist/definitions/story-components/StoryBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryBlock.d.ts","sourceRoot":"","sources":["../../../src/story-components/StoryBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGhE,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AA6BD,eAAO,MAAM,2BAA2B,mFAA8D,CAAC;AAGvG,eAAO,MAAM,kBAAkB,WAAY,eAAe,GAAG,SAAS,KAAG,eAGxE,CAAC;AAQF,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,eAAe,GAAG,YAAY,CAQlF"}
+{"version":3,"file":"StoryBlock.d.ts","sourceRoot":"","sources":["../../../src/story-components/StoryBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGhE,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AA6BD,eAAO,MAAM,2BAA2B,mFAA8D,CAAC;AAGvG,eAAO,MAAM,kBAAkB,WAAY,eAAe,GAAG,SAAS,KAAG,eAGxE,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,eAAe,GAAG,YAAY,CAclF"}

package/dist/definitions/story-components/StoryGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryGrid.d.ts","sourceRoot":"","sources":["../../../src/story-components/StoryGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,IAAI,CAAC;AAuB1C,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CACjC;AAED,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,UAAoB,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAuBzF;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;CACrC;AAED,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI,CAqB/G;AAED,eAAO,MAAM,SAAS;;;CAGrB,CAAC"}
+{"version":3,"file":"StoryGrid.d.ts","sourceRoot":"","sources":["../../../src/story-components/StoryGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,IAAI,CAAC;AAI1C,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CACjC;AAED,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,UAAoB,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAoBzF;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;CACrC;AAED,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI,CAqB/G;AAED,eAAO,MAAM,SAAS;;;CAGrB,CAAC"}

package/dist/definitions/story-components/StorySection.d.ts

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
-import type { ViewProps } from 'react-native';
-export interface StorySectionProps extends ViewProps {
+import type { Except } from 'type-fest';
+import type { ViewProps } from '../native-base/primitives';
+export interface StorySectionProps extends Except<ViewProps, 'marginBottom'> {
     title: ReactNode;
     children: ReactNode;
     /** @private */

package/dist/definitions/story-components/StorySection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StorySection.d.ts","sourceRoot":"","sources":["../../../src/story-components/StorySection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9C,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,qBAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAQlH;yBARe,YAAY;;;;;;AAoC5B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsBD,2CAA2C;AAC3C,eAAO,MAAM,iBAAiB,qBAAe,CAAC"}
+{"version":3,"file":"StorySection.d.ts","sourceRoot":"","sources":["../../../src/story-components/StorySection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAI3D,MAAM,WAAW,iBAAkB,SAAQ,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC;IAC1E,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,qBAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAQlH;yBARe,YAAY;;;;;;AA4B5B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkBD,2CAA2C;AAC3C,eAAO,MAAM,iBAAiB,qBAAe,CAAC"}

package/dist/definitions/story-components/StoryTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryTitle.d.ts","sourceRoot":"","sources":["../../../src/story-components/StoryTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAIhE,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,eAAe,GAAG,YAAY,CAQ5F;yBARe,UAAU;;;;;AAU1B,iBAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,eAAe,GAAG,YAAY,CAQ3F;kBARQ,gBAAgB;;;AAYzB,iBAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,eAAe,GAAG,YAAY,CAc3F;kBAdQ,gBAAgB;;;AAkBzB,iBAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,eAAe,GAAG,YAAY,CAc3F;kBAdQ,gBAAgB"}
+{"version":3,"file":"StoryTitle.d.ts","sourceRoot":"","sources":["../../../src/story-components/StoryTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAIhE,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,eAAe,GAAG,YAAY,CAQ5F;yBARe,UAAU;;;;;AAU1B,iBAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,eAAe,GAAG,YAAY,CAQ3F;kBARQ,gBAAgB;;;AAYzB,iBAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,eAAe,GAAG,YAAY,CAc3F;kBAdQ,gBAAgB;;;AAkBzB,iBAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,eAAe,GAAG,YAAY,CAc3F;kBAdQ,gBAAgB"}

package/dist/definitions/story-components/theme.d.ts

@@ -1,2 +1,2 @@
-export declare const storyPadding = 16;
+export declare const storyPadding = "kitt.4";
 //# sourceMappingURL=theme.d.ts.map

package/dist/definitions/story-components/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/story-components/theme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,KAAK,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/story-components/theme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,WAAW,CAAC"}

package/dist/index-browser-all.es.android.js

@@ -27,6 +27,7 @@ import { Picker as Picker$1 } from '@react-native-picker/picker';
 import { LinearGradient as LinearGradient$1 } from 'expo-linear-gradient';
 import { useFloating, offset, autoPlacement } from '@floating-ui/react-native';
 import { makeDecorator } from '@storybook/addons';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 
 var View = View$1;
 var ScrollView = ScrollView$1;
@@ -3871,6 +3872,64 @@ function getYearInInterval(value, minDate, maxDate) {
   return value !== undefined ? Math.max(minValue, Math.min(maxValue, value)) : value;
 }
 
+var keyboardDatePickerReducer = function (state, action) {
+  switch (action.type) {
+    case 'day-change':
+      {
+        var nextDay = action.nextDay;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentDay: nextDay,
+          displayedDay: nextDay ? nextDay.toString() : ''
+        });
+      }
+    case 'month-change':
+      {
+        var nextMonth = action.nextMonth;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentMonth: nextMonth,
+          displayedMonth: nextMonth ? nextMonth.toString() : ''
+        });
+      }
+    case 'year-change':
+      {
+        var nextYear = action.nextYear;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentYear: nextYear,
+          displayedYear: nextYear ? nextYear.toString() : ''
+        });
+      }
+    case 'day-blur':
+      {
+        var nextCurrentDay = getDayInInterval(state.currentDay);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          displayedDay: nextCurrentDay ? dayFormatter(nextCurrentDay) : state.displayedDay
+        });
+      }
+    case 'month-blur':
+      {
+        var minDate = state.minDate,
+          maxDate = state.maxDate;
+        var nextCurrentMonth = getMonthInInterval(state.currentMonth, minDate, maxDate);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentMonth: nextCurrentMonth,
+          displayedMonth: nextCurrentMonth !== undefined ? monthFormatter(nextCurrentMonth) : state.displayedMonth
+        });
+      }
+    case 'year-blur':
+      {
+        var _minDate = state.minDate,
+          _maxDate = state.maxDate;
+        var nextCurrentYear = getYearInInterval(state.currentYear, _minDate, _maxDate);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentYear: nextCurrentYear,
+          displayedYear: nextCurrentYear !== undefined ? yearFormatter(nextCurrentYear) : state.displayedYear
+        });
+      }
+    default:
+      return state;
+  }
+};
+
 function isNumber(input) {
   //  Number.isNaN and isNaN are not consistent
   // eslint-disable-next-line no-restricted-globals
@@ -3954,111 +4013,6 @@ function stringToNumber(text) {
   return parseInt(text, 10);
 }
 
-var keyboardDatePickerReducer = function (state, action) {
-  var handleChange = function (dateParts) {
-    var onFocus = state.onFocus,
-      onBlur = state.onBlur,
-      onChange = state.onChange,
-      minDate = state.minDate,
-      maxDate = state.maxDate;
-    onDatePartChange(_objectSpread(_objectSpread({}, dateParts), {}, {
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onChange: onChange,
-      minDate: minDate,
-      maxDate: maxDate
-    }));
-  };
-  switch (action.type) {
-    case 'day-change':
-      {
-        var nextDay = stringToNumber(action.nextDay || '');
-        if (nextDay === undefined || !isNumber(action.nextDay)) {
-          return _objectSpread(_objectSpread({}, state), {}, {
-            currentDay: undefined,
-            displayedDay: ''
-          });
-        }
-        handleChange({
-          day: nextDay,
-          month: state.currentMonth,
-          year: state.currentYear
-        });
-        return _objectSpread(_objectSpread({}, state), {}, {
-          currentDay: nextDay,
-          displayedDay: nextDay.toString()
-        });
-      }
-    case 'month-change':
-      {
-        var nextMonth = stringToNumber(action.nextMonth || '');
-        if (nextMonth === undefined || !isNumber(action.nextMonth)) {
-          return _objectSpread(_objectSpread({}, state), {}, {
-            currentMonth: undefined,
-            displayedMonth: ''
-          });
-        }
-        handleChange({
-          day: state.currentDay,
-          month: nextMonth,
-          year: state.currentYear
-        });
-        return _objectSpread(_objectSpread({}, state), {}, {
-          currentMonth: nextMonth,
-          displayedMonth: nextMonth.toString()
-        });
-      }
-    case 'year-change':
-      {
-        var nextYear = stringToNumber(action.nextYear || '');
-        if (nextYear === undefined || !isNumber(action.nextYear)) {
-          return _objectSpread(_objectSpread({}, state), {}, {
-            currentYear: undefined,
-            displayedYear: ''
-          });
-        }
-        handleChange({
-          day: state.currentDay,
-          month: state.currentMonth,
-          year: nextYear
-        });
-        return _objectSpread(_objectSpread({}, state), {}, {
-          currentYear: nextYear,
-          displayedYear: nextYear.toString()
-        });
-      }
-    case 'day-blur':
-      {
-        var nextCurrentDay = getDayInInterval(state.currentDay);
-        return _objectSpread(_objectSpread({}, state), {}, {
-          displayedDay: nextCurrentDay ? dayFormatter(nextCurrentDay) : state.displayedDay
-        });
-      }
-    case 'month-blur':
-      {
-        var minDate = state.minDate,
-          maxDate = state.maxDate;
-        var nextCurrentMonth = getMonthInInterval(state.currentMonth, minDate, maxDate);
-        return _objectSpread(_objectSpread({}, state), {}, {
-          currentMonth: nextCurrentMonth,
-          displayedMonth: nextCurrentMonth !== undefined ? monthFormatter(nextCurrentMonth) : state.displayedMonth
-        });
-      }
-    case 'year-blur':
-      {
-        var _minDate = state.minDate,
-          _maxDate = state.maxDate;
-        var nextCurrentYear = getYearInInterval(state.currentYear, _minDate, _maxDate);
-        return _objectSpread(_objectSpread({}, state), {}, {
-          currentYear: nextCurrentYear,
-          displayedYear: nextCurrentYear !== undefined ? yearFormatter(nextCurrentYear) : state.displayedYear
-        });
-      }
-    default:
-      return state;
-  }
-};
-
 var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "InputTextContainer"
 })(["position:relative;"]);
@@ -4215,10 +4169,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       displayedMonth: defaultMonth ? monthFormatter(defaultMonth) : '',
       displayedYear: defaultYear ? yearFormatter(defaultYear) : '',
       minDate: minDate,
-      maxDate: maxDate,
-      onChange: onChange,
-      onBlur: onBlur,
-      onFocus: onFocus
+      maxDate: maxDate
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
@@ -4229,6 +4180,23 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isPressedInternal: isPressedInternal,
     disabled: disabled
   };
+  var handleDatePartChange = function (day, month, year) {
+    onDatePartChange({
+      day: day,
+      month: month,
+      year: year,
+      minDate: state.minDate,
+      maxDate: state.maxDate,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onChange: onChange
+    });
+  };
+  var handleAutoFocusNextField = function (currentFieldValue, nextFieldRef) {
+    if (currentFieldValue.length === 2 && nextFieldRef.current) {
+      nextFieldRef.current.focus();
+    }
+  };
   return /*#__PURE__*/jsx(View, {
     testID: testID,
     nativeID: id,
@@ -4244,14 +4212,15 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
           value: state.displayedDay,
           returnKeyType: getReturnKeyTypeForNumericInput('next'),
           onChange: function (e) {
-            var nextDay = e.nativeEvent.text;
+            var nextDay = stringToNumber(e.nativeEvent.text);
             dispatch({
               type: 'day-change',
               nextDay: nextDay
             });
-            if (nextDay.length === 2 && monthRef.current) {
-              monthRef.current.focus();
+            if (nextDay && isNumber(nextDay)) {
+              handleDatePartChange(nextDay, state.currentMonth, state.currentYear);
             }
+            handleAutoFocusNextField(e.nativeEvent.text, monthRef);
           },
           onBlur: function () {
             return dispatch({
@@ -4259,7 +4228,8 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
             });
           },
           onSubmitEditing: function () {
-            if (monthRef.current) monthRef.current.focus();
+            var _monthRef$current;
+            (_monthRef$current = monthRef.current) === null || _monthRef$current === void 0 ? void 0 : _monthRef$current.focus();
           }
         }))
       }), /*#__PURE__*/jsx(PartContainer, {
@@ -4272,14 +4242,15 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
           value: state.displayedMonth,
           returnKeyType: getReturnKeyTypeForNumericInput('next'),
           onChange: function (e) {
-            var nextMonth = e.nativeEvent.text;
+            var nextMonth = stringToNumber(e.nativeEvent.text);
             dispatch({
               type: 'month-change',
-              nextMonth: e.nativeEvent.text
+              nextMonth: nextMonth
             });
-            if (nextMonth.length === 2 && yearRef.current) {
-              yearRef.current.focus();
+            if (nextMonth && isNumber(nextMonth)) {
+              handleDatePartChange(state.currentDay, nextMonth, state.currentYear);
             }
+            handleAutoFocusNextField(e.nativeEvent.text, yearRef);
           },
           onBlur: function () {
             return dispatch({
@@ -4287,7 +4258,8 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
             });
           },
           onSubmitEditing: function () {
-            if (yearRef.current) yearRef.current.focus();
+            var _yearRef$current;
+            (_yearRef$current = yearRef.current) === null || _yearRef$current === void 0 ? void 0 : _yearRef$current.focus();
           }
         }))
       }), /*#__PURE__*/jsx(PartContainer, {
@@ -4300,10 +4272,14 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
           value: state.displayedYear,
           returnKeyType: returnKeyType ? getReturnKeyTypeForNumericInput(returnKeyType) : undefined,
           onChange: function (e) {
+            var nextYear = stringToNumber(e.nativeEvent.text);
             dispatch({
               type: 'year-change',
-              nextYear: e.nativeEvent.text
+              nextYear: nextYear
             });
+            if (nextYear && isNumber(nextYear)) {
+              handleDatePartChange(state.currentDay, state.currentMonth, nextYear);
+            }
           },
           onBlur: function () {
             return dispatch({
@@ -8215,7 +8191,7 @@ var Flex = /*#__PURE__*/styled.View.withConfig({
   return padding * theme.kitt.spacing;
 });
 
-var storyPadding = 16;
+var storyPadding = 'kitt.4';
 
 var getBackgroundColorFromBlockColor = function (theme) {
   var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'transparent';
@@ -8247,18 +8223,15 @@ var useStoryBlockColor = function (color) {
   var storyBlockColor = useContext(StoryBlockColorContext);
   return color || storyBlockColor;
 };
-var StyledStoryBlockView = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryBlock__StyledStoryBlockView"
-})(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, function (_ref) {
-  var theme = _ref.theme,
+function StoryBlock(_ref) {
+  var children = _ref.children,
     background = _ref.background;
-  return getBackgroundColorFromBlockColor(theme, background);
-});
-function StoryBlock(_ref2) {
-  var children = _ref2.children,
-    background = _ref2.background;
-  return /*#__PURE__*/jsx(StyledStoryBlockView, {
-    background: background,
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsx(View, {
+    paddingTop: "kitt.4",
+    paddingX: storyPadding,
+    marginX: "-".concat(storyPadding),
+    background: getBackgroundColorFromBlockColor(theme, background),
     children: /*#__PURE__*/jsx(StoryBlockColorContext.Provider, {
       value: getTypographyColorFromBlockColor(background),
       children: /*#__PURE__*/jsx(StoryBlockBackgroundContext.Provider, {
@@ -8269,17 +8242,12 @@ function StoryBlock(_ref2) {
   });
 }
 
-var StoryTitleContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryTitle__StoryTitleContainer"
-})(["margin-bottom:30px;"]);
-var StorySubTitleContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryTitle__StorySubTitleContainer"
-})(["margin-bottom:10px;"]);
 function StoryTitle(_ref) {
   var color = _ref.color,
     children = _ref.children,
     numberOfLines = _ref.numberOfLines;
-  return /*#__PURE__*/jsx(StoryTitleContainer, {
+  return /*#__PURE__*/jsx(View, {
+    marginBottom: 30,
     children: /*#__PURE__*/jsx(Typography.Header1, {
       variant: "bold",
       base: "header1",
@@ -8293,7 +8261,8 @@ function StoryTitleLevel2(_ref2) {
   var color = _ref2.color,
     children = _ref2.children,
     numberOfLines = _ref2.numberOfLines;
-  return /*#__PURE__*/jsx(StoryTitleContainer, {
+  return /*#__PURE__*/jsx(View, {
+    marginBottom: 30,
     children: /*#__PURE__*/jsx(Typography.Header2, {
       variant: "bold",
       base: "header2",
@@ -8308,7 +8277,8 @@ function StoryTitleLevel3(_ref3) {
   var color = _ref3.color,
     children = _ref3.children,
     numberOfLines = _ref3.numberOfLines;
-  return /*#__PURE__*/jsx(StorySubTitleContainer, {
+  return /*#__PURE__*/jsx(View, {
+    marginBottom: 10,
     children: /*#__PURE__*/jsx(Typography.Header3, {
       variant: "bold",
       base: "header3",
@@ -8324,7 +8294,8 @@ function StoryTitleLevel4(_ref4) {
   var color = _ref4.color,
     children = _ref4.children,
     numberOfLines = _ref4.numberOfLines;
-  return /*#__PURE__*/jsx(StorySubTitleContainer, {
+  return /*#__PURE__*/jsx(View, {
+    marginBottom: 10,
     children: /*#__PURE__*/jsx(Typography.Header4, {
       variant: "bold",
       base: "header4",
@@ -8340,14 +8311,12 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-var StoryContainer$1 = /*#__PURE__*/styled.ScrollView.withConfig({
-  displayName: "Story__StoryContainer"
-})(["padding:", "px;"], storyPadding);
 function Story(_ref) {
   var title = _ref.title,
     contentContainerStyle = _ref.contentContainerStyle,
     children = _ref.children;
-  return /*#__PURE__*/jsxs(StoryContainer$1, {
+  return /*#__PURE__*/jsxs(ScrollView, {
+    padding: storyPadding,
     contentContainerStyle: contentContainerStyle,
     children: [/*#__PURE__*/jsx(StoryTitle, {
       children: title
@@ -8358,53 +8327,48 @@ function Story(_ref) {
 var _excluded$2 = ["title", "children", "internalIsDemoSection"],
   _excluded2 = ["title", "children"],
   _excluded3 = ["title", "children"];
-var StyledSection = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StorySection__StyledSection"
-})(["margin-bottom:32px;"]);
 function StorySection(_ref) {
   var title = _ref.title,
     children = _ref.children,
     internalIsDemoSection = _ref.internalIsDemoSection,
     props = _objectWithoutProperties(_ref, _excluded$2);
   if (title === 'Demo' && !internalIsDemoSection) throw new Error('Use StorySection.Demo instead');
-  return /*#__PURE__*/jsxs(StyledSection, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({
+    marginBottom: "kitt.8"
+  }, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level2, {
       children: title
     }), children]
   }));
 }
-var StyledSubSection = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StorySection__StyledSubSection"
-})(["margin-bottom:16px;"]);
 function SubSection(_ref2) {
   var title = _ref2.title,
     children = _ref2.children,
     props = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/jsxs(StyledSubSection, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({
+    marginBottom: "kitt.4"
+  }, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level3, {
       children: title
     }), children]
   }));
 }
-var StyledBlockSection = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StorySection__StyledBlockSection"
-})(["margin-bottom:16px;"]);
 function BlockSection(_ref3) {
   var title = _ref3.title,
     children = _ref3.children,
     props = _objectWithoutProperties(_ref3, _excluded3);
-  return /*#__PURE__*/jsxs(StyledBlockSection, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({
+    marginBottom: "kitt.4"
+  }, props), {}, {
     children: [/*#__PURE__*/jsx(StoryTitle.Level4, {
       children: title
     }), children]
   }));
 }
-var StyledDemoSection = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StorySection__StyledDemoSection"
-})(["margin-bottom:64px;"]);
 function DemoSection(_ref4) {
   var children = _ref4.children;
-  return /*#__PURE__*/jsx(StyledDemoSection, {
+  return /*#__PURE__*/jsx(View, {
+    marginBottom: "kitt.16",
     children: /*#__PURE__*/jsx(StorySection, {
       internalIsDemoSection: true,
       title: "Demo",
@@ -8443,50 +8407,38 @@ function StoryDecorator(storyFn, context) {
   });
 }
 
-var SmallScreenRow = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryGrid__SmallScreenRow"
-})(["flex-direction:column;margin:0;"]);
-var SmallScreenCol = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryGrid__SmallScreenCol"
-})(["padding:8px 0 16px;"]);
-var FlexRow = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryGrid__FlexRow"
-})(["flex-direction:row;margin:0 -4px 16px;"]);
-var FlexCol = /*#__PURE__*/styled.View.withConfig({
-  displayName: "StoryGrid__FlexCol"
-})(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
 function StoryGridRow(_ref) {
   var children = _ref.children,
     _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? 'small' : _ref$breakpoint;
-  // eslint-disable-next-line unicorn/expiring-todo-comments
-  // TODO use useBreakpoint instead
-  var _useWindowDimensions = useWindowDimensions(),
-    width = _useWindowDimensions.width;
-  var breakpointValue = breakpoint === 'small' ? 480 : 768;
-  if (width < breakpointValue) {
-    return /*#__PURE__*/jsx(SmallScreenRow, {
-      children: Children.map(children, function (child) {
-        return /*#__PURE__*/jsx(SmallScreenCol, {
-          children: child
-        });
-      })
-    });
-  }
-  return /*#__PURE__*/jsx(FlexRow, {
+  return /*#__PURE__*/jsx(View, {
+    flexDirection: _defineProperty({
+      base: 'column'
+    }, breakpoint, 'row'),
+    marginX: _defineProperty({}, breakpoint, '-kitt.1'),
+    marginBottom: _defineProperty({}, breakpoint, 'kitt.4'),
     children: Children.map(children, function (child) {
-      return /*#__PURE__*/jsx(FlexCol, {
+      return /*#__PURE__*/jsx(View, {
+        flexGrow: _defineProperty({}, breakpoint, 1),
+        flexBasis: _defineProperty({}, breakpoint, 0),
+        paddingTop: _defineProperty({
+          base: 'kitt.2'
+        }, breakpoint, 0),
+        paddingBottom: _defineProperty({
+          base: 'kitt.4'
+        }, breakpoint, 0),
+        marginX: _defineProperty({}, breakpoint, 'kitt.2'),
         children: child
       });
     })
   });
 }
-function StoryGridCol(_ref2) {
-  var title = _ref2.title,
-    titleColor = _ref2.titleColor,
-    children = _ref2.children,
-    _ref2$platform = _ref2.platform,
-    platform = _ref2$platform === void 0 ? 'all' : _ref2$platform;
+function StoryGridCol(_ref10) {
+  var title = _ref10.title,
+    titleColor = _ref10.titleColor,
+    children = _ref10.children,
+    _ref10$platform = _ref10.platform,
+    platform = _ref10$platform === void 0 ? 'all' : _ref10$platform;
   var isNative = Platform.OS === 'ios' || Platform.OS === 'android';
   if (Platform.OS === 'web' && platform === 'native') {
     return null;