@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

package/src/components/DatePickerInput/DatePickerInput.tsx

@@ -0,0 +1,265 @@
+import type { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import { CalendarSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Keyboard, Platform, TextInputFocusEvent } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { DatePicker } from '../DatePicker';
+import type { DateType } from '../DatePicker/DatePicker.props';
+import { useFormFieldContext } from '../FormField';
+import { Input, InputField, InputSlot } from '../Input';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import type DatePickerInputProps from './DatePickerInput.props';
+import DatePickerInputDoneButton from './DatePickerInputDoneButton';
+
+dayjs.extend(customParseFormat);
+
+const DEFAULT_FORMAT = 'DD/MM/YYYY';
+
+const maskDefaultFormat = (value: string) => {
+  const digitsOnly = value.replace(/\D/g, '').slice(0, 8);
+  const day = digitsOnly.slice(0, 2);
+  const month = digitsOnly.slice(2, 4);
+  const year = digitsOnly.slice(4, 8);
+
+  return [day, month, year].filter(Boolean).join('/');
+};
+
+const DatePickerInput = ({
+  validationStatus = 'initial',
+  disabled,
+  focused,
+  readonly,
+  placeholder,
+  inBottomSheet = false,
+  format = DEFAULT_FORMAT,
+  openButtonLabel = 'Open date picker',
+  autoCloseOnSelect = true,
+  onChange,
+  onChangeText,
+  onBlur,
+  onFocus,
+  value,
+  datePickerProps,
+  onClear,
+  ...rest
+}: DatePickerInputProps) => {
+  const formFieldContext = useFormFieldContext();
+  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+  const isDisabled = formFieldContext?.disabled ?? disabled;
+  const isReadonly = formFieldContext?.readonly ?? readonly;
+
+  const pickerRef = useRef<BottomSheetModalMethods | null>(null);
+  const accessoryViewID = useMemo(() => {
+    if (Platform.OS !== 'ios') return undefined;
+    return `datepicker-input-${Math.random().toString(36).slice(2)}`;
+  }, []);
+
+  const formatDate = useCallback(
+    (dateValue?: DateType) => {
+      if (!dateValue) return '';
+      const parsed = dayjs(dateValue);
+      return parsed.isValid() ? parsed.format(format) : '';
+    },
+    [format]
+  );
+
+  const isDefaultFormat = format === DEFAULT_FORMAT;
+
+  const [inputValue, setInputValue] = useState(() => formatDate(value));
+
+  useEffect(() => {
+    setInputValue(formatDate(value));
+  }, [value, formatDate]);
+
+  const handleTextChange = useCallback(
+    (text: string) => {
+      const nextValue = isDefaultFormat ? maskDefaultFormat(text) : text;
+
+      setInputValue(nextValue);
+      onChangeText?.(nextValue);
+
+      if (!nextValue) {
+        onChange?.({ date: undefined });
+        return;
+      }
+
+      const parsed = dayjs(nextValue, format, true);
+
+      if (parsed.isValid()) {
+        onChange?.({ date: parsed.toDate() });
+      } else {
+        onChange?.({ date: undefined });
+      }
+    },
+    [format, isDefaultFormat, onChange, onChangeText]
+  );
+
+  const handleClear = useCallback(() => {
+    setInputValue('');
+    onChange?.({ date: undefined });
+    onClear?.();
+  }, [onChange, onClear]);
+
+  const closeKeyboard = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  const openPicker = useCallback(() => {
+    if (isDisabled || isReadonly) return;
+    closeKeyboard();
+    pickerRef.current?.present();
+  }, [closeKeyboard, isDisabled, isReadonly]);
+
+  const selectedDate = useMemo(() => {
+    if (value) {
+      return value;
+    }
+
+    const parsed = dayjs(inputValue, format, true);
+    return parsed.isValid() ? parsed.toDate() : undefined;
+  }, [value, inputValue, format]);
+
+  const handlePickerChange = useCallback(
+    ({ date }: { date: DateType }) => {
+      if (!date) {
+        handleClear();
+        return;
+      }
+
+      const formatted = formatDate(date);
+      setInputValue(formatted);
+      onChange?.({ date });
+
+      if (autoCloseOnSelect) {
+        pickerRef.current?.close?.();
+      }
+    },
+    [autoCloseOnSelect, formatDate, handleClear, onChange]
+  );
+
+  const handleBlur = useCallback(
+    (event: TextInputFocusEvent) => {
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+
+  const handleFocus = useCallback(
+    (event: TextInputFocusEvent) => {
+      onFocus?.(event);
+    },
+    [onFocus]
+  );
+
+  const { onCancel: pickerOnCancel, ...restDatePickerProps } = datePickerProps ?? {};
+  const {
+    style: inputStyle,
+    keyboardType: keyboardTypeProp,
+    inputMode: inputModeProp,
+    accessibilityHint: accessibilityHintProp,
+    accessibilityLabel: accessibilityLabelProp,
+    accessible: accessibleProp,
+    accessibilityRole: accessibilityRoleProp,
+    importantForAccessibility: importantForAccessibilityProp,
+    ...textInputProps
+  } = rest;
+
+  const resolvedKeyboardType = keyboardTypeProp ?? (isDefaultFormat ? 'number-pad' : undefined);
+  const resolvedInputMode = inputModeProp ?? (isDefaultFormat ? 'numeric' : undefined);
+  const resolvedAccessibilityHint = accessibilityHintProp ?? `Enter the date in ${format} format`;
+  const resolvedAccessibilityLabel = accessibilityLabelProp ?? 'Date input';
+  const resolvedAccessible = accessibleProp ?? true;
+  const resolvedImportantForAccessibility = importantForAccessibilityProp ?? 'yes';
+
+  const handleCancel = useCallback(() => {
+    pickerOnCancel?.();
+    pickerRef.current?.close?.();
+  }, [pickerOnCancel]);
+
+  const placeholderValue = placeholder ?? format;
+
+  return (
+    <>
+      <Input
+        validationStatus={validationStatusFromContext}
+        disabled={isDisabled}
+        readonly={isReadonly}
+        focused={focused}
+        style={styles.wrap}
+        accessible={false}
+      >
+        <InputField
+          editable={!isReadonly && !isDisabled}
+          value={inputValue}
+          placeholder={placeholderValue}
+          onChangeText={handleTextChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          inBottomSheet={inBottomSheet}
+          keyboardType={resolvedKeyboardType}
+          inputMode={resolvedInputMode}
+          accessibilityHint={resolvedAccessibilityHint}
+          aria-label="Date input"
+          accessibilityLabel={resolvedAccessibilityLabel}
+          accessible={resolvedAccessible}
+          accessibilityState={{
+            disabled: isDisabled || isReadonly,
+          }}
+          importantForAccessibility={resolvedImportantForAccessibility}
+          inputAccessoryViewID={Platform.OS === 'ios' ? accessoryViewID : undefined}
+          {...textInputProps}
+          style={[styles.input, inputStyle]}
+        />
+        {!!inputValue && onClear && !isReadonly && !isDisabled && (
+          <InputSlot accessibilityElementsHidden={false}>
+            <UnstyledIconButton
+              accessibilityLabel="Clear date"
+              accessibilityHint="Removes the current date"
+              icon={CloseSmallIcon}
+              onPress={handleClear}
+            />
+          </InputSlot>
+        )}
+        <InputSlot accessibilityElementsHidden={false}>
+          <UnstyledIconButton
+            accessibilityLabel={openButtonLabel}
+            accessibilityHint="Opens the date picker calendar"
+            icon={CalendarSmallIcon}
+            onPress={openPicker}
+            disabled={isDisabled || isReadonly}
+          />
+        </InputSlot>
+      </Input>
+      <DatePicker
+        ref={pickerRef}
+        mode="single"
+        date={selectedDate}
+        onChange={handlePickerChange}
+        onCancel={handleCancel}
+        {...restDatePickerProps}
+      />
+      {Platform.OS === 'ios' && accessoryViewID && (
+        <DatePickerInputDoneButton
+          accessoryViewID={accessoryViewID}
+          closeKeyboard={closeKeyboard}
+        />
+      )}
+    </>
+  );
+};
+
+DatePickerInput.displayName = 'DatePickerInput';
+
+const styles = StyleSheet.create(theme => ({
+  wrap: {
+    gap: theme.components.input.date.gap,
+  },
+  input: {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+}));
+
+export default DatePickerInput;

package/src/components/DatePickerInput/DatePickerInputDoneButton.tsx

@@ -0,0 +1,42 @@
+import { InputAccessoryView, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Button } from '../Button';
+
+const DatePickerInputDoneButton = ({
+  accessoryViewID,
+  closeKeyboard,
+}: {
+  accessoryViewID: string;
+  closeKeyboard: () => void;
+}) => {
+  return (
+    <InputAccessoryView nativeID={accessoryViewID}>
+      <View style={styles.accessory}>
+        <Button
+          accessibilityRole="button"
+          accessibilityLabel="Done"
+          onPress={closeKeyboard}
+          variant="ghost"
+          colorScheme="functional"
+        >
+          Done
+        </Button>
+      </View>
+    </InputAccessoryView>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  accessory: {
+    paddingHorizontal: 16,
+    paddingVertical: 2,
+    alignItems: 'flex-end',
+    backgroundColor: theme.color.surface.neutral.strong,
+    borderTopWidth: theme.borderWidth[1],
+    borderTopColor: theme.color.border.subtle,
+  },
+}));
+
+DatePickerInputDoneButton.DisplayName = 'DatePickerInputDoneButton';
+
+export default DatePickerInputDoneButton;

package/src/components/DatePickerInput/DatePickerInputDoneButton.web.tsx

@@ -0,0 +1,7 @@
+const DatePickerInputDoneButton = () => {
+  return null;
+};
+
+DatePickerInputDoneButton.DisplayName = 'DatePickerInputDoneButton';
+
+export default DatePickerInputDoneButton;

package/src/components/DatePickerInput/index.ts

@@ -0,0 +1,2 @@
+export { default as DatePickerInput } from './DatePickerInput';
+export type { default as DatePickerInputProps } from './DatePickerInput.props';

package/src/components/Icon/Icon.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { ComponentType } from 'react';
 import { Icon } from '.';
 import { ColorValue } from '../../types';
 import { coloursAsArray } from '../../utils';
@@ -25,7 +24,8 @@ const meta = {
     },
   },
   args: {
-    as: Object.keys(Icons)[0] as ComponentType,
+    // @ts-expect-error - This is a playground
+    as: Object.keys(Icons)[0],
     color: 'grey1000' as ColorValue,
   },
 } satisfies Meta<typeof Icon>;
@@ -37,7 +37,8 @@ type Story = StoryObj<typeof meta>;
 export const Playground: Story = {
   // @ts-expect-error - This is a playground
   render: ({ as: icon, color }) => {
+    // @ts-expect-error - This is a playground
     const as = icon === 'none' ? undefined : Icons[icon];
-    return <Icon as={as} color={colors[color]} />;
+    return <Icon as={as} color={color} />;
   },
 };

package/src/components/IconContainer/IconContainer.docs.mdx

@@ -2,8 +2,8 @@ import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import {
   BroadbandMediumIcon,
   CashbackCardMediumIcon,
-  ConfettiMediumIcon,
   ElectricityMediumIcon,
+  EmailMediumIcon,
   InsuranceMediumIcon,
   MobileMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
@@ -42,7 +42,7 @@ Wrap an icon with the `IconContainer` to apply sizing + background styles withou
       <IconContainer icon={MobileMediumIcon} size="md" variant="emphasis" color="mobile" />
       <IconContainer icon={InsuranceMediumIcon} size="md" variant="emphasis" color="insurance" />
       <IconContainer icon={CashbackCardMediumIcon} size="md" variant="emphasis" color="cashback" />
-      <IconContainer icon={ConfettiMediumIcon} size="md" variant="emphasis" color="pig" />
+      <IconContainer icon={EmailMediumIcon} size="md" variant="emphasis" color="pig" />
     </Flex>
   </Center>
 </UsageWrap>
@@ -55,7 +55,7 @@ import {
   MobileMediumIcon,
   InsuranceMediumIcon,
   CashbackCardMediumIcon,
-  ConfettiMediumIcon,
+  ,
 } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => (
@@ -65,7 +65,7 @@ const MyComponent = () => (
     <IconContainer icon={MobileMediumIcon} size="md" variant="emphasis" color="mobile" />
     <IconContainer icon={InsuranceMediumIcon} size="md" variant="emphasis" color="insurance" />
     <IconContainer icon={CashbackCardMediumIcon} size="md" variant="emphasis" color="cashback" />
-    <IconContainer icon={ConfettiMediumIcon} size="md" variant="emphasis" color="pig" />
+    <IconContainer icon={EmailMediumIcon} size="md" variant="emphasis" color="pig" />
   </>
 );
 ```

package/src/components/Input/InputField.tsx

@@ -6,8 +6,6 @@ import { useInputContext } from './Input.context';
 
 const InputField = ({
   style,
-  onFocus,
-  onBlur,
   inBottomSheet = false,
   ...props
 }: TextInputProps & { inBottomSheet?: boolean }) => {

package/src/components/Input/InputSlot.tsx

@@ -1,9 +1,20 @@
-import { StyleSheet } from 'react-native-unistyles';
 import { View, ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 
-const InputSlot = ({ children, style, ...props }: ViewProps) => {
+const InputSlot = ({
+  children,
+  style,
+  accessible,
+  importantForAccessibility,
+  ...props
+}: ViewProps) => {
   return (
-    <View {...props} style={[styles.container, style]}>
+    <View
+      {...props}
+      accessible={accessible ?? false}
+      importantForAccessibility={importantForAccessibility ?? 'auto'}
+      style={[styles.container, style]}
+    >
       {children}
     </View>
   );

package/src/components/Link/Link.props.ts

@@ -1,5 +1,6 @@
 import { ComponentType } from 'react';
 import { PressableProps, TextProps } from 'react-native';
+import { IconProps } from '../Icon';
 
 export interface LinkProps extends Omit<PressableProps, 'children'> {
   children: TextProps['children'];
@@ -10,6 +11,8 @@ export interface LinkProps extends Omit<PressableProps, 'children'> {
   icon?: ComponentType;
   iconPosition?: 'left' | 'right';
   showIcon?: boolean;
+  textStyle?: TextProps['style'];
+  iconStyle?: IconProps['style'];
 }
 
 export default LinkProps;

package/src/components/Link/Link.tsx

@@ -1,9 +1,9 @@
-import type { LinkProps } from './Link.props';
 import { createLink } from '@gluestack-ui/link';
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import type { LinkProps } from './Link.props';
+import LinkIcon from './LinkIcon';
 import LinkRoot from './LinkRoot';
 import LinkTextComponent from './LinkText';
-import LinkIcon from './LinkIcon';
-import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
 const LinkComponent = createLink({
   Root: LinkRoot,
@@ -21,14 +21,20 @@ const Link = ({
   target = '_self',
   iconPosition = 'right',
   showIcon = true,
+  textStyle,
+  iconStyle,
   ...props
 }: LinkProps) => {
   const LinkAny = LinkComponent as any;
   return (
     <LinkAny {...props} isDisabled={disabled} isExternal={target === '_blank'}>
-      {showIcon && icon && iconPosition === 'left' ? <LinkIcon as={icon} /> : null}
-      <LinkText>{children}</LinkText>
-      {showIcon && icon && iconPosition === 'right' ? <LinkIcon as={icon} /> : null}
+      {showIcon && icon && iconPosition === 'left' ? (
+        <LinkIcon as={icon} style={iconStyle} />
+      ) : null}
+      <LinkText style={textStyle}>{children}</LinkText>
+      {showIcon && icon && iconPosition === 'right' ? (
+        <LinkIcon as={icon} style={iconStyle} />
+      ) : null}
     </LinkAny>
   );
 };

package/src/components/List/List.docs.mdx

@@ -4,7 +4,8 @@ import {
   ChevronRightSmallIcon,
   ElectricityMediumIcon,
   GasMediumIcon,
-  HomeFilledMediumIcon,
+  InfoMediumIcon as HomeMediumIcon,
+  // HomeMediumIcon,
   PaymentMediumIcon,
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
@@ -15,7 +16,6 @@ import {
   FlatList,
   Image,
   List,
-  SectionHeader,
   ListItem,
   ListItemContent,
   ListItemHelperText,
@@ -24,6 +24,7 @@ import {
   ListItemText,
   ListItemTrailingContent,
   ListItemTrailingIcon,
+  SectionHeader,
 } from '../../';
 import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './List.stories';
@@ -87,21 +88,21 @@ const MyComponent = () => (
 
 ### `List`
 
-| Name                    | Type                                                                                              | Default   | Description                                                |
-| ----------------------- | ------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------- |
-| container               | `'none' \| 'subtleWhite' \| 'emphasisWhite' \|` <br /> `'subtleWarmWhite' \| 'emphasisWarmWhite'` | `'none'`  | The container style of the list.                           |
-| heading                 | `string`                                                                                          |           | The text to display in the heading of the list.            |
-| helperText              | `string`                                                                                          |           | The supporting text to display in the heading of the list. |
-| linkText                | `string`                                                                                          |           | The text for the link in the heading.                      |
-| linkHref                | `string`                                                                                          |           | The href for the link in the heading.                      |
-| linkOnPress             | `() => void`                                                                                      |           | Callback function when the heading link is pressed.        |
-| linkTarget              | `'_blank' \| '_self' \| '_parent' \| '_top'`                                                      |           | Target for the link in the heading.                        |                   |
-| linkIcon                | `ComponentType`                                                                                   |           | Icon for the heading link.                                 |
-| linkIconPosition        | `'left' \| 'right'`                                                                               | `'right'` | Position of the icon in the heading link.                  |
-| linkShowIcon            | `boolean`                                                                                         | `true`    | Whether to show the icon in the heading link.              |
-| divider                 | `boolean`                                                                                         | `false`   | Whether to display a divider below the list items.         |
-| loading                 | `boolean`                                                                                         | `false`   | Whether to show the list items in loading state.           |
-| disabled                | `boolean`                                                                                         | `false`   | Whether to disable the list.                               |
+| Name             | Type                                                                                              | Default   | Description                                                |
+| ---------------- | ------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------- | --- |
+| container        | `'none' \| 'subtleWhite' \| 'emphasisWhite' \|` <br /> `'subtleWarmWhite' \| 'emphasisWarmWhite'` | `'none'`  | The container style of the list.                           |
+| heading          | `string`                                                                                          |           | The text to display in the heading of the list.            |
+| helperText       | `string`                                                                                          |           | The supporting text to display in the heading of the list. |
+| linkText         | `string`                                                                                          |           | The text for the link in the heading.                      |
+| linkHref         | `string`                                                                                          |           | The href for the link in the heading.                      |
+| linkOnPress      | `() => void`                                                                                      |           | Callback function when the heading link is pressed.        |
+| linkTarget       | `'_blank' \| '_self' \| '_parent' \| '_top'`                                                      |           | Target for the link in the heading.                        |     |
+| linkIcon         | `ComponentType`                                                                                   |           | Icon for the heading link.                                 |
+| linkIconPosition | `'left' \| 'right'`                                                                               | `'right'` | Position of the icon in the heading link.                  |
+| linkShowIcon     | `boolean`                                                                                         | `true`    | Whether to show the icon in the heading link.              |
+| divider          | `boolean`                                                                                         | `false`   | Whether to display a divider below the list items.         |
+| loading          | `boolean`                                                                                         | `false`   | Whether to show the list items in loading state.           |
+| disabled         | `boolean`                                                                                         | `false`   | Whether to disable the list.                               |
 
 ### `ListItem`
 
@@ -172,7 +173,7 @@ If you need to use the List component in a more advanced way, you can use the pa
     </ListItem>
     <ListItem onPress={() => console.log('pressed')}>
       <ListItemLeadingContent>
-        <ListItemIcon as={HomeFilledMediumIcon} />
+        <ListItemIcon as={HomeMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
         <ListItemText>Moving home</ListItemText>
@@ -214,7 +215,7 @@ import {
   BillMediumIcon,
   ChevronRightSmallIcon,
   PaymentMediumIcon,
-  HomeFilledMediumIcon,
+  HomeMediumIcon,
   UserMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -247,7 +248,7 @@ const MyComponent = () => (
     </ListItem>
     <ListItem onPress={() => console.log('pressed')}>
       <ListItemLeadingContent>
-        <ListItemIcon as={HomeFilledMediumIcon} />
+        <ListItemIcon as={HomeMediumIcon} />
       </ListItemLeadingContent>
       <ListItemContent>
         <ListItemText>Moving home</ListItemText>
@@ -302,7 +303,7 @@ the `Card` and child `ListItem` components.
       onPress={() => console.log('item pressed')}
     />
     <ListItem
-      leadingContent={<HomeFilledMediumIcon />}
+      leadingContent={<HomeMediumIcon />}
       text="Moving Home"
       onPress={() => console.log('item pressed')}
     />
@@ -314,7 +315,7 @@ import { List, ListItem, Card } from '@utilitywarehouse/hearth-react-native';
 import {
   BillMediumIcon,
   PaymentMediumIcon,
-  HomeFilledMediumIcon,
+  HomeMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 
 const MyComponent = () => (
@@ -332,7 +333,7 @@ const MyComponent = () => (
       onPress={() => console.log('item pressed')}
     />
     <ListItem
-      leadingContent={<HomeFilledMediumIcon />}
+      leadingContent={<HomeMediumIcon />}
       text="Moving Home"
       onPress={() => console.log('item pressed')}
     />

package/src/components/Modal/Modal.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { useRef } from 'react';
-import { Dimensions, ImageSourcePropType, Platform, View, ViewProps } from 'react-native';
-import { UnistylesRuntime } from 'react-native-unistyles';
+import { ImageSourcePropType, Platform, View } from 'react-native';
 import { Modal } from '.';
 import pigs from '../../../docs/assets/pigs.png';
+import { ViewWrap } from '../../../docs/components';
 import { BodyText } from '../BodyText';
 import { BottomSheetModal } from '../BottomSheet';
 import { Box } from '../Box';
@@ -61,34 +61,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const ViewWrap = ({ children }: { children: ViewProps['children'] }) => (
-  <View
-    style={{
-      width: Platform.OS === 'web' ? '100%' : Dimensions.get('window').width,
-      height:
-        Platform.OS === 'web'
-          ? '100%'
-          : Dimensions.get('window').height -
-            UnistylesRuntime.insets.top -
-            UnistylesRuntime.insets.bottom -
-            33,
-
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      flex: 1,
-      marginVertical: Platform.OS === 'web' ? 0 : -8,
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: 16,
-    }}
-  >
-    {children}
-  </View>
-);
-
 export const Playground: Story = {
   args: {
     children: [],