app-studio 0.0.3 → 0.0.4

package/dist/app-studio.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-studio.cjs.production.min.js","sources":["../src/utils/colors.ts","../src/providers/Theme.tsx","../src/utils/shadow.ts","../src/components/Element.tsx","../src/components/View.tsx","../src/components/Image.tsx","../src/components/Text.tsx","../src/hooks/useMount.ts","../src/providers/Responsive.tsx","../src/hooks/useResponsive.ts"],"sourcesContent":["export type ColorPalette = Record<string, Record<number, string>>;\n\nexport type ColorSingleton = Record<\n  string,\n  {\n    50: string;\n    100: string;\n    200: string;\n    300: string;\n    400: string;\n    500: string;\n    600: string;\n    700: string;\n    800: string;\n    900: string;\n  }\n>;\n\nexport const palette: ColorPalette = {\n  whiteAlpha: {\n    50: 'rgba(255, 255, 255, 0.04)',\n    100: 'rgba(255, 255, 255, 0.06)',\n    200: 'rgba(255, 255, 255, 0.08)',\n    300: 'rgba(255, 255, 255, 0.16)',\n    400: 'rgba(255, 255, 255, 0.24)',\n    500: 'rgba(255, 255, 255, 0.36)',\n    600: 'rgba(255, 255, 255, 0.48)',\n    700: 'rgba(255, 255, 255, 0.64)',\n    800: 'rgba(255, 255, 255, 0.80)',\n    900: 'rgba(255, 255, 255, 0.92)',\n  },\n\n  blackAlpha: {\n    50: 'rgba(0, 0, 0, 0.04)',\n    100: 'rgba(0, 0, 0, 0.06)',\n    200: 'rgba(0, 0, 0, 0.08)',\n    300: 'rgba(0, 0, 0, 0.16)',\n    400: 'rgba(0, 0, 0, 0.24)',\n    500: 'rgba(0, 0, 0, 0.36)',\n    600: 'rgba(0, 0, 0, 0.48)',\n    700: 'rgba(0, 0, 0, 0.64)',\n    800: 'rgba(0, 0, 0, 0.80)',\n    900: 'rgba(0, 0, 0, 0.92)',\n  },\n  rose: {\n    50: '#fff1f2',\n    100: '#ffe4e6',\n    200: '#fecdd3',\n    300: '#fda4af',\n    400: '#fb7185',\n    500: '#f43f5e',\n    600: '#e11d48',\n    700: '#be123c',\n    800: '#9f1239',\n    900: '#881337',\n  },\n  pink: {\n    50: '#fdf2f8',\n    100: '#fce7f3',\n    200: '#fbcfe8',\n    300: '#f9a8d4',\n    400: '#f472b6',\n    500: '#ec4899',\n    600: '#db2777',\n    700: '#be185d',\n    800: '#9d174d',\n    900: '#831843',\n  },\n  fuchsia: {\n    50: '#fdf4ff',\n    100: '#fae8ff',\n    200: '#f5d0fe',\n    300: '#f0abfc',\n    400: '#e879f9',\n    500: '#d946ef',\n    600: '#c026d3',\n    700: '#a21caf',\n    800: '#86198f',\n    900: '#701a75',\n  },\n  purple: {\n    50: '#faf5ff',\n    100: '#f3e8ff',\n    200: '#e9d5ff',\n    300: '#d8b4fe',\n    400: '#c084fc',\n    500: '#a855f7',\n    600: '#9333ea',\n    700: '#7e22ce',\n    800: '#6b21a8',\n    900: '#581c87',\n  },\n  violet: {\n    50: '#f5f3ff',\n    100: '#ede9fe',\n    200: '#ddd6fe',\n    300: '#c4b5fd',\n    400: '#a78bfa',\n    500: '#8b5cf6',\n    600: '#7c3aed',\n    700: '#6d28d9',\n    800: '#5b21b6',\n    900: '#4c1d95',\n  },\n  indigo: {\n    50: '#eef2ff',\n    100: '#e0e7ff',\n    200: '#c7d2fe',\n    300: '#a5b4fc',\n    400: '#818cf8',\n    500: '#6366f1',\n    600: '#4f46e5',\n    700: '#4338ca',\n    800: '#3730a3',\n    900: '#312e81',\n  },\n  blue: {\n    50: '#eff6ff',\n    100: '#dbeafe',\n    200: '#bfdbfe',\n    300: '#93c5fd',\n    400: '#60a5fa',\n    500: '#3b82f6',\n    600: '#2563eb',\n    700: '#1d4ed8',\n    800: '#1e40af',\n    900: '#1e3a8a',\n  },\n  lightBlue: {\n    50: '#f0f9ff',\n    100: '#e0f2fe',\n    200: '#bae6fd',\n    300: '#7dd3fc',\n    400: '#38bdf8',\n    500: '#0ea5e9',\n    600: '#0284c7',\n    700: '#0369a1',\n    800: '#075985',\n    900: '#0c4a6e',\n  },\n  cyan: {\n    50: '#ecfeff',\n    100: '#cffafe',\n    200: '#a5f3fc',\n    300: '#67e8f9',\n    400: '#22d3ee',\n    500: '#06b6d4',\n    600: '#0891b2',\n    700: '#0e7490',\n    800: '#155e75',\n    900: '#164e63',\n  },\n  teal: {\n    50: '#f0fdfa',\n    100: '#ccfbf1',\n    200: '#99f6e4',\n    300: '#5eead4',\n    400: '#2dd4bf',\n    500: '#14b8a6',\n    600: '#0d9488',\n    700: '#0f766e',\n    800: '#115e59',\n    900: '#134e4a',\n  },\n  emerald: {\n    50: '#ecfdf5',\n    100: '#d1fae5',\n    200: '#a7f3d0',\n    300: '#6ee7b7',\n    400: '#34d399',\n    500: '#10b981',\n    600: '#059669',\n    700: '#047857',\n    800: '#065f46',\n    900: '#064e3b',\n  },\n  green: {\n    50: '#f0fdf4',\n    100: '#dcfce7',\n    200: '#bbf7d0',\n    300: '#86efac',\n    400: '#4ade80',\n    500: '#22c55e',\n    600: '#16a34a',\n    700: '#15803d',\n    800: '#166534',\n    900: '#14532d',\n  },\n  lime: {\n    50: '#f7fee7',\n    100: '#ecfccb',\n    200: '#d9f99d',\n    300: '#bef264',\n    400: '#a3e635',\n    500: '#84cc16',\n    600: '#65a30d',\n    700: '#4d7c0f',\n    800: '#3f6212',\n    900: '#365314',\n  },\n  yellow: {\n    50: '#fefce8',\n    100: '#fef9c3',\n    200: '#fef08a',\n    300: '#fde047',\n    400: '#facc15',\n    500: '#eab308',\n    600: '#ca8a04',\n    700: '#a16207',\n    800: '#854d0e',\n    900: '#713f12',\n  },\n  amber: {\n    50: '#fffbeb',\n    100: '#fef3c7',\n    200: '#fde68a',\n    300: '#fcd34d',\n    400: '#fbbf24',\n    500: '#f59e0b',\n    600: '#d97706',\n    700: '#b45309',\n    800: '#92400e',\n    900: '#78350f',\n  },\n  orange: {\n    50: '#fff7ed',\n    100: '#ffedd5',\n    200: '#fed7aa',\n    300: '#fdba74',\n    400: '#fb923c',\n    500: '#f97316',\n    600: '#ea580c',\n    700: '#c2410c',\n    800: '#9a3412',\n    900: '#7c2d12',\n  },\n  red: {\n    50: '#fef2f2',\n    100: '#fee2e2',\n    200: '#fecaca',\n    300: '#fca5a5',\n    400: '#f87171',\n    500: '#ef4444',\n    600: '#dc2626',\n    700: '#b91c1c',\n    800: '#991b1b',\n    900: '#7f1d1d',\n  },\n  warmGray: {\n    50: '#fafaf9',\n    100: '#f5f5f4',\n    200: '#e7e5e4',\n    300: '#d6d3d1',\n    400: '#a8a29e',\n    500: '#78716c',\n    600: '#57534e',\n    700: '#44403c',\n    800: '#292524',\n    900: '#1c1917',\n  },\n  trueGray: {\n    50: '#fafafa',\n    100: '#f5f5f5',\n    200: '#e5e5e5',\n    300: '#d4d4d4',\n    400: '#a3a3a3',\n    500: '#737373',\n    600: '#525252',\n    700: '#404040',\n    800: '#262626',\n    900: '#171717',\n  },\n  gray: {\n    50: '#fafafa',\n    100: '#f4f4f5',\n    200: '#e4e4e7',\n    300: '#d4d4d8',\n    400: '#a1a1aa',\n    500: '#71717a',\n    600: '#52525b',\n    700: '#3f3f46',\n    800: '#27272a',\n    900: '#18181b',\n  },\n  dark: {\n    50: '#18181b',\n    100: '#27272a',\n    200: '#3f3f46',\n    300: '#52525b',\n    400: '#71717a',\n    500: '#a1a1aa',\n    600: '#d4d4d8',\n    700: '#e4e4e7',\n    800: '#f4f4f5',\n    900: '#fafafa',\n  },\n  coolGray: {\n    50: '#f9fafb',\n    100: '#f3f4f6',\n    200: '#e5e7eb',\n    300: '#d1d5db',\n    400: '#9ca3af',\n    500: '#6b7280',\n    600: '#4b5563',\n    700: '#374151',\n    800: '#1f2937',\n    900: '#111827',\n  },\n  blueGray: {\n    50: '#f8fafc',\n    100: '#f1f5f9',\n    200: '#e2e8f0',\n    300: '#cbd5e1',\n    400: '#94a3b8',\n    500: '#64748b',\n    600: '#475569',\n    700: '#334155',\n    800: '#1e293b',\n    900: '#0f172a',\n  },\n};\n","import React, { ReactNode } from 'react';\n\nimport { createContext, useContext } from 'react';\nimport { palette as defaultPalette } from '../utils/colors';\n\ntype ColorConfig = Record<string, string>;\n\ntype VariantColorConfig = Record<string, Record<string, string>>;\n\nconst defaultColors: ColorConfig = {\n  white: '#FFFFFF',\n  black: '#000000',\n};\n\nexport const ThemeContext = createContext<{\n  getColor: (color: string) => string;\n  colors: ColorConfig;\n  palette: VariantColorConfig;\n}>({\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  getColor: (name: string) => {\n    return name;\n  },\n  colors: defaultColors,\n  palette: defaultPalette,\n});\n\nexport const useTheme = () => useContext(ThemeContext);\n\nexport const ThemeProvider = ({\n  palette = defaultPalette,\n  colors = defaultColors,\n  children,\n}: {\n  colors?: ColorConfig;\n  palette?: VariantColorConfig;\n  children?: ReactNode;\n}): React.ReactElement => {\n  const getColor = (name: string) => {\n    // console.log('getColor', name);\n    if (name === 'transparent') return name;\n    try {\n      if (name.indexOf('.') !== -1) {\n        const keys = name.split('.');\n\n        if (palette && palette[keys[0]][keys[1]] !== undefined) {\n          return palette[keys[0]][keys[1]];\n        }\n        if (palette[keys[0]][parseInt(keys[1])] !== undefined) {\n          return palette[keys[0]][parseInt(keys[1])];\n        }\n      } else if (colors && colors[name] !== undefined) {\n        return colors[name];\n      }\n    } catch (e) {\n      console.log('Color ' + name + ' not found');\n    }\n\n    return name;\n  };\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        getColor,\n        colors,\n        palette,\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n","export const shadows: Record<number, any> = {\n  0: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.18,\n    shadowRadius: 1.0,\n    elevation: 1,\n  },\n  1: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 1.41,\n    elevation: 2,\n  },\n  2: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.22,\n    shadowRadius: 2.22,\n    elevation: 3,\n  },\n  3: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.23,\n    shadowRadius: 2.62,\n    elevation: 4,\n  },\n  4: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  5: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 3,\n    },\n    shadowOpacity: 0.27,\n    shadowRadius: 4.65,\n    elevation: 6,\n  },\n  6: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 3,\n    },\n    shadowOpacity: 0.29,\n    shadowRadius: 4.65,\n    elevation: 7,\n  },\n  7: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.3,\n    shadowRadius: 4.65,\n    elevation: 8,\n  },\n  8: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.32,\n    shadowRadius: 5.46,\n    elevation: 9,\n  },\n  9: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 5,\n    },\n    shadowOpacity: 0.34,\n    shadowRadius: 6.27,\n    elevation: 10,\n  },\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { useTheme } from '../providers/Theme';\nimport { shadows } from '../utils/shadow';\nexport const TransformStyleProps = [\n  'transform',\n  'transformMatrix',\n  'rotation',\n  'scaleX',\n  'scaleY',\n  'translateX',\n  'translateY',\n  // 'perspective',\n  // 'rotate',\n  // 'rotateX',\n  // 'rotateY',\n  // 'rotateZ',\n  // 'scale',\n  // 'skewX',\n  // 'skewY',\n  'testID',\n  'decomposedMatrix',\n];\n\nexport const ImageStyleProps = [\n  'borderTopRightRadius',\n  'backfaceVisibility',\n  'borderBottomLeftRadius',\n  'borderBottomRightRadius',\n  'borderColor',\n  'borderRadius',\n  'borderTopLeftRadius',\n  'backgroundColor',\n  'borderWidth',\n  'opacity',\n  'overflow',\n  'overflowX',\n  'overflowY',\n  'resizeMode',\n  'tintColor',\n  'overlayColor',\n];\n\nexport const LayoutStyleProps = [\n  'alignContent',\n  'alignItems',\n  'alignSelf',\n  'aspectRatio',\n  'borderBottomWidth',\n  'borderEndWidth',\n  'borderLeftWidth',\n  'borderRightWidth',\n  'borderStartWidth',\n  'borderTopWidth',\n  'borderWidth',\n  'bottom',\n  'direction',\n  'display',\n  'end',\n  'flex',\n  'flexBasis',\n  'flexDirection',\n  'flexGrow',\n  'flexShrink',\n  'flexWrap',\n  'height',\n  'justifyContent',\n  'left',\n  'margin',\n  'marginBottom',\n  'marginEnd',\n  'marginHorizontal',\n  'marginLeft',\n  'marginRight',\n  'marginStart',\n  'marginTop',\n  'marginVertical',\n  'maxHeight',\n  'maxWidth',\n  'minHeight',\n  'minWidth',\n  'overflow',\n  'overflowX',\n  'overflowY',\n  'padding',\n  'paddingBottom',\n  'paddingEnd',\n  'paddingHorizontal',\n  'paddingLeft',\n  'paddingRight',\n  'paddingStart',\n  'paddingTop',\n  'paddingVertical',\n  'position',\n  'right',\n  'start',\n  'top',\n  'width',\n  'zIndex',\n];\n\nexport const ShadowStyleProps = [\n  'shadowColor',\n  'shadowOffset',\n  'shadowOpacity',\n  'shadowRadius',\n];\nexport const TextStyleProps = [\n  'textShadowOffset',\n  'color',\n  'fontSize',\n  'fontStyle',\n  'fontWeight',\n  'lineHeight',\n  'textAlign',\n  'textDecorationLine',\n  'textShadowColor',\n  'fontFamily',\n  'textShadowRadius',\n  'includeFontPadding',\n  'textAlignVertical',\n  'fontVariant',\n  'letterSpacing',\n  'textDecorationColor',\n  'textDecorationStyle',\n  'textTransform',\n  'writingDirection',\n];\n\nexport const ViewStyleProps = [\n  'borderRightColor',\n  'backfaceVisibility',\n  'borderBottomColor',\n  'borderBottomEndRadius',\n  'borderBottomLeftRadius',\n  'borderBottomRightRadius',\n  'borderBottomStartRadius',\n  'borderBottomWidth',\n  'borderColor',\n  'borderEndColor',\n  'borderLeftColor',\n  'borderLeftWidth',\n  'borderRadius',\n  'backgroundColor',\n  'borderRightWidth',\n  'borderStartColor',\n  'borderStyle',\n  'borderTopColor',\n  'borderTopEndRadius',\n  'borderTopLeftRadius',\n  'borderTopRightRadius',\n  'borderTopStartRadius',\n  'borderTopWidth',\n  'borderWidth',\n  'border',\n  'opacity',\n  'elevation',\n  'size',\n];\n\nexport const ScrollViewStyleProps = [\n  'alwaysBounceHorizontal',\n  'alwaysBounceVertical',\n  'automaticallyAdjustContentInsets',\n  'bounces',\n  'bouncesZoom',\n  'canCancelContentTouches',\n  'centerContent',\n  'contentLayoutStyle',\n  'contentInset',\n  'contentInsetAdjustmentBehavior',\n  'contentOffset',\n  'decelerationRate',\n  'directionalLockEnabled',\n  'disableIntervalMomentum',\n  'disableScrollViewPanResponder',\n  'endFillColor',\n  'fadingEdgeLength',\n  'horizontal',\n  'indicatorStyle',\n  'invertStickyHeaders',\n  'keyboardDismissMode',\n  'keyboardShouldPersistTaps',\n  'maintainVisibleContentPosition',\n  'maximumZoomScale',\n  'minimumZoomScale',\n  'nestedScrollEnabled',\n  'onContentSizeChange',\n  'onMomentumScrollBegin',\n  'onMomentumScrollEnd',\n  'onScroll',\n  'onScrollBeginDrag',\n  'onScrollEndDrag',\n  'onScrollToTop',\n  'overScrollMode',\n  'pagingEnabled',\n  'persistentScrollbar',\n  'pinchGestureEnabled',\n  'refreshControl',\n  'removeClippedSubviews',\n  'scrollBarThumbImage',\n  'scrollEnabled',\n  'scrollEventThrottle',\n  'scrollIndicatorInsets',\n  'scrollPerfTag',\n  'scrollToOverflowEnabled',\n  'scrollsToTop',\n  'DEPRECATED_sendUpdatedChildFrames',\n  'showsHorizontalScrollIndicator',\n  'showsVerticalScrollIndicator',\n  'snapToAlignment',\n  'snapToEnd',\n  'snapToInterval',\n  'snapToOffsets',\n  'snapToStart',\n  'stickyHeaderIndices',\n  'zoomScale',\n];\n\nexport const BaseStyleProperty: any = {};\nLayoutStyleProps.concat(ShadowStyleProps, TransformStyleProps).map(\n  (property) => {\n    BaseStyleProperty[property] = true;\n  }\n);\n\nexport const ViewStyleProperty: any = BaseStyleProperty;\nViewStyleProps.map((property) => {\n  ViewStyleProperty[property] = true;\n});\n\nexport const ScrollViewStyleProperty: any = ViewStyleProperty;\nScrollViewStyleProps.map((property) => {\n  ScrollViewStyleProperty[property] = true;\n});\n\nexport const ImageStyleProperty: any = ViewStyleProperty;\nImageStyleProps.map((property) => {\n  ImageStyleProperty[property] = true;\n});\n\nexport const TextStyleProperty: any = BaseStyleProperty;\nTextStyleProps.map((property) => {\n  TextStyleProperty[property] = true;\n});\n\nexport const allStyleProps: string[] = LayoutStyleProps.concat(\n  ShadowStyleProps,\n  TransformStyleProps,\n  ViewStyleProps,\n  ScrollViewStyleProps,\n  TextStyleProps,\n  ImageStyleProps\n);\n\nconst WidthWords = ['X', 'Width', 'Horizontal', 'Right', 'Left'];\n\nexport const WidthStyleProperty = ['x', 'width', 'right', 'left'].concat(\n  allStyleProps.filter((property) => {\n    return WidthWords.some((item) => property.indexOf(item) >= 0);\n  })\n);\nexport const WidthStyleProps: any = {};\nWidthStyleProperty.map((property) => {\n  WidthStyleProps[property] = true;\n});\n\nconst HeightWords = ['Y', 'Height', 'Vertical', 'top', 'bottom'];\n\nexport const HeightStyleProperty = ['y', 'height', 'top', 'bottom'].concat(\n  allStyleProps.filter((property) => {\n    return HeightWords.some((item) => property.indexOf(item) >= 0);\n  })\n);\n\nexport const HeightStyleProps: any = {};\nHeightStyleProperty.map((property) => {\n  HeightStyleProps[property] = true;\n});\n\nexport const SizeProps: any = {};\nHeightStyleProperty.concat(WidthStyleProperty).map((property) => {\n  SizeProps[property] = true;\n});\n\nexport const StyleProps: any = {};\nallStyleProps.map((property) => {\n  StyleProps[property] = true;\n});\n\nexport const setSize = (newSize: string | number, newProps: any) => {\n  newProps.height = newProps.width = newSize;\n};\n\nexport const applyStyle = (props: any) => {\n  const { getColor } = useTheme();\n\n  const newProps: any = {};\n\n  if (props.onClick) {\n    newProps.cursor = 'pointer';\n  }\n\n  const size =\n    props.height !== undefined &&\n    props.width !== undefined &&\n    props.height === props.width\n      ? props.height\n      : props.size\n      ? props.size\n      : null;\n\n  if (size) {\n    setSize(size, newProps);\n  }\n\n  if (props.paddingHorizontal) {\n    newProps.paddingLeft = props.paddingHorizontal;\n    newProps.paddingRight = props.paddingHorizontal;\n  }\n\n  if (props.marginHorizontal) {\n    newProps.marginLeft = props.marginHorizontal;\n    newProps.marginRight = props.marginHorizontal;\n  }\n\n  if (props.paddingVertical) {\n    newProps.paddingTop = props.paddingVertical;\n    newProps.paddingBottom = props.paddingVertical;\n  }\n\n  if (props.marginVertical) {\n    newProps.marginTop = props.marginVertical;\n    newProps.marginBottom = props.marginVertical;\n  }\n\n  if (props.shadow) {\n    const shawdowValue: number =\n      typeof props.shadow === 'number' && shadows[props.shadow] !== undefined\n        ? props.shadow\n        : 2;\n\n    if (shadows[shawdowValue]) {\n      for (const i in shadows[shawdowValue]) {\n        newProps[i] = shadows[shawdowValue][i];\n      }\n    }\n  }\n\n  Object.keys(props).map((property) => {\n    if (StyleProps[property] !== undefined || property == 'on') {\n      if (typeof props[property] === 'number' && property !== 'fontWeight') {\n        newProps[property] = props[property] + 'px';\n      } else if (property.toLowerCase().indexOf('color') !== -1) {\n        newProps[property] = getColor(props[property]);\n      } else if (typeof props[property] === 'object') {\n        if (property === 'on') {\n          for (const event in props[property]) {\n            newProps['&:' + event] = applyStyle(props[property][event]);\n          }\n        } else {\n          newProps[property] = applyStyle(props[property]);\n        }\n      } else {\n        newProps[property] = props[property];\n      }\n    } else {\n      newProps[property] = props[property];\n    }\n  });\n\n  console.log({ props, newProps });\n  return newProps;\n};\n\n// function convertToCSS(props: any) {\n//   return Object.entries(props).reduce((str, [key, val]) => {\n//     const casedKey = key.replace(\n//       /[A-Z]/g,\n//       (match) => `-${match.toLowerCase()}`\n//     );\n//     return `${str}${casedKey}:${typeof val === 'number' ? val + 'px' : val};\\n`;\n//   }, '');\n// }\n\n// export const getResponsiveMediaQueries = (props: any) => {\n//   const { breakpointKeys, breakpoints } = useResponsive();\n//   console.log('mediaQueries', props);\n\n//   const mediaQueries = breakpointKeys\n//     .map((size) => {\n//       return props && props[size] !== undefined\n//         ? `\n//     @media ${\n//       breakpoints[size].min\n//         ? ' (min-width:' +\n//           (breakpoints[size].min > 0 ? breakpoints[size].min : 0) +\n//           'px)'\n//         : ''\n//     } ${\n//             breakpoints[size].min &&\n//             breakpoints[size].max &&\n//             breakpoints[size].max >= 0 &&\n//             breakpoints[size].max < Infinity\n//               ? ' and '\n//               : ''\n//           } ${\n//             breakpoints[size].max &&\n//             breakpoints[size].max >= 0 &&\n//             breakpoints[size].max < Infinity\n//               ? ' (max-width:' + breakpoints[size].max + 'px)'\n//               : ''\n//           } {\n//      ${convertToCSS(props[size])}\n//     }`\n//         : '';\n//     })\n//     .join('\\n');\n\n//   return mediaQueries;\n// };\n\nexport const onlyStyle = (props: any) => {\n  const filteredProps: any = {};\n\n  Object.keys(props).map((property) => {\n    if (StyleProps[property] !== undefined) {\n      filteredProps[property] = props[property];\n    }\n  });\n  return applyStyle(filteredProps);\n};\n\nexport const StyledView = styled.div((props: any) => {\n  return applyStyle(props);\n});\n\nexport const StyledImage = styled.img((props: any) => {\n  return applyStyle(props);\n});\n\nexport class ViewElement extends React.PureComponent<any> {\n  render() {\n    let { onClick } = this.props;\n    if (this.props.onPress !== undefined) {\n      onClick = this.props.onPress;\n    }\n\n    //console.log(this.props);\n    return <StyledView {...this.props} onClick={onClick} />;\n  }\n}\n\nexport class ImageElement extends React.PureComponent<any> {\n  render() {\n    let { onClick } = this.props;\n    if (this.props.onPress !== undefined) {\n      onClick = this.props.onPress;\n    }\n    return <StyledImage {...this.props} onClick={onClick} />;\n  }\n}\n","import React from 'react';\nimport { ViewElement } from './Element';\nimport { ViewStyleProps } from '../types/style';\nimport { CSSProperties } from 'styled-components';\n\nexport interface ViewProps\n  extends Omit<ViewStyleProps, 'pointerEvents'>,\n    CSSProperties {\n  size?: number;\n  on?: Record<string, CSSProperties>;\n  onPress?: (...args: any) => void;\n  paddingHorizontal?: number | string;\n  marginHorizontal?: number | string;\n  paddingVertical?: number | string;\n  marginVertical?: number | string;\n  shadow?: boolean | number;\n}\n\nexport const View = (props: ViewProps) => <ViewElement {...props} />;\n\nexport const SafeArea = View;\n\nexport const Scroll = (props: any) => <View overflow={'auto'} {...props} />;\n","import React from 'react';\nimport { CSSProperties } from 'styled-components';\nimport { ImageElement } from './Element';\nimport { View } from './View';\nimport { ImageStyleProps } from '../types/style';\n\nexport interface ImageProps\n  extends Omit<ImageStyleProps, 'pointerEvents' | 'source'>,\n    CSSProperties {\n  size?: number;\n  on?: Record<string, CSSProperties>;\n  onPress?: (...args: any) => void;\n  src: string | any;\n  shadow?: boolean | number;\n}\n\nexport interface ImageBackgroundProps extends ImageProps {\n  src: string;\n}\n\nexport class ImageBackground extends React.PureComponent<ImageBackgroundProps> {\n  render() {\n    const { src, onClick, onPress, ...props } = this.props;\n\n    return (\n      <View\n        style={{\n          backgroundSize: 'contain',\n          backgroundImage: `url(\"${src}\")`,\n          backgroundPosition: 'center center',\n          backgroundRepeat: 'no-repeat',\n        }}\n        onClick={onClick ? onClick : onPress}\n        {...props}\n      />\n    );\n  }\n}\n\nexport const Image = (props: ImageProps) => <ImageElement {...props} />;\n\nexport const RoundedImage = ({ size, src, ...props }: any) => (\n  <ImageBackground borderRadius={size / 2} size={size} src={src} {...props} />\n);\n\nexport const SquaredImage = ({ size, src, ...props }: any) => (\n  <ImageBackground {...props} size={size} src={src} />\n);\n","import React from 'react';\nimport { CSSProperties } from 'styled-components';\nimport styled from 'styled-components';\nimport { applyStyle } from './Element';\nimport { TextStyleProps } from '../types/style';\n\nexport interface TextProps\n  extends Omit<TextStyleProps, 'pointerEvents' | 'onPress'>,\n    CSSProperties {\n  on?: Record<string, CSSProperties>;\n  onPress?: (...args: any) => void;\n  paddingHorizontal?: number | string;\n  marginHorizontal?: number | string;\n  paddingVertical?: number | string;\n  marginVertical?: number | string;\n  toUpperCase?: boolean;\n  shadow?: boolean | number;\n}\n\nexport const TextSpan: React.FC<CSSProperties> = styled.div(\n  (props: CSSProperties) => {\n    props.display = 'inherit';\n    props.flexDirection = 'column';\n    return applyStyle(props);\n  }\n);\n\nexport class Text extends React.PureComponent<TextProps> {\n  render() {\n    const { toUpperCase = false, children, ...props } = this.props;\n    let content: any = children;\n\n    if (children && typeof children === 'string') {\n      content = children.toString().trim();\n    }\n\n    if (typeof content === 'string' && toUpperCase) {\n      content = content.toUpperCase();\n    }\n\n    if (typeof content === 'string') {\n      content = content.split('\\n').map((item, key) => {\n        return (\n          <span key={key.toString()}>\n            {item}\n            <br />\n          </span>\n        );\n      });\n    }\n\n    return <TextSpan {...props}>{content}</TextSpan>;\n  }\n}\n","import { useEffect } from 'react';\nexport const useMount = (callback: () => void) => {\n  useEffect(() => {\n    callback();\n  }, []);\n};\n","import React, { ReactNode, createContext, useContext } from 'react';\n\nexport type ScreenSizeRange = {\n  breakpoint: string;\n  min: number;\n  max?: number;\n};\nexport type ResponsiveConfig = Record<string, number>;\nconst defaultBreakpointsConfig: ResponsiveConfig = {\n  xs: 0,\n  sm: 340,\n  md: 560,\n  lg: 1080,\n  xl: 1300,\n};\n\nexport type DeviceConfig = Record<string, string[]>;\nconst defaultDeviceConfig: DeviceConfig = {\n  mobile: ['xs', 'sm'],\n  tablet: ['md', 'lg'],\n  desktop: ['lg', 'xl'],\n};\n\nexport type ScreenConfig = {\n  breakpoints: ResponsiveConfig;\n  devices: DeviceConfig;\n};\n\nexport type ScreenOrientation = 'landscape' | 'portrait';\n\nconst defaultScreenConfig: ScreenConfig = {\n  breakpoints: defaultBreakpointsConfig,\n  devices: defaultDeviceConfig,\n};\n\nexport const ResponsiveContext =\n  createContext<ScreenConfig>(defaultScreenConfig);\n\nexport const useResponsiveContext = () => useContext(ResponsiveContext);\n\nexport const ResponsiveProvider = ({\n  breakpoints = defaultBreakpointsConfig,\n  devices = defaultDeviceConfig,\n  children,\n}: {\n  breakpoints?: ResponsiveConfig;\n  devices?: DeviceConfig;\n\n  children?: ReactNode;\n}): React.ReactElement => {\n  return (\n    <ResponsiveContext.Provider\n      value={{\n        breakpoints,\n        devices,\n      }}\n    >\n      {children}\n    </ResponsiveContext.Provider>\n  );\n};\n","import { useState } from 'react';\nimport {\n  useResponsiveContext,\n  ScreenOrientation,\n  ScreenSizeRange,\n} from '../providers/Responsive';\n\nimport { useMount } from './useMount';\n\nexport const createQuery = (keyScreen: string, query: string, set: any) => {\n  const mql = window.matchMedia(query);\n  const onChange = () => {\n    if (!!mql.matches) {\n      set(keyScreen);\n    }\n  };\n\n  mql.addListener(onChange);\n  if (!!mql.matches) {\n    set(keyScreen);\n  }\n\n  return () => {\n    mql.removeListener(onChange);\n  };\n};\n\nexport const useResponsive = () => {\n  const { breakpoints, devices } = useResponsiveContext();\n  const [screen, setScreen] = useState('xs');\n  const [orientation, setOrientation] = useState(\n    'landscape' as ScreenOrientation\n  );\n\n  const keys = Object.keys(breakpoints);\n\n  useMount(() => {\n    const breakpointValue = keys\n      .map((breakpoint) => {\n        const value: ScreenSizeRange = {\n          breakpoint: breakpoint as keyof typeof breakpoints,\n          min: breakpoints[breakpoint],\n          max: 0,\n        };\n\n        return value;\n      })\n      .sort((a, b) => a.min - b.min);\n\n    breakpointValue.reduce((a, b) => {\n      if (b) a.max = b.min;\n\n      return b;\n    });\n\n    breakpointValue.map((sizeScreen: ScreenSizeRange) => {\n      createQuery(\n        sizeScreen.breakpoint,\n        `only screen ${\n          sizeScreen.min && sizeScreen.min >= 0\n            ? 'and (min-width:' + sizeScreen.min + 'px)'\n            : ''\n        } ${\n          sizeScreen.max && sizeScreen.max >= 0\n            ? 'and (max-width:' + sizeScreen.max + 'px)'\n            : ''\n        }`,\n        setScreen\n      );\n\n      // if (\n      //   window.innerWidth >= sizeScreen.min &&\n      //   window.innerWidth <= sizeScreen.max\n      // ) {\n      //   setScreen(key as ScreenResponsiveConfig);\n      // }\n    });\n\n    createQuery(\n      'landscape',\n      'only screen and (orientation: landscape)',\n      setOrientation\n    );\n    createQuery(\n      'portrait',\n      'only screen and (orientation: portrait)',\n      setOrientation\n    );\n  });\n\n  const on = (device: keyof typeof devices) => {\n    return devices[device].includes(screen);\n  };\n\n  return {\n    breakpoints,\n    devices,\n    orientation,\n    screen,\n    on,\n  };\n};\n"],"names":["palette","whiteAlpha","blackAlpha","rose","pink","fuchsia","purple","violet","indigo","blue","lightBlue","cyan","teal","emerald","green","lime","yellow","amber","orange","red","warmGray","trueGray","gray","dark","coolGray","blueGray","defaultColors","white","black","ThemeContext","createContext","getColor","name","colors","defaultPalette","useTheme","useContext","shadows","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","StyleProps","concat","map","property","applyStyle","props","newProps","onClick","cursor","size","undefined","newSize","setSize","paddingHorizontal","paddingLeft","paddingRight","marginHorizontal","marginLeft","marginRight","paddingVertical","paddingTop","paddingBottom","marginVertical","marginTop","marginBottom","shadow","shawdowValue","i","Object","keys","toLowerCase","indexOf","event","console","log","StyledView","styled","div","StyledImage","img","ViewElement","render","this","onPress","React","PureComponent","ImageElement","View","SafeArea","ImageBackground","src","style","backgroundSize","backgroundImage","backgroundPosition","backgroundRepeat","TextSpan","display","flexDirection","Text","toUpperCase","children","content","toString","trim","split","item","key","useMount","callback","useEffect","defaultBreakpointsConfig","xs","sm","md","lg","xl","defaultDeviceConfig","mobile","tablet","desktop","ResponsiveContext","breakpoints","devices","useResponsiveContext","createQuery","keyScreen","query","set","mql","window","matchMedia","onChange","matches","addListener","removeListener","Provider","value","borderRadius","overflow","parseInt","e","useState","screen","setScreen","orientation","setOrientation","breakpointValue","breakpoint","min","max","sort","a","b","reduce","sizeScreen","on","device","includes"],"mappings":"meAkBO,IAAMA,EAAwB,CACnCC,WAAY,IACN,gCACC,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,6BAGPC,WAAY,IACN,0BACC,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,uBAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,QAAS,IACH,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,OAAQ,IACF,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,OAAQ,IACF,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,OAAQ,IACF,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,UAAW,IACL,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,QAAS,IACH,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,MAAO,IACD,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,OAAQ,IACF,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,MAAO,IACD,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,OAAQ,IACF,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,IAAK,IACC,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,SAAU,IACJ,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,SAAU,IACJ,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,SAAU,IACJ,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,SAAU,IACJ,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,YCrTHC,EAA6B,CACjCC,MAAO,UACPC,MAAO,WAGIC,EAAeC,gBAIzB,CAEDC,SAAU,SAACC,UACFA,GAETC,OAAQP,EACR1B,QAASkC,IAGEC,EAAW,kBAAMC,aAAWP,IC3B5BQ,EAA+B,GACvC,CACDC,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,EACdC,UAAW,KAEV,CACDN,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,GACfC,aAAc,KACdC,UAAW,KAEV,CACDN,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,KACdC,UAAW,KAEV,CACDN,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,KACdC,UAAW,KAEV,CACDN,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,KACdC,UAAW,KAEV,CACDN,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,KACdC,UAAW,KAEV,CACDN,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,KACdC,UAAW,KAEV,CACDN,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,GACfC,aAAc,KACdC,UAAW,KAEV,CACDN,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,KACdC,UAAW,KAEV,CACDN,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,KACdC,UAAW,KC0LFC,EAAkB,GAlPC,CAC9B,eACA,aACA,YACA,cACA,oBACA,iBACA,kBACA,mBACA,mBACA,iBACA,cACA,SACA,YACA,UACA,MACA,OACA,YACA,gBACA,WACA,aACA,WACA,SACA,iBACA,OACA,SACA,eACA,YACA,mBACA,aACA,cACA,cACA,YACA,iBACA,YACA,WACA,YACA,WACA,WACA,YACA,YACA,UACA,gBACA,aACA,oBACA,cACA,eACA,eACA,aACA,kBACA,WACA,QACA,QACA,MACA,QACA,UAoJsDC,OAjJxB,CAC9B,cACA,eACA,gBACA,gBArGiC,CACjC,YACA,kBACA,WACA,SACA,SACA,aACA,aASA,SACA,oBA4G4B,CAC5B,mBACA,qBACA,oBACA,wBACA,yBACA,0BACA,0BACA,oBACA,cACA,iBACA,kBACA,kBACA,eACA,kBACA,mBACA,mBACA,cACA,iBACA,qBACA,sBACA,uBACA,uBACA,iBACA,cACA,SACA,UACA,YACA,QAGkC,CAClC,yBACA,uBACA,mCACA,UACA,cACA,0BACA,gBACA,qBACA,eACA,iCACA,gBACA,mBACA,yBACA,0BACA,gCACA,eACA,mBACA,aACA,iBACA,sBACA,sBACA,4BACA,iCACA,mBACA,mBACA,sBACA,sBACA,wBACA,sBACA,WACA,oBACA,kBACA,gBACA,iBACA,gBACA,sBACA,sBACA,iBACA,wBACA,sBACA,gBACA,sBACA,wBACA,gBACA,0BACA,eACA,oCACA,iCACA,+BACA,kBACA,YACA,iBACA,gBACA,cACA,sBACA,aA7G4B,CAC5B,mBACA,QACA,WACA,YACA,aACA,aACA,YACA,qBACA,kBACA,aACA,mBACA,qBACA,oBACA,cACA,gBACA,sBACA,sBACA,gBACA,oBAtG6B,CAC7B,uBACA,qBACA,yBACA,0BACA,cACA,eACA,sBACA,kBACA,cACA,UACA,WACA,YACA,YACA,aACA,YACA,iBAsPYC,KAAI,SAACC,GACjBH,EAAWG,IAAY,KAGzB,IAIaC,EAAa,SAAbA,EAAcC,OACjBnB,EAAaI,IAAbJ,SAEFoB,EAAgB,GAElBD,EAAME,UACRD,EAASE,OAAS,eAGdC,OACaC,IAAjBL,EAAMT,aACUc,IAAhBL,EAAMV,OACNU,EAAMT,SAAWS,EAAMV,MACnBU,EAAMT,OACNS,EAAMI,KACNJ,EAAMI,KACN,QAEFA,GAtBiB,SAACE,EAA0BL,GAChDA,EAASV,OAASU,EAASX,MAAQgB,EAsBjCC,CAAQH,EAAMH,GAGZD,EAAMQ,oBACRP,EAASQ,YAAcT,EAAMQ,kBAC7BP,EAASS,aAAeV,EAAMQ,mBAG5BR,EAAMW,mBACRV,EAASW,WAAaZ,EAAMW,iBAC5BV,EAASY,YAAcb,EAAMW,kBAG3BX,EAAMc,kBACRb,EAASc,WAAaf,EAAMc,gBAC5Bb,EAASe,cAAgBhB,EAAMc,iBAG7Bd,EAAMiB,iBACRhB,EAASiB,UAAYlB,EAAMiB,eAC3BhB,EAASkB,aAAenB,EAAMiB,gBAG5BjB,EAAMoB,OAAQ,KACVC,EACoB,iBAAjBrB,EAAMoB,aAAiDf,IAA1BlB,EAAQa,EAAMoB,QAC9CpB,EAAMoB,OACN,KAEFjC,EAAQkC,OACL,IAAMC,KAAKnC,EAAQkC,GACtBpB,EAASqB,GAAKnC,EAAQkC,GAAcC,UAK1CC,OAAOC,KAAKxB,GAAOH,KAAI,SAACC,WACOO,IAAzBV,EAAWG,IAAuC,MAAZA,KACT,iBAApBE,EAAMF,IAAuC,eAAbA,EACzCG,EAASH,GAAYE,EAAMF,GAAY,UAClC,IAAiD,IAA7CA,EAAS2B,cAAcC,QAAQ,SACxCzB,EAASH,GAAYjB,EAASmB,EAAMF,SAC/B,GAA+B,iBAApBE,EAAMF,MACL,OAAbA,MACG,IAAM6B,KAAS3B,EAAMF,GACxBG,EAAS,KAAO0B,GAAS5B,EAAWC,EAAMF,GAAU6B,SAGtD1B,EAASH,GAAYC,EAAWC,EAAMF,SAGxCG,EAASH,GAAYE,EAAMF,QAG7BG,EAASH,GAAYE,EAAMF,MAI/B8B,QAAQC,IAAI,CAAE7B,MAAAA,EAAOC,SAAAA,IACdA,GA6DI6B,EAAaC,EAAOC,KAAI,SAAChC,UAC7BD,EAAWC,MAGPiC,EAAcF,EAAOG,KAAI,SAAClC,UAC9BD,EAAWC,MAGPmC,0FACXC,OAAA,eACQlC,EAAYmC,KAAKrC,MAAjBE,oBACqBG,IAAvBgC,KAAKrC,MAAMsC,UACbpC,EAAUmC,KAAKrC,MAAMsC,SAIhBC,gBAACT,mBAAeO,KAAKrC,OAAOE,QAASA,SARfqC,EAAMC,eAY1BC,0FACXL,OAAA,eACQlC,EAAYmC,KAAKrC,MAAjBE,oBACqBG,IAAvBgC,KAAKrC,MAAMsC,UACbpC,EAAUmC,KAAKrC,MAAMsC,SAEhBC,gBAACN,mBAAgBI,KAAKrC,OAAOE,QAASA,SANfqC,EAAMC,eCnb3BE,EAAO,SAAC1C,UAAqBuC,gBAACJ,mBAAgBnC,KAE9C2C,EAAWD,kECAXE,0FACXR,OAAA,iBAC8CC,KAAKrC,MAAzC6C,IAAAA,IAAK3C,IAAAA,QAASoC,IAAAA,QAAYtC,gBAGhCuC,gBAACG,iBACCI,MAAO,CACLC,eAAgB,UAChBC,wBAAyBH,OACzBI,mBAAoB,gBACpBC,iBAAkB,aAEpBhD,QAASA,GAAoBoC,GACzBtC,QAbyBuC,EAAMC,4CCD9BW,EAAoCpB,EAAOC,KACtD,SAAChC,UACCA,EAAMoD,QAAU,UAChBpD,EAAMqD,cAAgB,SACftD,EAAWC,MAITsD,0FACXlB,OAAA,iBACsDC,KAAKrC,UAAjDuD,YAAAA,gBAAqBC,IAAAA,SAAaxD,SACtCyD,EAAeD,SAEfA,GAAgC,iBAAbA,IACrBC,EAAUD,EAASE,WAAWC,QAGT,iBAAZF,GAAwBF,IACjCE,EAAUA,EAAQF,eAGG,iBAAZE,IACTA,EAAUA,EAAQG,MAAM,MAAM/D,KAAI,SAACgE,EAAMC,UAErCvB,wBAAMuB,IAAKA,EAAIJ,YACZG,EACDtB,gCAMDA,gBAACY,mBAAanD,GAAQyD,OAxBPlB,EAAMC,eC1BnBuB,EAAW,SAACC,GACvBC,aAAU,WACRD,MACC,KCICE,EAA6C,CACjDC,GAAI,EACJC,GAAI,IACJC,GAAI,IACJC,GAAI,KACJC,GAAI,MAIAC,EAAoC,CACxCC,OAAQ,CAAC,KAAM,MACfC,OAAQ,CAAC,KAAM,MACfC,QAAS,CAAC,KAAM,OAeLC,EACXhG,gBANwC,CACxCiG,YAAaX,EACbY,QAASN,IAMEO,EAAuB,kBAAM7F,aAAW0F,IC7BxCI,EAAc,SAACC,EAAmBC,EAAeC,OACtDC,EAAMC,OAAOC,WAAWJ,GACxBK,EAAW,WACTH,EAAII,SACRL,EAAIF,WAIRG,EAAIK,YAAYF,GACVH,EAAII,SACRL,EAAIF,GAGC,WACLG,EAAIM,eAAeH,mBJgBF,SAACvF,UAAsBuC,gBAACE,mBAAiBzC,sFGC5B,oBAChC6E,gBACAC,eASEvC,gBAACqC,EAAkBe,UACjBC,MAAO,CACLf,uBAZQX,IAaRY,mBAZIN,QACVhB,gCHF0B,gBAAGpD,IAAAA,KAAMyC,IAAAA,IAAQ7C,gBAC3CuC,gBAACK,iBAAgBiD,aAAczF,EAAO,EAAGA,KAAMA,EAAMyC,IAAKA,GAAS7C,uCDpB/C,SAACA,UAAeuC,gBAACG,iBAAKoD,SAAU,QAAY9F,0BCuBtC,gBAAGI,IAAAA,KAAMyC,IAAAA,IAAQ7C,gBAC3CuC,gBAACK,mBAAoB5C,GAAOI,KAAMA,EAAMyC,IAAKA,qFJjBlB,oBAC3B/F,QAAAA,aAAUkC,QACVD,OAAAA,aAASP,WA+BP+D,gBAAC5D,EAAagH,UACZC,MAAO,CACL/G,SA1BW,SAACC,MAEH,gBAATA,EAAwB,OAAOA,UAEN,IAAvBA,EAAK4C,QAAQ,KAAa,KACtBF,EAAO1C,EAAK8E,MAAM,QAEpB9G,QAAyCuD,IAA9BvD,EAAQ0E,EAAK,IAAIA,EAAK,WAC5B1E,EAAQ0E,EAAK,IAAIA,EAAK,YAEanB,IAAxCvD,EAAQ0E,EAAK,IAAIuE,SAASvE,EAAK,YAC1B1E,EAAQ0E,EAAK,IAAIuE,SAASvE,EAAK,UAEnC,GAAIzC,QAA2BsB,IAAjBtB,EAAOD,UACnBC,EAAOD,GAEhB,MAAOkH,GACPpE,QAAQC,IAAI,SAAW/C,EAAO,qBAGzBA,GAOHC,OAAAA,EACAjC,QAAAA,MAlCN0G,yFQL2B,iBACMuB,IAAzBF,IAAAA,YAAaC,IAAAA,UACOmB,WAAS,MAA9BC,OAAQC,SACuBF,WACpC,aADKG,OAAaC,OAId7E,EAAOD,OAAOC,KAAKqD,UAEzBd,GAAS,eACDuC,EAAkB9E,EACrB3B,KAAI,SAAC0G,SAC2B,CAC7BA,WAAYA,EACZC,IAAK3B,EAAY0B,GACjBE,IAAK,MAKRC,MAAK,SAACC,EAAGC,UAAMD,EAAEH,IAAMI,EAAEJ,OAE5BF,EAAgBO,QAAO,SAACF,EAAGC,UACrBA,IAAGD,EAAEF,IAAMG,EAAEJ,KAEVI,KAGTN,EAAgBzG,KAAI,SAACiH,GACnB9B,EACE8B,EAAWP,2BAETO,EAAWN,KAAOM,EAAWN,KAAO,EAChC,kBAAoBM,EAAWN,IAAM,MACrC,SAEJM,EAAWL,KAAOK,EAAWL,KAAO,EAChC,kBAAoBK,EAAWL,IAAM,MACrC,IAENN,MAWJnB,EACE,YACA,2CACAqB,GAEFrB,EACE,WACA,0CACAqB,MAQG,CACLxB,YAAAA,EACAC,QAAAA,EACAsB,YAAAA,EACAF,OAAAA,EACAa,GATS,SAACC,UACHlC,EAAQkC,GAAQC,SAASf"}
+{"version":3,"file":"app-studio.cjs.production.min.js","sources":["../src/utils/colors.ts","../src/providers/Theme.tsx","../src/utils/shadow.ts","../src/components/Element.tsx","../src/components/View.tsx","../src/components/Image.tsx","../src/components/Text.tsx","../src/hooks/useMount.ts","../src/providers/Responsive.tsx","../src/hooks/useResponsive.ts"],"sourcesContent":["export type ColorPalette = Record<string, Record<number, string>>;\n\nexport type ColorSingleton = Record<\n  string,\n  {\n    50: string;\n    100: string;\n    200: string;\n    300: string;\n    400: string;\n    500: string;\n    600: string;\n    700: string;\n    800: string;\n    900: string;\n  }\n>;\n\nexport const palette: ColorPalette = {\n  whiteAlpha: {\n    50: 'rgba(255, 255, 255, 0.04)',\n    100: 'rgba(255, 255, 255, 0.06)',\n    200: 'rgba(255, 255, 255, 0.08)',\n    300: 'rgba(255, 255, 255, 0.16)',\n    400: 'rgba(255, 255, 255, 0.24)',\n    500: 'rgba(255, 255, 255, 0.36)',\n    600: 'rgba(255, 255, 255, 0.48)',\n    700: 'rgba(255, 255, 255, 0.64)',\n    800: 'rgba(255, 255, 255, 0.80)',\n    900: 'rgba(255, 255, 255, 0.92)',\n  },\n\n  blackAlpha: {\n    50: 'rgba(0, 0, 0, 0.04)',\n    100: 'rgba(0, 0, 0, 0.06)',\n    200: 'rgba(0, 0, 0, 0.08)',\n    300: 'rgba(0, 0, 0, 0.16)',\n    400: 'rgba(0, 0, 0, 0.24)',\n    500: 'rgba(0, 0, 0, 0.36)',\n    600: 'rgba(0, 0, 0, 0.48)',\n    700: 'rgba(0, 0, 0, 0.64)',\n    800: 'rgba(0, 0, 0, 0.80)',\n    900: 'rgba(0, 0, 0, 0.92)',\n  },\n  rose: {\n    50: '#fff1f2',\n    100: '#ffe4e6',\n    200: '#fecdd3',\n    300: '#fda4af',\n    400: '#fb7185',\n    500: '#f43f5e',\n    600: '#e11d48',\n    700: '#be123c',\n    800: '#9f1239',\n    900: '#881337',\n  },\n  pink: {\n    50: '#fdf2f8',\n    100: '#fce7f3',\n    200: '#fbcfe8',\n    300: '#f9a8d4',\n    400: '#f472b6',\n    500: '#ec4899',\n    600: '#db2777',\n    700: '#be185d',\n    800: '#9d174d',\n    900: '#831843',\n  },\n  fuchsia: {\n    50: '#fdf4ff',\n    100: '#fae8ff',\n    200: '#f5d0fe',\n    300: '#f0abfc',\n    400: '#e879f9',\n    500: '#d946ef',\n    600: '#c026d3',\n    700: '#a21caf',\n    800: '#86198f',\n    900: '#701a75',\n  },\n  purple: {\n    50: '#faf5ff',\n    100: '#f3e8ff',\n    200: '#e9d5ff',\n    300: '#d8b4fe',\n    400: '#c084fc',\n    500: '#a855f7',\n    600: '#9333ea',\n    700: '#7e22ce',\n    800: '#6b21a8',\n    900: '#581c87',\n  },\n  violet: {\n    50: '#f5f3ff',\n    100: '#ede9fe',\n    200: '#ddd6fe',\n    300: '#c4b5fd',\n    400: '#a78bfa',\n    500: '#8b5cf6',\n    600: '#7c3aed',\n    700: '#6d28d9',\n    800: '#5b21b6',\n    900: '#4c1d95',\n  },\n  indigo: {\n    50: '#eef2ff',\n    100: '#e0e7ff',\n    200: '#c7d2fe',\n    300: '#a5b4fc',\n    400: '#818cf8',\n    500: '#6366f1',\n    600: '#4f46e5',\n    700: '#4338ca',\n    800: '#3730a3',\n    900: '#312e81',\n  },\n  blue: {\n    50: '#eff6ff',\n    100: '#dbeafe',\n    200: '#bfdbfe',\n    300: '#93c5fd',\n    400: '#60a5fa',\n    500: '#3b82f6',\n    600: '#2563eb',\n    700: '#1d4ed8',\n    800: '#1e40af',\n    900: '#1e3a8a',\n  },\n  lightBlue: {\n    50: '#f0f9ff',\n    100: '#e0f2fe',\n    200: '#bae6fd',\n    300: '#7dd3fc',\n    400: '#38bdf8',\n    500: '#0ea5e9',\n    600: '#0284c7',\n    700: '#0369a1',\n    800: '#075985',\n    900: '#0c4a6e',\n  },\n  cyan: {\n    50: '#ecfeff',\n    100: '#cffafe',\n    200: '#a5f3fc',\n    300: '#67e8f9',\n    400: '#22d3ee',\n    500: '#06b6d4',\n    600: '#0891b2',\n    700: '#0e7490',\n    800: '#155e75',\n    900: '#164e63',\n  },\n  teal: {\n    50: '#f0fdfa',\n    100: '#ccfbf1',\n    200: '#99f6e4',\n    300: '#5eead4',\n    400: '#2dd4bf',\n    500: '#14b8a6',\n    600: '#0d9488',\n    700: '#0f766e',\n    800: '#115e59',\n    900: '#134e4a',\n  },\n  emerald: {\n    50: '#ecfdf5',\n    100: '#d1fae5',\n    200: '#a7f3d0',\n    300: '#6ee7b7',\n    400: '#34d399',\n    500: '#10b981',\n    600: '#059669',\n    700: '#047857',\n    800: '#065f46',\n    900: '#064e3b',\n  },\n  green: {\n    50: '#f0fdf4',\n    100: '#dcfce7',\n    200: '#bbf7d0',\n    300: '#86efac',\n    400: '#4ade80',\n    500: '#22c55e',\n    600: '#16a34a',\n    700: '#15803d',\n    800: '#166534',\n    900: '#14532d',\n  },\n  lime: {\n    50: '#f7fee7',\n    100: '#ecfccb',\n    200: '#d9f99d',\n    300: '#bef264',\n    400: '#a3e635',\n    500: '#84cc16',\n    600: '#65a30d',\n    700: '#4d7c0f',\n    800: '#3f6212',\n    900: '#365314',\n  },\n  yellow: {\n    50: '#fefce8',\n    100: '#fef9c3',\n    200: '#fef08a',\n    300: '#fde047',\n    400: '#facc15',\n    500: '#eab308',\n    600: '#ca8a04',\n    700: '#a16207',\n    800: '#854d0e',\n    900: '#713f12',\n  },\n  amber: {\n    50: '#fffbeb',\n    100: '#fef3c7',\n    200: '#fde68a',\n    300: '#fcd34d',\n    400: '#fbbf24',\n    500: '#f59e0b',\n    600: '#d97706',\n    700: '#b45309',\n    800: '#92400e',\n    900: '#78350f',\n  },\n  orange: {\n    50: '#fff7ed',\n    100: '#ffedd5',\n    200: '#fed7aa',\n    300: '#fdba74',\n    400: '#fb923c',\n    500: '#f97316',\n    600: '#ea580c',\n    700: '#c2410c',\n    800: '#9a3412',\n    900: '#7c2d12',\n  },\n  red: {\n    50: '#fef2f2',\n    100: '#fee2e2',\n    200: '#fecaca',\n    300: '#fca5a5',\n    400: '#f87171',\n    500: '#ef4444',\n    600: '#dc2626',\n    700: '#b91c1c',\n    800: '#991b1b',\n    900: '#7f1d1d',\n  },\n  warmGray: {\n    50: '#fafaf9',\n    100: '#f5f5f4',\n    200: '#e7e5e4',\n    300: '#d6d3d1',\n    400: '#a8a29e',\n    500: '#78716c',\n    600: '#57534e',\n    700: '#44403c',\n    800: '#292524',\n    900: '#1c1917',\n  },\n  trueGray: {\n    50: '#fafafa',\n    100: '#f5f5f5',\n    200: '#e5e5e5',\n    300: '#d4d4d4',\n    400: '#a3a3a3',\n    500: '#737373',\n    600: '#525252',\n    700: '#404040',\n    800: '#262626',\n    900: '#171717',\n  },\n  gray: {\n    50: '#fafafa',\n    100: '#f4f4f5',\n    200: '#e4e4e7',\n    300: '#d4d4d8',\n    400: '#a1a1aa',\n    500: '#71717a',\n    600: '#52525b',\n    700: '#3f3f46',\n    800: '#27272a',\n    900: '#18181b',\n  },\n  dark: {\n    50: '#18181b',\n    100: '#27272a',\n    200: '#3f3f46',\n    300: '#52525b',\n    400: '#71717a',\n    500: '#a1a1aa',\n    600: '#d4d4d8',\n    700: '#e4e4e7',\n    800: '#f4f4f5',\n    900: '#fafafa',\n  },\n  coolGray: {\n    50: '#f9fafb',\n    100: '#f3f4f6',\n    200: '#e5e7eb',\n    300: '#d1d5db',\n    400: '#9ca3af',\n    500: '#6b7280',\n    600: '#4b5563',\n    700: '#374151',\n    800: '#1f2937',\n    900: '#111827',\n  },\n  blueGray: {\n    50: '#f8fafc',\n    100: '#f1f5f9',\n    200: '#e2e8f0',\n    300: '#cbd5e1',\n    400: '#94a3b8',\n    500: '#64748b',\n    600: '#475569',\n    700: '#334155',\n    800: '#1e293b',\n    900: '#0f172a',\n  },\n};\n","import React, { ReactNode } from 'react';\n\nimport { createContext, useContext } from 'react';\nimport { palette as defaultPalette } from '../utils/colors';\n\ntype ColorConfig = Record<string, string>;\n\ntype VariantColorConfig = Record<string, Record<string, string>>;\n\nconst defaultColors: ColorConfig = {\n  white: '#FFFFFF',\n  black: '#000000',\n};\n\nexport const ThemeContext = createContext<{\n  getColor: (color: string) => string;\n  colors: ColorConfig;\n  palette: VariantColorConfig;\n}>({\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  getColor: (name: string) => {\n    return name;\n  },\n  colors: defaultColors,\n  palette: defaultPalette,\n});\n\nexport const useTheme = () => useContext(ThemeContext);\n\nexport const ThemeProvider = ({\n  palette = defaultPalette,\n  colors = defaultColors,\n  children,\n}: {\n  colors?: ColorConfig;\n  palette?: VariantColorConfig;\n  children?: ReactNode;\n}): React.ReactElement => {\n  const getColor = (name: string) => {\n    // console.log('getColor', name);\n    if (name === 'transparent') return name;\n    try {\n      if (name.indexOf('.') !== -1) {\n        const keys = name.split('.');\n\n        if (palette && palette[keys[0]][keys[1]] !== undefined) {\n          return palette[keys[0]][keys[1]];\n        }\n        if (palette[keys[0]][parseInt(keys[1])] !== undefined) {\n          return palette[keys[0]][parseInt(keys[1])];\n        }\n      } else if (colors && colors[name] !== undefined) {\n        return colors[name];\n      }\n    } catch (e) {\n      console.log('Color ' + name + ' not found');\n    }\n\n    return name;\n  };\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        getColor,\n        colors,\n        palette,\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n","export type Shadow = {\n  shadowColor: string;\n  shadowOffset: {\n    width: number;\n    height: number;\n  };\n  shadowOpacity: number;\n  shadowRadius: number;\n};\n\nexport const shadows: Record<number, Shadow> = {\n  0: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.18,\n    shadowRadius: 1.0,\n  },\n  1: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.2,\n    shadowRadius: 1.41,\n  },\n  2: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 1,\n    },\n    shadowOpacity: 0.22,\n    shadowRadius: 2.22,\n  },\n  3: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.23,\n    shadowRadius: 2.62,\n  },\n  4: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 3.84,\n  },\n  5: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 3,\n    },\n    shadowOpacity: 0.27,\n    shadowRadius: 4.65,\n  },\n  6: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 3,\n    },\n    shadowOpacity: 0.29,\n    shadowRadius: 4.65,\n  },\n  7: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.3,\n    shadowRadius: 4.65,\n  },\n  8: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 4,\n    },\n    shadowOpacity: 0.32,\n    shadowRadius: 5.46,\n  },\n  9: {\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 5,\n    },\n    shadowOpacity: 0.34,\n    shadowRadius: 6.27,\n  },\n};\n","import React from 'react';\nimport Color from 'color-convert';\nimport styled from 'styled-components';\nimport { useTheme } from '../providers/Theme';\nimport { shadows } from '../utils/shadow';\nexport const TransformStyleProps = [\n  'transform',\n  'transformMatrix',\n  'rotation',\n  'scaleX',\n  'scaleY',\n  'translateX',\n  'translateY',\n  // 'perspective',\n  // 'rotate',\n  // 'rotateX',\n  // 'rotateY',\n  // 'rotateZ',\n  // 'scale',\n  // 'skewX',\n  // 'skewY',\n  'testID',\n  'decomposedMatrix',\n];\n\nexport const ImageStyleProps = [\n  'borderTopRightRadius',\n  'backfaceVisibility',\n  'borderBottomLeftRadius',\n  'borderBottomRightRadius',\n  'borderColor',\n  'borderRadius',\n  'borderTopLeftRadius',\n  'backgroundColor',\n  'borderWidth',\n  'opacity',\n  'overflow',\n  'overflowX',\n  'overflowY',\n  'resizeMode',\n  'tintColor',\n  'overlayColor',\n];\n\nexport const LayoutStyleProps = [\n  'alignContent',\n  'alignItems',\n  'alignSelf',\n  'aspectRatio',\n  'borderBottomWidth',\n  'borderEndWidth',\n  'borderLeftWidth',\n  'borderRightWidth',\n  'borderStartWidth',\n  'borderTopWidth',\n  'borderWidth',\n  'bottom',\n  'direction',\n  'display',\n  'end',\n  'flex',\n  'flexBasis',\n  'flexDirection',\n  'flexGrow',\n  'flexShrink',\n  'flexWrap',\n  'height',\n  'justifyContent',\n  'left',\n  'margin',\n  'marginBottom',\n  'marginEnd',\n  'marginHorizontal',\n  'marginLeft',\n  'marginRight',\n  'marginStart',\n  'marginTop',\n  'marginVertical',\n  'maxHeight',\n  'maxWidth',\n  'minHeight',\n  'minWidth',\n  'overflow',\n  'overflowX',\n  'overflowY',\n  'padding',\n  'paddingBottom',\n  'paddingEnd',\n  'paddingHorizontal',\n  'paddingLeft',\n  'paddingRight',\n  'paddingStart',\n  'paddingTop',\n  'paddingVertical',\n  'position',\n  'right',\n  'start',\n  'top',\n  'width',\n  'zIndex',\n];\n\nexport const ShadowStyleProps = [\n  'shadowColor',\n  'shadowOffset',\n  'shadowOpacity',\n  'shadowRadius',\n];\nexport const TextStyleProps = [\n  'textShadowOffset',\n  'color',\n  'fontSize',\n  'fontStyle',\n  'fontWeight',\n  'lineHeight',\n  'textAlign',\n  'textDecorationLine',\n  'textShadowColor',\n  'fontFamily',\n  'textShadowRadius',\n  'includeFontPadding',\n  'textAlignVertical',\n  'fontVariant',\n  'letterSpacing',\n  'textDecorationColor',\n  'textDecorationStyle',\n  'textTransform',\n  'writingDirection',\n];\n\nexport const ViewStyleProps = [\n  'borderRightColor',\n  'backfaceVisibility',\n  'borderBottomColor',\n  'borderBottomEndRadius',\n  'borderBottomLeftRadius',\n  'borderBottomRightRadius',\n  'borderBottomStartRadius',\n  'borderBottomWidth',\n  'borderColor',\n  'borderEndColor',\n  'borderLeftColor',\n  'borderLeftWidth',\n  'borderRadius',\n  'backgroundColor',\n  'borderRightWidth',\n  'borderStartColor',\n  'borderStyle',\n  'borderTopColor',\n  'borderTopEndRadius',\n  'borderTopLeftRadius',\n  'borderTopRightRadius',\n  'borderTopStartRadius',\n  'borderTopWidth',\n  'borderWidth',\n  'border',\n  'opacity',\n  'elevation',\n  'size',\n];\n\nexport const ScrollViewStyleProps = [\n  'alwaysBounceHorizontal',\n  'alwaysBounceVertical',\n  'automaticallyAdjustContentInsets',\n  'bounces',\n  'bouncesZoom',\n  'canCancelContentTouches',\n  'centerContent',\n  'contentLayoutStyle',\n  'contentInset',\n  'contentInsetAdjustmentBehavior',\n  'contentOffset',\n  'decelerationRate',\n  'directionalLockEnabled',\n  'disableIntervalMomentum',\n  'disableScrollViewPanResponder',\n  'endFillColor',\n  'fadingEdgeLength',\n  'horizontal',\n  'indicatorStyle',\n  'invertStickyHeaders',\n  'keyboardDismissMode',\n  'keyboardShouldPersistTaps',\n  'maintainVisibleContentPosition',\n  'maximumZoomScale',\n  'minimumZoomScale',\n  'nestedScrollEnabled',\n  'onContentSizeChange',\n  'onMomentumScrollBegin',\n  'onMomentumScrollEnd',\n  'onScroll',\n  'onScrollBeginDrag',\n  'onScrollEndDrag',\n  'onScrollToTop',\n  'overScrollMode',\n  'pagingEnabled',\n  'persistentScrollbar',\n  'pinchGestureEnabled',\n  'refreshControl',\n  'removeClippedSubviews',\n  'scrollBarThumbImage',\n  'scrollEnabled',\n  'scrollEventThrottle',\n  'scrollIndicatorInsets',\n  'scrollPerfTag',\n  'scrollToOverflowEnabled',\n  'scrollsToTop',\n  'DEPRECATED_sendUpdatedChildFrames',\n  'showsHorizontalScrollIndicator',\n  'showsVerticalScrollIndicator',\n  'snapToAlignment',\n  'snapToEnd',\n  'snapToInterval',\n  'snapToOffsets',\n  'snapToStart',\n  'stickyHeaderIndices',\n  'zoomScale',\n];\n\nexport const BaseStyleProperty: any = {};\nLayoutStyleProps.concat(ShadowStyleProps, TransformStyleProps).map(\n  (property) => {\n    BaseStyleProperty[property] = true;\n  }\n);\n\nexport const ViewStyleProperty: any = BaseStyleProperty;\nViewStyleProps.map((property) => {\n  ViewStyleProperty[property] = true;\n});\n\nexport const ScrollViewStyleProperty: any = ViewStyleProperty;\nScrollViewStyleProps.map((property) => {\n  ScrollViewStyleProperty[property] = true;\n});\n\nexport const ImageStyleProperty: any = ViewStyleProperty;\nImageStyleProps.map((property) => {\n  ImageStyleProperty[property] = true;\n});\n\nexport const TextStyleProperty: any = BaseStyleProperty;\nTextStyleProps.map((property) => {\n  TextStyleProperty[property] = true;\n});\n\nexport const allStyleProps: string[] = LayoutStyleProps.concat(\n  ShadowStyleProps,\n  TransformStyleProps,\n  ViewStyleProps,\n  ScrollViewStyleProps,\n  TextStyleProps,\n  ImageStyleProps\n);\n\nconst WidthWords = ['X', 'Width', 'Horizontal', 'Right', 'Left'];\n\nexport const WidthStyleProperty = ['x', 'width', 'right', 'left'].concat(\n  allStyleProps.filter((property) => {\n    return WidthWords.some((item) => property.indexOf(item) >= 0);\n  })\n);\nexport const WidthStyleProps: any = {};\nWidthStyleProperty.map((property) => {\n  WidthStyleProps[property] = true;\n});\n\nconst HeightWords = ['Y', 'Height', 'Vertical', 'top', 'bottom'];\n\nexport const HeightStyleProperty = ['y', 'height', 'top', 'bottom'].concat(\n  allStyleProps.filter((property) => {\n    return HeightWords.some((item) => property.indexOf(item) >= 0);\n  })\n);\n\nexport const HeightStyleProps: any = {};\nHeightStyleProperty.map((property) => {\n  HeightStyleProps[property] = true;\n});\n\nexport const SizeProps: any = {};\nHeightStyleProperty.concat(WidthStyleProperty).map((property) => {\n  SizeProps[property] = true;\n});\n\nexport const StyleProps: any = {};\nallStyleProps.map((property) => {\n  StyleProps[property] = true;\n});\n\nexport const setSize = (newSize: string | number, newProps: any) => {\n  newProps.height = newProps.width = newSize;\n};\n\nexport const applyStyle = (props: any) => {\n  const { getColor } = useTheme();\n\n  const newProps: any = {};\n\n  if (props.onClick) {\n    newProps.cursor = 'pointer';\n  }\n\n  const size =\n    props.height !== undefined &&\n    props.width !== undefined &&\n    props.height === props.width\n      ? props.height\n      : props.size\n      ? props.size\n      : null;\n\n  if (size) {\n    setSize(size, newProps);\n  }\n\n  if (props.paddingHorizontal) {\n    newProps.paddingLeft = props.paddingHorizontal;\n    newProps.paddingRight = props.paddingHorizontal;\n  }\n\n  if (props.marginHorizontal) {\n    newProps.marginLeft = props.marginHorizontal;\n    newProps.marginRight = props.marginHorizontal;\n  }\n\n  if (props.paddingVertical) {\n    newProps.paddingTop = props.paddingVertical;\n    newProps.paddingBottom = props.paddingVertical;\n  }\n\n  if (props.marginVertical) {\n    newProps.marginTop = props.marginVertical;\n    newProps.marginBottom = props.marginVertical;\n  }\n\n  if (props.shadow) {\n    if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {\n      const shawdowValue: number =\n        typeof props.shadow === 'number' && shadows[props.shadow] !== undefined\n          ? props.shadow\n          : 2;\n\n      if (shadows[shawdowValue]) {\n        const shadowColor = Color.hex\n          .rgb(shadows[shawdowValue].shadowColor)\n          .join(',');\n\n        newProps[\n          'boxShadow'\n        ] = `${shadows[shawdowValue].shadowOffset.height}px ${shadows[shawdowValue].shadowOffset.width}px ${shadows[shawdowValue].shadowRadius}px rgba(${shadowColor},${shadows[shawdowValue].shadowOpacity})`;\n      }\n    } else {\n      const shadowColor = Color.hex.rgb(props.shadow.shadowColor).join(',');\n\n      newProps[\n        'boxShadow'\n      ] = `${props.shadow.shadowOffset.height}px ${props.shadow.shadowOffset.width}px ${props.shadow.shadowRadius}px rgba(${shadowColor},${props.shadow.shadowOpacity})`;\n    }\n  }\n\n  Object.keys(props).map((property) => {\n    if (StyleProps[property] !== undefined || property == 'on') {\n      if (typeof props[property] === 'number' && property !== 'fontWeight') {\n        newProps[property] = props[property] + 'px';\n      } else if (property.toLowerCase().indexOf('color') !== -1) {\n        newProps[property] = getColor(props[property]);\n      } else if (typeof props[property] === 'object') {\n        if (property === 'on') {\n          for (const event in props[property]) {\n            newProps['&:' + event] = applyStyle(props[property][event]);\n          }\n        } else {\n          newProps[property] = applyStyle(props[property]);\n        }\n      } else {\n        newProps[property] = props[property];\n      }\n    }\n  });\n\n  return newProps;\n};\n\n// function convertToCSS(props: any) {\n//   return Object.entries(props).reduce((str, [key, val]) => {\n//     const casedKey = key.replace(\n//       /[A-Z]/g,\n//       (match) => `-${match.toLowerCase()}`\n//     );\n//     return `${str}${casedKey}:${typeof val === 'number' ? val + 'px' : val};\\n`;\n//   }, '');\n// }\n\n// export const getResponsiveMediaQueries = (props: any) => {\n//   const { breakpointKeys, breakpoints } = useResponsive();\n//   console.log('mediaQueries', props);\n\n//   const mediaQueries = breakpointKeys\n//     .map((size) => {\n//       return props && props[size] !== undefined\n//         ? `\n//     @media ${\n//       breakpoints[size].min\n//         ? ' (min-width:' +\n//           (breakpoints[size].min > 0 ? breakpoints[size].min : 0) +\n//           'px)'\n//         : ''\n//     } ${\n//             breakpoints[size].min &&\n//             breakpoints[size].max &&\n//             breakpoints[size].max >= 0 &&\n//             breakpoints[size].max < Infinity\n//               ? ' and '\n//               : ''\n//           } ${\n//             breakpoints[size].max &&\n//             breakpoints[size].max >= 0 &&\n//             breakpoints[size].max < Infinity\n//               ? ' (max-width:' + breakpoints[size].max + 'px)'\n//               : ''\n//           } {\n//      ${convertToCSS(props[size])}\n//     }`\n//         : '';\n//     })\n//     .join('\\n');\n\n//   return mediaQueries;\n// };\n\nexport const StyledView = styled.div((props: any) => {\n  return applyStyle(props);\n});\n\nexport const StyledImage = styled.img((props: any) => {\n  return applyStyle(props);\n});\n\nexport class ViewElement extends React.PureComponent<any> {\n  render() {\n    let { onClick } = this.props;\n    if (this.props.onPress !== undefined) {\n      onClick = this.props.onPress;\n    }\n\n    //console.log(this.props);\n    return <StyledView {...this.props} onClick={onClick} />;\n  }\n}\n\nexport class ImageElement extends React.PureComponent<any> {\n  render() {\n    let { onClick } = this.props;\n    if (this.props.onPress !== undefined) {\n      onClick = this.props.onPress;\n    }\n    return <StyledImage {...this.props} onClick={onClick} />;\n  }\n}\n","import React from 'react';\nimport { ViewElement } from './Element';\nimport { ViewStyleProps } from '../types/style';\nimport { CSSProperties } from 'styled-components';\nimport { Shadow } from '../utils/shadow';\n\nexport interface ViewProps\n  extends Omit<ViewStyleProps, 'pointerEvents'>,\n    CSSProperties {\n  size?: number;\n  on?: Record<string, CSSProperties>;\n  onPress?: (...args: any) => void;\n  paddingHorizontal?: number | string;\n  marginHorizontal?: number | string;\n  paddingVertical?: number | string;\n  marginVertical?: number | string;\n  shadow?: boolean | number | Shadow;\n}\n\nexport const View = (props: ViewProps) => <ViewElement {...props} />;\n\nexport const SafeArea = View;\n\nexport const Scroll = (props: any) => <View overflow={'auto'} {...props} />;\n","import React from 'react';\nimport { CSSProperties } from 'styled-components';\nimport { ImageElement } from './Element';\nimport { View } from './View';\nimport { ImageStyleProps } from '../types/style';\nimport { Shadow } from '../utils/shadow';\n\nexport interface ImageProps\n  extends Omit<ImageStyleProps, 'pointerEvents' | 'source'>,\n    CSSProperties {\n  size?: number;\n  on?: Record<string, CSSProperties>;\n  onPress?: (...args: any) => void;\n  src: string | any;\n  shadow?: boolean | number | Shadow;\n}\n\nexport interface ImageBackgroundProps extends ImageProps {\n  src: string;\n}\n\nexport class ImageBackground extends React.PureComponent<ImageBackgroundProps> {\n  render() {\n    const { src, onClick, onPress, ...props } = this.props;\n\n    return (\n      <View\n        style={{\n          backgroundSize: 'contain',\n          backgroundImage: `url(\"${src}\")`,\n          backgroundPosition: 'center center',\n          backgroundRepeat: 'no-repeat',\n        }}\n        onClick={onClick ? onClick : onPress}\n        {...props}\n      />\n    );\n  }\n}\n\nexport const Image = (props: ImageProps) => <ImageElement {...props} />;\n\nexport const RoundedImage = ({ size, src, ...props }: any) => (\n  <ImageBackground borderRadius={size / 2} size={size} src={src} {...props} />\n);\n\nexport const SquaredImage = ({ size, src, ...props }: any) => (\n  <ImageBackground {...props} size={size} src={src} />\n);\n","import React from 'react';\nimport { CSSProperties } from 'styled-components';\nimport styled from 'styled-components';\nimport { applyStyle } from './Element';\nimport { TextStyleProps } from '../types/style';\nimport { Shadow } from '../utils/shadow';\n\nexport interface TextProps\n  extends Omit<TextStyleProps, 'pointerEvents' | 'onPress'>,\n    CSSProperties {\n  on?: Record<string, CSSProperties>;\n  onPress?: (...args: any) => void;\n  paddingHorizontal?: number | string;\n  marginHorizontal?: number | string;\n  paddingVertical?: number | string;\n  marginVertical?: number | string;\n  toUpperCase?: boolean;\n  shadow?: boolean | number | Shadow;\n}\n\nexport const TextSpan: React.FC<CSSProperties> = styled.div(\n  (props: CSSProperties) => {\n    props.display = 'inherit';\n    props.flexDirection = 'column';\n    return applyStyle(props);\n  }\n);\n\nexport class Text extends React.PureComponent<TextProps> {\n  render() {\n    const { toUpperCase = false, children, ...props } = this.props;\n    let content: any = children;\n\n    if (children && typeof children === 'string') {\n      content = children.toString().trim();\n    }\n\n    if (typeof content === 'string' && toUpperCase) {\n      content = content.toUpperCase();\n    }\n\n    if (typeof content === 'string') {\n      content = content.split('\\n').map((item, key) => {\n        return (\n          <span key={key.toString()}>\n            {item}\n            <br />\n          </span>\n        );\n      });\n    }\n\n    return <TextSpan {...props}>{content}</TextSpan>;\n  }\n}\n","import { useEffect } from 'react';\nexport const useMount = (callback: () => void) => {\n  useEffect(() => {\n    callback();\n  }, []);\n};\n","import React, { ReactNode, createContext, useContext } from 'react';\n\nexport type ScreenSizeRange = {\n  breakpoint: string;\n  min: number;\n  max?: number;\n};\nexport type ResponsiveConfig = Record<string, number>;\nconst defaultBreakpointsConfig: ResponsiveConfig = {\n  xs: 0,\n  sm: 340,\n  md: 560,\n  lg: 1080,\n  xl: 1300,\n};\n\nexport type DeviceConfig = Record<string, string[]>;\nconst defaultDeviceConfig: DeviceConfig = {\n  mobile: ['xs', 'sm'],\n  tablet: ['md', 'lg'],\n  desktop: ['lg', 'xl'],\n};\n\nexport type ScreenConfig = {\n  breakpoints: ResponsiveConfig;\n  devices: DeviceConfig;\n};\n\nexport type ScreenOrientation = 'landscape' | 'portrait';\n\nconst defaultScreenConfig: ScreenConfig = {\n  breakpoints: defaultBreakpointsConfig,\n  devices: defaultDeviceConfig,\n};\n\nexport const ResponsiveContext =\n  createContext<ScreenConfig>(defaultScreenConfig);\n\nexport const useResponsiveContext = () => useContext(ResponsiveContext);\n\nexport const ResponsiveProvider = ({\n  breakpoints = defaultBreakpointsConfig,\n  devices = defaultDeviceConfig,\n  children,\n}: {\n  breakpoints?: ResponsiveConfig;\n  devices?: DeviceConfig;\n\n  children?: ReactNode;\n}): React.ReactElement => {\n  return (\n    <ResponsiveContext.Provider\n      value={{\n        breakpoints,\n        devices,\n      }}\n    >\n      {children}\n    </ResponsiveContext.Provider>\n  );\n};\n","import { useState } from 'react';\nimport {\n  useResponsiveContext,\n  ScreenOrientation,\n  ScreenSizeRange,\n} from '../providers/Responsive';\n\nimport { useMount } from './useMount';\n\nexport const createQuery = (keyScreen: string, query: string, set: any) => {\n  const mql = window.matchMedia(query);\n  const onChange = () => {\n    if (!!mql.matches) {\n      set(keyScreen);\n    }\n  };\n\n  mql.addListener(onChange);\n  if (!!mql.matches) {\n    set(keyScreen);\n  }\n\n  return () => {\n    mql.removeListener(onChange);\n  };\n};\n\nexport const useResponsive = () => {\n  const { breakpoints, devices } = useResponsiveContext();\n  const [screen, setScreen] = useState('xs');\n  const [orientation, setOrientation] = useState(\n    'landscape' as ScreenOrientation\n  );\n\n  const keys = Object.keys(breakpoints);\n\n  useMount(() => {\n    const breakpointValue = keys\n      .map((breakpoint) => {\n        const value: ScreenSizeRange = {\n          breakpoint: breakpoint as keyof typeof breakpoints,\n          min: breakpoints[breakpoint],\n          max: 0,\n        };\n\n        return value;\n      })\n      .sort((a, b) => a.min - b.min);\n\n    breakpointValue.reduce((a, b) => {\n      if (b) a.max = b.min;\n\n      return b;\n    });\n\n    breakpointValue.map((sizeScreen: ScreenSizeRange) => {\n      createQuery(\n        sizeScreen.breakpoint,\n        `only screen ${\n          sizeScreen.min && sizeScreen.min >= 0\n            ? 'and (min-width:' + sizeScreen.min + 'px)'\n            : ''\n        } ${\n          sizeScreen.max && sizeScreen.max >= 0\n            ? 'and (max-width:' + sizeScreen.max + 'px)'\n            : ''\n        }`,\n        setScreen\n      );\n\n      // if (\n      //   window.innerWidth >= sizeScreen.min &&\n      //   window.innerWidth <= sizeScreen.max\n      // ) {\n      //   setScreen(key as ScreenResponsiveConfig);\n      // }\n    });\n\n    createQuery(\n      'landscape',\n      'only screen and (orientation: landscape)',\n      setOrientation\n    );\n    createQuery(\n      'portrait',\n      'only screen and (orientation: portrait)',\n      setOrientation\n    );\n  });\n\n  const on = (device: keyof typeof devices) => {\n    return devices[device].includes(screen);\n  };\n\n  return {\n    breakpoints,\n    devices,\n    orientation,\n    screen,\n    on,\n  };\n};\n"],"names":["palette","whiteAlpha","blackAlpha","rose","pink","fuchsia","purple","violet","indigo","blue","lightBlue","cyan","teal","emerald","green","lime","yellow","amber","orange","red","warmGray","trueGray","gray","dark","coolGray","blueGray","defaultColors","white","black","ThemeContext","createContext","getColor","name","colors","defaultPalette","useTheme","useContext","shadows","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","StyleProps","concat","map","property","applyStyle","props","newProps","onClick","cursor","size","undefined","newSize","setSize","paddingHorizontal","paddingLeft","paddingRight","marginHorizontal","marginLeft","marginRight","paddingVertical","paddingTop","paddingBottom","marginVertical","marginTop","marginBottom","shadow","shawdowValue","Color","hex","rgb","join","Object","keys","toLowerCase","indexOf","event","StyledView","styled","div","StyledImage","img","ViewElement","render","this","onPress","React","PureComponent","ImageElement","View","SafeArea","ImageBackground","src","style","backgroundSize","backgroundImage","backgroundPosition","backgroundRepeat","TextSpan","display","flexDirection","Text","toUpperCase","children","content","toString","trim","split","item","key","useMount","callback","useEffect","defaultBreakpointsConfig","xs","sm","md","lg","xl","defaultDeviceConfig","mobile","tablet","desktop","ResponsiveContext","breakpoints","devices","useResponsiveContext","createQuery","keyScreen","query","set","mql","window","matchMedia","onChange","matches","addListener","removeListener","Provider","value","borderRadius","overflow","parseInt","e","console","log","useState","screen","setScreen","orientation","setOrientation","breakpointValue","breakpoint","min","max","sort","a","b","reduce","sizeScreen","on","device","includes"],"mappings":"igBAkBO,IAAMA,EAAwB,CACnCC,WAAY,IACN,gCACC,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,6BAGPC,WAAY,IACN,0BACC,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,uBAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,QAAS,IACH,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,OAAQ,IACF,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,OAAQ,IACF,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,OAAQ,IACF,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,UAAW,IACL,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,QAAS,IACH,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,MAAO,IACD,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,OAAQ,IACF,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,MAAO,IACD,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,OAAQ,IACF,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,IAAK,IACC,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,SAAU,IACJ,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,SAAU,IACJ,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,KAAM,IACA,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,SAAU,IACJ,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,WAEPC,SAAU,IACJ,cACC,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,YCrTHC,EAA6B,CACjCC,MAAO,UACPC,MAAO,WAGIC,EAAeC,gBAIzB,CAEDC,SAAU,SAACC,UACFA,GAETC,OAAQP,EACR1B,QAASkC,IAGEC,EAAW,kBAAMC,aAAWP,ICjB5BQ,EAAkC,GAC1C,CACDC,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,KAEb,CACDL,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,GACfC,aAAc,QAEb,CACDL,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,QAEb,CACDL,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,QAEb,CACDL,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,QAEb,CACDL,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,QAEb,CACDL,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,QAEb,CACDL,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,GACfC,aAAc,QAEb,CACDL,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,QAEb,CACDL,YAAa,OACbC,aAAc,CACZC,MAAO,EACPC,OAAQ,GAEVC,cAAe,IACfC,aAAc,OC2LLC,EAAkB,GAlPC,CAC9B,eACA,aACA,YACA,cACA,oBACA,iBACA,kBACA,mBACA,mBACA,iBACA,cACA,SACA,YACA,UACA,MACA,OACA,YACA,gBACA,WACA,aACA,WACA,SACA,iBACA,OACA,SACA,eACA,YACA,mBACA,aACA,cACA,cACA,YACA,iBACA,YACA,WACA,YACA,WACA,WACA,YACA,YACA,UACA,gBACA,aACA,oBACA,cACA,eACA,eACA,aACA,kBACA,WACA,QACA,QACA,MACA,QACA,UAoJsDC,OAjJxB,CAC9B,cACA,eACA,gBACA,gBArGiC,CACjC,YACA,kBACA,WACA,SACA,SACA,aACA,aASA,SACA,oBA4G4B,CAC5B,mBACA,qBACA,oBACA,wBACA,yBACA,0BACA,0BACA,oBACA,cACA,iBACA,kBACA,kBACA,eACA,kBACA,mBACA,mBACA,cACA,iBACA,qBACA,sBACA,uBACA,uBACA,iBACA,cACA,SACA,UACA,YACA,QAGkC,CAClC,yBACA,uBACA,mCACA,UACA,cACA,0BACA,gBACA,qBACA,eACA,iCACA,gBACA,mBACA,yBACA,0BACA,gCACA,eACA,mBACA,aACA,iBACA,sBACA,sBACA,4BACA,iCACA,mBACA,mBACA,sBACA,sBACA,wBACA,sBACA,WACA,oBACA,kBACA,gBACA,iBACA,gBACA,sBACA,sBACA,iBACA,wBACA,sBACA,gBACA,sBACA,wBACA,gBACA,0BACA,eACA,oCACA,iCACA,+BACA,kBACA,YACA,iBACA,gBACA,cACA,sBACA,aA7G4B,CAC5B,mBACA,QACA,WACA,YACA,aACA,aACA,YACA,qBACA,kBACA,aACA,mBACA,qBACA,oBACA,cACA,gBACA,sBACA,sBACA,gBACA,oBAtG6B,CAC7B,uBACA,qBACA,yBACA,0BACA,cACA,eACA,sBACA,kBACA,cACA,UACA,WACA,YACA,YACA,aACA,YACA,iBAsPYC,KAAI,SAACC,GACjBH,EAAWG,IAAY,KAGzB,IAIaC,EAAa,SAAbA,EAAcC,OACjB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"}

package/dist/app-studio.esm.js

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
+import Color from 'color-convert';
 import styled from 'styled-components';
 
 function _inheritsLoose(subClass, superClass) {
@@ -399,8 +400,7 @@ var shadows = {
       height: 1
     },
     shadowOpacity: 0.18,
-    shadowRadius: 1.0,
-    elevation: 1
+    shadowRadius: 1.0
   },
   1: {
     shadowColor: '#000',
@@ -409,8 +409,7 @@ var shadows = {
       height: 1
     },
     shadowOpacity: 0.2,
-    shadowRadius: 1.41,
-    elevation: 2
+    shadowRadius: 1.41
   },
   2: {
     shadowColor: '#000',
@@ -419,8 +418,7 @@ var shadows = {
       height: 1
     },
     shadowOpacity: 0.22,
-    shadowRadius: 2.22,
-    elevation: 3
+    shadowRadius: 2.22
   },
   3: {
     shadowColor: '#000',
@@ -429,8 +427,7 @@ var shadows = {
       height: 2
     },
     shadowOpacity: 0.23,
-    shadowRadius: 2.62,
-    elevation: 4
+    shadowRadius: 2.62
   },
   4: {
     shadowColor: '#000',
@@ -439,8 +436,7 @@ var shadows = {
       height: 2
     },
     shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5
+    shadowRadius: 3.84
   },
   5: {
     shadowColor: '#000',
@@ -449,8 +445,7 @@ var shadows = {
       height: 3
     },
     shadowOpacity: 0.27,
-    shadowRadius: 4.65,
-    elevation: 6
+    shadowRadius: 4.65
   },
   6: {
     shadowColor: '#000',
@@ -459,8 +454,7 @@ var shadows = {
       height: 3
     },
     shadowOpacity: 0.29,
-    shadowRadius: 4.65,
-    elevation: 7
+    shadowRadius: 4.65
   },
   7: {
     shadowColor: '#000',
@@ -469,8 +463,7 @@ var shadows = {
       height: 4
     },
     shadowOpacity: 0.3,
-    shadowRadius: 4.65,
-    elevation: 8
+    shadowRadius: 4.65
   },
   8: {
     shadowColor: '#000',
@@ -479,8 +472,7 @@ var shadows = {
       height: 4
     },
     shadowOpacity: 0.32,
-    shadowRadius: 5.46,
-    elevation: 9
+    shadowRadius: 5.46
   },
   9: {
     shadowColor: '#000',
@@ -489,8 +481,7 @@ var shadows = {
       height: 5
     },
     shadowOpacity: 0.34,
-    shadowRadius: 6.27,
-    elevation: 10
+    shadowRadius: 6.27
   }
 };
 
@@ -554,12 +545,17 @@ var applyStyle = function applyStyle(props) {
   }
 
   if (props.shadow) {
-    var shawdowValue = typeof props.shadow === 'number' && shadows[props.shadow] !== undefined ? props.shadow : 2;
+    if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {
+      var shawdowValue = typeof props.shadow === 'number' && shadows[props.shadow] !== undefined ? props.shadow : 2;
 
-    if (shadows[shawdowValue]) {
-      for (var i in shadows[shawdowValue]) {
-        newProps[i] = shadows[shawdowValue][i];
+      if (shadows[shawdowValue]) {
+        var shadowColor = Color.hex.rgb(shadows[shawdowValue].shadowColor).join(',');
+        newProps['boxShadow'] = shadows[shawdowValue].shadowOffset.height + "px " + shadows[shawdowValue].shadowOffset.width + "px " + shadows[shawdowValue].shadowRadius + "px rgba(" + shadowColor + "," + shadows[shawdowValue].shadowOpacity + ")";
       }
+    } else {
+      var _shadowColor = Color.hex.rgb(props.shadow.shadowColor).join(',');
+
+      newProps['boxShadow'] = props.shadow.shadowOffset.height + "px " + props.shadow.shadowOffset.width + "px " + props.shadow.shadowRadius + "px rgba(" + _shadowColor + "," + props.shadow.shadowOpacity + ")";
     }
   }
 
@@ -580,16 +576,53 @@ var applyStyle = function applyStyle(props) {
       } else {
         newProps[property] = props[property];
       }
-    } else {
-      newProps[property] = props[property];
     }
   });
-  console.log({
-    props: props,
-    newProps: newProps
-  });
   return newProps;
 }; // function convertToCSS(props: any) {
+//   return Object.entries(props).reduce((str, [key, val]) => {
+//     const casedKey = key.replace(
+//       /[A-Z]/g,
+//       (match) => `-${match.toLowerCase()}`
+//     );
+//     return `${str}${casedKey}:${typeof val === 'number' ? val + 'px' : val};\n`;
+//   }, '');
+// }
+// export const getResponsiveMediaQueries = (props: any) => {
+//   const { breakpointKeys, breakpoints } = useResponsive();
+//   console.log('mediaQueries', props);
+//   const mediaQueries = breakpointKeys
+//     .map((size) => {
+//       return props && props[size] !== undefined
+//         ? `
+//     @media ${
+//       breakpoints[size].min
+//         ? ' (min-width:' +
+//           (breakpoints[size].min > 0 ? breakpoints[size].min : 0) +
+//           'px)'
+//         : ''
+//     } ${
+//             breakpoints[size].min &&
+//             breakpoints[size].max &&
+//             breakpoints[size].max >= 0 &&
+//             breakpoints[size].max < Infinity
+//               ? ' and '
+//               : ''
+//           } ${
+//             breakpoints[size].max &&
+//             breakpoints[size].max >= 0 &&
+//             breakpoints[size].max < Infinity
+//               ? ' (max-width:' + breakpoints[size].max + 'px)'
+//               : ''
+//           } {
+//      ${convertToCSS(props[size])}
+//     }`
+//         : '';
+//     })
+//     .join('\n');
+//   return mediaQueries;
+// };
+
 var StyledView = /*#__PURE__*/styled.div(function (props) {
   return applyStyle(props);
 });