app-studio 0.0.3 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/app-studio.cjs.development.js +93 -53
  2. package/dist/app-studio.cjs.development.js.map +1 -1
  3. package/dist/app-studio.cjs.production.min.js +1 -1
  4. package/dist/app-studio.cjs.production.min.js.map +1 -1
  5. package/dist/app-studio.esm.js +93 -53
  6. package/dist/app-studio.esm.js.map +1 -1
  7. package/dist/components/Element.d.ts +0 -1
  8. package/dist/components/Image.d.ts +2 -1
  9. package/dist/components/Layout.d.ts +11 -0
  10. package/dist/components/Text.d.ts +3 -1
  11. package/dist/components/View.d.ts +2 -1
  12. package/dist/utils/shadow.d.ts +10 -1
  13. package/package.json +6 -2
  14. package/src/components/Element.tsx +49 -23
  15. package/src/components/Image.tsx +2 -1
  16. package/src/components/Layout.tsx +49 -0
  17. package/src/components/Text.tsx +10 -3
  18. package/src/components/View.tsx +2 -1
  19. package/src/utils/shadow.ts +31 -31
package/dist/app-studio.cjs.production.min.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),o=e(t),r=e(require("styled-components"));function a(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,(Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function n(e,t){if(null==e)return{};var o,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)t.indexOf(o=n[r])>=0||(a[o]=e[o]);return a}var i={whiteAlpha:{50:"rgba(255, 255, 255, 0.04)",100:"rgba(255, 255, 255, 0.06)",200:"rgba(255, 255, 255, 0.08)",300:"rgba(255, 255, 255, 0.16)",400:"rgba(255, 255, 255, 0.24)",500:"rgba(255, 255, 255, 0.36)",600:"rgba(255, 255, 255, 0.48)",700:"rgba(255, 255, 255, 0.64)",800:"rgba(255, 255, 255, 0.80)",900:"rgba(255, 255, 255, 0.92)"},blackAlpha:{50:"rgba(0, 0, 0, 0.04)",100:"rgba(0, 0, 0, 0.06)",200:"rgba(0, 0, 0, 0.08)",300:"rgba(0, 0, 0, 0.16)",400:"rgba(0, 0, 0, 0.24)",500:"rgba(0, 0, 0, 0.36)",600:"rgba(0, 0, 0, 0.48)",700:"rgba(0, 0, 0, 0.64)",800:"rgba(0, 0, 0, 0.80)",900:"rgba(0, 0, 0, 0.92)"},rose:{50:"#fff1f2",100:"#ffe4e6",200:"#fecdd3",300:"#fda4af",400:"#fb7185",500:"#f43f5e",600:"#e11d48",700:"#be123c",800:"#9f1239",900:"#881337"},pink:{50:"#fdf2f8",100:"#fce7f3",200:"#fbcfe8",300:"#f9a8d4",400:"#f472b6",500:"#ec4899",600:"#db2777",700:"#be185d",800:"#9d174d",900:"#831843"},fuchsia:{50:"#fdf4ff",100:"#fae8ff",200:"#f5d0fe",300:"#f0abfc",400:"#e879f9",500:"#d946ef",600:"#c026d3",700:"#a21caf",800:"#86198f",900:"#701a75"},purple:{50:"#faf5ff",100:"#f3e8ff",200:"#e9d5ff",300:"#d8b4fe",400:"#c084fc",500:"#a855f7",600:"#9333ea",700:"#7e22ce",800:"#6b21a8",900:"#581c87"},violet:{50:"#f5f3ff",100:"#ede9fe",200:"#ddd6fe",300:"#c4b5fd",400:"#a78bfa",500:"#8b5cf6",600:"#7c3aed",700:"#6d28d9",800:"#5b21b6",900:"#4c1d95"},indigo:{50:"#eef2ff",100:"#e0e7ff",200:"#c7d2fe",300:"#a5b4fc",400:"#818cf8",500:"#6366f1",600:"#4f46e5",700:"#4338ca",800:"#3730a3",900:"#312e81"},blue:{50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a"},lightBlue:{50:"#f0f9ff",100:"#e0f2fe",200:"#bae6fd",300:"#7dd3fc",400:"#38bdf8",500:"#0ea5e9",600:"#0284c7",700:"#0369a1",800:"#075985",900:"#0c4a6e"},cyan:{50:"#ecfeff",100:"#cffafe",200:"#a5f3fc",300:"#67e8f9",400:"#22d3ee",500:"#06b6d4",600:"#0891b2",700:"#0e7490",800:"#155e75",900:"#164e63"},teal:{50:"#f0fdfa",100:"#ccfbf1",200:"#99f6e4",300:"#5eead4",400:"#2dd4bf",500:"#14b8a6",600:"#0d9488",700:"#0f766e",800:"#115e59",900:"#134e4a"},emerald:{50:"#ecfdf5",100:"#d1fae5",200:"#a7f3d0",300:"#6ee7b7",400:"#34d399",500:"#10b981",600:"#059669",700:"#047857",800:"#065f46",900:"#064e3b"},green:{50:"#f0fdf4",100:"#dcfce7",200:"#bbf7d0",300:"#86efac",400:"#4ade80",500:"#22c55e",600:"#16a34a",700:"#15803d",800:"#166534",900:"#14532d"},lime:{50:"#f7fee7",100:"#ecfccb",200:"#d9f99d",300:"#bef264",400:"#a3e635",500:"#84cc16",600:"#65a30d",700:"#4d7c0f",800:"#3f6212",900:"#365314"},yellow:{50:"#fefce8",100:"#fef9c3",200:"#fef08a",300:"#fde047",400:"#facc15",500:"#eab308",600:"#ca8a04",700:"#a16207",800:"#854d0e",900:"#713f12"},amber:{50:"#fffbeb",100:"#fef3c7",200:"#fde68a",300:"#fcd34d",400:"#fbbf24",500:"#f59e0b",600:"#d97706",700:"#b45309",800:"#92400e",900:"#78350f"},orange:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"},red:{50:"#fef2f2",100:"#fee2e2",200:"#fecaca",300:"#fca5a5",400:"#f87171",500:"#ef4444",600:"#dc2626",700:"#b91c1c",800:"#991b1b",900:"#7f1d1d"},warmGray:{50:"#fafaf9",100:"#f5f5f4",200:"#e7e5e4",300:"#d6d3d1",400:"#a8a29e",500:"#78716c",600:"#57534e",700:"#44403c",800:"#292524",900:"#1c1917"},trueGray:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",600:"#525252",700:"#404040",800:"#262626",900:"#171717"},gray:{50:"#fafafa",100:"#f4f4f5",200:"#e4e4e7",300:"#d4d4d8",400:"#a1a1aa",500:"#71717a",600:"#52525b",700:"#3f3f46",800:"#27272a",900:"#18181b"},dark:{50:"#18181b",100:"#27272a",200:"#3f3f46",300:"#52525b",400:"#71717a",500:"#a1a1aa",600:"#d4d4d8",700:"#e4e4e7",800:"#f4f4f5",900:"#fafafa"},coolGray:{50:"#f9fafb",100:"#f3f4f6",200:"#e5e7eb",300:"#d1d5db",400:"#9ca3af",500:"#6b7280",600:"#4b5563",700:"#374151",800:"#1f2937",900:"#111827"},blueGray:{50:"#f8fafc",100:"#f1f5f9",200:"#e2e8f0",300:"#cbd5e1",400:"#94a3b8",500:"#64748b",600:"#475569",700:"#334155",800:"#1e293b",900:"#0f172a"}},d={white:"#FFFFFF",black:"#000000"},f=t.createContext({getColor:function(e){return e},colors:d,palette:i}),s=function(){return t.useContext(f)},c={0:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.18,shadowRadius:1,elevation:1},1:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:1.41,elevation:2},2:{shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.22,shadowRadius:2.22,elevation:3},3:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.23,shadowRadius:2.62,elevation:4},4:{shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.25,shadowRadius:3.84,elevation:5},5:{shadowColor:"#000",shadowOffset:{width:0,height:3},shadowOpacity:.27,shadowRadius:4.65,elevation:6},6:{shadowColor:"#000",shadowOffset:{width:0,height:3},shadowOpacity:.29,shadowRadius:4.65,elevation:7},7:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.3,shadowRadius:4.65,elevation:8},8:{shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.32,shadowRadius:5.46,elevation:9},9:{shadowColor:"#000",shadowOffset:{width:0,height:5},shadowOpacity:.34,shadowRadius:6.27,elevation:10}},l={};["alignContent","alignItems","alignSelf","aspectRatio","borderBottomWidth","borderEndWidth","borderLeftWidth","borderRightWidth","borderStartWidth","borderTopWidth","borderWidth","bottom","direction","display","end","flex","flexBasis","flexDirection","flexGrow","flexShrink","flexWrap","height","justifyContent","left","margin","marginBottom","marginEnd","marginHorizontal","marginLeft","marginRight","marginStart","marginTop","marginVertical","maxHeight","maxWidth","minHeight","minWidth","overflow","overflowX","overflowY","padding","paddingBottom","paddingEnd","paddingHorizontal","paddingLeft","paddingRight","paddingStart","paddingTop","paddingVertical","position","right","start","top","width","zIndex"].concat(["shadowColor","shadowOffset","shadowOpacity","shadowRadius"],["transform","transformMatrix","rotation","scaleX","scaleY","translateX","translateY","testID","decomposedMatrix"],["borderRightColor","backfaceVisibility","borderBottomColor","borderBottomEndRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStartRadius","borderBottomWidth","borderColor","borderEndColor","borderLeftColor","borderLeftWidth","borderRadius","backgroundColor","borderRightWidth","borderStartColor","borderStyle","borderTopColor","borderTopEndRadius","borderTopLeftRadius","borderTopRightRadius","borderTopStartRadius","borderTopWidth","borderWidth","border","opacity","elevation","size"],["alwaysBounceHorizontal","alwaysBounceVertical","automaticallyAdjustContentInsets","bounces","bouncesZoom","canCancelContentTouches","centerContent","contentLayoutStyle","contentInset","contentInsetAdjustmentBehavior","contentOffset","decelerationRate","directionalLockEnabled","disableIntervalMomentum","disableScrollViewPanResponder","endFillColor","fadingEdgeLength","horizontal","indicatorStyle","invertStickyHeaders","keyboardDismissMode","keyboardShouldPersistTaps","maintainVisibleContentPosition","maximumZoomScale","minimumZoomScale","nestedScrollEnabled","onContentSizeChange","onMomentumScrollBegin","onMomentumScrollEnd","onScroll","onScrollBeginDrag","onScrollEndDrag","onScrollToTop","overScrollMode","pagingEnabled","persistentScrollbar","pinchGestureEnabled","refreshControl","removeClippedSubviews","scrollBarThumbImage","scrollEnabled","scrollEventThrottle","scrollIndicatorInsets","scrollPerfTag","scrollToOverflowEnabled","scrollsToTop","DEPRECATED_sendUpdatedChildFrames","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","snapToAlignment","snapToEnd","snapToInterval","snapToOffsets","snapToStart","stickyHeaderIndices","zoomScale"],["textShadowOffset","color","fontSize","fontStyle","fontWeight","lineHeight","textAlign","textDecorationLine","textShadowColor","fontFamily","textShadowRadius","includeFontPadding","textAlignVertical","fontVariant","letterSpacing","textDecorationColor","textDecorationStyle","textTransform","writingDirection"],["borderTopRightRadius","backfaceVisibility","borderBottomLeftRadius","borderBottomRightRadius","borderColor","borderRadius","borderTopLeftRadius","backgroundColor","borderWidth","opacity","overflow","overflowX","overflowY","resizeMode","tintColor","overlayColor"]).map((function(e){l[e]=!0}));var p=function e(t){var o=s().getColor,r={};t.onClick&&(r.cursor="pointer");var a=void 0!==t.height&&void 0!==t.width&&t.height===t.width?t.height:t.size?t.size:null;if(a&&function(e,t){t.height=t.width=e}(a,r),t.paddingHorizontal&&(r.paddingLeft=t.paddingHorizontal,r.paddingRight=t.paddingHorizontal),t.marginHorizontal&&(r.marginLeft=t.marginHorizontal,r.marginRight=t.marginHorizontal),t.paddingVertical&&(r.paddingTop=t.paddingVertical,r.paddingBottom=t.paddingVertical),t.marginVertical&&(r.marginTop=t.marginVertical,r.marginBottom=t.marginVertical),t.shadow){var n="number"==typeof t.shadow&&void 0!==c[t.shadow]?t.shadow:2;if(c[n])for(var i in c[n])r[i]=c[n][i]}return Object.keys(t).map((function(a){if(void 0!==l[a]||"on"==a)if("number"==typeof t[a]&&"fontWeight"!==a)r[a]=t[a]+"px";else if(-1!==a.toLowerCase().indexOf("color"))r[a]=o(t[a]);else if("object"==typeof t[a])if("on"===a)for(var n in t[a])r["&:"+n]=e(t[a][n]);else r[a]=e(t[a]);else r[a]=t[a];else r[a]=t[a]})),console.log({props:t,newProps:r}),r},u=r.div((function(e){return p(e)})),h=r.img((function(e){return p(e)})),b=function(e){function t(){return e.apply(this,arguments)||this}return a(t,e),t.prototype.render=function(){var e=this.props.onClick;return void 0!==this.props.onPress&&(e=this.props.onPress),o.createElement(u,Object.assign({},this.props,{onClick:e}))},t}(o.PureComponent),g=function(e){function t(){return e.apply(this,arguments)||this}return a(t,e),t.prototype.render=function(){var e=this.props.onClick;return void 0!==this.props.onPress&&(e=this.props.onPress),o.createElement(h,Object.assign({},this.props,{onClick:e}))},t}(o.PureComponent),m=function(e){return o.createElement(b,Object.assign({},e))},w=m,v=["src","onClick","onPress"],y=["size","src"],x=["size","src"],C=function(e){function t(){return e.apply(this,arguments)||this}return a(t,e),t.prototype.render=function(){var e=this.props,t=e.src,r=e.onClick,a=e.onPress,i=n(e,v);return o.createElement(m,Object.assign({style:{backgroundSize:"contain",backgroundImage:'url("'+t+'")',backgroundPosition:"center center",backgroundRepeat:"no-repeat"},onClick:r||a},i))},t}(o.PureComponent),R=["toUpperCase","children"],S=r.div((function(e){return e.display="inherit",e.flexDirection="column",p(e)})),O=function(e){function t(){return e.apply(this,arguments)||this}return a(t,e),t.prototype.render=function(){var e=this.props,t=e.toUpperCase,r=void 0!==t&&t,a=e.children,i=n(e,R),d=a;return a&&"string"==typeof a&&(d=a.toString().trim()),"string"==typeof d&&r&&(d=d.toUpperCase()),"string"==typeof d&&(d=d.split("\n").map((function(e,t){return o.createElement("span",{key:t.toString()},e,o.createElement("br",null))}))),o.createElement(S,Object.assign({},i),d)},t}(o.PureComponent),k=function(e){t.useEffect((function(){e()}),[])},T={xs:0,sm:340,md:560,lg:1080,xl:1300},E={mobile:["xs","sm"],tablet:["md","lg"],desktop:["lg","xl"]},z=t.createContext({breakpoints:T,devices:E}),P=function(){return t.useContext(z)},B=function(e,t,o){var r=window.matchMedia(t),a=function(){r.matches&&o(e)};return r.addListener(a),r.matches&&o(e),function(){r.removeListener(a)}};exports.Image=function(e){return o.createElement(g,Object.assign({},e))},exports.ImageBackground=C,exports.ResponsiveContext=z,exports.ResponsiveProvider=function(e){var t=e.breakpoints,r=e.devices;return o.createElement(z.Provider,{value:{breakpoints:void 0===t?T:t,devices:void 0===r?E:r}},e.children)},exports.RoundedImage=function(e){var t=e.size,r=e.src,a=n(e,y);return o.createElement(C,Object.assign({borderRadius:t/2,size:t,src:r},a))},exports.SafeArea=w,exports.Scroll=function(e){return o.createElement(m,Object.assign({overflow:"auto"},e))},exports.SquaredImage=function(e){var t=e.size,r=e.src,a=n(e,x);return o.createElement(C,Object.assign({},a,{size:t,src:r}))},exports.Text=O,exports.TextSpan=S,exports.ThemeContext=f,exports.ThemeProvider=function(e){var t=e.palette,r=void 0===t?i:t,a=e.colors,n=void 0===a?d:a;return o.createElement(f.Provider,{value:{getColor:function(e){if("transparent"===e)return e;try{if(-1!==e.indexOf(".")){var t=e.split(".");if(r&&void 0!==r[t[0]][t[1]])return r[t[0]][t[1]];if(void 0!==r[t[0]][parseInt(t[1])])return r[t[0]][parseInt(t[1])]}else if(n&&void 0!==n[e])return n[e]}catch(t){console.log("Color "+e+" not found")}return e},colors:n,palette:r}},e.children)},exports.View=m,exports.createQuery=B,exports.useMount=k,exports.useResponsive=function(){var e=P(),o=e.breakpoints,r=e.devices,a=t.useState("xs"),n=a[0],i=a[1],d=t.useState("landscape"),f=d[0],s=d[1],c=Object.keys(o);return k((function(){var e=c.map((function(e){return{breakpoint:e,min:o[e],max:0}})).sort((function(e,t){return e.min-t.min}));e.reduce((function(e,t){return t&&(e.max=t.min),t})),e.map((function(e){B(e.breakpoint,"only screen "+(e.min&&e.min>=0?"and (min-width:"+e.min+"px)":"")+" "+(e.max&&e.max>=0?"and (max-width:"+e.max+"px)":""),i)})),B("landscape","only screen and (orientation: landscape)",s),B("portrait","only screen and (orientation: portrait)",s)})),{breakpoints:o,devices:r,orientation:f,screen:n,on:function(e){return r[e].includes(n)}}},exports.useResponsiveContext=P,exports.useTheme=s;
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react"),t=e(o),r=e(require("color-convert")),a=e(require("styled-components"));function n(e,o){e.prototype=Object.create(o.prototype),e.prototype.constructor=e,(Object.setPrototypeOf||function(e,o){return e.__proto__=o,e})(e,o)}function i(e,o){if(null==e)return{};var t,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)o.indexOf(t=n[r])>=0||(a[t]=e[t]);return a}var d={whiteAlpha:{50:"rgba(255, 255, 255, 0.04)",100:"rgba(255, 255, 255, 0.06)",200:"rgba(255, 255, 255, 0.08)",300:"rgba(255, 255, 255, 0.16)",400:"rgba(255, 255, 255, 0.24)",500:"rgba(255, 255, 255, 0.36)",600:"rgba(255, 255, 255, 0.48)",700:"rgba(255, 255, 255, 0.64)",800:"rgba(255, 255, 255, 0.80)",900:"rgba(255, 255, 255, 0.92)"},blackAlpha:{50:"rgba(0, 0, 0, 0.04)",100:"rgba(0, 0, 0, 0.06)",200:"rgba(0, 0, 0, 0.08)",300:"rgba(0, 0, 0, 0.16)",400:"rgba(0, 0, 0, 0.24)",500:"rgba(0, 0, 0, 0.36)",600:"rgba(0, 0, 0, 0.48)",700:"rgba(0, 0, 0, 0.64)",800:"rgba(0, 0, 0, 0.80)",900:"rgba(0, 0, 0, 0.92)"},rose:{50:"#fff1f2",100:"#ffe4e6",200:"#fecdd3",300:"#fda4af",400:"#fb7185",500:"#f43f5e",600:"#e11d48",700:"#be123c",800:"#9f1239",900:"#881337"},pink:{50:"#fdf2f8",100:"#fce7f3",200:"#fbcfe8",300:"#f9a8d4",400:"#f472b6",500:"#ec4899",600:"#db2777",700:"#be185d",800:"#9d174d",900:"#831843"},fuchsia:{50:"#fdf4ff",100:"#fae8ff",200:"#f5d0fe",300:"#f0abfc",400:"#e879f9",500:"#d946ef",600:"#c026d3",700:"#a21caf",800:"#86198f",900:"#701a75"},purple:{50:"#faf5ff",100:"#f3e8ff",200:"#e9d5ff",300:"#d8b4fe",400:"#c084fc",500:"#a855f7",600:"#9333ea",700:"#7e22ce",800:"#6b21a8",900:"#581c87"},violet:{50:"#f5f3ff",100:"#ede9fe",200:"#ddd6fe",300:"#c4b5fd",400:"#a78bfa",500:"#8b5cf6",600:"#7c3aed",700:"#6d28d9",800:"#5b21b6",900:"#4c1d95"},indigo:{50:"#eef2ff",100:"#e0e7ff",200:"#c7d2fe",300:"#a5b4fc",400:"#818cf8",500:"#6366f1",600:"#4f46e5",700:"#4338ca",800:"#3730a3",900:"#312e81"},blue:{50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a"},lightBlue:{50:"#f0f9ff",100:"#e0f2fe",200:"#bae6fd",300:"#7dd3fc",400:"#38bdf8",500:"#0ea5e9",600:"#0284c7",700:"#0369a1",800:"#075985",900:"#0c4a6e"},cyan:{50:"#ecfeff",100:"#cffafe",200:"#a5f3fc",300:"#67e8f9",400:"#22d3ee",500:"#06b6d4",600:"#0891b2",700:"#0e7490",800:"#155e75",900:"#164e63"},teal:{50:"#f0fdfa",100:"#ccfbf1",200:"#99f6e4",300:"#5eead4",400:"#2dd4bf",500:"#14b8a6",600:"#0d9488",700:"#0f766e",800:"#115e59",900:"#134e4a"},emerald:{50:"#ecfdf5",100:"#d1fae5",200:"#a7f3d0",300:"#6ee7b7",400:"#34d399",500:"#10b981",600:"#059669",700:"#047857",800:"#065f46",900:"#064e3b"},green:{50:"#f0fdf4",100:"#dcfce7",200:"#bbf7d0",300:"#86efac",400:"#4ade80",500:"#22c55e",600:"#16a34a",700:"#15803d",800:"#166534",900:"#14532d"},lime:{50:"#f7fee7",100:"#ecfccb",200:"#d9f99d",300:"#bef264",400:"#a3e635",500:"#84cc16",600:"#65a30d",700:"#4d7c0f",800:"#3f6212",900:"#365314"},yellow:{50:"#fefce8",100:"#fef9c3",200:"#fef08a",300:"#fde047",400:"#facc15",500:"#eab308",600:"#ca8a04",700:"#a16207",800:"#854d0e",900:"#713f12"},amber:{50:"#fffbeb",100:"#fef3c7",200:"#fde68a",300:"#fcd34d",400:"#fbbf24",500:"#f59e0b",600:"#d97706",700:"#b45309",800:"#92400e",900:"#78350f"},orange:{50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12"},red:{50:"#fef2f2",100:"#fee2e2",200:"#fecaca",300:"#fca5a5",400:"#f87171",500:"#ef4444",600:"#dc2626",700:"#b91c1c",800:"#991b1b",900:"#7f1d1d"},warmGray:{50:"#fafaf9",100:"#f5f5f4",200:"#e7e5e4",300:"#d6d3d1",400:"#a8a29e",500:"#78716c",600:"#57534e",700:"#44403c",800:"#292524",900:"#1c1917"},trueGray:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",600:"#525252",700:"#404040",800:"#262626",900:"#171717"},gray:{50:"#fafafa",100:"#f4f4f5",200:"#e4e4e7",300:"#d4d4d8",400:"#a1a1aa",500:"#71717a",600:"#52525b",700:"#3f3f46",800:"#27272a",900:"#18181b"},dark:{50:"#18181b",100:"#27272a",200:"#3f3f46",300:"#52525b",400:"#71717a",500:"#a1a1aa",600:"#d4d4d8",700:"#e4e4e7",800:"#f4f4f5",900:"#fafafa"},coolGray:{50:"#f9fafb",100:"#f3f4f6",200:"#e5e7eb",300:"#d1d5db",400:"#9ca3af",500:"#6b7280",600:"#4b5563",700:"#374151",800:"#1f2937",900:"#111827"},blueGray:{50:"#f8fafc",100:"#f1f5f9",200:"#e2e8f0",300:"#cbd5e1",400:"#94a3b8",500:"#64748b",600:"#475569",700:"#334155",800:"#1e293b",900:"#0f172a"}},f={white:"#FFFFFF",black:"#000000"},s=o.createContext({getColor:function(e){return e},colors:f,palette:d}),c=function(){return o.useContext(s)},l={0:{shadowColor:"#000",shadowOffset:{width:1,height:2},shadowOpacity:.18,shadowRadius:1},1:{shadowColor:"#000",shadowOffset:{width:2,height:2},shadowOpacity:.2,shadowRadius:1.41},2:{shadowColor:"#000",shadowOffset:{width:3,height:3},shadowOpacity:.22,shadowRadius:2.22},3:{shadowColor:"#000",shadowOffset:{width:4,height:4},shadowOpacity:.23,shadowRadius:2.62},4:{shadowColor:"#000",shadowOffset:{width:5,height:5},shadowOpacity:.25,shadowRadius:3.84},5:{shadowColor:"#000",shadowOffset:{width:6,height:6},shadowOpacity:.27,shadowRadius:4.65},6:{shadowColor:"#000",shadowOffset:{width:7,height:7},shadowOpacity:.29,shadowRadius:4.65},7:{shadowColor:"#000",shadowOffset:{width:8,height:8},shadowOpacity:.3,shadowRadius:4.65},8:{shadowColor:"#000",shadowOffset:{width:9,height:9},shadowOpacity:.32,shadowRadius:5.46},9:{shadowColor:"#000",shadowOffset:{width:10,height:10},shadowOpacity:.34,shadowRadius:6.27}},h={};["alignContent","alignItems","alignSelf","aspectRatio","borderBottomWidth","borderEndWidth","borderLeftWidth","borderRightWidth","borderStartWidth","borderTopWidth","borderWidth","bottom","direction","display","end","flex","flexBasis","flexDirection","flexGrow","flexShrink","flexWrap","height","justifyContent","left","margin","marginBottom","marginEnd","marginHorizontal","marginLeft","marginRight","marginStart","marginTop","marginVertical","maxHeight","maxWidth","minHeight","minWidth","overflow","overflowX","overflowY","padding","paddingBottom","paddingEnd","paddingHorizontal","paddingLeft","paddingRight","paddingStart","paddingTop","paddingVertical","position","right","start","top","width","zIndex"].concat(["shadowColor","shadowOffset","shadowOpacity","shadowRadius"],["transform","transformMatrix","rotation","scaleX","scaleY","translateX","translateY","testID","decomposedMatrix"],["borderRightColor","backfaceVisibility","borderBottomColor","borderBottomEndRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStartRadius","borderBottomWidth","borderColor","borderEndColor","borderLeftColor","borderLeftWidth","borderRadius","backgroundColor","borderRightWidth","borderStartColor","borderStyle","borderTopColor","borderTopEndRadius","borderTopLeftRadius","borderTopRightRadius","borderTopStartRadius","borderTopWidth","borderWidth","border","opacity","elevation","size"],["alwaysBounceHorizontal","alwaysBounceVertical","automaticallyAdjustContentInsets","bounces","bouncesZoom","canCancelContentTouches","centerContent","contentLayoutStyle","contentInset","contentInsetAdjustmentBehavior","contentOffset","decelerationRate","directionalLockEnabled","disableIntervalMomentum","disableScrollViewPanResponder","endFillColor","fadingEdgeLength","horizontal","indicatorStyle","invertStickyHeaders","keyboardDismissMode","keyboardShouldPersistTaps","maintainVisibleContentPosition","maximumZoomScale","minimumZoomScale","nestedScrollEnabled","onContentSizeChange","onMomentumScrollBegin","onMomentumScrollEnd","onScroll","onScrollBeginDrag","onScrollEndDrag","onScrollToTop","overScrollMode","pagingEnabled","persistentScrollbar","pinchGestureEnabled","refreshControl","removeClippedSubviews","scrollBarThumbImage","scrollEnabled","scrollEventThrottle","scrollIndicatorInsets","scrollPerfTag","scrollToOverflowEnabled","scrollsToTop","DEPRECATED_sendUpdatedChildFrames","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","snapToAlignment","snapToEnd","snapToInterval","snapToOffsets","snapToStart","stickyHeaderIndices","zoomScale"],["textShadowOffset","color","fontSize","fontStyle","fontWeight","lineHeight","textAlign","textDecorationLine","textShadowColor","fontFamily","textShadowRadius","includeFontPadding","textAlignVertical","fontVariant","letterSpacing","textDecorationColor","textDecorationStyle","textTransform","writingDirection"],["borderTopRightRadius","backfaceVisibility","borderBottomLeftRadius","borderBottomRightRadius","borderColor","borderRadius","borderTopLeftRadius","backgroundColor","borderWidth","opacity","overflow","overflowX","overflowY","resizeMode","tintColor","overlayColor"]).map((function(e){h[e]=!0}));var p={};["numberOfLines","fontWeight","timeStamp","flex","flexGrow","flexShrink","order","zIndex","aspectRatio","shadowOpacity","shadowRadius","scale","opacity","min","max","now"].map((function(e){p[e]=!0}));var u=function e(o){var t=c().getColor,a={};o.onClick&&(a.cursor="pointer");var n=void 0!==o.height&&void 0!==o.width&&o.height===o.width?o.height:o.size?o.size:null;if(n&&function(e,o){o.height=o.width=e}(n,a),o.paddingHorizontal&&(a.paddingLeft=o.paddingHorizontal,a.paddingRight=o.paddingHorizontal),o.marginHorizontal&&(a.marginLeft=o.marginHorizontal,a.marginRight=o.marginHorizontal),o.paddingVertical&&(a.paddingTop=o.paddingVertical,a.paddingBottom=o.paddingVertical),o.marginVertical&&(a.marginTop=o.marginVertical,a.marginBottom=o.marginVertical),o.shadow)if("number"==typeof o.shadow||"boolean"==typeof o.shadow){var i="number"==typeof o.shadow&&void 0!==l[o.shadow]?o.shadow:2;if(l[i]){var d=r.hex.rgb(l[i].shadowColor).join(",");a.boxShadow=l[i].shadowOffset.height+"px "+l[i].shadowOffset.width+"px "+l[i].shadowRadius+"px rgba("+d+","+l[i].shadowOpacity+")"}}else{var f=r.hex.rgb(o.shadow.shadowColor).join(",");a.boxShadow=o.shadow.shadowOffset.height+"px "+o.shadow.shadowOffset.width+"px "+o.shadow.shadowRadius+"px rgba("+f+","+o.shadow.shadowOpacity+")"}return Object.keys(o).map((function(r){if(void 0!==h[r]||"on"==r)if("number"==typeof o[r]&&void 0===p[r])a[r]=o[r]+"px";else if(-1!==r.toLowerCase().indexOf("color"))a[r]=t(o[r]);else if("object"==typeof o[r])if("on"===r)for(var n in o[r])a["&:"+n]=e(o[r][n]);else a[r]=e(o[r]);else a[r]=o[r]})),a},b=a.div((function(e){return u(e)})),g=a.img((function(e){return u(e)})),m=function(e){function o(){return e.apply(this,arguments)||this}return n(o,e),o.prototype.render=function(){var e=this.props.onClick;return void 0!==this.props.onPress&&(e=this.props.onPress),t.createElement(b,Object.assign({},this.props,{onClick:e}))},o}(t.PureComponent),w=function(e){function o(){return e.apply(this,arguments)||this}return n(o,e),o.prototype.render=function(){var e=this.props.onClick;return void 0!==this.props.onPress&&(e=this.props.onPress),t.createElement(g,Object.assign({},this.props,{onClick:e}))},o}(t.PureComponent),x=function(e){return t.createElement(m,Object.assign({},e))},v=x,y=["src","onClick","onPress"],C=["size","src"],O=["size","src"],R=function(e){function o(){return e.apply(this,arguments)||this}return n(o,e),o.prototype.render=function(){var e=this.props,o=e.src,r=e.onClick,a=e.onPress,n=i(e,y);return t.createElement(x,Object.assign({style:{backgroundSize:"contain",backgroundImage:'url("'+o+'")',backgroundPosition:"center center",backgroundRepeat:"no-repeat"},onClick:r||a},n))},o}(t.PureComponent),S=["toUpperCase","children","toFormat"],k=a.div((function(e){return e.display="inherit",e.flexDirection="column",u(e)})),T=function(e){function o(){return e.apply(this,arguments)||this}return n(o,e),o.prototype.render=function(){var e=this.props,o=e.toUpperCase,r=void 0!==o&&o,a=e.children,n=e.toFormat,d=void 0!==n&&n,f=i(e,S),s=a;return a&&"string"==typeof a&&(s=a.toString().trim()),"string"==typeof s&&r&&(s=s.toUpperCase()),"string"==typeof s&&d&&(s=s.split("\n").map((function(e,o){return t.createElement("span",{key:o.toString()},e,t.createElement("br",null))}))),t.createElement(k,Object.assign({},f),s)},o}(t.PureComponent),E=function(e){o.useEffect((function(){e()}),[])},z={xs:0,sm:340,md:560,lg:1080,xl:1300},P={mobile:["xs","sm"],tablet:["md","lg"],desktop:["lg","xl"]},j=o.createContext({breakpoints:z,devices:P}),B=function(){return o.useContext(j)},I=function(e,o,t){var r=window.matchMedia(o),a=function(){r.matches&&t(e)};return r.addListener(a),r.matches&&t(e),function(){r.removeListener(a)}};exports.Image=function(e){return t.createElement(w,Object.assign({},e))},exports.ImageBackground=R,exports.ResponsiveContext=j,exports.ResponsiveProvider=function(e){var o=e.breakpoints,r=e.devices;return t.createElement(j.Provider,{value:{breakpoints:void 0===o?z:o,devices:void 0===r?P:r}},e.children)},exports.RoundedImage=function(e){var o=e.size,r=e.src,a=i(e,C);return t.createElement(R,Object.assign({borderRadius:o/2,size:o,src:r},a))},exports.SafeArea=v,exports.Scroll=function(e){return t.createElement(x,Object.assign({overflow:"auto"},e))},exports.SquaredImage=function(e){var o=e.size,r=e.src,a=i(e,O);return t.createElement(R,Object.assign({},a,{size:o,src:r}))},exports.Text=T,exports.TextSpan=k,exports.ThemeContext=s,exports.ThemeProvider=function(e){var o=e.palette,r=void 0===o?d:o,a=e.colors,n=void 0===a?f:a;return t.createElement(s.Provider,{value:{getColor:function(e){if("transparent"===e)return e;try{if(-1!==e.indexOf(".")){var o=e.split(".");if(r&&void 0!==r[o[0]][o[1]])return r[o[0]][o[1]];if(void 0!==r[o[0]][parseInt(o[1])])return r[o[0]][parseInt(o[1])]}else if(n&&void 0!==n[e])return n[e]}catch(o){console.log("Color "+e+" not found")}return e},colors:n,palette:r}},e.children)},exports.View=x,exports.createQuery=I,exports.useMount=E,exports.useResponsive=function(){var e=B(),t=e.breakpoints,r=e.devices,a=o.useState("xs"),n=a[0],i=a[1],d=o.useState("landscape"),f=d[0],s=d[1],c=Object.keys(t);return E((function(){var e=c.map((function(e){return{breakpoint:e,min:t[e],max:0}})).sort((function(e,o){return e.min-o.min}));e.reduce((function(e,o){return o&&(e.max=o.min),o})),e.map((function(e){I(e.breakpoint,"only screen "+(e.min&&e.min>=0?"and (min-width:"+e.min+"px)":"")+" "+(e.max&&e.max>=0?"and (max-width:"+e.max+"px)":""),i)})),I("landscape","only screen and (orientation: landscape)",s),I("portrait","only screen and (orientation: portrait)",s)})),{breakpoints:t,devices:r,orientation:f,screen:n,on:function(e){return r[e].includes(n)}}},exports.useResponsiveContext=B,exports.useTheme=c;
2
2
  //# sourceMappingURL=app-studio.cjs.production.min.js.map
package/dist/app-studio.cjs.production.min.js.map CHANGED
@@ -1 +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,kBA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"}
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 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: 1,\n height: 2,\n },\n shadowOpacity: 0.18,\n shadowRadius: 1.0,\n },\n 1: {\n shadowColor: '#000',\n shadowOffset: {\n width: 2,\n height: 2,\n },\n shadowOpacity: 0.2,\n shadowRadius: 1.41,\n },\n 2: {\n shadowColor: '#000',\n shadowOffset: {\n width: 3,\n height: 3,\n },\n shadowOpacity: 0.22,\n shadowRadius: 2.22,\n },\n 3: {\n shadowColor: '#000',\n shadowOffset: {\n width: 4,\n height: 4,\n },\n shadowOpacity: 0.23,\n shadowRadius: 2.62,\n },\n 4: {\n shadowColor: '#000',\n shadowOffset: {\n width: 5,\n height: 5,\n },\n shadowOpacity: 0.25,\n shadowRadius: 3.84,\n },\n 5: {\n shadowColor: '#000',\n shadowOffset: {\n width: 6,\n height: 6,\n },\n shadowOpacity: 0.27,\n shadowRadius: 4.65,\n },\n 6: {\n shadowColor: '#000',\n shadowOffset: {\n width: 7,\n height: 7,\n },\n shadowOpacity: 0.29,\n shadowRadius: 4.65,\n },\n 7: {\n shadowColor: '#000',\n shadowOffset: {\n width: 8,\n height: 8,\n },\n shadowOpacity: 0.3,\n shadowRadius: 4.65,\n },\n 8: {\n shadowColor: '#000',\n shadowOffset: {\n width: 9,\n height: 9,\n },\n shadowOpacity: 0.32,\n shadowRadius: 5.46,\n },\n 9: {\n shadowColor: '#000',\n shadowOffset: {\n width: 10,\n height: 10,\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\nconst NumberPropsStyle: any = {};\nconst NumberProps = [\n 'numberOfLines',\n 'fontWeight',\n 'timeStamp',\n 'flex',\n 'flexGrow',\n 'flexShrink',\n 'order',\n 'zIndex',\n 'aspectRatio',\n 'shadowOpacity',\n 'shadowRadius',\n 'scale',\n 'opacity',\n 'min',\n 'max',\n 'now',\n];\n\nNumberProps.map((property: string) => {\n NumberPropsStyle[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 (\n typeof props[property] === 'number' &&\n NumberPropsStyle[property] === undefined\n ) {\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 toFormat?: 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 {\n toUpperCase = false,\n children,\n toFormat = false,\n ...props\n } = 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' && toFormat) {\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","NumberPropsStyle","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","toFormat","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,GACPC,OAAQ,IAEVC,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,IAAMC,EAAwB,GACV,CAClB,gBACA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"}
package/dist/app-studio.esm.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { createContext, useContext, useEffect, useState } from 'react';
2
+ import Color from 'color-convert';
2
3
  import styled from 'styled-components';
3
4
 
4
5
  function _inheritsLoose(subClass, superClass) {
@@ -395,102 +396,92 @@ var shadows = {
395
396
  0: {
396
397
  shadowColor: '#000',
397
398
  shadowOffset: {
398
- width: 0,
399
- height: 1
399
+ width: 1,
400
+ height: 2
400
401
  },
401
402
  shadowOpacity: 0.18,
402
- shadowRadius: 1.0,
403
- elevation: 1
403
+ shadowRadius: 1.0
404
404
  },
405
405
  1: {
406
406
  shadowColor: '#000',
407
407
  shadowOffset: {
408
- width: 0,
409
- height: 1
408
+ width: 2,
409
+ height: 2
410
410
  },
411
411
  shadowOpacity: 0.2,
412
- shadowRadius: 1.41,
413
- elevation: 2
412
+ shadowRadius: 1.41
414
413
  },
415
414
  2: {
416
415
  shadowColor: '#000',
417
416
  shadowOffset: {
418
- width: 0,
419
- height: 1
417
+ width: 3,
418
+ height: 3
420
419
  },
421
420
  shadowOpacity: 0.22,
422
- shadowRadius: 2.22,
423
- elevation: 3
421
+ shadowRadius: 2.22
424
422
  },
425
423
  3: {
426
424
  shadowColor: '#000',
427
425
  shadowOffset: {
428
- width: 0,
429
- height: 2
426
+ width: 4,
427
+ height: 4
430
428
  },
431
429
  shadowOpacity: 0.23,
432
- shadowRadius: 2.62,
433
- elevation: 4
430
+ shadowRadius: 2.62
434
431
  },
435
432
  4: {
436
433
  shadowColor: '#000',
437
434
  shadowOffset: {
438
- width: 0,
439
- height: 2
435
+ width: 5,
436
+ height: 5
440
437
  },
441
438
  shadowOpacity: 0.25,
442
- shadowRadius: 3.84,
443
- elevation: 5
439
+ shadowRadius: 3.84
444
440
  },
445
441
  5: {
446
442
  shadowColor: '#000',
447
443
  shadowOffset: {
448
- width: 0,
449
- height: 3
444
+ width: 6,
445
+ height: 6
450
446
  },
451
447
  shadowOpacity: 0.27,
452
- shadowRadius: 4.65,
453
- elevation: 6
448
+ shadowRadius: 4.65
454
449
  },
455
450
  6: {
456
451
  shadowColor: '#000',
457
452
  shadowOffset: {
458
- width: 0,
459
- height: 3
453
+ width: 7,
454
+ height: 7
460
455
  },
461
456
  shadowOpacity: 0.29,
462
- shadowRadius: 4.65,
463
- elevation: 7
457
+ shadowRadius: 4.65
464
458
  },
465
459
  7: {
466
460
  shadowColor: '#000',
467
461
  shadowOffset: {
468
- width: 0,
469
- height: 4
462
+ width: 8,
463
+ height: 8
470
464
  },
471
465
  shadowOpacity: 0.3,
472
- shadowRadius: 4.65,
473
- elevation: 8
466
+ shadowRadius: 4.65
474
467
  },
475
468
  8: {
476
469
  shadowColor: '#000',
477
470
  shadowOffset: {
478
- width: 0,
479
- height: 4
471
+ width: 9,
472
+ height: 9
480
473
  },
481
474
  shadowOpacity: 0.32,
482
- shadowRadius: 5.46,
483
- elevation: 9
475
+ shadowRadius: 5.46
484
476
  },
485
477
  9: {
486
478
  shadowColor: '#000',
487
479
  shadowOffset: {
488
- width: 0,
489
- height: 5
480
+ width: 10,
481
+ height: 10
490
482
  },
491
483
  shadowOpacity: 0.34,
492
- shadowRadius: 6.27,
493
- elevation: 10
484
+ shadowRadius: 6.27
494
485
  }
495
486
  };
496
487
 
@@ -514,6 +505,11 @@ var StyleProps = {};
514
505
  allStyleProps.map(function (property) {
515
506
  StyleProps[property] = true;
516
507
  });
508
+ var NumberPropsStyle = {};
509
+ var NumberProps = ['numberOfLines', 'fontWeight', 'timeStamp', 'flex', 'flexGrow', 'flexShrink', 'order', 'zIndex', 'aspectRatio', 'shadowOpacity', 'shadowRadius', 'scale', 'opacity', 'min', 'max', 'now'];
510
+ NumberProps.map(function (property) {
511
+ NumberPropsStyle[property] = true;
512
+ });
517
513
  var setSize = function setSize(newSize, newProps) {
518
514
  newProps.height = newProps.width = newSize;
519
515
  };
@@ -554,18 +550,23 @@ var applyStyle = function applyStyle(props) {
554
550
  }
555
551
 
556
552
  if (props.shadow) {
557
- var shawdowValue = typeof props.shadow === 'number' && shadows[props.shadow] !== undefined ? props.shadow : 2;
553
+ if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {
554
+ var shawdowValue = typeof props.shadow === 'number' && shadows[props.shadow] !== undefined ? props.shadow : 2;
558
555
 
559
- if (shadows[shawdowValue]) {
560
- for (var i in shadows[shawdowValue]) {
561
- newProps[i] = shadows[shawdowValue][i];
556
+ if (shadows[shawdowValue]) {
557
+ var shadowColor = Color.hex.rgb(shadows[shawdowValue].shadowColor).join(',');
558
+ newProps['boxShadow'] = shadows[shawdowValue].shadowOffset.height + "px " + shadows[shawdowValue].shadowOffset.width + "px " + shadows[shawdowValue].shadowRadius + "px rgba(" + shadowColor + "," + shadows[shawdowValue].shadowOpacity + ")";
562
559
  }
560
+ } else {
561
+ var _shadowColor = Color.hex.rgb(props.shadow.shadowColor).join(',');
562
+
563
+ newProps['boxShadow'] = props.shadow.shadowOffset.height + "px " + props.shadow.shadowOffset.width + "px " + props.shadow.shadowRadius + "px rgba(" + _shadowColor + "," + props.shadow.shadowOpacity + ")";
563
564
  }
564
565
  }
565
566
 
566
567
  Object.keys(props).map(function (property) {
567
568
  if (StyleProps[property] !== undefined || property == 'on') {
568
- if (typeof props[property] === 'number' && property !== 'fontWeight') {
569
+ if (typeof props[property] === 'number' && NumberPropsStyle[property] === undefined) {
569
570
  newProps[property] = props[property] + 'px';
570
571
  } else if (property.toLowerCase().indexOf('color') !== -1) {
571
572
  newProps[property] = getColor(props[property]);
@@ -580,16 +581,53 @@ var applyStyle = function applyStyle(props) {
580
581
  } else {
581
582
  newProps[property] = props[property];
582
583
  }
583
- } else {
584
- newProps[property] = props[property];
585
584
  }
586
585
  });
587
- console.log({
588
- props: props,
589
- newProps: newProps
590
- });
591
586
  return newProps;
592
587
  }; // function convertToCSS(props: any) {
588
+ // return Object.entries(props).reduce((str, [key, val]) => {
589
+ // const casedKey = key.replace(
590
+ // /[A-Z]/g,
591
+ // (match) => `-${match.toLowerCase()}`
592
+ // );
593
+ // return `${str}${casedKey}:${typeof val === 'number' ? val + 'px' : val};\n`;
594
+ // }, '');
595
+ // }
596
+ // export const getResponsiveMediaQueries = (props: any) => {
597
+ // const { breakpointKeys, breakpoints } = useResponsive();
598
+ // console.log('mediaQueries', props);
599
+ // const mediaQueries = breakpointKeys
600
+ // .map((size) => {
601
+ // return props && props[size] !== undefined
602
+ // ? `
603
+ // @media ${
604
+ // breakpoints[size].min
605
+ // ? ' (min-width:' +
606
+ // (breakpoints[size].min > 0 ? breakpoints[size].min : 0) +
607
+ // 'px)'
608
+ // : ''
609
+ // } ${
610
+ // breakpoints[size].min &&
611
+ // breakpoints[size].max &&
612
+ // breakpoints[size].max >= 0 &&
613
+ // breakpoints[size].max < Infinity
614
+ // ? ' and '
615
+ // : ''
616
+ // } ${
617
+ // breakpoints[size].max &&
618
+ // breakpoints[size].max >= 0 &&
619
+ // breakpoints[size].max < Infinity
620
+ // ? ' (max-width:' + breakpoints[size].max + 'px)'
621
+ // : ''
622
+ // } {
623
+ // ${convertToCSS(props[size])}
624
+ // }`
625
+ // : '';
626
+ // })
627
+ // .join('\n');
628
+ // return mediaQueries;
629
+ // };
630
+
593
631
  var StyledView = /*#__PURE__*/styled.div(function (props) {
594
632
  return applyStyle(props);
595
633
  });
@@ -711,7 +749,7 @@ var SquaredImage = function SquaredImage(_ref2) {
711
749
  }));
712
750
  };
713
751
 
714
- var _excluded$1 = ["toUpperCase", "children"];
752
+ var _excluded$1 = ["toUpperCase", "children", "toFormat"];
715
753
  var TextSpan = /*#__PURE__*/styled.div(function (props) {
716
754
  props.display = 'inherit';
717
755
  props.flexDirection = 'column';
@@ -731,6 +769,8 @@ var Text = /*#__PURE__*/function (_React$PureComponent) {
731
769
  _this$props$toUpperCa = _this$props.toUpperCase,
732
770
  toUpperCase = _this$props$toUpperCa === void 0 ? false : _this$props$toUpperCa,
733
771
  children = _this$props.children,
772
+ _this$props$toFormat = _this$props.toFormat,
773
+ toFormat = _this$props$toFormat === void 0 ? false : _this$props$toFormat,
734
774
  props = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
735
775
 
736
776
  var content = children;
@@ -743,7 +783,7 @@ var Text = /*#__PURE__*/function (_React$PureComponent) {
743
783
  content = content.toUpperCase();
744
784
  }
745
785
 
746
- if (typeof content === 'string') {
786
+ if (typeof content === 'string' && toFormat) {
747
787
  content = content.split('\n').map(function (item, key) {
748
788
  return React.createElement("span", {
749
789
  key: key.toString()