@ovotech/element-native 5.5.0 → 5.7.0

package/dist/components/SelectField/Select.js

@@ -1,134 +1,34 @@
 "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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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 });
 exports.Select = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const element_core_1 = require("@ovotech/element-core");
 const lodash_groupby_1 = __importDefault(require("lodash.groupby"));
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const styled_native_1 = __importStar(require("../../styled.native"));
 const Icon_1 = require("../Icon");
 const P_1 = require("../P");
 const Strong_1 = require("../Strong");
-const SelectInput = styled_native_1.default.TouchableOpacity(({ theme, hasError }) => {
-    return (0, styled_native_1.css) `
-      flex-direction: row;
-      align-items: center;
-      background-color: transparent;
-      border-color: ${hasError
-        ? theme.input.color.borderError
-        : theme.input.color.border};
-      border-width: ${(0, element_core_1.numToPx)(theme.border.width.md)};
-      border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.sm)};
-      padding: ${(0, element_core_1.numToPx)(theme.space[200])};
-      padding-right: ${(0, element_core_1.numToPx)(theme.space[350])};
-      height: ${(0, element_core_1.numToPx)(theme.space[1100])};
-    `;
-});
-const DropdownWrapper = styled_native_1.default.TouchableOpacity(({ theme }) => (0, styled_native_1.css) `
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-
-    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
-    background-color: ${theme.color.brand.dark}80;
-  `);
-const DropdownContainer = (0, styled_native_1.default)(react_native_safe_area_context_1.SafeAreaView)(({ theme }) => (0, styled_native_1.css) `
-    width: 95%;
-    max-height: 70%;
-    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.sm)};
-    background-color: ${theme.color.surface.bright};
-  `);
-const SelectOption = styled_native_1.default.TouchableOpacity(({ theme, isLastOption }) => (0, styled_native_1.css) `
-    flex-direction: row;
-    align-items: center;
-    border-bottom-color: ${theme.color.input.borderDim};
-    border-bottom-width: ${isLastOption ? 0 : 1}px;
-    padding: 0 ${(0, element_core_1.numToPx)(theme.space[400])};
-  `);
-const Radio = styled_native_1.default.View(({ theme, isChecked }) => (0, styled_native_1.css) `
-    background-color: ${isChecked
-    ? theme.input.color.selectedTint
-    : 'transparent'};
-    width: ${(0, element_core_1.numToPx)(theme.space[600])};
-    height: ${(0, element_core_1.numToPx)(theme.space[600])};
-    margin-left: auto;
-    border-radius: ${(0, element_core_1.numToPx)(theme.space[600])};
-    border-width: ${(0, element_core_1.numToPx)(theme.border.width.md)};
-    border-color: ${theme.input.color[isChecked ? 'selected' : 'border']};
-  `);
-const RadioDot = styled_native_1.default.View(({ theme, isChecked }) => (0, styled_native_1.css) `
-    background-color: ${theme.input.color.selected};
-    position: absolute;
-    top: ${(0, element_core_1.numToPx)(theme.space[100])};
-    width: ${(0, element_core_1.numToPx)(theme.space[300])};
-    height: ${(0, element_core_1.numToPx)(theme.space[300])};
-    border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
-    align-self: center;
-    opacity: ${isChecked ? 1 : 0};
-  `);
-const StyledP = (0, styled_native_1.default)(P_1.P)(({ theme }) => (0, styled_native_1.css) `
-    margin-top: ${(0, element_core_1.numToPx)(theme.space[300])};
-    margin-bottom: ${(0, element_core_1.numToPx)(theme.space[300])};
-  `);
-const StyledCategory = (0, styled_native_1.default)(P_1.P)(({ theme }) => (0, styled_native_1.css) `
-    font-size: ${(0, element_core_1.numToPx)(theme.font.size.xs.mediaQuery.lg)};
-    color: ${theme.color.surface.onSurface};
-    background-color: ${theme.color.surface.surface};
-    padding: ${(0, element_core_1.numToPx)(theme.space[100])} ${(0, element_core_1.numToPx)(theme.space[400])};
-  `);
-const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', ref, }) => {
+const styled_1 = require("./styled");
+const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, selected, size = 'medium', testID = 'select', ref, }) => {
     const [isOpen, setOpen] = (0, react_1.useState)(false);
-    const [selected, setSelected] = (0, react_1.useState)(defaultSelected);
+    const [selectedVal, setSelectedVal] = (0, react_1.useState)(defaultSelected);
+    const isSmall = size === 'small';
+    const iconName = `chevron-down${isSmall ? '-small' : ''}`;
     const height = react_native_1.Dimensions.get('window').height;
     const dropdownContainerMaxHeight = height * 0.7;
     const handleOptionPress = (val) => {
         onSelected(val);
         setOpen(false);
-        setSelected(val);
+        setSelectedVal(val);
     };
     const optionsByCategories = (0, lodash_groupby_1.default)(options, 'category');
     const requiredOption = {
         label: `-- ${noOptionMessage} --`,
         value: 'default',
     };
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), ref: ref, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { onPress: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [(0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => ((0, jsx_runtime_1.jsxs)(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, { isChecked: selected.value === option.value, children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(styled_1.SelectInput, { testID: testID, hasError: hasError, isSelected: selected, size: size, onPress: () => setOpen(!isOpen), ref: ref, children: [(0, jsx_runtime_1.jsx)(P_1.P, { style: { marginTop: 0, marginBottom: 0 }, children: selectedVal.value === 'default' ? '' : selectedVal.label }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: iconName, size: isSmall ? 16 : 20, style: { marginLeft: 'auto' } })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(styled_1.DropdownWrapper, { onPress: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(styled_1.DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [(0, jsx_runtime_1.jsxs)(styled_1.SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [(0, jsx_runtime_1.jsx)(styled_1.StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(styled_1.Radio, { isChecked: selectedVal.value === requiredOption.value, children: (0, jsx_runtime_1.jsx)(styled_1.RadioDot, { isChecked: selectedVal.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(styled_1.StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => ((0, jsx_runtime_1.jsxs)(styled_1.SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [(0, jsx_runtime_1.jsx)(styled_1.StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(styled_1.Radio, { isChecked: selectedVal.value === option.value, children: (0, jsx_runtime_1.jsx)(styled_1.RadioDot, { isChecked: selectedVal.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
 };
 exports.Select = Select;

package/dist/components/SelectField/SelectField.d.ts

@@ -3,8 +3,8 @@ import { TouchableOpacityProps } from 'react-native';
 import { FieldProps } from '../Field';
 import { SelectProps } from './Select';
 type SelectFieldProps = SelectProps & Omit<FieldProps, 'children'> & {
-    testID?: string;
     ref?: RefObject<TouchableOpacityProps | null>;
+    testID?: string;
 };
-export declare const SelectField: ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ref, ...rest }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectField: ({ error, options, onSelected, noOptionMessage, defaultSelected, size, testID, ref, ...rest }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectField/SelectField.js

@@ -16,7 +16,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const Field_1 = require("../Field");
 const Select_1 = require("./Select");
 const SelectField = (_a) => {
-    var { error, options, onSelected, noOptionMessage, defaultSelected, testID, ref } = _a, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "testID", "ref"]);
-    return ((0, jsx_runtime_1.jsx)(Field_1.Field, Object.assign({ affixWidth: 20, error: error }, rest, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID, ref: ref }) }) })));
+    var { error, options, onSelected, noOptionMessage, defaultSelected, size = 'medium', testID, ref } = _a, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "size", "testID", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(Field_1.Field, Object.assign({ affixWidth: 20, error: error }, rest, { children: (0, jsx_runtime_1.jsx)(Select_1.Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), size: size, testID: testID, ref: ref }) })));
 };
 exports.SelectField = SelectField;

package/dist/components/SelectField/styled.d.ts

@@ -0,0 +1,26 @@
+import { SelectProps } from './Select';
+export declare const SelectInput: import("styled-components").StyledComponent<typeof import("react-native").TouchableOpacity, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, Pick<SelectProps, "size"> & {
+    hasError: boolean;
+    isSelected?: boolean;
+}, never>;
+export declare const DropdownWrapper: import("styled-components").StyledComponent<typeof import("react-native").TouchableOpacity, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const DropdownContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-native-safe-area-context").NativeSafeAreaViewProps & import("react").RefAttributes<import("react").Component<import("react-native-safe-area-context/lib/typescript/src/specs/NativeSafeAreaView").NativeProps, {}, any> & import("react-native").NativeMethods>>, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const SelectOption: import("styled-components").StyledComponent<typeof import("react-native").TouchableOpacity, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isLastOption: boolean;
+}, never>;
+export declare const Radio: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isChecked: boolean;
+}, never>;
+export declare const RadioDot: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isChecked: boolean;
+}, never>;
+export declare const StyledP: import("styled-components").StyledComponent<(props: import("react-native").TextProps & {
+    inverted?: boolean;
+    ref?: React.Ref<import("react-native").Text>;
+    size?: "xl" | "lg" | "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const StyledCategory: import("styled-components").StyledComponent<(props: import("react-native").TextProps & {
+    inverted?: boolean;
+    ref?: React.Ref<import("react-native").Text>;
+    size?: "xl" | "lg" | "sm" | "md";
+}) => import("react/jsx-runtime").JSX.Element, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;

package/dist/components/SelectField/styled.js

@@ -0,0 +1,118 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCategory = exports.StyledP = exports.RadioDot = exports.Radio = exports.SelectOption = exports.DropdownContainer = exports.DropdownWrapper = exports.SelectInput = void 0;
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const styled_native_1 = __importStar(require("../../styled.native"));
+const theme_1 = require("../../theme");
+const utils_1 = require("../../utils");
+const P_1 = require("../P");
+exports.SelectInput = styled_native_1.default.TouchableOpacity(({ theme, hasError, isSelected, size }) => {
+    const isSmall = size === 'small';
+    let borderColor = 'transparent';
+    /* prioritise error and selected states for border, even when focused */
+    if (hasError) {
+        borderColor = theme.color.alert.error;
+    }
+    else if (isSelected) {
+        borderColor = theme.color.surface.onSurface;
+    }
+    return (0, styled_native_1.css) `
+    flex-direction: row;
+    align-items: center;
+    background-color: ${theme.color.surface.bright};
+    border-color: ${borderColor};
+    border-width: ${(0, theme_1.numToPx)(theme.border.width.md)};
+    border-radius: ${(0, theme_1.numToPx)(theme.border.radius.md)};
+    padding-top: ${(0, theme_1.numToPx)(theme.space[isSmall ? 200 : 400])};
+    padding-bottom: ${(0, theme_1.numToPx)(theme.space[isSmall ? 200 : 400])};
+    padding-left: ${(0, theme_1.numToPx)(theme.space[400])};
+    padding-right: ${(0, theme_1.numToPx)(theme.space[400])};
+    min-height: ${(0, theme_1.numToPx)(theme.space[isSmall ? 1100 : 1600])};
+    ${(0, utils_1.getShadowCSS)({ theme })}
+  `;
+});
+exports.DropdownWrapper = styled_native_1.default.TouchableOpacity(({ theme }) => (0, styled_native_1.css) `
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+
+    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
+    background-color: ${theme.color.brand.dark}80;
+  `);
+exports.DropdownContainer = (0, styled_native_1.default)(react_native_safe_area_context_1.SafeAreaView)(({ theme }) => (0, styled_native_1.css) `
+    width: 95%;
+    max-height: 70%;
+    border-radius: ${(0, theme_1.numToPx)(theme.border.radius.md)};
+    background-color: ${theme.color.surface.bright};
+  `);
+exports.SelectOption = styled_native_1.default.TouchableOpacity(({ theme, isLastOption }) => (0, styled_native_1.css) `
+    flex-direction: row;
+    align-items: center;
+    border-bottom-color: ${theme.color.input.borderDim};
+    border-bottom-width: ${isLastOption ? 0 : 1}px;
+    padding: 0 ${(0, theme_1.numToPx)(theme.space[400])};
+  `);
+exports.Radio = styled_native_1.default.View(({ theme, isChecked }) => (0, styled_native_1.css) `
+    background-color: ${isChecked
+    ? theme.input.color.selectedTint
+    : 'transparent'};
+    width: ${(0, theme_1.numToPx)(theme.space[600])};
+    height: ${(0, theme_1.numToPx)(theme.space[600])};
+    margin-left: auto;
+    border-radius: ${(0, theme_1.numToPx)(theme.space[600])};
+    border-width: ${(0, theme_1.numToPx)(theme.border.width.md)};
+    border-color: ${theme.input.color[isChecked ? 'selected' : 'border']};
+  `);
+exports.RadioDot = styled_native_1.default.View(({ theme, isChecked }) => (0, styled_native_1.css) `
+    background-color: ${theme.input.color.selected};
+    position: absolute;
+    top: ${(0, theme_1.numToPx)(theme.space[100])};
+    width: ${(0, theme_1.numToPx)(theme.space[300])};
+    height: ${(0, theme_1.numToPx)(theme.space[300])};
+    border-radius: ${(0, theme_1.numToPx)(theme.space[300])};
+    align-self: center;
+    opacity: ${isChecked ? 1 : 0};
+  `);
+exports.StyledP = (0, styled_native_1.default)(P_1.P)(({ theme }) => (0, styled_native_1.css) `
+    margin-top: ${(0, theme_1.numToPx)(theme.space[300])};
+    margin-bottom: ${(0, theme_1.numToPx)(theme.space[300])};
+  `);
+exports.StyledCategory = (0, styled_native_1.default)(P_1.P)(({ theme }) => (0, styled_native_1.css) `
+    font-size: ${(0, theme_1.numToPx)(theme.font.size.xs.mediaQuery.lg)};
+    color: ${theme.color.surface.onSurface};
+    background-color: ${theme.color.surface.surface};
+    padding: ${(0, theme_1.numToPx)(theme.space[100])} ${(0, theme_1.numToPx)(theme.space[400])};
+  `);

package/dist/components/SkeletonText/SkeletonText.js

@@ -21,10 +21,10 @@ const hooks_1 = require("../../hooks");
 const styled_native_1 = __importDefault(require("../../styled.native"));
 const P_1 = require("../P");
 const SkeletonAnimation_1 = require("../SkeletonAnimation");
-const StyledSkeletonText = styled_native_1.default.View(({ theme, aboveSmallBreakpoint, short, size, lines = 1 }) => {
+const StyledSkeletonText = styled_native_1.default.View(({ theme, aboveSmallBreakpoint, short, size, isLast }) => {
     return `
     background-color: ${theme.color.surface.dim};
-    margin-bottom: ${lines > 1 ? (0, element_core_1.numToPx)(theme.space[200]) : 0};
+    margin-bottom: ${isLast ? 0 : (0, element_core_1.numToPx)(theme.space[200])};
     border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.sm)};
     height: ${aboveSmallBreakpoint
         ? (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.lg)
@@ -37,9 +37,9 @@ const SkeletonText = (_a) => {
     var { lines = 1, size } = _a, rest = __rest(_a, ["lines", "size"]);
     const generatedLines = [];
     const { smallAndUp } = (0, hooks_1.useBreakpoint)();
-    const hasMultipleLines = lines > 1;
     for (let i = 1; i <= lines; i++) {
-        generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: hasMultipleLines && i === lines, aboveSmallBreakpoint: smallAndUp, size: size }, `line-${i}`));
+        const isLast = i === lines;
+        generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: lines > 1 && isLast, aboveSmallBreakpoint: smallAndUp, size: size, isLast: isLast }, `line-${i}`));
     }
     return (
     // @ts-ignore styled components stuff