@ovotech/element-native 3.8.1 → 4.0.0-canary-a872093-246

package/dist/components/SkeletonHeading/index.js

@@ -1,12 +1,5 @@
-import { SkeletonHeading as f } from "./SkeletonHeading.js";
-import "react/jsx-runtime";
-import "../../styled.native-KEscfVp7.js";
-import "react";
-import "../SkeletonAnimation/SkeletonAnimation.js";
-import "react-native";
-import "../Heading3/Heading3.js";
-import "../../utils-HsZygzDh.js";
-import "../../hooks/use-breakpoint.js";
-export {
-  f as SkeletonHeading
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonHeading = void 0;
+var SkeletonHeading_1 = require("./SkeletonHeading");
+Object.defineProperty(exports, "SkeletonHeading", { enumerable: true, get: function () { return SkeletonHeading_1.SkeletonHeading; } });

package/dist/components/SkeletonText/SkeletonText.d.ts

@@ -1,5 +1,5 @@
 import { ViewProps } from 'react-native';
-declare type Props = ViewProps & {
+type Props = ViewProps & {
     lines?: number;
 };
 export declare const SkeletonText: ({ lines, ...rest }: Props) => JSX.Element;

package/dist/components/SkeletonText/SkeletonText.js

@@ -1,35 +1,52 @@
-import { jsx as i } from "react/jsx-runtime";
-import { n } from "../../utils-HsZygzDh.js";
-import "react";
-import { useBreakpoint as l } from "../../hooks/use-breakpoint.js";
-import { s as a } from "../../styled.native-KEscfVp7.js";
-import { P as s } from "../P/P.js";
-import { SkeletonAnimation as p } from "../SkeletonAnimation/SkeletonAnimation.js";
-import "react-native";
-const d = a.View(({ theme: { core: o }, aboveSmallBreakpoint: r, short: t }) => `
-    background-color: ${o.color.neutral.light};
-    margin-bottom: ${n(o.space[2])};
-    height: ${r ? n(o.fontSize.body.large) : n(o.fontSize.body.small)};
-
-    ${t ? "width: 50%" : ""};
-  `), x = ({ lines: o = 1, ...r }) => {
-  const t = [], { smallAndUp: m } = l();
-  for (let e = 1; e <= o; e++)
-    t.push(
-      /* @__PURE__ */ i(
-        d,
-        {
-          short: e === o,
-          aboveSmallBreakpoint: m
-        },
-        `line-${e}`
-      )
-    );
-  return (
-    // @ts-ignore styled components stuff
-    /* @__PURE__ */ i(s, { as: p, ...r, children: t })
-  );
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
-export {
-  x as SkeletonText
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonText = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var P_1 = require("../P");
+var SkeletonAnimation_1 = require("../SkeletonAnimation");
+var StyledSkeletonText = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core, aboveSmallBreakpoint = _a.aboveSmallBreakpoint, short = _a.short;
+    return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat((0, element_core_1.numToPx)(core.space[2]), ";\n    height: ").concat(aboveSmallBreakpoint
+        ? (0, element_core_1.numToPx)(core.fontSize.body.large)
+        : (0, element_core_1.numToPx)(core.fontSize.body.small), ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
+});
+var SkeletonText = function (_a) {
+    var _b = _a.lines, lines = _b === void 0 ? 1 : _b, rest = __rest(_a, ["lines"]);
+    var generatedLines = [];
+    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
+    for (var i = 1; i <= lines; i++) {
+        generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, "line-".concat(i)));
+    }
+    return (
+    // @ts-ignore styled components stuff
+    (0, jsx_runtime_1.jsx)(P_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
 };
+exports.SkeletonText = SkeletonText;

package/dist/components/SkeletonText/index.js

@@ -1,12 +1,5 @@
-import { SkeletonText as l } from "./SkeletonText.js";
-import "react/jsx-runtime";
-import "../../utils-HsZygzDh.js";
-import "react";
-import "../../hooks/use-breakpoint.js";
-import "react-native";
-import "../../styled.native-KEscfVp7.js";
-import "../P/P.js";
-import "../SkeletonAnimation/SkeletonAnimation.js";
-export {
-  l as SkeletonText
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonText = void 0;
+var SkeletonText_1 = require("./SkeletonText");
+Object.defineProperty(exports, "SkeletonText", { enumerable: true, get: function () { return SkeletonText_1.SkeletonText; } });

package/dist/components/Small/Small.d.ts

@@ -364,6 +364,8 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
                     surfaceFocused: string;
                     outlineFocused: string;
                     backgroundFocused: string;
+                    messageInverted: string;
+                    surfaceInverted: string;
                 };
                 secondary: {
                     message: string;
@@ -374,6 +376,8 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
                     surfaceFocused: string;
                     outlineFocused: string;
                     backgroundFocused: string;
+                    messageInverted: string;
+                    surfaceInverted: string;
                 };
                 destructive: {
                     message: string;
@@ -384,6 +388,8 @@ export declare const Small: import("react").ForwardRefExoticComponent<Pick<Omit<
                     surfaceFocused: string;
                     outlineFocused: string;
                     backgroundFocused: string;
+                    messageInverted: string;
+                    surfaceInverted: string;
                 };
             };
             heading1: {

package/dist/components/Small/Small.js

@@ -1,18 +1,39 @@
-import { n as o } from "../../utils-HsZygzDh.js";
-import { s as l, c as e } from "../../styled.native-KEscfVp7.js";
-import { styledComponentWithBreakpoints as i } from "../../utils/utils.js";
-import "react";
-import "react/jsx-runtime";
-import "../../hooks/use-breakpoint.js";
-import "react-native";
-const s = l.Text(
-  ({ theme: { core: t }, smallAndUp: m }) => e`
-    font-size: ${o(t.fontSize.small[m ? "large" : "small"])};
-    line-height: ${o(
-    t.lineHeight.small[m ? "large" : "small"]
-  )};
-  `
-), S = i(s);
-export {
-  S as Small
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Small = void 0;
+var element_core_1 = require("@ovotech/element-core");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var StyledSmall = styled_native_1.default.Text(function (_a) {
+    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), (0, element_core_1.numToPx)(core.fontSize.small[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(core.lineHeight.small[smallAndUp ? 'large' : 'small']));
+});
+exports.Small = (0, utils_1.styledComponentWithBreakpoints)(StyledSmall);
+var templateObject_1;

package/dist/components/Small/index.js

@@ -1,11 +1,5 @@
-import { Small as f } from "./Small.js";
-import "../../utils-HsZygzDh.js";
-import "../../styled.native-KEscfVp7.js";
-import "react";
-import "../../utils/utils.js";
-import "react/jsx-runtime";
-import "../../hooks/use-breakpoint.js";
-import "react-native";
-export {
-  f as Small
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Small = void 0;
+var Small_1 = require("./Small");
+Object.defineProperty(exports, "Small", { enumerable: true, get: function () { return Small_1.Small; } });

package/dist/components/Spinner/Spinner.d.ts

@@ -1,5 +1,5 @@
-declare type SpinnerSize = 'large' | 'small';
-declare type SpinnerProps = {
+type SpinnerSize = 'large' | 'small';
+type SpinnerProps = {
     inverted?: boolean;
     size?: SpinnerSize | number;
     accessibilityLabel?: string;

package/dist/components/Spinner/Spinner.js

@@ -1,64 +1,71 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useContext as u, useEffect as h } from "react";
-import d, { useSharedValue as f, useAnimatedStyle as g, withRepeat as p, withTiming as v, Easing as w, cancelAnimation as $ } from "react-native-reanimated";
-import S, { Rect as x } from "react-native-svg";
-import { T as y } from "../../styled.native-KEscfVp7.js";
-const s = {
-  large: 65,
-  small: 32
-}, A = (t) => ({
-  viewBox: t * 1.25,
-  y: t / 3.5
-}), R = ({
-  inverted: t = !1,
-  size: o = "small",
-  accessibilityLabel: l = "Loading"
-}) => {
-  const { core: c } = u(y), r = f(0), m = g(() => ({
-    transform: [
-      // needed for correct 3d animation
-      { perspective: 1e3 },
-      {
-        rotateY: `${r.value}deg`
-      }
-    ]
-  }), [r.value]);
-  h(() => (r.value = p(
-    v(-360, {
-      duration: 2e3,
-      easing: w.linear
-    }),
-    200
-    // number of repeats, don't want to set infinite cause it might affect performance
-  ), () => $(r)), []);
-  const i = o in s ? s[o] : o, { viewBox: e, y: a } = A(i);
-  return /* @__PURE__ */ n(
-    d.View,
-    {
-      style: [{ width: e }, m],
-      accessible: !0,
-      accessibilityLabel: l,
-      children: /* @__PURE__ */ n(
-        S,
-        {
-          width: `${e}`,
-          height: `${e}`,
-          viewBox: `0 0 ${e} ${e}`,
-          children: /* @__PURE__ */ n(
-            x,
-            {
-              y: `${a}`,
-              width: `${i}`,
-              height: `${i}`,
-              transform: `rotate(-15 0 ${a})`,
-              fill: c.color.brand[t ? "white" : "ovo"]
-            }
-          )
-        }
-      )
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
-  );
+    Object.defineProperty(o, k2, desc);
+}) : (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;
 };
-export {
-  R as Spinner
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var styled_native_1 = require("../../styled.native");
+var semanticSizes = {
+    large: 65,
+    small: 32,
 };
+// based on values in the Figma `y` point is 3.5 times smaller side length, `viewBox` is 1.25 times larger side length
+var calculateSvgProps = function (size) {
+    return {
+        viewBox: size * 1.25,
+        y: size / 3.5,
+    };
+};
+var Spinner = function (_a) {
+    var _b = _a.inverted, inverted = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'small' : _c, _d = _a.accessibilityLabel, accessibilityLabel = _d === void 0 ? 'Loading' : _d;
+    var core = (0, react_1.useContext)(styled_native_1.ThemeContext).core;
+    var rotation = (0, react_native_reanimated_1.useSharedValue)(0);
+    var animatedStyles = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return {
+            transform: [
+                // needed for correct 3d animation
+                { perspective: 1000 },
+                {
+                    rotateY: "".concat(rotation.value, "deg"),
+                },
+            ],
+        };
+    }, [rotation.value]);
+    (0, react_1.useEffect)(function () {
+        // rotate svg from right to left on 360deg during 2 seconds and repeat that 200 times
+        rotation.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(-360, {
+            duration: 2000,
+            easing: react_native_reanimated_1.Easing.linear,
+        }), 200);
+        // cancel animation if component is unmounted
+        return function () { return (0, react_native_reanimated_1.cancelAnimation)(rotation); };
+    }, []);
+    var rectangleSize = size in semanticSizes ? semanticSizes[size] : size;
+    var _e = calculateSvgProps(rectangleSize), viewBox = _e.viewBox, y = _e.y;
+    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [{ width: viewBox }, animatedStyles], accessible: true, accessibilityLabel: accessibilityLabel, children: (0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: "".concat(viewBox), height: "".concat(viewBox), viewBox: "0 0 ".concat(viewBox, " ").concat(viewBox), children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Rect, { y: "".concat(y), width: "".concat(rectangleSize), height: "".concat(rectangleSize), transform: "rotate(-15 0 ".concat(y, ")"), fill: core.color.brand[inverted ? 'white' : 'ovo'] }) }) }));
+};
+exports.Spinner = Spinner;

package/dist/components/Spinner/index.js

@@ -1,9 +1,5 @@
-import { Spinner as n } from "./Spinner.js";
-import "react/jsx-runtime";
-import "react";
-import "react-native-reanimated";
-import "react-native-svg";
-import "../../styled.native-KEscfVp7.js";
-export {
-  n as Spinner
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+var Spinner_1 = require("./Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });

package/dist/components/Stack/Stack.d.ts

@@ -1,7 +1,7 @@
 import { SpaceKey } from '@ovotech/element-core';
 import { ReactNode } from 'react';
 import { ViewProps } from 'react-native';
-declare type Props = ViewProps & {
+type Props = ViewProps & {
     spaceBetween: SpaceKey | SpaceKey[];
     children: ReactNode;
 };

package/dist/components/Stack/Stack.js

@@ -1,31 +1,49 @@
-import { jsx as i } from "react/jsx-runtime";
-import { n as a } from "../../utils-HsZygzDh.js";
-import { Children as s } from "react";
-import { View as c } from "react-native";
-import { s as f } from "../../styled.native-KEscfVp7.js";
-import { responsiveStyle as l, styledComponentWithBreakpoints as d } from "../../utils/utils.js";
-import "../../hooks/use-breakpoint.js";
-const V = ({ children: o, spaceBetween: e, ...m }) => {
-  const r = [];
-  return s.forEach(o, (t) => {
-    t != null && r.push(t);
-  }), /* @__PURE__ */ i(c, { ...m, children: s.map(
-    r,
-    (t, n) => n === 0 ? t : /* @__PURE__ */ i(k, { spaceBetween: e, children: t })
-  ) });
-}, h = f.View(
-  ({
-    theme: {
-      core: { space: o }
-    },
-    spaceBetween: e,
-    smallAndUp: m,
-    mediumAndUp: r,
-    largeAndUp: t
-  }) => l("margin-top", e, { smallAndUp: m, mediumAndUp: r, largeAndUp: t }, (p) => a(o[p]))
-), k = d(
-  h
-);
-export {
-  V as Stack
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+var utils_1 = require("../../utils");
+var Stack = function (_a) {
+    var children = _a.children, spaceBetween = _a.spaceBetween, rest = __rest(_a, ["children", "spaceBetween"]);
+    var validChildren = (0, utils_1.getValidChildren)(children);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({}, rest, { children: react_1.Children.map(validChildren, function (child, index) {
+            return index === 0 ? (child) : ((0, jsx_runtime_1.jsx)(StackItem, { spaceBetween: spaceBetween, children: child }));
+        }) })));
+};
+exports.Stack = Stack;
+var StyledStackItem = styled_native_1.default.View(function (_a) {
+    var space = _a.theme.core.space, spaceBetween = _a.spaceBetween, smallAndUp = _a.smallAndUp, mediumAndUp = _a.mediumAndUp, largeAndUp = _a.largeAndUp;
+    var formatter = function (spaceKey) { return (0, element_core_1.numToPx)(space[spaceKey]); };
+    var breakpoints = { smallAndUp: smallAndUp, mediumAndUp: mediumAndUp, largeAndUp: largeAndUp };
+    return (0, utils_1.responsiveStyle)('margin-top', spaceBetween, breakpoints, formatter);
+});
+var StackItem = (0, utils_1.styledComponentWithBreakpoints)(StyledStackItem);

package/dist/components/Stack/index.js

@@ -1,11 +1,5 @@
-import { Stack as f } from "./Stack.js";
-import "react/jsx-runtime";
-import "../../utils-HsZygzDh.js";
-import "react";
-import "react-native";
-import "../../styled.native-KEscfVp7.js";
-import "../../utils/utils.js";
-import "../../hooks/use-breakpoint.js";
-export {
-  f as Stack
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = void 0;
+var Stack_1 = require("./Stack");
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return Stack_1.Stack; } });

package/dist/components/Stretch/Stretch.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { ViewProps } from 'react-native';
 export declare const Stretch: (props: ViewProps & {
-    fullWidth: 'always' | 'never' | 'small';
+    fullWidth?: boolean;
     defaultWidth: string;
     children: ReactNode;
 }) => JSX.Element;

package/dist/components/Stretch/Stretch.js

@@ -1,12 +1,56 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import { useBreakpoint as m } from "../../hooks/use-breakpoint.js";
-import { s } from "../../styled.native-KEscfVp7.js";
-import "react-native";
-const i = s.View(({ smallAndUp: r, fullWidth: t, defaultWidth: o }) => r && t === "small" || t === "never" ? `width: ${o};` : "width: 100%;"), l = (r) => {
-  const { smallAndUp: t } = m();
-  return /* @__PURE__ */ e(i, { smallAndUp: t, ...r });
-};
-export {
-  l as Stretch
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stretch = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var hooks_1 = require("../../hooks");
+var styled_native_1 = __importStar(require("../../styled.native"));
+var StyledStretch = styled_native_1.default.View(
+// full width on small, default width on tablet or if fullWidth is false
+function (_a) {
+    var smallAndUp = _a.smallAndUp, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, defaultWidth = _a.defaultWidth;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n  "], ["\n    width: ", ";\n  "])), !fullWidth || smallAndUp ? defaultWidth : '100%');
+});
+var Stretch = function (props) {
+    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
+    return (0, jsx_runtime_1.jsx)(StyledStretch, __assign({ smallAndUp: smallAndUp }, props));
+};
+exports.Stretch = Stretch;
+var templateObject_1;

package/dist/components/Stretch/index.js

@@ -1,9 +1,17 @@
-import { Stretch as c } from "./Stretch.js";
-import "react/jsx-runtime";
-import "react";
-import "../../hooks/use-breakpoint.js";
-import "react-native";
-import "../../styled.native-KEscfVp7.js";
-export {
-  c as Stretch
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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);
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Stretch"), exports);

package/dist/components/Strong/Strong.d.ts

@@ -357,6 +357,8 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             secondary: {
                 message: string;
@@ -367,6 +369,8 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             destructive: {
                 message: string;
@@ -377,6 +381,8 @@ export declare const Strong: import("styled-components").StyledComponent<typeof
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
         };
         heading1: {