@ornikar/kitt-universal 9.44.0 → 9.44.1

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;
@@ -8190,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';
@@ -8222,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, {
@@ -8244,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",
@@ -8268,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",
@@ -8283,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",
@@ -8299,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",
@@ -8315,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
@@ -8333,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",
@@ -8418,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;