app-studio 0.1.2 → 0.1.5

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 (14) hide show
  1. package/README.md +49 -0
  2. package/dist/app-studio.cjs.development.js +68 -34
  3. package/dist/app-studio.cjs.development.js.map +1 -1
  4. package/dist/app-studio.cjs.production.min.js +1 -1
  5. package/dist/app-studio.cjs.production.min.js.map +1 -1
  6. package/dist/app-studio.esm.js +68 -34
  7. package/dist/app-studio.esm.js.map +1 -1
  8. package/dist/components/Form.d.ts +2 -2
  9. package/dist/components/Image.d.ts +1 -0
  10. package/dist/components/Text.d.ts +1 -0
  11. package/dist/components/View.d.ts +1 -0
  12. package/dist/hooks/useResponsive.d.ts +1 -0
  13. package/dist/providers/Responsive.d.ts +2 -0
  14. package/package.json +1 -1
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 o=require("react"),t=e(o),r=e(require("color-convert")),a=e(require("styled-components")),i=e(require("@emotion/unitless"));function n(e,o){return(n=Object.setPrototypeOf||function(e,o){return e.__proto__=o,e})(e,o)}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"}},l={white:"#FFFFFF",black:"#000000"},s=o.createContext({getColor:function(e){return e},colors:l,palette:d}),f=function(){return o.useContext(s)},c={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}},g=Object.keys(i),p=["alignContent","alignItems","alignSelf","alignmentBaseline","all","animation","animationDelay","animationDirection","animationDuration","animationFillMode","animationIterationCount","animationName","animationPlayState","animationTimingFunction","appearance","backdropFilter","backfaceVisibility","background","backgroundAttachment","backgroundBlendMode","backgroundClip","backgroundColor","backgroundImage","backgroundOrigin","backgroundPosition","backgroundPositionX","backgroundPositionY","backgroundRepeat","backgroundRepeatX","backgroundRepeatY","backgroundSize","baselineShift","blockSize","border","borderBlockEnd","borderBlockEndColor","borderBlockEndStyle","borderBlockEndWidth","borderBlockStart","borderBlockStartColor","borderBlockStartStyle","borderBlockStartWidth","borderBottom","borderBottomColor","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderImage","borderImageOutset","borderImageRepeat","borderImageSlice","borderImageSource","borderImageWidth","borderInlineEnd","borderInlineEndColor","borderInlineEndStyle","borderInlineEndWidth","borderInlineStart","borderInlineStartColor","borderInlineStartStyle","borderInlineStartWidth","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRadius","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopLeftRadius","borderTopRightRadius","borderTopStyle","borderTopWidth","borderWidth","bottom","boxShadow","boxSizing","breakAfter","breakBefore","breakInside","bufferedRendering","captionSide","caretColor","clear","clip","clipPath","clipRule","color","colorInterpolation","colorInterpolationFilters","colorRendering","columnCount","columnFill","columnGap","columnRule","columnRuleColor","columnRuleStyle","columnRuleWidth","columnSpan","columnWidth","columns","contain","content","counterIncrement","counterReset","cursor","cx","cy","d","direction","display","dominantBaseline","emptyCells","fill","fillOpacity","fillRule","filter","flex","flexBasis","flexDirection","flexFlow","flexGrow","flexShrink","flexWrap","float","floodColor","floodOpacity","font","fontDisplay","fontFamily","fontFeatureSettings","fontKerning","fontSize","fontStretch","fontStyle","fontVariant","fontVariantCaps","fontVariantEastAsian","fontVariantLigatures","fontVariantNumeric","fontVariationSettings","fontWeight","gap","grid","gridArea","gridAutoColumns","gridAutoFlow","gridAutoRows","gridColumn","gridColumnEnd","gridColumnGap","gridColumnStart","gridGap","gridRow","gridRowEnd","gridRowGap","gridRowStart","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","hyphens","imageRendering","inlineSize","isolation","justifyContent","justifyItems","justifySelf","left","letterSpacing","lightingColor","lineBreak","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBlockEnd","marginBlockStart","marginBottom","marginInlineEnd","marginInlineStart","marginLeft","marginRight","marginTop","marker","markerEnd","markerMid","markerStart","mask","maskType","maxBlockSize","maxHeight","maxInlineSize","maxWidth","maxZoom","minBlockSize","minHeight","minInlineSize","minWidth","minZoom","mixBlendMode","objectFit","objectPosition","offset","offsetDistance","offsetPath","offsetRotate","opacity","order","orientation","orphans","outline","outlineColor","outlineOffset","outlineStyle","outlineWidth","overflow","overflowAnchor","overflowWrap","overflowX","overflowY","overscrollBehavior","overscrollBehaviorBlock","overscrollBehaviorInline","overscrollBehaviorX","overscrollBehaviorY","padding","paddingBlockEnd","paddingBlockStart","paddingBottom","paddingInlineEnd","paddingInlineStart","paddingLeft","paddingRight","paddingTop","page","pageBreakAfter","pageBreakBefore","pageBreakInside","paintOrder","perspective","perspectiveOrigin","placeContent","placeItems","placeSelf","pointerEvents","position","quotes","r","resize","right","rowGap","rx","ry","scrollBehavior","scrollMargin","scrollMarginBlock","scrollMarginBlockEnd","scrollMarginBlockStart","scrollMarginBottom","scrollMarginInline","scrollMarginInlineEnd","scrollMarginInlineStart","scrollMarginLeft","scrollMarginRight","scrollMarginTop","scrollPadding","scrollPaddingBlock","scrollPaddingBlockEnd","scrollPaddingBlockStart","scrollPaddingBottom","scrollPaddingInline","scrollPaddingInlineEnd","scrollPaddingInlineStart","scrollPaddingLeft","scrollPaddingRight","scrollPaddingTop","scrollSnapAlign","scrollSnapStop","scrollSnapType","shapeImageThreshold","shapeMargin","shapeOutside","shapeRendering","size","speak","src","stopColor","stopOpacity","stroke","strokeDasharray","strokeDashoffset","strokeLinecap","strokeLinejoin","strokeMiterlimit","strokeOpacity","strokeWidth","tabSize","tableLayout","textAlign","textAlignLast","textAnchor","textCombineUpright","textDecoration","textDecorationColor","textDecorationLine","textDecorationSkipInk","textDecorationStyle","textIndent","textOrientation","textOverflow","textRendering","textShadow","textSizeAdjust","textTransform","textUnderlinePosition","top","touchAction","transform","transformBox","transformOrigin","transformStyle","transition","transitionDelay","transitionDuration","transitionProperty","transitionTimingFunction","unicodeBidi","unicodeRange","userSelect","userZoom","vectorEffect","verticalAlign","visibility","whiteSpace","widows","width","willChange","wordBreak","wordSpacing","wordWrap","writingMode","x","y","zIndex","zoom","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","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","shadowColor","shadowOffset","shadowOpacity","shadowRadius","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","borderTopRightRadius","backfaceVisibility","borderBottomLeftRadius","borderBottomRightRadius","borderColor","borderRadius","borderTopLeftRadius","backgroundColor","borderWidth","opacity","overflow","overflowX","overflowY","resizeMode","tintColor","overlayColor","transform","transformMatrix","rotation","scaleX","scaleY","translateX","translateY","perspective","rotate","rotateX","rotateY","rotateZ","scale","skewX","skewY","testID","decomposedMatrix"],u=["webkit","ms","moz"];g.forEach((function(e){u.forEach((function(o){g.push(function(e,o){return e+o.charAt(0).toUpperCase()+o.substring(1)}(o,e))}))})),g.forEach((function(e){p.includes(e)&&p.push(e)}));var b={};p.map((function(e){b[e]=!0}));var h={};["numberOfLines","fontWeight","timeStamp","flex","flexGrow","flexShrink","order","zIndex","aspectRatio","shadowOpacity","shadowRadius","scale","opacity","min","max","now"].map((function(e){h[e]=!0}));var m=function e(o){var t=f().getColor,a={};o.onClick&&null==a.cursor&&(a.cursor="pointer");var i=void 0!==o.height&&void 0!==o.width&&o.height===o.width?o.height:o.size?o.size:null;if(i&&function(e,o){o.height=o.width=e}(i,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 n="number"==typeof o.shadow&&void 0!==c[o.shadow]?o.shadow:2;if(c[n]){var d=r.hex.rgb(c[n].shadowColor).join(",");a.boxShadow=c[n].shadowOffset.height+"px "+c[n].shadowOffset.width+"px "+c[n].shadowRadius+"px rgba("+d+","+c[n].shadowOpacity+")"}}else{var l=r.hex.rgb(o.shadow.shadowColor).join(",");a.boxShadow=o.shadow.shadowOffset.height+"px "+o.shadow.shadowOffset.width+"px "+o.shadow.shadowRadius+"px rgba("+l+","+o.shadow.shadowOpacity+")"}return Object.keys(o).map((function(r){if(function(e){return void 0!==b[e]}(r)||"on"==r)if("number"==typeof o[r]&&void 0===h[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 i in o[r])a["&:"+i]=e(o[r][i]);else a[r]=e(o[r]);else a[r]=o[r]})),a},w={form:a.form((function(e){return m(e)})),button:a.button((function(e){return m(e)})),input:a.input((function(e){return m(e)})),span:a.span((function(e){return m(e)})),img:a.img((function(e){return m(e)})),div:a.div((function(e){return m(e)})),video:a.video((function(e){return m(e)}))},S=function(e){var o,r;function a(){return e.apply(this,arguments)||this}return r=e,(o=a).prototype=Object.create(r.prototype),o.prototype.constructor=o,n(o,r),a.prototype.render=function(){return t.createElement(w[this.props.tag]?w[this.props.tag]:w.div,Object.assign({},this.props,{onClick:void 0!==this.props.onPress?this.props.onPress:this.props.onClick}))},a}(t.PureComponent),x=function(e){return t.createElement(S,Object.assign({},e))},y=x,v=x,k=function(e){o.useEffect((function(){e()}),[])},C={xs:0,sm:340,md:560,lg:1080,xl:1300},R={mobile:["xs","sm"],tablet:["md","lg"],desktop:["lg","xl"]},B=o.createContext({breakpoints:C,devices:R}),O=function(){return o.useContext(B)},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.Button=function(e){return t.createElement(S,Object.assign({},e,{tag:"button"}))},exports.Div=y,exports.Form=function(e){return t.createElement(S,Object.assign({},e,{tag:"form"}))},exports.Image=function(e){return t.createElement(S,Object.assign({},e,{tag:"img"}))},exports.Input=function(e){return t.createElement(S,Object.assign({},e,{tag:"input"}))},exports.ResponsiveContext=B,exports.ResponsiveProvider=function(e){var o=e.breakpoints,r=e.devices;return t.createElement(B.Provider,{value:{breakpoints:void 0===o?C:o,devices:void 0===r?R:r}},e.children)},exports.SafeArea=v,exports.Scroll=function(e){return t.createElement(x,Object.assign({overflow:"auto"},e))},exports.Span=function(e){return t.createElement(S,Object.assign({},e,{tag:"span"}))},exports.Text=function(e){return t.createElement(S,Object.assign({},e))},exports.ThemeContext=s,exports.ThemeProvider=function(e){var o=e.palette,r=void 0===o?d:o,a=e.colors,i=void 0===a?l: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(i&&void 0!==i[e])return i[e]}catch(o){console.log("Color "+e+" not found")}return e},colors:i,palette:r}},e.children)},exports.View=x,exports.createQuery=I,exports.useMount=k,exports.useResponsive=function(){var e=O(),t=e.breakpoints,r=e.devices,a=o.useState("xs"),i=a[0],n=a[1],d=o.useState("landscape"),l=d[0],s=d[1],f=Object.keys(t);return k((function(){var e=f.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)":""),n)})),I("landscape","only screen and (orientation: landscape)",s),I("portrait","only screen and (orientation: portrait)",s)})),{breakpoints:t,devices:r,orientation:l,screen:i,on:function(e){return r[e].includes(i)}}},exports.useResponsiveContext=O,exports.useTheme=f;
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")),i=e(require("@emotion/unitless"));function n(e,o){return(n=Object.setPrototypeOf||function(e,o){return e.__proto__=o,e})(e,o)}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"}},l={white:"#FFFFFF",black:"#000000"},s=o.createContext({getColor:function(e){return e},colors:l,palette:d}),f=function(){return o.useContext(s)},c={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}},g=Object.keys(i),p=["alignContent","alignItems","alignSelf","alignmentBaseline","all","animation","animationDelay","animationDirection","animationDuration","animationFillMode","animationIterationCount","animationName","animationPlayState","animationTimingFunction","appearance","backdropFilter","backfaceVisibility","background","backgroundAttachment","backgroundBlendMode","backgroundClip","backgroundColor","backgroundImage","backgroundOrigin","backgroundPosition","backgroundPositionX","backgroundPositionY","backgroundRepeat","backgroundRepeatX","backgroundRepeatY","backgroundSize","baselineShift","blockSize","border","borderBlockEnd","borderBlockEndColor","borderBlockEndStyle","borderBlockEndWidth","borderBlockStart","borderBlockStartColor","borderBlockStartStyle","borderBlockStartWidth","borderBottom","borderBottomColor","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderImage","borderImageOutset","borderImageRepeat","borderImageSlice","borderImageSource","borderImageWidth","borderInlineEnd","borderInlineEndColor","borderInlineEndStyle","borderInlineEndWidth","borderInlineStart","borderInlineStartColor","borderInlineStartStyle","borderInlineStartWidth","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRadius","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopLeftRadius","borderTopRightRadius","borderTopStyle","borderTopWidth","borderWidth","bottom","boxShadow","boxSizing","breakAfter","breakBefore","breakInside","bufferedRendering","captionSide","caretColor","clear","clip","clipPath","clipRule","color","colorInterpolation","colorInterpolationFilters","colorRendering","columnCount","columnFill","columnGap","columnRule","columnRuleColor","columnRuleStyle","columnRuleWidth","columnSpan","columnWidth","columns","contain","content","counterIncrement","counterReset","cursor","cx","cy","d","direction","display","dominantBaseline","emptyCells","fill","fillOpacity","fillRule","filter","flex","flexBasis","flexDirection","flexFlow","flexGrow","flexShrink","flexWrap","float","floodColor","floodOpacity","font","fontDisplay","fontFamily","fontFeatureSettings","fontKerning","fontSize","fontStretch","fontStyle","fontVariant","fontVariantCaps","fontVariantEastAsian","fontVariantLigatures","fontVariantNumeric","fontVariationSettings","fontWeight","gap","grid","gridArea","gridAutoColumns","gridAutoFlow","gridAutoRows","gridColumn","gridColumnEnd","gridColumnGap","gridColumnStart","gridGap","gridRow","gridRowEnd","gridRowGap","gridRowStart","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","hyphens","imageRendering","inlineSize","isolation","justifyContent","justifyItems","justifySelf","left","letterSpacing","lightingColor","lineBreak","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBlockEnd","marginBlockStart","marginBottom","marginInlineEnd","marginInlineStart","marginLeft","marginRight","marginTop","marker","markerEnd","markerMid","markerStart","mask","maskType","maxBlockSize","maxHeight","maxInlineSize","maxWidth","maxZoom","minBlockSize","minHeight","minInlineSize","minWidth","minZoom","mixBlendMode","objectFit","objectPosition","offset","offsetDistance","offsetPath","offsetRotate","opacity","order","orientation","orphans","outline","outlineColor","outlineOffset","outlineStyle","outlineWidth","overflow","overflowAnchor","overflowWrap","overflowX","overflowY","overscrollBehavior","overscrollBehaviorBlock","overscrollBehaviorInline","overscrollBehaviorX","overscrollBehaviorY","padding","paddingBlockEnd","paddingBlockStart","paddingBottom","paddingInlineEnd","paddingInlineStart","paddingLeft","paddingRight","paddingTop","page","pageBreakAfter","pageBreakBefore","pageBreakInside","paintOrder","perspective","perspectiveOrigin","placeContent","placeItems","placeSelf","pointerEvents","position","quotes","r","resize","right","rowGap","rx","ry","scrollBehavior","scrollMargin","scrollMarginBlock","scrollMarginBlockEnd","scrollMarginBlockStart","scrollMarginBottom","scrollMarginInline","scrollMarginInlineEnd","scrollMarginInlineStart","scrollMarginLeft","scrollMarginRight","scrollMarginTop","scrollPadding","scrollPaddingBlock","scrollPaddingBlockEnd","scrollPaddingBlockStart","scrollPaddingBottom","scrollPaddingInline","scrollPaddingInlineEnd","scrollPaddingInlineStart","scrollPaddingLeft","scrollPaddingRight","scrollPaddingTop","scrollSnapAlign","scrollSnapStop","scrollSnapType","shapeImageThreshold","shapeMargin","shapeOutside","shapeRendering","size","speak","src","stopColor","stopOpacity","stroke","strokeDasharray","strokeDashoffset","strokeLinecap","strokeLinejoin","strokeMiterlimit","strokeOpacity","strokeWidth","tabSize","tableLayout","textAlign","textAlignLast","textAnchor","textCombineUpright","textDecoration","textDecorationColor","textDecorationLine","textDecorationSkipInk","textDecorationStyle","textIndent","textOrientation","textOverflow","textRendering","textShadow","textSizeAdjust","textTransform","textUnderlinePosition","top","touchAction","transform","transformBox","transformOrigin","transformStyle","transition","transitionDelay","transitionDuration","transitionProperty","transitionTimingFunction","unicodeBidi","unicodeRange","userSelect","userZoom","vectorEffect","verticalAlign","visibility","whiteSpace","widows","width","willChange","wordBreak","wordSpacing","wordWrap","writingMode","x","y","zIndex","zoom","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","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","shadowColor","shadowOffset","shadowOpacity","shadowRadius","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","borderTopRightRadius","backfaceVisibility","borderBottomLeftRadius","borderBottomRightRadius","borderColor","borderRadius","borderTopLeftRadius","backgroundColor","borderWidth","opacity","overflow","overflowX","overflowY","resizeMode","tintColor","overlayColor","transform","transformMatrix","rotation","scaleX","scaleY","translateX","translateY","perspective","rotate","rotateX","rotateY","rotateZ","scale","skewX","skewY","testID","decomposedMatrix"],u=["webkit","ms","moz"];g.forEach((function(e){u.forEach((function(o){g.push(function(e,o){return e+o.charAt(0).toUpperCase()+o.substring(1)}(o,e))}))})),g.forEach((function(e){p.includes(e)&&p.push(e)}));var b={};p.map((function(e){b[e]=!0}));var h={};["numberOfLines","fontWeight","timeStamp","flex","flexGrow","flexShrink","order","zIndex","aspectRatio","shadowOpacity","shadowRadius","scale","opacity","min","max","now"].map((function(e){h[e]=!0}));var m=function e(o){var t=f().getColor,a=I(),i=a.mediaQueries,n=a.devices,d={};o.onClick&&null==d.cursor&&(d.cursor="pointer");var l=void 0!==o.height&&void 0!==o.width&&o.height===o.width?o.height:o.size?o.size:null;if(l&&function(e,o){o.height=o.width=e}(l,d),o.paddingHorizontal&&(d.paddingLeft=o.paddingHorizontal,d.paddingRight=o.paddingHorizontal),o.marginHorizontal&&(d.marginLeft=o.marginHorizontal,d.marginRight=o.marginHorizontal),o.paddingVertical&&(d.paddingTop=o.paddingVertical,d.paddingBottom=o.paddingVertical),o.marginVertical&&(d.marginTop=o.marginVertical,d.marginBottom=o.marginVertical),o.shadow)if("number"==typeof o.shadow||"boolean"==typeof o.shadow){var s="number"==typeof o.shadow&&void 0!==c[o.shadow]?o.shadow:2;if(c[s]){var g=r.hex.rgb(c[s].shadowColor).join(",");d.boxShadow=c[s].shadowOffset.height+"px "+c[s].shadowOffset.width+"px "+c[s].shadowRadius+"px rgba("+g+","+c[s].shadowOpacity+")"}}else{var p=r.hex.rgb(o.shadow.shadowColor).join(",");d.boxShadow=o.shadow.shadowOffset.height+"px "+o.shadow.shadowOffset.width+"px "+o.shadow.shadowRadius+"px rgba("+p+","+o.shadow.shadowOpacity+")"}return Object.keys(o).map((function(r){if(function(e){return void 0!==b[e]}(r)||"on"==r||"media"==r)if("object"==typeof o[r])if("on"===r)for(var a in o[r])d["&:"+a]=e(o[r][a]);else if("media"===r){for(var l in o[r])if(void 0!==i[l]&&void 0!==o[r][l])d["@media "+i[l]]=e(o[r][l]);else if(void 0!==n[l])for(var s in n[l])void 0!==i[n[l][s]]&&void 0!==o[r][l]&&(console.log(l,o[r][l]),d["@media "+i[n[l][s]]]=e(o[r][l]))}else d[r]=e(o[r]);else d[r]="number"==typeof o[r]&&void 0===h[r]?o[r]+"px":-1!==r.toLowerCase().indexOf("color")?t(o[r]):o[r]})),d},w={form:a.form((function(e){return m(e)})),button:a.button((function(e){return m(e)})),input:a.input((function(e){return m(e)})),span:a.span((function(e){return m(e)})),img:a.img((function(e){return m(e)})),div:a.div((function(e){return m(e)})),video:a.video((function(e){return m(e)}))},S=function(e){var o,r;function a(){return e.apply(this,arguments)||this}return r=e,(o=a).prototype=Object.create(r.prototype),o.prototype.constructor=o,n(o,r),a.prototype.render=function(){return t.createElement(w[this.props.tag]?w[this.props.tag]:w.div,Object.assign({},this.props,{onClick:void 0!==this.props.onPress?this.props.onPress:this.props.onClick}))},a}(t.PureComponent),v=function(e){return t.createElement(S,Object.assign({},e))},x=v,y=v,k=function(e){o.useEffect((function(){e()}),[])},C={xs:0,sm:340,md:560,lg:1080,xl:1300},R={mobile:["xs","sm"],tablet:["md","lg"],desktop:["lg","xl"]},B=function(e){var o=Object.keys(e).map((function(o){return{breakpoint:o,min:e[o],max:0}})).sort((function(e,o){return e.min-o.min}));o.reduce((function(e,o){return o&&(e.max=o.min),o}));var t={};return o.map((function(e){t[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)":"")})),t},O=o.createContext({breakpoints:C,devices:R,mediaQueries:B(C)}),I=function(){return o.useContext(O)},E=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.Button=function(e){return t.createElement(S,Object.assign({},e,{tag:"button"}))},exports.Div=x,exports.Form=function(e){return t.createElement(S,Object.assign({},e,{tag:"form"}))},exports.Image=function(e){return t.createElement(S,Object.assign({},e,{tag:"img"}))},exports.Input=function(e){return t.createElement(S,Object.assign({},e,{tag:"input"}))},exports.ResponsiveContext=O,exports.ResponsiveProvider=function(e){var o=e.breakpoints,r=void 0===o?C:o,a=e.devices,i=e.children;return t.createElement(O.Provider,{value:{breakpoints:r,devices:void 0===a?R:a,mediaQueries:B(r)}},i)},exports.SafeArea=y,exports.Scroll=function(e){return t.createElement(v,Object.assign({overflow:"auto"},e))},exports.Span=function(e){return t.createElement(S,Object.assign({},e,{tag:"span"}))},exports.Text=function(e){return t.createElement(S,Object.assign({},e))},exports.ThemeContext=s,exports.ThemeProvider=function(e){var o=e.palette,r=void 0===o?d:o,a=e.colors,i=void 0===a?l: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(i&&void 0!==i[e])return i[e]}catch(o){console.log("Color "+e+" not found")}return e},colors:i,palette:r}},e.children)},exports.View=v,exports.createQuery=E,exports.useMount=k,exports.useResponsive=function(){var e=I(),t=e.breakpoints,r=e.devices,a=e.mediaQueries,i=o.useState("xs"),n=i[0],d=i[1],l=o.useState("landscape"),s=l[0],f=l[1];return k((function(){for(var e in a)E(e,a[e],d);E("landscape","only screen and (orientation: landscape)",f),E("portrait","only screen and (orientation: portrait)",f)})),{breakpoints:t,devices:r,orientation:s,screen:n,on:function(e){return r[e].includes(n)},is:function(e){return e==n}}},exports.useResponsiveContext=I,exports.useTheme=f;
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/utils/style.ts","../src/components/Element.tsx","../src/components/View.tsx","../src/hooks/useMount.ts","../src/providers/Responsive.tsx","../src/hooks/useResponsive.ts","../src/components/Form.tsx","../src/components/Image.tsx","../src/components/Text.tsx"],"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 unitlessKeys from '@emotion/unitless';\n\nexport const unitlessStyleProps = Object.keys(unitlessKeys);\n\nexport const validStyleProps = [\n 'alignContent',\n 'alignItems',\n 'alignSelf',\n 'alignmentBaseline',\n 'all',\n 'animation',\n 'animationDelay',\n 'animationDirection',\n 'animationDuration',\n 'animationFillMode',\n 'animationIterationCount',\n 'animationName',\n 'animationPlayState',\n 'animationTimingFunction',\n 'appearance',\n 'backdropFilter',\n 'backfaceVisibility',\n 'background',\n 'backgroundAttachment',\n 'backgroundBlendMode',\n 'backgroundClip',\n 'backgroundColor',\n 'backgroundImage',\n 'backgroundOrigin',\n 'backgroundPosition',\n 'backgroundPositionX',\n 'backgroundPositionY',\n 'backgroundRepeat',\n 'backgroundRepeatX',\n 'backgroundRepeatY',\n 'backgroundSize',\n 'baselineShift',\n 'blockSize',\n 'border',\n 'borderBlockEnd',\n 'borderBlockEndColor',\n 'borderBlockEndStyle',\n 'borderBlockEndWidth',\n 'borderBlockStart',\n 'borderBlockStartColor',\n 'borderBlockStartStyle',\n 'borderBlockStartWidth',\n 'borderBottom',\n 'borderBottomColor',\n 'borderBottomLeftRadius',\n 'borderBottomRightRadius',\n 'borderBottomStyle',\n 'borderBottomWidth',\n 'borderCollapse',\n 'borderColor',\n 'borderImage',\n 'borderImageOutset',\n 'borderImageRepeat',\n 'borderImageSlice',\n 'borderImageSource',\n 'borderImageWidth',\n 'borderInlineEnd',\n 'borderInlineEndColor',\n 'borderInlineEndStyle',\n 'borderInlineEndWidth',\n 'borderInlineStart',\n 'borderInlineStartColor',\n 'borderInlineStartStyle',\n 'borderInlineStartWidth',\n 'borderLeft',\n 'borderLeftColor',\n 'borderLeftStyle',\n 'borderLeftWidth',\n 'borderRadius',\n 'borderRight',\n 'borderRightColor',\n 'borderRightStyle',\n 'borderRightWidth',\n 'borderSpacing',\n 'borderStyle',\n 'borderTop',\n 'borderTopColor',\n 'borderTopLeftRadius',\n 'borderTopRightRadius',\n 'borderTopStyle',\n 'borderTopWidth',\n 'borderWidth',\n 'bottom',\n 'boxShadow',\n 'boxSizing',\n 'breakAfter',\n 'breakBefore',\n 'breakInside',\n 'bufferedRendering',\n 'captionSide',\n 'caretColor',\n 'clear',\n 'clip',\n 'clipPath',\n 'clipRule',\n 'color',\n 'colorInterpolation',\n 'colorInterpolationFilters',\n 'colorRendering',\n 'columnCount',\n 'columnFill',\n 'columnGap',\n 'columnRule',\n 'columnRuleColor',\n 'columnRuleStyle',\n 'columnRuleWidth',\n 'columnSpan',\n 'columnWidth',\n 'columns',\n 'contain',\n 'content',\n 'counterIncrement',\n 'counterReset',\n 'cursor',\n 'cx',\n 'cy',\n 'd',\n 'direction',\n 'display',\n 'dominantBaseline',\n 'emptyCells',\n 'fill',\n 'fillOpacity',\n 'fillRule',\n 'filter',\n 'flex',\n 'flexBasis',\n 'flexDirection',\n 'flexFlow',\n 'flexGrow',\n 'flexShrink',\n 'flexWrap',\n 'float',\n 'floodColor',\n 'floodOpacity',\n 'font',\n 'fontDisplay',\n 'fontFamily',\n 'fontFeatureSettings',\n 'fontKerning',\n 'fontSize',\n 'fontStretch',\n 'fontStyle',\n 'fontVariant',\n 'fontVariantCaps',\n 'fontVariantEastAsian',\n 'fontVariantLigatures',\n 'fontVariantNumeric',\n 'fontVariationSettings',\n 'fontWeight',\n 'gap',\n 'grid',\n 'gridArea',\n 'gridAutoColumns',\n 'gridAutoFlow',\n 'gridAutoRows',\n 'gridColumn',\n 'gridColumnEnd',\n 'gridColumnGap',\n 'gridColumnStart',\n 'gridGap',\n 'gridRow',\n 'gridRowEnd',\n 'gridRowGap',\n 'gridRowStart',\n 'gridTemplate',\n 'gridTemplateAreas',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'height',\n 'hyphens',\n 'imageRendering',\n 'inlineSize',\n 'isolation',\n 'justifyContent',\n 'justifyItems',\n 'justifySelf',\n 'left',\n 'letterSpacing',\n 'lightingColor',\n 'lineBreak',\n 'lineHeight',\n 'listStyle',\n 'listStyleImage',\n 'listStylePosition',\n 'listStyleType',\n 'margin',\n 'marginBlockEnd',\n 'marginBlockStart',\n 'marginBottom',\n 'marginInlineEnd',\n 'marginInlineStart',\n 'marginLeft',\n 'marginRight',\n 'marginTop',\n 'marker',\n 'markerEnd',\n 'markerMid',\n 'markerStart',\n 'mask',\n 'maskType',\n 'maxBlockSize',\n 'maxHeight',\n 'maxInlineSize',\n 'maxWidth',\n 'maxZoom',\n 'minBlockSize',\n 'minHeight',\n 'minInlineSize',\n 'minWidth',\n 'minZoom',\n 'mixBlendMode',\n 'objectFit',\n 'objectPosition',\n 'offset',\n 'offsetDistance',\n 'offsetPath',\n 'offsetRotate',\n 'opacity',\n 'order',\n 'orientation',\n 'orphans',\n 'outline',\n 'outlineColor',\n 'outlineOffset',\n 'outlineStyle',\n 'outlineWidth',\n 'overflow',\n 'overflowAnchor',\n 'overflowWrap',\n 'overflowX',\n 'overflowY',\n 'overscrollBehavior',\n 'overscrollBehaviorBlock',\n 'overscrollBehaviorInline',\n 'overscrollBehaviorX',\n 'overscrollBehaviorY',\n 'padding',\n 'paddingBlockEnd',\n 'paddingBlockStart',\n 'paddingBottom',\n 'paddingInlineEnd',\n 'paddingInlineStart',\n 'paddingLeft',\n 'paddingRight',\n 'paddingTop',\n 'page',\n 'pageBreakAfter',\n 'pageBreakBefore',\n 'pageBreakInside',\n 'paintOrder',\n 'perspective',\n 'perspectiveOrigin',\n 'placeContent',\n 'placeItems',\n 'placeSelf',\n 'pointerEvents',\n 'position',\n 'quotes',\n 'r',\n 'resize',\n 'right',\n 'rowGap',\n 'rx',\n 'ry',\n 'scrollBehavior',\n 'scrollMargin',\n 'scrollMarginBlock',\n 'scrollMarginBlockEnd',\n 'scrollMarginBlockStart',\n 'scrollMarginBottom',\n 'scrollMarginInline',\n 'scrollMarginInlineEnd',\n 'scrollMarginInlineStart',\n 'scrollMarginLeft',\n 'scrollMarginRight',\n 'scrollMarginTop',\n 'scrollPadding',\n 'scrollPaddingBlock',\n 'scrollPaddingBlockEnd',\n 'scrollPaddingBlockStart',\n 'scrollPaddingBottom',\n 'scrollPaddingInline',\n 'scrollPaddingInlineEnd',\n 'scrollPaddingInlineStart',\n 'scrollPaddingLeft',\n 'scrollPaddingRight',\n 'scrollPaddingTop',\n 'scrollSnapAlign',\n 'scrollSnapStop',\n 'scrollSnapType',\n 'shapeImageThreshold',\n 'shapeMargin',\n 'shapeOutside',\n 'shapeRendering',\n 'size',\n 'speak',\n 'src',\n 'stopColor',\n 'stopOpacity',\n 'stroke',\n 'strokeDasharray',\n 'strokeDashoffset',\n 'strokeLinecap',\n 'strokeLinejoin',\n 'strokeMiterlimit',\n 'strokeOpacity',\n 'strokeWidth',\n 'tabSize',\n 'tableLayout',\n 'textAlign',\n 'textAlignLast',\n 'textAnchor',\n 'textCombineUpright',\n 'textDecoration',\n 'textDecorationColor',\n 'textDecorationLine',\n 'textDecorationSkipInk',\n 'textDecorationStyle',\n 'textIndent',\n 'textOrientation',\n 'textOverflow',\n 'textRendering',\n 'textShadow',\n 'textSizeAdjust',\n 'textTransform',\n 'textUnderlinePosition',\n 'top',\n 'touchAction',\n 'transform',\n 'transformBox',\n 'transformOrigin',\n 'transformStyle',\n 'transition',\n 'transitionDelay',\n 'transitionDuration',\n 'transitionProperty',\n 'transitionTimingFunction',\n 'unicodeBidi',\n 'unicodeRange',\n 'userSelect',\n 'userZoom',\n 'vectorEffect',\n 'verticalAlign',\n 'visibility',\n 'whiteSpace',\n 'widows',\n 'width',\n 'willChange',\n 'wordBreak',\n 'wordSpacing',\n 'wordWrap',\n 'writingMode',\n 'x',\n 'y',\n 'zIndex',\n 'zoom',\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 '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 'shadowColor',\n 'shadowOffset',\n 'shadowOpacity',\n 'shadowRadius',\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 '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 '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\n/**\n * @param {string} prefix vendor-specific prefix, eg: Webkit\n * @param {string} key style name, eg: transitionDuration\n * @return {string} style name prefixed with `prefix`, properly camelCased, eg:\n * WebkitTransitionDuration\n */\nfunction prefixKey(prefix: string, key: string) {\n return prefix + key.charAt(0).toUpperCase() + key.substring(1);\n}\n\n/**\n * Support style names that may come passed in prefixed by adding permutations\n * of vendor prefixes.\n */\nconst prefixes = ['webkit', 'ms', 'moz'];\n\n/**\n * Add vendor prefixing to unitless style keys.\n */\nunitlessStyleProps.forEach((prop) => {\n prefixes.forEach((prefix) => {\n unitlessStyleProps.push(prefixKey(prefix, prop));\n });\n});\n\n/**\n * Add all unitless style keys to valid style keys.\n */\nunitlessStyleProps.forEach((prop) => {\n if (validStyleProps.includes(prop)) {\n validStyleProps.push(prop);\n }\n});\n\nexport const StyleProps: any = {};\nvalidStyleProps.map((property) => {\n StyleProps[property] = true;\n});\n\nexport const isStyleProp = (property: string): boolean => {\n return StyleProps[property] !== undefined;\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';\nimport { isStyleProp } from '../utils/style';\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 && newProps.cursor == undefined) {\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 (isStyleProp(property) || 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\nconst elements: any = {\n form: styled.form((props: any) => {\n return applyStyle(props);\n }),\n button: styled.button((props: any) => {\n return applyStyle(props);\n }),\n input: styled.input((props: any) => {\n return applyStyle(props);\n }),\n span: styled.span((props: any) => {\n return applyStyle(props);\n }),\n img: styled.img((props: any) => {\n return applyStyle(props);\n }),\n div: styled.div((props: any) => {\n return applyStyle(props);\n }),\n video: styled.video((props: any) => {\n return applyStyle(props);\n }),\n};\n\nexport class ViewElement extends React.PureComponent<any> {\n render() {\n const Element = elements[this.props.tag]\n ? elements[this.props.tag]\n : elements.div;\n\n return (\n <Element\n {...this.props}\n onClick={\n this.props.onPress !== undefined\n ? this.props.onPress\n : this.props.onClick\n }\n />\n );\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, 'children' | 'style' | 'pointerEvents'>,\n CSSProperties {\n children?: any;\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 tag?: string;\n}\n\nexport const View = (props: ViewProps) => <ViewElement {...props} />;\n\nexport const Div = View;\n\nexport const SafeArea = View;\n\nexport const Scroll = (props: any) => <View overflow={'auto'} {...props} />;\n\nexport const Span = (props: ViewProps) => <ViewElement {...props} tag=\"span\" />;\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","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 FormProps\n extends Omit<ViewStyleProps, 'children' | 'style' | 'pointerEvents'>,\n Omit<\n HTMLFormElement,\n | 'children'\n | 'target'\n | 'translate'\n | 'height'\n | 'width'\n | 'border'\n | 'draggable'\n >,\n CSSProperties {\n children?: any;\n size?: number;\n target?: any;\n on?: Record<string, CSSProperties>;\n paddingHorizontal?: number | string;\n marginHorizontal?: number | string;\n paddingVertical?: number | string;\n marginVertical?: number | string;\n shadow?: boolean | number | Shadow;\n}\n\nexport interface ButtonProps\n extends Omit<ViewStyleProps, 'children' | 'style' | 'pointerEvents'>,\n Omit<\n HTMLButtonElement,\n | 'children'\n | 'translate'\n | 'type'\n | 'height'\n | 'width'\n | 'border'\n | 'draggable'\n >,\n CSSProperties {\n children?: any;\n size?: number;\n on?: Record<string, CSSProperties>;\n paddingHorizontal?: number | string;\n marginHorizontal?: number | string;\n paddingVertical?: number | string;\n marginVertical?: number | string;\n shadow?: boolean | number | Shadow;\n onClick?: any;\n type?: string;\n}\n\nexport interface InputProps\n extends Omit<ViewStyleProps, 'style' | 'pointerEvents' | 'onPress' | 'dir'>,\n Omit<\n HTMLInputElement,\n | 'children'\n | 'type'\n | 'translate'\n | 'height'\n | 'width'\n | 'border'\n | 'draggable'\n >,\n Omit<CSSProperties, 'style' | 'dir'> {\n on?: Record<string, CSSProperties>;\n paddingHorizontal?: number | string;\n marginHorizontal?: number | string;\n paddingVertical?: number | string;\n marginVertical?: number | string;\n shadow?: boolean | number | Shadow;\n type?: string;\n tag?: string;\n}\n\nexport const Form = (props: FormProps) => <ViewElement {...props} tag=\"form\" />;\n\nexport const Input = (props: InputProps) => (\n <ViewElement {...props} tag=\"input\" />\n);\n\nexport const Button = (props: ButtonProps) => (\n <ViewElement {...props} tag=\"button\" />\n);\n","import React from 'react';\nimport { CSSProperties } from 'styled-components';\nimport { ViewElement } from './Element';\nimport { ImageStyleProps } from '../types/style';\nimport { Shadow } from '../utils/shadow';\n\nexport interface ImageProps\n extends Omit<ImageStyleProps, 'children' | 'style' | 'pointerEvents'>,\n CSSProperties {\n children?: any;\n size?: number;\n on?: Record<string, CSSProperties>;\n onPress?: (...args: any) => void;\n src: string | any;\n shadow?: boolean | number | Shadow;\n tag?: string;\n}\n\nexport const Image = (props: ImageProps) => (\n <ViewElement {...props} tag=\"img\" />\n);\n","import React from 'react';\nimport { CSSProperties } from 'styled-components';\nimport { ViewElement } from './Element';\nimport { TextStyleProps } from '../types/style';\nimport { Shadow } from '../utils/shadow';\n\nexport interface TextProps\n extends Omit<TextStyleProps, 'children' | 'style' | 'pointerEvents'>,\n CSSProperties {\n children?: any;\n on?: Record<string, CSSProperties>;\n onPress?: (...args: any) => void;\n paddingHorizontal?: number | string;\n marginHorizontal?: number | string;\n paddingVertical?: number | string;\n marginVertical?: number | string;\n toUpperCase?: boolean;\n shadow?: boolean | number | Shadow;\n tag?: string;\n}\n\nexport const Text = (props: TextProps) => {\n return <ViewElement {...props} />;\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","unitlessStyleProps","Object","keys","unitlessKeys","validStyleProps","prefixes","forEach","prop","prefix","push","key","charAt","toUpperCase","substring","prefixKey","includes","StyleProps","map","property","NumberPropsStyle","applyStyle","props","newProps","onClick","undefined","cursor","size","newSize","setSize","paddingHorizontal","paddingLeft","paddingRight","marginHorizontal","marginLeft","marginRight","paddingVertical","paddingTop","paddingBottom","marginVertical","marginTop","marginBottom","shadow","shawdowValue","Color","hex","rgb","join","isStyleProp","toLowerCase","indexOf","event","elements","form","styled","button","input","span","img","div","video","ViewElement","render","React","this","tag","onPress","PureComponent","View","Div","SafeArea","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","children","overflow","split","parseInt","e","console","log","useState","screen","setScreen","orientation","setOrientation","breakpointValue","breakpoint","min","max","sort","a","b","reduce","sizeScreen","on","device"],"mappings":"sWAkBO,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,OCjGLC,EAAqBC,OAAOC,KAAKC,GAEjCC,EAAkB,CAC7B,eACA,aACA,YACA,oBACA,MACA,YACA,iBACA,qBACA,oBACA,oBACA,0BACA,gBACA,qBACA,0BACA,aACA,iBACA,qBACA,aACA,uBACA,sBACA,iBACA,kBACA,kBACA,mBACA,qBACA,sBACA,sBACA,mBACA,oBACA,oBACA,iBACA,gBACA,YACA,SACA,iBACA,sBACA,sBACA,sBACA,mBACA,wBACA,wBACA,wBACA,eACA,oBACA,yBACA,0BACA,oBACA,oBACA,iBACA,cACA,cACA,oBACA,oBACA,mBACA,oBACA,mBACA,kBACA,uBACA,uBACA,uBACA,oBACA,yBACA,yBACA,yBACA,aACA,kBACA,kBACA,kBACA,eACA,cACA,mBACA,mBACA,mBACA,gBACA,cACA,YACA,iBACA,sBACA,uBACA,iBACA,iBACA,cACA,SACA,YACA,YACA,aACA,cACA,cACA,oBACA,cACA,aACA,QACA,OACA,WACA,WACA,QACA,qBACA,4BACA,iBACA,cACA,aACA,YACA,aACA,kBACA,kBACA,kBACA,aACA,cACA,UACA,UACA,UACA,mBACA,eACA,SACA,KACA,KACA,IACA,YACA,UACA,mBACA,aACA,OACA,cACA,WACA,SACA,OACA,YACA,gBACA,WACA,WACA,aACA,WACA,QACA,aACA,eACA,OACA,cACA,aACA,sBACA,cACA,WACA,cACA,YACA,cACA,kBACA,uBACA,uBACA,qBACA,wBACA,aACA,MACA,OACA,WACA,kBACA,eACA,eACA,aACA,gBACA,gBACA,kBACA,UACA,UACA,aACA,aACA,eACA,eACA,oBACA,sBACA,mBACA,SACA,UACA,iBACA,aACA,YACA,iBACA,eACA,cACA,OACA,gBACA,gBACA,YACA,aACA,YACA,iBACA,oBACA,gBACA,SACA,iBACA,mBACA,eACA,kBACA,oBACA,aACA,cACA,YACA,SACA,YACA,YACA,cACA,OACA,WACA,eACA,YACA,gBACA,WACA,UACA,eACA,YACA,gBACA,WACA,UACA,eACA,YACA,iBACA,SACA,iBACA,aACA,eACA,UACA,QACA,cACA,UACA,UACA,eACA,gBACA,eACA,eACA,WACA,iBACA,eACA,YACA,YACA,qBACA,0BACA,2BACA,sBACA,sBACA,UACA,kBACA,oBACA,gBACA,mBACA,qBACA,cACA,eACA,aACA,OACA,iBACA,kBACA,kBACA,aACA,cACA,oBACA,eACA,aACA,YACA,gBACA,WACA,SACA,IACA,SACA,QACA,SACA,KACA,KACA,iBACA,eACA,oBACA,uBACA,yBACA,qBACA,qBACA,wBACA,0BACA,mBACA,oBACA,kBACA,gBACA,qBACA,wBACA,0BACA,sBACA,sBACA,yBACA,2BACA,oBACA,qBACA,mBACA,kBACA,iBACA,iBACA,sBACA,cACA,eACA,iBACA,OACA,QACA,MACA,YACA,cACA,SACA,kBACA,mBACA,gBACA,iBACA,mBACA,gBACA,cACA,UACA,cACA,YACA,gBACA,aACA,qBACA,iBACA,sBACA,qBACA,wBACA,sBACA,aACA,kBACA,eACA,gBACA,aACA,iBACA,gBACA,wBACA,MACA,cACA,YACA,eACA,kBACA,iBACA,aACA,kBACA,qBACA,qBACA,2BACA,cACA,eACA,aACA,WACA,eACA,gBACA,aACA,aACA,SACA,QACA,aACA,YACA,cACA,WACA,cACA,IACA,IACA,SACA,OACA,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,YACA,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,cACA,eACA,gBACA,eACA,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,SACA,uBACA,qBACA,yBACA,0BACA,cACA,eACA,sBACA,kBACA,cACA,UACA,WACA,YACA,YACA,aACA,YACA,eACA,YACA,kBACA,WACA,SACA,SACA,aACA,aACA,cACA,SACA,UACA,UACA,UACA,QACA,QACA,QACA,SACA,oBAiBIC,EAAW,CAAC,SAAU,KAAM,OAKlCL,EAAmBM,SAAQ,SAACC,GAC1BF,EAASC,SAAQ,SAACE,GAChBR,EAAmBS,KAfvB,SAAmBD,EAAgBE,UAC1BF,EAASE,EAAIC,OAAO,GAAGC,cAAgBF,EAAIG,UAAU,GAclCC,CAAUN,EAAQD,UAO9CP,EAAmBM,SAAQ,SAACC,GACtBH,EAAgBW,SAASR,IAC3BH,EAAgBK,KAAKF,MAIlB,IAAMS,EAAkB,GAC/BZ,EAAgBa,KAAI,SAACC,GACnBF,EAAWE,IAAY,KAGlB,IC3jBDC,EAAwB,GACV,CAClB,gBACA,aACA,YACA,OACA,WACA,aACA,QACA,SACA,cACA,gBACA,eACA,QACA,UACA,MACA,MACA,OAGUF,KAAI,SAACC,GACfC,EAAiBD,IAAY,KAG/B,IAIaE,EAAa,SAAbA,EAAcC,OACjBlC,EAAaI,IAAbJ,SAEFmC,EAAgB,GAElBD,EAAME,SAA8BC,MAAnBF,EAASG,SAC5BH,EAASG,OAAS,eAGdC,OACaF,IAAjBH,EAAMxB,aACU2B,IAAhBH,EAAMzB,OACNyB,EAAMxB,SAAWwB,EAAMzB,MACnByB,EAAMxB,OACNwB,EAAMK,KACNL,EAAMK,KACN,QAEFA,GAtBiB,SAACC,EAA0BL,GAChDA,EAASzB,OAASyB,EAAS1B,MAAQ+B,EAsBjCC,CAAQF,EAAMJ,GAGZD,EAAMQ,oBACRP,EAASQ,YAAcT,EAAMQ,kBAC7BP,EAASS,aAAeV,EAAMQ,mBAG5BR,EAAMW,mBACRV,EAASW,WAAaZ,EAAMW,iBAC5BV,EAASY,YAAcb,EAAMW,kBAG3BX,EAAMc,kBACRb,EAASc,WAAaf,EAAMc,gBAC5Bb,EAASe,cAAgBhB,EAAMc,iBAG7Bd,EAAMiB,iBACRhB,EAASiB,UAAYlB,EAAMiB,eAC3BhB,EAASkB,aAAenB,EAAMiB,gBAG5BjB,EAAMoB,UACoB,iBAAjBpB,EAAMoB,QAA+C,kBAAjBpB,EAAMoB,OAAsB,KACnEC,EACoB,iBAAjBrB,EAAMoB,aAAiDjB,IAA1B/B,EAAQ4B,EAAMoB,QAC9CpB,EAAMoB,OACN,KAEFhD,EAAQiD,GAAe,KACnBhD,EAAciD,EAAMC,IACvBC,IAAIpD,EAAQiD,GAAchD,aAC1BoD,KAAK,KAERxB,EAAQ,UAED7B,EAAQiD,GAAc/C,aAAaE,aAAYJ,EAAQiD,GAAc/C,aAAaC,YAAWH,EAAQiD,GAAc3C,wBAAuBL,MAAeD,EAAQiD,GAAc5C,uBAEnL,KACCJ,EAAciD,EAAMC,IAAIC,IAAIxB,EAAMoB,OAAO/C,aAAaoD,KAAK,KAEjExB,EAAQ,UAEDD,EAAMoB,OAAO9C,aAAaE,aAAYwB,EAAMoB,OAAO9C,aAAaC,YAAWyB,EAAMoB,OAAO1C,wBAAuBL,MAAe2B,EAAMoB,OAAO3C,yBAItJG,OAAOC,KAAKmB,GAAOJ,KAAI,SAACC,MD4dC,SAACA,eACMM,IAAzBR,EAAWE,GC5dZ6B,CAAY7B,IAAyB,MAAZA,KAEE,iBAApBG,EAAMH,SACkBM,IAA/BL,EAAiBD,GAEjBI,EAASJ,GAAYG,EAAMH,GAAY,UAClC,IAAiD,IAA7CA,EAAS8B,cAAcC,QAAQ,SACxC3B,EAASJ,GAAY/B,EAASkC,EAAMH,SAC/B,GAA+B,iBAApBG,EAAMH,MACL,OAAbA,MACG,IAAMgC,KAAS7B,EAAMH,GACxBI,EAAS,KAAO4B,GAAS9B,EAAWC,EAAMH,GAAUgC,SAGtD5B,EAASJ,GAAYE,EAAWC,EAAMH,SAGxCI,EAASJ,GAAYG,EAAMH,MAK1BI,GAsDH6B,EAAgB,CACpBC,KAAMC,EAAOD,MAAK,SAAC/B,UACVD,EAAWC,MAEpBiC,OAAQD,EAAOC,QAAO,SAACjC,UACdD,EAAWC,MAEpBkC,MAAOF,EAAOE,OAAM,SAAClC,UACZD,EAAWC,MAEpBmC,KAAMH,EAAOG,MAAK,SAACnC,UACVD,EAAWC,MAEpBoC,IAAKJ,EAAOI,KAAI,SAACpC,UACRD,EAAWC,MAEpBqC,IAAKL,EAAOK,KAAI,SAACrC,UACRD,EAAWC,MAEpBsC,MAAON,EAAOM,OAAM,SAACtC,UACZD,EAAWC,OAITuC,2KACXC,OAAA,kBAMIC,gBALcX,EAASY,KAAK1C,MAAM2C,KAChCb,EAASY,KAAK1C,MAAM2C,KACpBb,EAASO,qBAILK,KAAK1C,OACTE,aACyBC,IAAvBuC,KAAK1C,MAAM4C,QACPF,KAAK1C,MAAM4C,QACXF,KAAK1C,MAAME,eAZQuC,EAAMI,eCtL1BC,EAAO,SAAC9C,UAAqByC,gBAACF,mBAAgBvC,KAE9C+C,EAAMD,EAENE,EAAWF,ECxBXG,EAAW,SAACC,GACvBC,aAAU,WACRD,MACC,KCICE,EAA6C,CACjDC,GAAI,EACJC,GAAI,IACJC,GAAI,IACJC,GAAI,KACJC,GAAI,MAIAC,EAAoC,CACxCC,OAAQ,CAAC,KAAM,MACfC,OAAQ,CAAC,KAAM,MACfC,QAAS,CAAC,KAAM,OAeLC,EACXjG,gBANwC,CACxCkG,YAAaX,EACbY,QAASN,IAMEO,EAAuB,kBAAM9F,aAAW2F,IC7BxCI,EAAc,SAACC,EAAmBC,EAAeC,OACtDC,EAAMC,OAAOC,WAAWJ,GACxBK,EAAW,WACTH,EAAII,SACRL,EAAIF,WAIRG,EAAIK,YAAYF,GACVH,EAAII,SACRL,EAAIF,GAGC,WACLG,EAAIM,eAAeH,oBC6DD,SAACzE,UACrByC,gBAACF,mBAAgBvC,GAAO2C,IAAI,wCAPV,SAAC3C,UAAqByC,gBAACF,mBAAgBvC,GAAO2C,IAAI,yBC5DjD,SAAC3C,UACpByC,gBAACF,mBAAgBvC,GAAO2C,IAAI,wBD6DT,SAAC3C,UACpByC,gBAACF,mBAAgBvC,GAAO2C,IAAI,mEFzCI,oBAChCoB,gBACAC,eASEvB,gBAACqB,EAAkBe,UACjBC,MAAO,CACLf,uBAZQX,IAaRY,mBAZIN,QACVqB,6CFhBoB,SAAC/E,UAAeyC,gBAACK,iBAAKkC,SAAU,QAAYhF,kBAE9C,SAACA,UAAqByC,gBAACF,mBAAgBvC,GAAO2C,IAAI,wBMRlD,SAAC3C,UACZyC,gBAACF,mBAAgBvC,kDVOG,oBAC3BjE,QAAAA,aAAUkC,QACVD,OAAAA,aAASP,WA+BPgF,gBAAC7E,EAAaiH,UACZC,MAAO,CACLhH,SA1BW,SAACC,MAEH,gBAATA,EAAwB,OAAOA,UAEN,IAAvBA,EAAK6D,QAAQ,KAAa,KACtB/C,EAAOd,EAAKkH,MAAM,QAEpBlJ,QAAyCoE,IAA9BpE,EAAQ8C,EAAK,IAAIA,EAAK,WAC5B9C,EAAQ8C,EAAK,IAAIA,EAAK,YAEasB,IAAxCpE,EAAQ8C,EAAK,IAAIqG,SAASrG,EAAK,YAC1B9C,EAAQ8C,EAAK,IAAIqG,SAASrG,EAAK,UAEnC,GAAIb,QAA2BmC,IAAjBnC,EAAOD,UACnBC,EAAOD,GAEhB,MAAOoH,GACPC,QAAQC,IAAI,SAAWtH,EAAO,qBAGzBA,GAOHC,OAAAA,EACAjC,QAAAA,MAlCNgJ,yFOL2B,iBACMd,IAAzBF,IAAAA,YAAaC,IAAAA,UACOsB,WAAS,MAA9BC,OAAQC,SACuBF,WACpC,aADKG,OAAaC,OAId7G,EAAOD,OAAOC,KAAKkF,UAEzBd,GAAS,eACD0C,EAAkB9G,EACrBe,KAAI,SAACgG,SAC2B,CAC7BA,WAAYA,EACZC,IAAK9B,EAAY6B,GACjBE,IAAK,MAKRC,MAAK,SAACC,EAAGC,UAAMD,EAAEH,IAAMI,EAAEJ,OAE5BF,EAAgBO,QAAO,SAACF,EAAGC,UACrBA,IAAGD,EAAEF,IAAMG,EAAEJ,KAEVI,KAGTN,EAAgB/F,KAAI,SAACuG,GACnBjC,EACEiC,EAAWP,2BAETO,EAAWN,KAAOM,EAAWN,KAAO,EAChC,kBAAoBM,EAAWN,IAAM,MACrC,SAEJM,EAAWL,KAAOK,EAAWL,KAAO,EAChC,kBAAoBK,EAAWL,IAAM,MACrC,IAENN,MAWJtB,EACE,YACA,2CACAwB,GAEFxB,EACE,WACA,0CACAwB,MAQG,CACL3B,YAAAA,EACAC,QAAAA,EACAyB,YAAAA,EACAF,OAAAA,EACAa,GATS,SAACC,UACHrC,EAAQqC,GAAQ3G,SAAS6F"}
1
+ {"version":3,"file":"app-studio.cjs.production.min.js","sources":["../src/utils/colors.ts","../src/providers/Theme.tsx","../src/utils/shadow.ts","../src/utils/style.ts","../src/components/Element.tsx","../src/components/View.tsx","../src/hooks/useMount.ts","../src/providers/Responsive.tsx","../src/hooks/useResponsive.ts","../src/components/Form.tsx","../src/components/Image.tsx","../src/components/Text.tsx"],"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 unitlessKeys from '@emotion/unitless';\n\nexport const unitlessStyleProps = Object.keys(unitlessKeys);\n\nexport const validStyleProps = [\n 'alignContent',\n 'alignItems',\n 'alignSelf',\n 'alignmentBaseline',\n 'all',\n 'animation',\n 'animationDelay',\n 'animationDirection',\n 'animationDuration',\n 'animationFillMode',\n 'animationIterationCount',\n 'animationName',\n 'animationPlayState',\n 'animationTimingFunction',\n 'appearance',\n 'backdropFilter',\n 'backfaceVisibility',\n 'background',\n 'backgroundAttachment',\n 'backgroundBlendMode',\n 'backgroundClip',\n 'backgroundColor',\n 'backgroundImage',\n 'backgroundOrigin',\n 'backgroundPosition',\n 'backgroundPositionX',\n 'backgroundPositionY',\n 'backgroundRepeat',\n 'backgroundRepeatX',\n 'backgroundRepeatY',\n 'backgroundSize',\n 'baselineShift',\n 'blockSize',\n 'border',\n 'borderBlockEnd',\n 'borderBlockEndColor',\n 'borderBlockEndStyle',\n 'borderBlockEndWidth',\n 'borderBlockStart',\n 'borderBlockStartColor',\n 'borderBlockStartStyle',\n 'borderBlockStartWidth',\n 'borderBottom',\n 'borderBottomColor',\n 'borderBottomLeftRadius',\n 'borderBottomRightRadius',\n 'borderBottomStyle',\n 'borderBottomWidth',\n 'borderCollapse',\n 'borderColor',\n 'borderImage',\n 'borderImageOutset',\n 'borderImageRepeat',\n 'borderImageSlice',\n 'borderImageSource',\n 'borderImageWidth',\n 'borderInlineEnd',\n 'borderInlineEndColor',\n 'borderInlineEndStyle',\n 'borderInlineEndWidth',\n 'borderInlineStart',\n 'borderInlineStartColor',\n 'borderInlineStartStyle',\n 'borderInlineStartWidth',\n 'borderLeft',\n 'borderLeftColor',\n 'borderLeftStyle',\n 'borderLeftWidth',\n 'borderRadius',\n 'borderRight',\n 'borderRightColor',\n 'borderRightStyle',\n 'borderRightWidth',\n 'borderSpacing',\n 'borderStyle',\n 'borderTop',\n 'borderTopColor',\n 'borderTopLeftRadius',\n 'borderTopRightRadius',\n 'borderTopStyle',\n 'borderTopWidth',\n 'borderWidth',\n 'bottom',\n 'boxShadow',\n 'boxSizing',\n 'breakAfter',\n 'breakBefore',\n 'breakInside',\n 'bufferedRendering',\n 'captionSide',\n 'caretColor',\n 'clear',\n 'clip',\n 'clipPath',\n 'clipRule',\n 'color',\n 'colorInterpolation',\n 'colorInterpolationFilters',\n 'colorRendering',\n 'columnCount',\n 'columnFill',\n 'columnGap',\n 'columnRule',\n 'columnRuleColor',\n 'columnRuleStyle',\n 'columnRuleWidth',\n 'columnSpan',\n 'columnWidth',\n 'columns',\n 'contain',\n 'content',\n 'counterIncrement',\n 'counterReset',\n 'cursor',\n 'cx',\n 'cy',\n 'd',\n 'direction',\n 'display',\n 'dominantBaseline',\n 'emptyCells',\n 'fill',\n 'fillOpacity',\n 'fillRule',\n 'filter',\n 'flex',\n 'flexBasis',\n 'flexDirection',\n 'flexFlow',\n 'flexGrow',\n 'flexShrink',\n 'flexWrap',\n 'float',\n 'floodColor',\n 'floodOpacity',\n 'font',\n 'fontDisplay',\n 'fontFamily',\n 'fontFeatureSettings',\n 'fontKerning',\n 'fontSize',\n 'fontStretch',\n 'fontStyle',\n 'fontVariant',\n 'fontVariantCaps',\n 'fontVariantEastAsian',\n 'fontVariantLigatures',\n 'fontVariantNumeric',\n 'fontVariationSettings',\n 'fontWeight',\n 'gap',\n 'grid',\n 'gridArea',\n 'gridAutoColumns',\n 'gridAutoFlow',\n 'gridAutoRows',\n 'gridColumn',\n 'gridColumnEnd',\n 'gridColumnGap',\n 'gridColumnStart',\n 'gridGap',\n 'gridRow',\n 'gridRowEnd',\n 'gridRowGap',\n 'gridRowStart',\n 'gridTemplate',\n 'gridTemplateAreas',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'height',\n 'hyphens',\n 'imageRendering',\n 'inlineSize',\n 'isolation',\n 'justifyContent',\n 'justifyItems',\n 'justifySelf',\n 'left',\n 'letterSpacing',\n 'lightingColor',\n 'lineBreak',\n 'lineHeight',\n 'listStyle',\n 'listStyleImage',\n 'listStylePosition',\n 'listStyleType',\n 'margin',\n 'marginBlockEnd',\n 'marginBlockStart',\n 'marginBottom',\n 'marginInlineEnd',\n 'marginInlineStart',\n 'marginLeft',\n 'marginRight',\n 'marginTop',\n 'marker',\n 'markerEnd',\n 'markerMid',\n 'markerStart',\n 'mask',\n 'maskType',\n 'maxBlockSize',\n 'maxHeight',\n 'maxInlineSize',\n 'maxWidth',\n 'maxZoom',\n 'minBlockSize',\n 'minHeight',\n 'minInlineSize',\n 'minWidth',\n 'minZoom',\n 'mixBlendMode',\n 'objectFit',\n 'objectPosition',\n 'offset',\n 'offsetDistance',\n 'offsetPath',\n 'offsetRotate',\n 'opacity',\n 'order',\n 'orientation',\n 'orphans',\n 'outline',\n 'outlineColor',\n 'outlineOffset',\n 'outlineStyle',\n 'outlineWidth',\n 'overflow',\n 'overflowAnchor',\n 'overflowWrap',\n 'overflowX',\n 'overflowY',\n 'overscrollBehavior',\n 'overscrollBehaviorBlock',\n 'overscrollBehaviorInline',\n 'overscrollBehaviorX',\n 'overscrollBehaviorY',\n 'padding',\n 'paddingBlockEnd',\n 'paddingBlockStart',\n 'paddingBottom',\n 'paddingInlineEnd',\n 'paddingInlineStart',\n 'paddingLeft',\n 'paddingRight',\n 'paddingTop',\n 'page',\n 'pageBreakAfter',\n 'pageBreakBefore',\n 'pageBreakInside',\n 'paintOrder',\n 'perspective',\n 'perspectiveOrigin',\n 'placeContent',\n 'placeItems',\n 'placeSelf',\n 'pointerEvents',\n 'position',\n 'quotes',\n 'r',\n 'resize',\n 'right',\n 'rowGap',\n 'rx',\n 'ry',\n 'scrollBehavior',\n 'scrollMargin',\n 'scrollMarginBlock',\n 'scrollMarginBlockEnd',\n 'scrollMarginBlockStart',\n 'scrollMarginBottom',\n 'scrollMarginInline',\n 'scrollMarginInlineEnd',\n 'scrollMarginInlineStart',\n 'scrollMarginLeft',\n 'scrollMarginRight',\n 'scrollMarginTop',\n 'scrollPadding',\n 'scrollPaddingBlock',\n 'scrollPaddingBlockEnd',\n 'scrollPaddingBlockStart',\n 'scrollPaddingBottom',\n 'scrollPaddingInline',\n 'scrollPaddingInlineEnd',\n 'scrollPaddingInlineStart',\n 'scrollPaddingLeft',\n 'scrollPaddingRight',\n 'scrollPaddingTop',\n 'scrollSnapAlign',\n 'scrollSnapStop',\n 'scrollSnapType',\n 'shapeImageThreshold',\n 'shapeMargin',\n 'shapeOutside',\n 'shapeRendering',\n 'size',\n 'speak',\n 'src',\n 'stopColor',\n 'stopOpacity',\n 'stroke',\n 'strokeDasharray',\n 'strokeDashoffset',\n 'strokeLinecap',\n 'strokeLinejoin',\n 'strokeMiterlimit',\n 'strokeOpacity',\n 'strokeWidth',\n 'tabSize',\n 'tableLayout',\n 'textAlign',\n 'textAlignLast',\n 'textAnchor',\n 'textCombineUpright',\n 'textDecoration',\n 'textDecorationColor',\n 'textDecorationLine',\n 'textDecorationSkipInk',\n 'textDecorationStyle',\n 'textIndent',\n 'textOrientation',\n 'textOverflow',\n 'textRendering',\n 'textShadow',\n 'textSizeAdjust',\n 'textTransform',\n 'textUnderlinePosition',\n 'top',\n 'touchAction',\n 'transform',\n 'transformBox',\n 'transformOrigin',\n 'transformStyle',\n 'transition',\n 'transitionDelay',\n 'transitionDuration',\n 'transitionProperty',\n 'transitionTimingFunction',\n 'unicodeBidi',\n 'unicodeRange',\n 'userSelect',\n 'userZoom',\n 'vectorEffect',\n 'verticalAlign',\n 'visibility',\n 'whiteSpace',\n 'widows',\n 'width',\n 'willChange',\n 'wordBreak',\n 'wordSpacing',\n 'wordWrap',\n 'writingMode',\n 'x',\n 'y',\n 'zIndex',\n 'zoom',\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 '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 'shadowColor',\n 'shadowOffset',\n 'shadowOpacity',\n 'shadowRadius',\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 '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 '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\n/**\n * @param {string} prefix vendor-specific prefix, eg: Webkit\n * @param {string} key style name, eg: transitionDuration\n * @return {string} style name prefixed with `prefix`, properly camelCased, eg:\n * WebkitTransitionDuration\n */\nfunction prefixKey(prefix: string, key: string) {\n return prefix + key.charAt(0).toUpperCase() + key.substring(1);\n}\n\n/**\n * Support style names that may come passed in prefixed by adding permutations\n * of vendor prefixes.\n */\nconst prefixes = ['webkit', 'ms', 'moz'];\n\n/**\n * Add vendor prefixing to unitless style keys.\n */\nunitlessStyleProps.forEach((prop) => {\n prefixes.forEach((prefix) => {\n unitlessStyleProps.push(prefixKey(prefix, prop));\n });\n});\n\n/**\n * Add all unitless style keys to valid style keys.\n */\nunitlessStyleProps.forEach((prop) => {\n if (validStyleProps.includes(prop)) {\n validStyleProps.push(prop);\n }\n});\n\nexport const StyleProps: any = {};\nvalidStyleProps.map((property) => {\n StyleProps[property] = true;\n});\n\nexport const isStyleProp = (property: string): boolean => {\n return StyleProps[property] !== undefined;\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';\nimport { isStyleProp } from '../utils/style';\nimport { useResponsiveContext } from '..';\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 //console.log({ applyStyle: props });\n\n const { getColor } = useTheme();\n const { mediaQueries, devices } = useResponsiveContext();\n\n const newProps: any = {};\n\n if (props.onClick && newProps.cursor == undefined) {\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 (isStyleProp(property) || property == 'on' || property == 'media') {\n 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 if (property === 'media') {\n for (const screenOrDevices in props[property]) {\n // console.log(screenOrDevices, mediaQueries[screenOrDevices]);\n if (\n mediaQueries[screenOrDevices] !== undefined &&\n props[property][screenOrDevices] !== undefined\n ) {\n newProps['@media ' + mediaQueries[screenOrDevices]] = applyStyle(\n props[property][screenOrDevices]\n );\n } else if (devices[screenOrDevices] !== undefined) {\n // console.log(screen, devices[screenOrDevices], 'screen');\n\n for (const deviceScreen in devices[screenOrDevices]) {\n if (\n mediaQueries[devices[screenOrDevices][deviceScreen]] !==\n undefined &&\n props[property][screenOrDevices] !== undefined\n ) {\n console.log(\n screenOrDevices,\n props[property][screenOrDevices]\n );\n newProps[\n '@media ' +\n mediaQueries[devices[screenOrDevices][deviceScreen]]\n ] = applyStyle(props[property][screenOrDevices]);\n }\n }\n }\n }\n } else {\n newProps[property] = applyStyle(props[property]);\n }\n } else 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 {\n newProps[property] = props[property];\n }\n }\n });\n\n // console.log({ 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 { breakpoints, devices } = useResponsiveContext();\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\nconst elements: any = {\n form: styled.form((props: any) => {\n return applyStyle(props);\n }),\n button: styled.button((props: any) => {\n return applyStyle(props);\n }),\n input: styled.input((props: any) => {\n return applyStyle(props);\n }),\n span: styled.span((props: any) => {\n return applyStyle(props);\n }),\n img: styled.img((props: any) => {\n return applyStyle(props);\n }),\n div: styled.div((props: any) => {\n return applyStyle(props);\n }),\n video: styled.video((props: any) => {\n return applyStyle(props);\n }),\n};\n\nexport class ViewElement extends React.PureComponent<any> {\n render() {\n const Element = elements[this.props.tag]\n ? elements[this.props.tag]\n : elements.div;\n\n return (\n <Element\n {...this.props}\n onClick={\n this.props.onPress !== undefined\n ? this.props.onPress\n : this.props.onClick\n }\n />\n );\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, 'children' | 'style' | 'pointerEvents'>,\n CSSProperties {\n children?: any;\n size?: number;\n on?: Record<string, CSSProperties>;\n media?: 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 tag?: string;\n}\n\nexport const View = (props: ViewProps) => <ViewElement {...props} />;\n\nexport const Div = View;\n\nexport const SafeArea = View;\n\nexport const Scroll = (props: any) => <View overflow={'auto'} {...props} />;\n\nexport const Span = (props: ViewProps) => <ViewElement {...props} tag=\"span\" />;\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[]>;\nexport type QueryConfig = 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 mediaQueries: QueryConfig;\n};\n\nexport type ScreenOrientation = 'landscape' | 'portrait';\n\nconst getMediaQueries = (b: ResponsiveConfig) => {\n const defaultKeys = Object.keys(b);\n\n const breakpointValue = defaultKeys\n .map((breakpoint) => {\n const value: ScreenSizeRange = {\n breakpoint: breakpoint as keyof typeof b,\n min: b[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 const query: Record<keyof typeof defaultBreakpointsConfig, string> = {};\n breakpointValue.map((sizeScreen) => {\n query[sizeScreen.breakpoint] = `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 });\n\n return query;\n};\n\nconst defaultScreenConfig: ScreenConfig = {\n breakpoints: defaultBreakpointsConfig,\n devices: defaultDeviceConfig,\n mediaQueries: getMediaQueries(defaultBreakpointsConfig),\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 mediaQueries: getMediaQueries(breakpoints),\n }}\n >\n {children}\n </ResponsiveContext.Provider>\n );\n};\n","import { useState } from 'react';\nimport {\n useResponsiveContext,\n ScreenOrientation,\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, mediaQueries } = useResponsiveContext();\n const [screen, setScreen] = useState('xs');\n const [orientation, setOrientation] = useState(\n 'landscape' as ScreenOrientation\n );\n\n useMount(() => {\n for (const screenSize in mediaQueries) {\n createQuery(screenSize, mediaQueries[screenSize], setScreen);\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 const is = (s: keyof typeof breakpoints) => {\n return s == screen;\n };\n\n return {\n breakpoints,\n devices,\n orientation,\n screen,\n on,\n is,\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 FormProps\n extends Omit<ViewStyleProps, 'children' | 'style' | 'pointerEvents'>,\n Omit<\n HTMLFormElement,\n | 'children'\n | 'target'\n | 'translate'\n | 'height'\n | 'width'\n | 'border'\n | 'draggable'\n >,\n CSSProperties {\n children?: any;\n size?: number;\n target?: any;\n on?: Record<string, CSSProperties>;\n media?: Record<string, CSSProperties>;\n paddingHorizontal?: number | string;\n marginHorizontal?: number | string;\n paddingVertical?: number | string;\n marginVertical?: number | string;\n shadow?: boolean | number | Shadow;\n}\n\nexport interface ButtonProps\n extends Omit<ViewStyleProps, 'children' | 'style' | 'pointerEvents'>,\n Omit<\n HTMLButtonElement,\n | 'children'\n | 'translate'\n | 'type'\n | 'height'\n | 'width'\n | 'border'\n | 'draggable'\n >,\n CSSProperties {\n children?: any;\n size?: number;\n on?: Record<string, CSSProperties>;\n paddingHorizontal?: number | string;\n marginHorizontal?: number | string;\n paddingVertical?: number | string;\n marginVertical?: number | string;\n shadow?: boolean | number | Shadow;\n onClick?: any;\n type?: string;\n}\n\nexport interface InputProps\n extends Omit<ViewStyleProps, 'style' | 'pointerEvents' | 'onPress' | 'dir'>,\n Omit<\n HTMLInputElement,\n 'children' | 'translate' | 'height' | 'width' | 'border' | 'draggable'\n >,\n Omit<CSSProperties, 'style' | 'dir'> {\n on?: Record<string, CSSProperties>;\n paddingHorizontal?: number | string;\n marginHorizontal?: number | string;\n paddingVertical?: number | string;\n marginVertical?: number | string;\n shadow?: boolean | number | Shadow;\n tag?: string;\n}\n\nexport const Form = (props: FormProps) => <ViewElement {...props} tag=\"form\" />;\n\nexport const Input = (props: InputProps) => (\n <ViewElement {...props} tag=\"input\" />\n);\n\nexport const Button = (props: ButtonProps) => (\n <ViewElement {...props} tag=\"button\" />\n);\n","import React from 'react';\nimport { CSSProperties } from 'styled-components';\nimport { ViewElement } from './Element';\nimport { ImageStyleProps } from '../types/style';\nimport { Shadow } from '../utils/shadow';\n\nexport interface ImageProps\n extends Omit<ImageStyleProps, 'children' | 'style' | 'pointerEvents'>,\n CSSProperties {\n children?: any;\n size?: number;\n on?: Record<string, CSSProperties>;\n media?: Record<string, CSSProperties>;\n onPress?: (...args: any) => void;\n src: string | any;\n shadow?: boolean | number | Shadow;\n tag?: string;\n}\n\nexport const Image = (props: ImageProps) => (\n <ViewElement {...props} tag=\"img\" />\n);\n","import React from 'react';\nimport { CSSProperties } from 'styled-components';\nimport { ViewElement } from './Element';\nimport { TextStyleProps } from '../types/style';\nimport { Shadow } from '../utils/shadow';\n\nexport interface TextProps\n extends Omit<TextStyleProps, 'children' | 'style' | 'pointerEvents'>,\n CSSProperties {\n children?: any;\n on?: Record<string, CSSProperties>;\n media?: Record<string, CSSProperties>;\n onPress?: (...args: any) => void;\n paddingHorizontal?: number | string;\n marginHorizontal?: number | string;\n paddingVertical?: number | string;\n marginVertical?: number | string;\n toUpperCase?: boolean;\n shadow?: boolean | number | Shadow;\n tag?: string;\n}\n\nexport const Text = (props: TextProps) => {\n return <ViewElement {...props} />;\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","unitlessStyleProps","Object","keys","unitlessKeys","validStyleProps","prefixes","forEach","prop","prefix","push","key","charAt","toUpperCase","substring","prefixKey","includes","StyleProps","map","property","NumberPropsStyle","applyStyle","props","useResponsiveContext","mediaQueries","devices","newProps","onClick","undefined","cursor","size","newSize","setSize","paddingHorizontal","paddingLeft","paddingRight","marginHorizontal","marginLeft","marginRight","paddingVertical","paddingTop","paddingBottom","marginVertical","marginTop","marginBottom","shadow","shawdowValue","Color","hex","rgb","join","isStyleProp","event","screenOrDevices","deviceScreen","console","log","toLowerCase","indexOf","elements","form","styled","button","input","span","img","div","video","ViewElement","render","React","this","tag","onPress","PureComponent","View","Div","SafeArea","useMount","callback","useEffect","defaultBreakpointsConfig","xs","sm","md","lg","xl","defaultDeviceConfig","mobile","tablet","desktop","getMediaQueries","b","breakpointValue","breakpoint","min","max","sort","a","reduce","query","sizeScreen","ResponsiveContext","breakpoints","createQuery","keyScreen","set","mql","window","matchMedia","onChange","matches","addListener","removeListener","children","Provider","value","overflow","split","parseInt","e","useState","screen","setScreen","orientation","setOrientation","screenSize","on","device","is","s"],"mappings":"sWAkBO,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,OCjGLC,EAAqBC,OAAOC,KAAKC,GAEjCC,EAAkB,CAC7B,eACA,aACA,YACA,oBACA,MACA,YACA,iBACA,qBACA,oBACA,oBACA,0BACA,gBACA,qBACA,0BACA,aACA,iBACA,qBACA,aACA,uBACA,sBACA,iBACA,kBACA,kBACA,mBACA,qBACA,sBACA,sBACA,mBACA,oBACA,oBACA,iBACA,gBACA,YACA,SACA,iBACA,sBACA,sBACA,sBACA,mBACA,wBACA,wBACA,wBACA,eACA,oBACA,yBACA,0BACA,oBACA,oBACA,iBACA,cACA,cACA,oBACA,oBACA,mBACA,oBACA,mBACA,kBACA,uBACA,uBACA,uBACA,oBACA,yBACA,yBACA,yBACA,aACA,kBACA,kBACA,kBACA,eACA,cACA,mBACA,mBACA,mBACA,gBACA,cACA,YACA,iBACA,sBACA,uBACA,iBACA,iBACA,cACA,SACA,YACA,YACA,aACA,cACA,cACA,oBACA,cACA,aACA,QACA,OACA,WACA,WACA,QACA,qBACA,4BACA,iBACA,cACA,aACA,YACA,aACA,kBACA,kBACA,kBACA,aACA,cACA,UACA,UACA,UACA,mBACA,eACA,SACA,KACA,KACA,IACA,YACA,UACA,mBACA,aACA,OACA,cACA,WACA,SACA,OACA,YACA,gBACA,WACA,WACA,aACA,WACA,QACA,aACA,eACA,OACA,cACA,aACA,sBACA,cACA,WACA,cACA,YACA,cACA,kBACA,uBACA,uBACA,qBACA,wBACA,aACA,MACA,OACA,WACA,kBACA,eACA,eACA,aACA,gBACA,gBACA,kBACA,UACA,UACA,aACA,aACA,eACA,eACA,oBACA,sBACA,mBACA,SACA,UACA,iBACA,aACA,YACA,iBACA,eACA,cACA,OACA,gBACA,gBACA,YACA,aACA,YACA,iBACA,oBACA,gBACA,SACA,iBACA,mBACA,eACA,kBACA,oBACA,aACA,cACA,YACA,SACA,YACA,YACA,cACA,OACA,WACA,eACA,YACA,gBACA,WACA,UACA,eACA,YACA,gBACA,WACA,UACA,eACA,YACA,iBACA,SACA,iBACA,aACA,eACA,UACA,QACA,cACA,UACA,UACA,eACA,gBACA,eACA,eACA,WACA,iBACA,eACA,YACA,YACA,qBACA,0BACA,2BACA,sBACA,sBACA,UACA,kBACA,oBACA,gBACA,mBACA,qBACA,cACA,eACA,aACA,OACA,iBACA,kBACA,kBACA,aACA,cACA,oBACA,eACA,aACA,YACA,gBACA,WACA,SACA,IACA,SACA,QACA,SACA,KACA,KACA,iBACA,eACA,oBACA,uBACA,yBACA,qBACA,qBACA,wBACA,0BACA,mBACA,oBACA,kBACA,gBACA,qBACA,wBACA,0BACA,sBACA,sBACA,yBACA,2BACA,oBACA,qBACA,mBACA,kBACA,iBACA,iBACA,sBACA,cACA,eACA,iBACA,OACA,QACA,MACA,YACA,cACA,SACA,kBACA,mBACA,gBACA,iBACA,mBACA,gBACA,cACA,UACA,cACA,YACA,gBACA,aACA,qBACA,iBACA,sBACA,qBACA,wBACA,sBACA,aACA,kBACA,eACA,gBACA,aACA,iBACA,gBACA,wBACA,MACA,cACA,YACA,eACA,kBACA,iBACA,aACA,kBACA,qBACA,qBACA,2BACA,cACA,eACA,aACA,WACA,eACA,gBACA,aACA,aACA,SACA,QACA,aACA,YACA,cACA,WACA,cACA,IACA,IACA,SACA,OACA,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,YACA,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,cACA,eACA,gBACA,eACA,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,SACA,uBACA,qBACA,yBACA,0BACA,cACA,eACA,sBACA,kBACA,cACA,UACA,WACA,YACA,YACA,aACA,YACA,eACA,YACA,kBACA,WACA,SACA,SACA,aACA,aACA,cACA,SACA,UACA,UACA,UACA,QACA,QACA,QACA,SACA,oBAiBIC,EAAW,CAAC,SAAU,KAAM,OAKlCL,EAAmBM,SAAQ,SAACC,GAC1BF,EAASC,SAAQ,SAACE,GAChBR,EAAmBS,KAfvB,SAAmBD,EAAgBE,UAC1BF,EAASE,EAAIC,OAAO,GAAGC,cAAgBF,EAAIG,UAAU,GAclCC,CAAUN,EAAQD,UAO9CP,EAAmBM,SAAQ,SAACC,GACtBH,EAAgBW,SAASR,IAC3BH,EAAgBK,KAAKF,MAIlB,IAAMS,EAAkB,GAC/BZ,EAAgBa,KAAI,SAACC,GACnBF,EAAWE,IAAY,KAGlB,IC1jBDC,EAAwB,GACV,CAClB,gBACA,aACA,YACA,OACA,WACA,aACA,QACA,SACA,cACA,gBACA,eACA,QACA,UACA,MACA,MACA,OAGUF,KAAI,SAACC,GACfC,EAAiBD,IAAY,KAG/B,IAIaE,EAAa,SAAbA,EAAcC,OAGjBlC,EAAaI,IAAbJ,WAC0BmC,IAA1BC,IAAAA,aAAcC,IAAAA,QAEhBC,EAAgB,GAElBJ,EAAMK,SAA8BC,MAAnBF,EAASG,SAC5BH,EAASG,OAAS,eAGdC,OACaF,IAAjBN,EAAMxB,aACU8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"}
package/dist/app-studio.esm.js CHANGED
@@ -525,9 +525,14 @@ var setSize = function setSize(newSize, newProps) {
525
525
  newProps.height = newProps.width = newSize;
526
526
  };
527
527
  var applyStyle = function applyStyle(props) {
528
+ //console.log({ applyStyle: props });
528
529
  var _useTheme = useTheme(),
529
530
  getColor = _useTheme.getColor;
530
531
 
532
+ var _useResponsiveContext = useResponsiveContext(),
533
+ mediaQueries = _useResponsiveContext.mediaQueries,
534
+ devices = _useResponsiveContext.devices;
535
+
531
536
  var newProps = {};
532
537
 
533
538
  if (props.onClick && newProps.cursor == undefined) {
@@ -576,24 +581,40 @@ var applyStyle = function applyStyle(props) {
576
581
  }
577
582
 
578
583
  Object.keys(props).map(function (property) {
579
- if (isStyleProp(property) || property == 'on') {
580
- if (typeof props[property] === 'number' && NumberPropsStyle[property] === undefined) {
581
- newProps[property] = props[property] + 'px';
582
- } else if (property.toLowerCase().indexOf('color') !== -1) {
583
- newProps[property] = getColor(props[property]);
584
- } else if (typeof props[property] === 'object') {
584
+ if (isStyleProp(property) || property == 'on' || property == 'media') {
585
+ if (typeof props[property] === 'object') {
585
586
  if (property === 'on') {
586
587
  for (var event in props[property]) {
587
588
  newProps['&:' + event] = applyStyle(props[property][event]);
588
589
  }
590
+ } else if (property === 'media') {
591
+ for (var screenOrDevices in props[property]) {
592
+ // console.log(screenOrDevices, mediaQueries[screenOrDevices]);
593
+ if (mediaQueries[screenOrDevices] !== undefined && props[property][screenOrDevices] !== undefined) {
594
+ newProps['@media ' + mediaQueries[screenOrDevices]] = applyStyle(props[property][screenOrDevices]);
595
+ } else if (devices[screenOrDevices] !== undefined) {
596
+ // console.log(screen, devices[screenOrDevices], 'screen');
597
+ for (var deviceScreen in devices[screenOrDevices]) {
598
+ if (mediaQueries[devices[screenOrDevices][deviceScreen]] !== undefined && props[property][screenOrDevices] !== undefined) {
599
+ console.log(screenOrDevices, props[property][screenOrDevices]);
600
+ newProps['@media ' + mediaQueries[devices[screenOrDevices][deviceScreen]]] = applyStyle(props[property][screenOrDevices]);
601
+ }
602
+ }
603
+ }
604
+ }
589
605
  } else {
590
606
  newProps[property] = applyStyle(props[property]);
591
607
  }
608
+ } else if (typeof props[property] === 'number' && NumberPropsStyle[property] === undefined) {
609
+ newProps[property] = props[property] + 'px';
610
+ } else if (property.toLowerCase().indexOf('color') !== -1) {
611
+ newProps[property] = getColor(props[property]);
592
612
  } else {
593
613
  newProps[property] = props[property];
594
614
  }
595
615
  }
596
- });
616
+ }); // console.log({ newProps });
617
+
597
618
  return newProps;
598
619
  }; // function convertToCSS(props: any) {
599
620
  var elements = {
@@ -698,9 +719,34 @@ var defaultDeviceConfig = {
698
719
  tablet: ['md', 'lg'],
699
720
  desktop: ['lg', 'xl']
700
721
  };
722
+
723
+ var getMediaQueries = function getMediaQueries(b) {
724
+ var defaultKeys = Object.keys(b);
725
+ var breakpointValue = defaultKeys.map(function (breakpoint) {
726
+ var value = {
727
+ breakpoint: breakpoint,
728
+ min: b[breakpoint],
729
+ max: 0
730
+ };
731
+ return value;
732
+ }).sort(function (a, b) {
733
+ return a.min - b.min;
734
+ });
735
+ breakpointValue.reduce(function (a, b) {
736
+ if (b) a.max = b.min;
737
+ return b;
738
+ });
739
+ var query = {};
740
+ breakpointValue.map(function (sizeScreen) {
741
+ query[sizeScreen.breakpoint] = "only screen " + (sizeScreen.min && sizeScreen.min >= 0 ? 'and (min-width:' + sizeScreen.min + 'px)' : '') + " " + (sizeScreen.max && sizeScreen.max >= 0 ? 'and (max-width:' + sizeScreen.max + 'px)' : '');
742
+ });
743
+ return query;
744
+ };
745
+
701
746
  var defaultScreenConfig = {
702
747
  breakpoints: defaultBreakpointsConfig,
703
- devices: defaultDeviceConfig
748
+ devices: defaultDeviceConfig,
749
+ mediaQueries: /*#__PURE__*/getMediaQueries(defaultBreakpointsConfig)
704
750
  };
705
751
  var ResponsiveContext = /*#__PURE__*/createContext(defaultScreenConfig);
706
752
  var useResponsiveContext = function useResponsiveContext() {
@@ -715,7 +761,8 @@ var ResponsiveProvider = function ResponsiveProvider(_ref) {
715
761
  return React.createElement(ResponsiveContext.Provider, {
716
762
  value: {
717
763
  breakpoints: breakpoints,
718
- devices: devices
764
+ devices: devices,
765
+ mediaQueries: getMediaQueries(breakpoints)
719
766
  }
720
767
  }, children);
721
768
  };
@@ -742,7 +789,8 @@ var createQuery = function createQuery(keyScreen, query, set) {
742
789
  var useResponsive = function useResponsive() {
743
790
  var _useResponsiveContext = useResponsiveContext(),
744
791
  breakpoints = _useResponsiveContext.breakpoints,
745
- devices = _useResponsiveContext.devices;
792
+ devices = _useResponsiveContext.devices,
793
+ mediaQueries = _useResponsiveContext.mediaQueries;
746
794
 
747
795
  var _useState = useState('xs'),
748
796
  screen = _useState[0],
@@ -752,30 +800,11 @@ var useResponsive = function useResponsive() {
752
800
  orientation = _useState2[0],
753
801
  setOrientation = _useState2[1];
754
802
 
755
- var keys = Object.keys(breakpoints);
756
803
  useMount(function () {
757
- var breakpointValue = keys.map(function (breakpoint) {
758
- var value = {
759
- breakpoint: breakpoint,
760
- min: breakpoints[breakpoint],
761
- max: 0
762
- };
763
- return value;
764
- }).sort(function (a, b) {
765
- return a.min - b.min;
766
- });
767
- breakpointValue.reduce(function (a, b) {
768
- if (b) a.max = b.min;
769
- return b;
770
- });
771
- breakpointValue.map(function (sizeScreen) {
772
- createQuery(sizeScreen.breakpoint, "only screen " + (sizeScreen.min && sizeScreen.min >= 0 ? 'and (min-width:' + sizeScreen.min + 'px)' : '') + " " + (sizeScreen.max && sizeScreen.max >= 0 ? 'and (max-width:' + sizeScreen.max + 'px)' : ''), setScreen); // if (
773
- // window.innerWidth >= sizeScreen.min &&
774
- // window.innerWidth <= sizeScreen.max
775
- // ) {
776
- // setScreen(key as ScreenResponsiveConfig);
777
- // }
778
- });
804
+ for (var screenSize in mediaQueries) {
805
+ createQuery(screenSize, mediaQueries[screenSize], setScreen);
806
+ }
807
+
779
808
  createQuery('landscape', 'only screen and (orientation: landscape)', setOrientation);
780
809
  createQuery('portrait', 'only screen and (orientation: portrait)', setOrientation);
781
810
  });
@@ -784,12 +813,17 @@ var useResponsive = function useResponsive() {
784
813
  return devices[device].includes(screen);
785
814
  };
786
815
 
816
+ var is = function is(s) {
817
+ return s == screen;
818
+ };
819
+
787
820
  return {
788
821
  breakpoints: breakpoints,
789
822
  devices: devices,
790
823
  orientation: orientation,
791
824
  screen: screen,
792
- on: on
825
+ on: on,
826
+ is: is
793
827
  };
794
828
  };
795
829