@expo/styleguide-native 6.1.3 → 7.0.0-alpha.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Expo
+Copyright (c) 2023 Expo
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md

@@ -1,21 +1,9 @@
 # @expo/styleguide-native
 
-This package is meant for use in Expo projects.
+Expo's React Native styleguide components.
 
 ## Get started
 
-Install
-
-```bash
-yarn add @expo/styleguide-native
-
-# or
-
-npm install @expo/styleguide-native
-```
-
-Then in a component:
-
-```tsx
-import { lightTheme, darkTheme, ... } from "@expo/styleguide-native";
-```
+1. Install dependencies with `yarn`.
+2. Build everything with `yarn build`.
+3. Develop with `yarn dev`.

package/dist/index.d.ts

@@ -1,11 +1,4 @@
-import { palette } from './styles/palette';
-import { shadows } from './styles/shadows';
-import { lightTheme, darkTheme } from './styles/themes';
-import { iconSize, borderRadius } from './styles/sizing';
-import { spacing } from './styles/spacing';
-import { breakpoints } from './styles/breakpoints';
-import { typography } from './styles/typography';
-import { IconProps } from 'types';
-export * from './icons';
-export * from './logos';
-export { borderRadius, breakpoints, darkTheme, iconSize, lightTheme, palette, shadows, spacing, typography, IconProps, };
+export * from './src/logos';
+export type { IconProps } from './src/types';
+export { shadows } from './src/styles/shadows';
+export { typography } from './src/styles/typography';

package/dist/index.js

@@ -1,31 +1,289 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.typography = exports.spacing = exports.shadows = exports.palette = exports.lightTheme = exports.iconSize = exports.darkTheme = exports.breakpoints = exports.borderRadius = void 0;
-const palette_1 = require("./styles/palette");
-Object.defineProperty(exports, "palette", { enumerable: true, get: function () { return palette_1.palette; } });
-const shadows_1 = require("./styles/shadows");
-Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return shadows_1.shadows; } });
-const themes_1 = require("./styles/themes");
-Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return themes_1.lightTheme; } });
-Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return themes_1.darkTheme; } });
-const sizing_1 = require("./styles/sizing");
-Object.defineProperty(exports, "iconSize", { enumerable: true, get: function () { return sizing_1.iconSize; } });
-Object.defineProperty(exports, "borderRadius", { enumerable: true, get: function () { return sizing_1.borderRadius; } });
-const spacing_1 = require("./styles/spacing");
-Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return spacing_1.spacing; } });
-const breakpoints_1 = require("./styles/breakpoints");
-Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return breakpoints_1.breakpoints; } });
-const typography_1 = require("./styles/typography");
-Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return typography_1.typography; } });
-__exportStar(require("./icons"), exports);
-__exportStar(require("./logos"), exports);
+
+function DocsLogo(props) {
+    var color = props.color;
+    return (React.createElement(Svg, __assign({ viewBox: "0 0 20 20", fill: "none" }, props),
+        React.createElement(Path, { d: "M12.07 8a.157.157 0 01.166.015l5.374 4.141a.16.16 0 01.055.168l-.37 1.298a.157.157 0 01-.234.09l-4.416-2.768-.846 5.47a.157.157 0 01-.219.12l-1.158-.518a.157.157 0 01-.093-.154l.477-7.132a.157.157 0 01.085-.129L12.069 8z", fill: color || "#000" }),
+        React.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.584.02a.157.157 0 00-.157.001L.708 5.071l-.003.001a.157.157 0 00-.079.135V15.31c0 .056.03.108.079.136l1.71.984.004.003a.157.157 0 00.157 0l1.054-.61v1.183c0 .056.03.108.078.136l1.715.987a.157.157 0 00.156 0l.003-.002 2.024-1.172.91 2.934a.157.157 0 00.198.102l1.815-.594a.156.156 0 00.03-.013l8.732-4.666a.157.157 0 00.075-.186L16.06 4.258a.157.157 0 00-.205-.098l-1.473.529v-1.85a.157.157 0 00-.079-.135l-.002-.001-1.713-.986a.157.157 0 00-.156 0l-1.054.61V1.144a.157.157 0 00-.078-.136L9.584.02zM5.33 9.56l-.003-1.578-1.383-.805v9.74l1.4.806-.014-8.119a.156.156 0 010-.045zM.94 5.48l1.384.805.017 9.741-1.4-.806V5.48zm9.968-4.336l-1.4-.806-8.412 4.87 1.385.806 8.427-4.87zM5.483 7.71l8.427-4.87-1.4-.806-8.411 4.87 1.384.806zm5.09 11.313l-3.21-9.971 8.455-4.519 3.21 9.97-8.456 4.52zM5.678 9.678l3.09 9.967 1.514-.496-3.21-9.972-1.394.501z", fill: color || "#000" })));
+}
+
+function ExpoGoLogo(props) {
+    var color = props.color;
+    return (React.createElement(Svg, __assign({ viewBox: "0 0 20 20", fill: "none" }, props),
+        React.createElement(Path, { d: "M18.072 7.75a1.749 1.749 0 00-1.56-.732 1.763 1.763 0 00-1.436.946 1.55 1.55 0 00.302 1.75 2.57 2.57 0 001.716-.484 2.53 2.53 0 00.978-1.48zM12.866 1L11.751.394 6.897 3.072l.387.207.736.383 1.332-.733L12.867.987 12.866 1zm.449-.184a.173.173 0 01.124.115l1.626 4.755a.158.158 0 01-.077.207 3.126 3.126 0 00-1.384 1.519 3.09 3.09 0 00-.134 2.042 3.29 3.29 0 001.35 1.793 3.343 3.343 0 002.195.524.208.208 0 01.202.123l1.68 4.88a.196.196 0 01-.078.215l-5.163 2.992a.195.195 0 01-.078.015.208.208 0 01-.14-.022l-1.81-1.129a.18.18 0 01-.078-.076l-3.538-8.065-5.388 3.039a.25.25 0 01-.21.008l-1.224-.69a.177.177 0 01-.077-.23l5.234-9.847c.02-.033.05-.06.085-.076L11.65.023a.2.2 0 01.186 0l1.479.793zM6.843 3.46l-.256-.13-5.044 9.523.92.514 4.352-5.643a.212.212 0 01.178-.077.217.217 0 01.155.115l4.738 10.82 1.266.775L8.066 4.62l-.216-.614-1.014-.552.007.007zm7.804 5.679a1.932 1.932 0 01.092-1.28c.176-.404.484-.737.875-.945a2.152 2.152 0 012.509.307 1.934 1.934 0 01.056 2.745l-.056.056a2.118 2.118 0 01-1.986.516 2.118 2.118 0 01-.928-.508 2.091 2.091 0 01-.562-.891z", fill: color || "#000" })));
+}
+
+function Logo(props) {
+    var color = props.color;
+    return (React.createElement(Svg, __assign({ viewBox: "0 0 20 20", fill: "none" }, props),
+        React.createElement(Path, { d: "M9.477 7.638c.164-.24.343-.27.488-.27.145 0 .387.03.551.27 2.13 2.901 6.55 10.56 6.959 10.976.605.618 1.436.233 1.918-.468.475-.69.607-1.174.607-1.69 0-.352-6.883-13.05-7.576-14.106-.667-1.017-.884-1.274-2.025-1.274h-.854c-1.138 0-1.302.257-1.969 1.274C6.883 3.406 0 16.104 0 16.456c0 .517.132 1 .607 1.69.482.7 1.313 1.086 1.918.468.41-.417 4.822-8.075 6.952-10.977z", fill: color || "#000" })));
+}
+
+function SnackLogo(props) {
+    var color = props.color;
+    return (React.createElement(Svg, __assign({ viewBox: "0 0 20 20", fill: "none" }, props),
+        React.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M17.168 1.152a2.752 2.752 0 100 5.504 2.752 2.752 0 000-5.504zm-2.43 2.752a2.429 2.429 0 014.608-1.075 3.805 3.805 0 01-3.701 2.925h-.051a2.423 2.423 0 01-.855-1.85zm-1.755-1.422a.16.16 0 01.081.14v4.825L17.23 9.86c.05.029.081.082.082.14l.026 4.92a.16.16 0 01-.081.14l-8.52 4.92a.161.161 0 01-.242-.14V10c0-.057.03-.11.08-.14l4.006-2.319-4.005-2.32a.161.161 0 010-.28l4.246-2.458a.161.161 0 01.162 0zm3.845 7.517L13.064 7.82v4.36L16.828 10zM8.978 5.08l3.764 2.18V2.901l-3.763 2.18z", fill: color || "#000" }),
+        React.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M8.75.022a.161.161 0 00-.162 0l-4.242 2.46a.16.16 0 00-.019.01L.11 4.94l-.003.001a.161.161 0 00-.081.136v.004l-.013 4.994a.161.161 0 000 .125L0 14.92c0 .058.03.111.08.14l4.24 2.455.03.018 4.226 2.446a.161.161 0 00.242-.14v-9.746l4.166-2.412a.162.162 0 000-.28l-.081-.046V2.808l.08-.047a.162.162 0 000-.28L8.75.022zm3.828 2.597L8.67.35 4.74 2.626l3.917 2.267 3.922-2.275zM8.656 5.268L4.74 7.538l3.916 2.275L12.58 7.54 8.656 5.268zM4.419 7.352l3.915-2.27-3.916-2.268L.508 5.08 4.42 7.35zm-.165.277v4.692L.336 10.05l.012-4.69 3.906 2.268zm.323 4.879V7.817l3.918 2.275v4.685l-3.918-2.27zm-.323.186l-3.92-2.27-.01 4.403 3.93 2.276v-4.41zm.323 4.596v-4.41l3.918 2.27v4.408L4.577 17.29z", fill: color || "#000" })));
+}
+
+function WordMarkLogo(props) {
+    var color = props.color;
+    return (React.createElement(Svg, __assign({ viewBox: "0 0 71 20", fill: "none" }, props),
+        React.createElement(Path, { d: "M9.258 6.342c.158-.23.331-.26.472-.26.14 0 .374.03.532.26 2.06 2.806 6.332 10.208 6.727 10.611.585.597 1.388.225 1.854-.452.46-.667.587-1.135.587-1.634 0-.34-6.653-12.614-7.324-13.636C11.462.248 11.252 0 10.15 0h-.825c-1.1 0-1.259.248-1.903 1.23C6.75 2.254.097 14.528.097 14.868c0 .5.127.967.587 1.634.466.677 1.269 1.05 1.854.452.395-.403 4.661-7.805 6.72-10.61zm14.941-5.237v15.344h9.35v-3.113h-6.125v-3.244h5.45V6.98h-5.45V4.218h6.125V1.105h-9.35zM46.25 16.449l-3.88-5.568 3.619-5.195h-3.662L40.54 8.23l-1.765-2.543h-3.706l3.618 5.217-3.857 5.546h3.661l2.027-2.915 2.027 2.915h3.705zm7.572-10.982c-1.482 0-2.637.614-3.378 1.732V5.686H47.37V20h3.073v-5.063c.74 1.117 1.896 1.731 3.378 1.731 2.768 0 4.97-2.52 4.97-5.611 0-3.091-2.202-5.59-4.97-5.59zm-.697 8.242c-1.504 0-2.681-1.14-2.681-2.652 0-1.49 1.177-2.653 2.68-2.653 1.483 0 2.681 1.184 2.681 2.653 0 1.49-1.198 2.652-2.68 2.652zm12.188-8.242c-3.16 0-5.558 2.411-5.558 5.612 0 3.2 2.397 5.59 5.557 5.59 3.139 0 5.558-2.39 5.558-5.59 0-3.2-2.42-5.612-5.558-5.612zm0 2.96c1.438 0 2.55 1.117 2.55 2.652 0 1.49-1.112 2.63-2.55 2.63-1.46 0-2.55-1.14-2.55-2.63 0-1.535 1.09-2.653 2.55-2.653z", fill: color || "#000" })));
+}
+
+var shadows = {
+    xs: {
+        elevation: 1,
+        shadowColor: '#000',
+        shadowRadius: 1,
+        shadowOffset: { height: 1, width: 0 },
+        shadowOpacity: 0.075
+    },
+    sm: {
+        elevation: 4,
+        shadowColor: '#000',
+        shadowRadius: 3,
+        shadowOffset: { height: 3, width: 0 },
+        shadowOpacity: 0.15
+    },
+    md: {
+        elevation: 8,
+        shadowColor: '#000',
+        shadowRadius: 8,
+        shadowOffset: { height: 6, width: 0 },
+        shadowOpacity: 0.15
+    },
+    lg: {
+        elevation: 16,
+        shadowColor: '#000',
+        shadowRadius: 10,
+        shadowOffset: { height: 10, width: 0 },
+        shadowOpacity: 0.17
+    },
+    xl: {
+        elevation: 28,
+        shadowColor: '#000',
+        shadowRadius: 25,
+        shadowOffset: { height: 16, width: 0 },
+        shadowOpacity: 0.2
+    }
+};
+
+var baseFontSize = 16;
+var fontSizes = {
+    61: {
+        fontSize: 61,
+        lineHeight: 73,
+        letterSpacing: -0.022 * baseFontSize
+    },
+    53: {
+        fontSize: 53,
+        lineHeight: 64,
+        letterSpacing: -0.022 * baseFontSize
+    },
+    49: {
+        fontSize: 49,
+        lineHeight: 59,
+        letterSpacing: -0.022 * baseFontSize
+    },
+    46: {
+        fontSize: 46,
+        lineHeight: 55,
+        letterSpacing: -0.022 * baseFontSize
+    },
+    43: {
+        fontSize: 43,
+        lineHeight: 52,
+        letterSpacing: -0.022 * baseFontSize
+    },
+    39: {
+        fontSize: 39,
+        lineHeight: 51,
+        letterSpacing: -0.022 * baseFontSize
+    },
+    37: {
+        fontSize: 37,
+        lineHeight: 48,
+        letterSpacing: -0.022 * baseFontSize
+    },
+    34: {
+        fontSize: 34,
+        lineHeight: 44,
+        letterSpacing: -0.022 * baseFontSize
+    },
+    31: {
+        fontSize: 31,
+        lineHeight: 40,
+        letterSpacing: -0.021 * baseFontSize
+    },
+    29: {
+        fontSize: 29,
+        lineHeight: 38,
+        letterSpacing: -0.021 * baseFontSize
+    },
+    27: {
+        fontSize: 27,
+        lineHeight: 36,
+        letterSpacing: -0.021 * baseFontSize
+    },
+    25: {
+        fontSize: 25,
+        lineHeight: 35,
+        letterSpacing: -0.021 * baseFontSize
+    },
+    23: {
+        fontSize: 23,
+        lineHeight: 32,
+        letterSpacing: -0.019 * baseFontSize
+    },
+    22: {
+        fontSize: 22,
+        lineHeight: 31,
+        letterSpacing: -0.018 * baseFontSize
+    },
+    20: {
+        fontSize: 20,
+        lineHeight: 30,
+        letterSpacing: -0.017 * baseFontSize
+    },
+    19: {
+        fontSize: 19,
+        lineHeight: 29,
+        letterSpacing: -0.015 * baseFontSize
+    },
+    18: {
+        fontSize: 18,
+        lineHeight: 28,
+        letterSpacing: -0.014 * baseFontSize
+    },
+    16: {
+        fontSize: 16,
+        lineHeight: 26,
+        letterSpacing: -0.011 * baseFontSize
+    },
+    15: {
+        fontSize: 15,
+        lineHeight: 24,
+        letterSpacing: -0.009 * baseFontSize
+    },
+    14: {
+        fontSize: 14,
+        lineHeight: 22,
+        letterSpacing: -0.006 * baseFontSize
+    },
+    13: {
+        fontSize: 13,
+        lineHeight: 21,
+        letterSpacing: -0.003 * baseFontSize
+    },
+    12: {
+        fontSize: 12,
+        lineHeight: 19
+    }
+};
+var headers = {
+    xl: {
+        large: {
+            huge: __assign({ fontWeight: '900' }, fontSizes[61]),
+            h1: __assign({ fontWeight: '600' }, fontSizes[49]),
+            h2: __assign({ fontWeight: '600' }, fontSizes[39]),
+            h3: __assign({ fontWeight: '600' }, fontSizes[31]),
+            h4: __assign({ fontWeight: '600' }, fontSizes[25]),
+            h5: __assign({ fontWeight: '600' }, fontSizes[20]),
+            h6: __assign({ fontWeight: '600' }, fontSizes[16])
+        },
+        medium: {
+            huge: __assign({ fontWeight: '900' }, fontSizes[53]),
+            h1: __assign({ fontWeight: '600' }, fontSizes[43]),
+            h2: __assign({ fontWeight: '600' }, fontSizes[34]),
+            h3: __assign({ fontWeight: '600' }, fontSizes[27]),
+            h4: __assign({ fontWeight: '600' }, fontSizes[22]),
+            h5: __assign({ fontWeight: '600' }, fontSizes[18]),
+            h6: __assign({ fontWeight: '600' }, fontSizes[16])
+        },
+        small: {
+            huge: __assign({ fontWeight: '900' }, fontSizes[46]),
+            h1: __assign({ fontWeight: '600' }, fontSizes[37]),
+            h2: __assign({ fontWeight: '600' }, fontSizes[29]),
+            h3: __assign({ fontWeight: '600' }, fontSizes[23]),
+            h4: __assign({ fontWeight: '600' }, fontSizes[19]),
+            h5: __assign({ fontWeight: '600' }, fontSizes[16]),
+            h6: __assign({ fontWeight: '600' }, fontSizes[16])
+        }
+    },
+    "default": {
+        large: {
+            huge: __assign({ fontWeight: '900' }, fontSizes[39]),
+            h1: __assign({ fontWeight: '600' }, fontSizes[31]),
+            h2: __assign({ fontWeight: '600' }, fontSizes[25]),
+            h3: __assign({ fontWeight: '600' }, fontSizes[20]),
+            h4: __assign({ fontWeight: '600' }, fontSizes[16]),
+            h5: __assign({ fontWeight: '600' }, fontSizes[13]),
+            h6: __assign({ fontWeight: '600' }, fontSizes[12])
+        },
+        medium: {
+            huge: __assign({ fontWeight: '900' }, fontSizes[34]),
+            h1: __assign({ fontWeight: '600' }, fontSizes[27]),
+            h2: __assign({ fontWeight: '600' }, fontSizes[22]),
+            h3: __assign({ fontWeight: '600' }, fontSizes[18]),
+            h4: __assign({ fontWeight: '600' }, fontSizes[16]),
+            h5: __assign({ fontWeight: '600' }, fontSizes[13]),
+            h6: __assign({ fontWeight: '600' }, fontSizes[12])
+        },
+        small: {
+            huge: __assign({ fontWeight: '900' }, fontSizes[29]),
+            h1: __assign({ fontWeight: '600' }, fontSizes[23]),
+            h2: __assign({ fontWeight: '600' }, fontSizes[19]),
+            h3: __assign({ fontWeight: '600' }, fontSizes[16]),
+            h4: __assign({ fontWeight: '600' }, fontSizes[16]),
+            h5: __assign({ fontWeight: '600' }, fontSizes[13]),
+            h6: __assign({ fontWeight: '600' }, fontSizes[12])
+        }
+    }
+};
+var baseStyle = __assign({ fontWeight: '400' }, fontSizes[16]);
+var body = {
+    headline: __assign({ fontWeight: '500' }, fontSizes[16]),
+    paragraph: baseStyle,
+    label: __assign({ fontWeight: '500' }, fontSizes[15]),
+    callout: __assign({ fontWeight: '400' }, fontSizes[14]),
+    footnote: __assign({ fontWeight: '400' }, fontSizes[13]),
+    caption: __assign({ fontWeight: '400' }, fontSizes[12]),
+    code: __assign({ fontWeight: '400' }, fontSizes[13])
+};
+var typography = {
+    baseFontSize: baseFontSize,
+    headers: headers,
+    body: body,
+    fontSizes: fontSizes
+};
+
+export { DocsLogo, ExpoGoLogo, Logo, SnackLogo, WordMarkLogo, shadows, typography };

package/dist/{logos → src/logos}/DocsLogo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from "../types";
 export default function DocsLogo(props: IconProps): JSX.Element;

package/dist/{logos → src/logos}/ExpoGoLogo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from "../types";
 export default function ExpoGoLogo(props: IconProps): JSX.Element;

package/dist/{logos → src/logos}/Logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from "../types";
 export default function Logo(props: IconProps): JSX.Element;

package/dist/{logos → src/logos}/SnackLogo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from "../types";
 export default function SnackLogo(props: IconProps): JSX.Element;

package/dist/{logos → src/logos}/WordMarkLogo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from "../types";
 export default function WordMarkLogo(props: IconProps): JSX.Element;

package/dist/{types → src/types}/index.d.ts

@@ -1,4 +1,4 @@
 import { SvgProps } from "react-native-svg";
-export declare type IconProps = SvgProps & {
+export type IconProps = SvgProps & {
     size?: number;
 };

package/package.json

@@ -1,22 +1,18 @@
 {
   "name": "@expo/styleguide-native",
-  "version": "6.1.3",
-  "description": "Foundational styles for Expo interfaces.",
+  "version": "7.0.0-alpha.0",
+  "description": "Expo's React Native styleguide components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "clean": "rimraf ./dist",
-    "build:icons": "rimraf ./src/icons && svgr ../../common/svg --config-file ./svgr-icon-config.js --out-dir ./src/icons",
-    "build:logos": "rimraf ./src/logos && svgr ../../common/logos --config-file ./svgr-logo-config.js --out-dir ./src/logos",
-    "build": "yarn build:icons && yarn build:logos && yarn clean && yarn tsc",
-    "dev": "yarn tsc --watch"
+    "clean": "rimraf dist",
+    "bundle": "rollup --config",
+    "build": "run-s clean bundle",
+    "dev": "rollup --config --watch"
   },
   "files": [
     "dist"
   ],
-  "keywords": [
-    "expo"
-  ],
   "author": "Jon Samp",
   "license": "MIT",
   "homepage": "https://github.com/expo/styleguide",
@@ -26,18 +22,18 @@
     "directory": "packages/styleguide-native"
   },
   "devDependencies": {
-    "@svgr/cli": "^5.5.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@svgr/cli": "^6.5.1",
     "@types/react": "^17.0.6",
+    "npm-run-all": "^4.1.5",
     "react-native-svg": "^12.1.1",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.2.4"
+    "rimraf": "^4.1.2",
+    "rollup": "^3.15.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "react": "*",
     "react-native-svg": "*"
   },
-  "gitHead": "94bfdec4905cfc8fa2c2540ed672219ec6949246",
-  "dependencies": {
-    "@radix-ui/colors": "^0.1.8"
-  }
+  "gitHead": "8d0008658bbe60cde729660ca15cfc7aa6fd1373"
 }

package/dist/icons/ActivityIcon.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IconProps } from "../types";
-export default function ActivityIcon(props: IconProps): JSX.Element;

package/dist/icons/ActivityIcon.js

@@ -1,32 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_native_svg_1 = __importStar(require("react-native-svg"));
-function ActivityIcon(props) {
-    const { size, color, width, height } = props;
-    return (react_1.default.createElement(react_native_svg_1.default, Object.assign({ viewBox: "0 0 20 20", fill: "none", width: size || width || 20, height: size || height || 20 }, props),
-        react_1.default.createElement(react_native_svg_1.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M13.706.163c.342.24.479.683.332 1.077L11.69 7.52l5.638 1.53a.922.922 0 01.363 1.573l-10.286 9.15a.896.896 0 01-1.112.064.922.922 0 01-.332-1.077l2.347-6.28-5.638-1.53a.91.91 0 01-.647-.676.923.923 0 01.284-.896L12.594.228a.896.896 0 011.112-.065zM4.772 9.624l4.97 1.348a.907.907 0 01.572.467c.116.23.131.5.04.742L8.94 15.97l6.289-5.594-4.97-1.348a.907.907 0 01-.572-.467.926.926 0 01-.04-.742L11.06 4.03 4.772 9.624z", fill: color || "#000" })));
-}
-exports.default = ActivityIcon;

package/dist/icons/AddPhotoIcon.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IconProps } from "../types";
-export default function AddPhotoIcon(props: IconProps): JSX.Element;

package/dist/icons/AddPhotoIcon.js

@@ -1,32 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_native_svg_1 = __importStar(require("react-native-svg"));
-function AddPhotoIcon(props) {
-    const { size, color, width, height } = props;
-    return (react_1.default.createElement(react_native_svg_1.default, Object.assign({ viewBox: "0 0 20 20", fill: "none", width: size || width || 20, height: size || height || 20 }, props),
-        react_1.default.createElement(react_native_svg_1.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M17.25 1.75a.75.75 0 00-1.5 0v2h-2a.75.75 0 000 1.5h2v2a.75.75 0 001.5 0v-2h2a.75.75 0 000-1.5h-2v-2zM4.152 5.673L3.692 7H2a2 2 0 00-2 2v8a2 2 0 002 2h11a2 2 0 002-2V9a2 2 0 00-2-2h-1.692l-.46-1.327A1 1 0 009.903 5H5.097a1 1 0 00-.945.673zM7.5 15.5a3 3 0 100-6 3 3 0 000 6z", fill: color || "#000" })));
-}
-exports.default = AddPhotoIcon;

package/dist/icons/AndroidIcon.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IconProps } from "../types";
-export default function AndroidIcon(props: IconProps): JSX.Element;

package/dist/icons/AndroidIcon.js

@@ -1,32 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_native_svg_1 = __importStar(require("react-native-svg"));
-function AndroidIcon(props) {
-    const { size, color, width, height } = props;
-    return (react_1.default.createElement(react_native_svg_1.default, Object.assign({ viewBox: "0 0 20 20", fill: "none", width: size || width || 20, height: size || height || 20 }, props),
-        react_1.default.createElement(react_native_svg_1.Path, { d: "M14.219 12.325a.766.766 0 010-1.532.765.765 0 010 1.532zm-8.438 0a.766.766 0 010-1.532.765.765 0 010 1.532zm8.712-4.613l1.525-2.651a.317.317 0 10-.55-.318l-1.544 2.684A9.393 9.393 0 0010 6.585a9.393 9.393 0 00-3.924.842L4.531 4.742a.317.317 0 10-.55.319l1.526 2.65c-2.62 1.43-4.412 4.091-4.674 7.235h18.334c-.263-3.144-2.055-5.805-4.674-7.234z", fill: color || "#000" })));
-}
-exports.default = AndroidIcon;

package/dist/icons/AppleAppStoreIcon.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IconProps } from "../types";
-export default function AppleAppStoreIcon(props: IconProps): JSX.Element;

package/dist/icons/AppleAppStoreIcon.js

@@ -1,34 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_native_svg_1 = __importStar(require("react-native-svg"));
-function AppleAppStoreIcon(props) {
-    const { size, color, width, height } = props;
-    return (react_1.default.createElement(react_native_svg_1.default, Object.assign({ viewBox: "0 0 20 20", fill: "none", width: size || width || 20, height: size || height || 20 }, props),
-        react_1.default.createElement(react_native_svg_1.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M13.03 3.202a1.6 1.6 0 10-2.77-1.604L2.779 14.522h3.698l6.554-11.32zm-7.498 12.95c-.681-.584-1.417-1.13-2.053-1.156-.928-.037-1.237.446-1.47.88l-.008-.01-.54.932a1.6 1.6 0 102.769 1.604l1.302-2.25z", fill: color || "#000" }),
-        react_1.default.createElement(react_native_svg_1.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.718 11.322c.687.008 1.394.077 1.833.727.482.714.519 1.632.337 2.473H1.6a1.6 1.6 0 010-3.2h8.118zm3.959 3.2H18.4a1.6 1.6 0 000-3.2h-6.587l1.864 3.2z", fill: color || "#000" }),
-        react_1.default.createElement(react_native_svg_1.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M7.047 3.202a1.6 1.6 0 012.77-1.604l2.053 3.547-1.901 3.102-2.922-5.045zm4.25 7.338l4.55 7.862a1.6 1.6 0 002.77-1.604L12.456 6.157c-.395.052-.75.283-1.025.831-.784 1.569-.433 2.899-.132 3.553h-.003z", fill: color || "#000" })));
-}
-exports.default = AppleAppStoreIcon;

package/dist/icons/AppleIcon.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IconProps } from "../types";
-export default function AppleIcon(props: IconProps): JSX.Element;