@utilitywarehouse/hearth-react-native 0.35.7 → 0.35.9

package/build/components/ExpandableCard/ExpandableCardGroup.figma.js

@@ -0,0 +1,55 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7222-7221&m=dev
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/ExpandableCard/ExpandableCardGroup.tsx
+// component=ExpandableCardGroup
+import figma from 'figma';
+const sectionHeader = figma.selectedInstance.getBoolean('Section header?', {
+    true: (function () {
+        const nestedLayer0 = figma.selectedInstance.findInstance('Section Header');
+        return {
+            heading: nestedLayer0.type !== 'ERROR' ? nestedLayer0.getString('Heading') : undefined,
+            helperText: nestedLayer0.type !== 'ERROR'
+                ? nestedLayer0.getBoolean('Helper text?', {
+                    true: nestedLayer0.getString('Helper text'),
+                })
+                : undefined,
+            trailingContent: nestedLayer0.type !== 'ERROR'
+                ? nestedLayer0.getBoolean('Trailing content?', {
+                    true: (function () {
+                        const nestedLayer1 = figma.selectedInstance.findInstance('Trailing content');
+                        return {
+                            headerTrailingContent: nestedLayer1.type !== 'ERROR'
+                                ? nestedLayer1.getInstanceSwap('Variant')?.executeTemplate().example
+                                : undefined,
+                        };
+                    })(),
+                })
+                : undefined,
+            invalidText: nestedLayer0.type !== 'ERROR'
+                ? nestedLayer0.getEnum('State', {
+                    Invalid: (function () {
+                        const nestedLayer2 = figma.selectedInstance.findInstance('Validation Text');
+                        return {
+                            invalidText: nestedLayer2.type !== 'ERROR' ? nestedLayer2.getString('Text') : undefined,
+                        };
+                    })(),
+                })
+                : undefined,
+        };
+    })(),
+});
+const cardLayers = figma.selectedInstance.findConnectedInstances(n => n.hasCodeConnect());
+const cards = cardLayers.map(layer => layer.executeTemplate().example) ?? [];
+export default {
+    id: 'ExpandableCardGroup',
+    imports: ["import { ExpandableCardGroup } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<ExpandableCardGroup${figma.helpers.react.renderProp('heading', sectionHeader?.heading)}${figma.helpers.react.renderProp('helperText', sectionHeader?.helperText)}${figma.helpers.react.renderProp('headerTrailingContent', sectionHeader?.trailingContent?.headerTrailingContent)}${figma.helpers.react.renderProp('invalidText', sectionHeader?.invalidText?.invalidText)}>
+        ${figma.helpers.react.renderChildren(cards.flat())}
+      </ExpandableCardGroup>`,
+    metadata: {
+        nestable: true,
+        props: {
+            sectionHeader,
+            cards,
+        },
+    },
+};

package/build/components/ExpandableCard/ExpandableCardTriggerRoot.js

@@ -56,6 +56,10 @@ const styles = StyleSheet.create(theme => ({
                 },
                 false: {
                     _web: {
+                        '_focus-visible': {
+                            ...theme.helpers.focusVisible,
+                            outlineOffset: -theme.space[100],
+                        },
                         _hover: {
                             backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
                         },

package/build/components/FormField/FormField.figma.d.ts

@@ -0,0 +1,15 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            label: any;
+            required: boolean;
+            helperText: any;
+        };
+    };
+};
+export default _default;

package/build/components/FormField/FormField.figma.js

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8364%3A1546
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/FormField/FormField.tsx
+// component=FormField
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const labelInstance = instance.findInstance('Label');
+// @ts-expect-error - findInstance returns ErrorHandle | InstanceHandle, but we know it will be InstanceHandle in practice
+const label = labelInstance?.getString('Label');
+// @ts-expect-error - findInstance returns ErrorHandle | InstanceHandle, but we know it will be InstanceHandle in practice
+const required = !labelInstance?.getBoolean('Optional?');
+const showHelperText = instance.getBoolean('Helper text?');
+const helperTextInstance = instance.findInstance('Helper Text');
+// @ts-expect-error - findInstance returns ErrorHandle | InstanceHandle, but we know it will be InstanceHandle in practice
+const helperText = showHelperText ? helperTextInstance?.getString('Helper text') : undefined;
+export default {
+    id: 'formfield',
+    imports: ['import { FormField } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<FormField${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('required', required)}${figma.helpers.react.renderProp('helperText', helperText)} />`,
+    metadata: {
+        nestable: true,
+        props: {
+            label,
+            required,
+            helperText,
+        },
+    },
+};

package/build/components/Helper/HelperText.figma.d.ts

@@ -0,0 +1,13 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            helperText: string;
+        };
+    };
+};
+export default _default;

package/build/components/Helper/HelperText.figma.js

@@ -0,0 +1,12 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8364%3A1538
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Helper/HelperText.tsx
+// component=HelperText
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const helperText = instance.getString('Helper text');
+export default {
+    id: 'helper-text',
+    imports: ['import { HelperText } from "@utilitywarehouse/hearth-react-native";'],
+    example: figma.code `<HelperText>${figma.helpers.react.renderChildren(helperText)}</HelperText>`,
+    metadata: { nestable: true, props: { helperText } },
+};

package/build/components/HighlightBanner/HighlightBanner.figma.d.ts

@@ -0,0 +1,19 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            heading: string;
+            description: string;
+            showImage: boolean;
+            image: string | figma.ResultSection[];
+            headingColor: string | undefined;
+            link: figma.ResultSection[] | undefined;
+            button: figma.ResultSection[] | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/HighlightBanner/HighlightBanner.figma.js

@@ -0,0 +1,45 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=8306-4665&t=3uUSBVdxldgG5uz3-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/HighlightBanner/HighlightBanner.tsx
+// component=HighlightBanner
+import figma from 'figma';
+const heading = figma.selectedInstance.getString('Heading');
+const description = figma.selectedInstance.getString('Description');
+const showImage = figma.selectedInstance.getBoolean('Image?');
+const imageSlot = figma.selectedInstance.getSlot('Image');
+const image = showImage && imageSlot?.connectedInstances[0]
+    ? imageSlot.connectedInstances[0].executeTemplate().example
+    : '';
+const headingColor = figma.selectedInstance.getEnum('Heading color', {
+    Highlight: 'highlight',
+    Pig: 'pig',
+    Energy: 'energy',
+    Broadband: 'broadband',
+    Insurance: 'insurance',
+    Cashback: 'cashback',
+    Mobile: 'mobile',
+});
+const showLink = figma.selectedInstance.getBoolean('Link?');
+const linkInstance = figma.selectedInstance.findInstance('Link');
+const link = showLink && linkInstance.type !== 'ERROR' ? linkInstance.executeTemplate().example : undefined;
+const showButton = figma.selectedInstance.getBoolean('Button?');
+const buttonInstance = figma.selectedInstance.findInstance('Button');
+const button = showButton && buttonInstance.type !== 'ERROR'
+    ? buttonInstance.executeTemplate().example
+    : undefined;
+export default {
+    id: 'HighlightBanner',
+    imports: ["import { HighlightBanner } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<HighlightBanner${figma.helpers.react.renderProp('heading', heading)}${figma.helpers.react.renderProp('description', description)}${figma.helpers.react.renderProp('image', image)}${figma.helpers.react.renderProp('headingColor', headingColor)}${figma.helpers.react.renderProp('link', link)}${figma.helpers.react.renderProp('button', button)} />`,
+    metadata: {
+        nestable: true,
+        props: {
+            heading,
+            description,
+            showImage,
+            image,
+            headingColor,
+            link,
+            button,
+        },
+    },
+};

package/build/components/IconButton/IconButton.figma.d.ts

@@ -0,0 +1,22 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            disabled: boolean | undefined;
+            size: string | undefined;
+            colorScheme: string | undefined;
+            loading: boolean | undefined;
+            icon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+            variant: string | undefined;
+            inverted: boolean;
+        };
+    };
+};
+export default _default;

package/build/components/IconButton/IconButton.figma.js

@@ -0,0 +1,47 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A1455
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/IconButton/IconButton.tsx
+// component=IconButton
+import figma from 'figma';
+const disabled = figma.selectedInstance.getEnum('State', {
+    Disabled: true,
+});
+const size = figma.selectedInstance.getEnum('Size', {
+    'SM-32': 'sm',
+    'MD-48': 'md',
+});
+const colorScheme = figma.selectedInstance.getEnum('Color Scheme', {
+    Affirmative: 'affirmative',
+    Destructive: 'destructive',
+    Functional: 'functional',
+    Highlight: 'highlight',
+});
+const loading = figma.selectedInstance.getEnum('State', {
+    Loading: true,
+});
+const iconName = (size === 'sm'
+    ? figma.selectedInstance.getInstanceSwap('Icon-20')?.executeTemplate().metadata?.props
+        ?.componentName
+    : figma.selectedInstance.getInstanceSwap('Icon-24')?.executeTemplate().metadata?.props
+        ?.componentName);
+const icon = iconName ? figma.helpers.react.reactComponent(iconName) : undefined;
+const variant = figma.selectedInstance.getEnum('Variant', {
+    Emphasis: 'emphasis',
+    Solid: 'solid',
+    Outline: 'outline',
+    Ghost: 'ghost',
+});
+const inverted = figma.selectedInstance.getBoolean('Inverted?');
+export default {
+    id: 'IconButton',
+    imports: [
+        "import { IconButton } from '@utilitywarehouse/hearth-react-native';",
+        ...(iconName
+            ? [`import { ${iconName} } from '@utilitywarehouse/hearth-react-native-icons';`]
+            : []),
+    ],
+    example: figma.code `<IconButton${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('size', size)}${figma.helpers.react.renderProp('variant', variant)}${figma.helpers.react.renderProp('inverted', inverted)}${figma.helpers.react.renderProp('colorScheme', colorScheme)}${figma.helpers.react.renderProp('loading', loading)}${figma.helpers.react.renderProp('icon', icon)}/>`,
+    metadata: {
+        nestable: true,
+        props: { disabled, size, colorScheme, loading, icon, variant, inverted },
+    },
+};

package/build/components/IconContainer/IconContainer.figma.d.ts

@@ -0,0 +1,20 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            size: string | undefined;
+            radiusNone: boolean;
+            variant: string | undefined;
+            color: string | undefined;
+            icon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/IconContainer/IconContainer.figma.js

@@ -0,0 +1,43 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=5462%3A9728
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/IconContainer/IconContainer.tsx
+// component=IconContainer
+import figma from 'figma';
+const size = figma.selectedInstance.getEnum('Size', {
+    'SM-32': 'sm',
+    'MD-48': 'md',
+    'LG-64': 'lg',
+});
+const radiusNone = figma.selectedInstance.getBoolean('Radius None?');
+const variant = figma.selectedInstance.getEnum('Variant', {
+    Subtle: 'subtle',
+    Emphasis: 'emphasis',
+});
+const color = figma.selectedInstance.getEnum('Color', {
+    Pig: 'pig',
+    Energy: 'energy',
+    Broadband: 'broadband',
+    Mobile: 'mobile',
+    Insurance: 'insurance',
+    Cashback: 'cashback',
+    Highlight: 'highlight',
+});
+const iconName = (size === 'sm'
+    ? figma.selectedInstance.getInstanceSwap('Icon-20')?.executeTemplate().metadata?.props
+        ?.componentName
+    : figma.selectedInstance.getInstanceSwap('Icon-24')?.executeTemplate().metadata?.props
+        ?.componentName);
+const icon = iconName ? figma.helpers.react.reactComponent(iconName) : undefined;
+export default {
+    id: 'icon-container',
+    imports: [
+        "import { IconContainer } from '@utilitywarehouse/hearth-react-native';",
+        ...(iconName
+            ? [`import { ${iconName} } from '@utilitywarehouse/hearth-react-native-icons';`]
+            : []),
+    ],
+    example: figma.code `<IconContainer${figma.helpers.react.renderProp('icon', icon)}${figma.helpers.react.renderProp('size', size)}${figma.helpers.react.renderProp('radiusNone', radiusNone)}${figma.helpers.react.renderProp('variant', variant)}${figma.helpers.react.renderProp('color', color)}/>`,
+    metadata: {
+        nestable: true,
+        props: { size, radiusNone, variant, color, icon },
+    },
+};

package/build/components/IndicatorIconButton/IndicatorIconButton.figma.d.ts

@@ -0,0 +1,17 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            indicator: boolean;
+            icon: {
+                $value: string;
+                $type: "react-component";
+            } | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/IndicatorIconButton/IndicatorIconButton.figma.js

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6778-10672&t=3uUSBVdxldgG5uz3-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/IndicatorIconButton/IndicatorIconButton.tsx
+// component=IndicatorIconButton
+import figma from 'figma';
+const indicator = figma.selectedInstance.getBoolean('Indicator?');
+const iconName = (function () {
+    const nestedLayer0 = figma.selectedInstance.findInstance('Icon Button/Unstyled');
+    return nestedLayer0.type !== 'ERROR'
+        ? nestedLayer0.getInstanceSwap('Icon-24')?.executeTemplate().metadata?.props?.componentName
+        : undefined;
+})();
+const icon = iconName ? figma.helpers.react.reactComponent(iconName) : undefined;
+export default {
+    id: 'IndicatorIconButton',
+    imports: [
+        "import { IndicatorIconButton } from '@utilitywarehouse/hearth-react-native';",
+        ...(iconName
+            ? [`import { ${iconName} } from '@utilitywarehouse/hearth-react-native-icons';`]
+            : []),
+    ],
+    example: figma.code `<IndicatorIconButton${figma.helpers.react.renderProp('icon', icon)}${figma.helpers.react.renderProp('indicator', indicator)} />`,
+    metadata: { nestable: true, props: { indicator, icon } },
+};

package/build/components/InlineLink/InlineLink.d.ts

@@ -1,6 +1,6 @@
 import type { InlineLinkProps } from './InlineLink.props';
 declare const InlineLink: {
-    ({ children, disabled, target, ...props }: InlineLinkProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, disabled, target, rel, ...props }: InlineLinkProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default InlineLink;

package/build/components/InlineLink/InlineLink.js

@@ -5,9 +5,14 @@ const InlineLinkComponent = createLink({
     Root: InlineLinkRoot,
     Text: () => null,
 });
-const InlineLink = ({ children, disabled = false, target = '_self', ...props }) => {
+const InlineLink = ({ children, disabled = false, target = '_self', rel, ...props }) => {
     const InlineLinkAny = InlineLinkComponent;
-    return (_jsx(InlineLinkAny, { ...props, isDisabled: disabled, isExternal: target === '_blank', children: children }));
+    // `@gluestack-ui/link`'s `useLink` only ever applies `target`/`rel` via a ref
+    // mutation during render, before the ref is attached at commit - it never
+    // takes effect. Pass them through explicitly instead; InlineLinkRoot forwards
+    // them to the underlying Text as `hrefAttrs`, which is how react-native-web
+    // actually applies them to the rendered `<a>`.
+    return (_jsx(InlineLinkAny, { ...props, target: target, rel: rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined), isDisabled: disabled, isExternal: target === '_blank', children: children }));
 };
 InlineLink.displayName = 'InlineLink';
 export default InlineLink;

package/build/components/InlineLink/InlineLink.props.d.ts

@@ -2,6 +2,8 @@ import { TextProps } from 'react-native';
 export interface InlineLinkProps extends TextProps {
     href?: string;
     target?: '_blank' | '_self' | '_parent' | '_top';
+    /** Defaults to `noopener noreferrer` when `target` is `_blank`. */
+    rel?: string;
     inverted?: boolean;
     disabled?: boolean;
 }

package/build/components/InlineLink/InlineLinkRoot.d.ts

@@ -1,6 +1,6 @@
 import InlineLinkProps from './InlineLink.props';
 declare const InlineLinkRoot: {
-    ({ children, inverted, states, ...props }: InlineLinkProps & {
+    ({ children, inverted, states, target, rel, ...props }: InlineLinkProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

package/build/components/InlineLink/InlineLinkRoot.js

@@ -1,13 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Text } from 'react-native';
+import { Platform, Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { InlineLinkContext } from './InlineLink.context';
-const InlineLinkRoot = ({ children, inverted = false, states, ...props }) => {
+const InlineLinkRoot = ({ children, inverted = false, states, target, rel, ...props }) => {
     const { active, disabled = false } = states || {};
     styles.useVariants({ disabled, inverted, active });
     const value = useMemo(() => ({ inverted, disabled, active }), [inverted, disabled, active]);
-    return (_jsx(InlineLinkContext.Provider, { value: value, children: _jsx(Text, { ...props, style: [styles.container, props.style], children: children }) }));
+    // react-native-web only applies `target`/`rel` to the rendered `<a>` via
+    // `hrefAttrs` - passing them as bare props is a no-op. Not typed on
+    // `TextProps`, hence the spread rather than a named JSX attribute.
+    // Web-only prop, so it's gated to avoid an unknown-prop warning on native.
+    const hrefAttrsProp = Platform.OS === 'web' && (target || rel) ? { hrefAttrs: { target, rel } } : {};
+    return (_jsx(InlineLinkContext.Provider, { value: value, children: _jsx(Text, { ...props, ...hrefAttrsProp, style: [styles.container, props.style], children: children }) }));
 };
 InlineLinkRoot.displayName = 'InlineLinkRoot';
 const styles = StyleSheet.create(theme => ({

package/build/components/Input/Input.figma.d.ts

@@ -0,0 +1,28 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            required: figma.EnumOptionsValues<{
+                true: boolean;
+                false: boolean;
+            }>;
+            prefix: string;
+            suffix: string;
+            disabled: boolean | undefined;
+            readonly: boolean | undefined;
+            placeholder: string | undefined;
+            value: string | undefined;
+            label: string;
+            labelVariant: string | undefined;
+            helperText: string;
+            validationStatus: string | undefined;
+            invalidText: string | undefined;
+            validText: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Input/Input.figma.js

@@ -0,0 +1,67 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2685%3A7021
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Input/Input.tsx
+// component=Input
+import figma from 'figma';
+const required = figma.selectedInstance.getBoolean('Optional?', {
+    true: false,
+    false: true,
+});
+const prefix = figma.selectedInstance.getBoolean('Prefix?', {
+    true: figma.selectedInstance.getString('Prefix'),
+});
+const suffix = figma.selectedInstance.getBoolean('Suffix?', {
+    true: figma.selectedInstance.getString('Suffix'),
+});
+const disabled = figma.selectedInstance.getEnum('State', {
+    Disabled: true,
+});
+const readonly = figma.selectedInstance.getEnum('State', {
+    'Read-only': true,
+});
+const placeholder = figma.selectedInstance.getEnum('Value type', {
+    Placeholder: figma.selectedInstance.getString('Value'),
+});
+const value = figma.selectedInstance.getEnum('Value type', {
+    Filled: figma.selectedInstance.getString('Value'),
+});
+const label = figma.selectedInstance.getString('Label');
+const labelVariant = figma.selectedInstance.getEnum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+});
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const validationStatus = figma.selectedInstance.getEnum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+});
+const invalidText = figma.selectedInstance.getEnum('State', {
+    Invalid: figma.selectedInstance.getString('Validation'),
+});
+const validText = figma.selectedInstance.getEnum('State', {
+    Valid: figma.selectedInstance.getString('Validation'),
+});
+export default {
+    id: 'Input',
+    imports: ["import { Input } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Input${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('readonly', readonly)}${figma.helpers.react.renderProp('placeholder', placeholder)}${figma.helpers.react.renderProp('value', value)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('labelVariant', labelVariant)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('required', required)}${figma.helpers.react.renderProp('prefix', prefix)}${figma.helpers.react.renderProp('suffix', suffix)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('validText', validText)}/>`,
+    metadata: {
+        nestable: true,
+        props: {
+            required,
+            prefix,
+            suffix,
+            disabled,
+            readonly,
+            placeholder,
+            value,
+            label,
+            labelVariant,
+            helperText,
+            validationStatus,
+            invalidText,
+            validText,
+        },
+    },
+};

package/build/components/Input/Input_1.figma.d.ts

@@ -0,0 +1,22 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            disabled: boolean | undefined;
+            readonly: boolean | undefined;
+            placeholder: string | undefined;
+            value: string | undefined;
+            label: string;
+            labelVariant: string | undefined;
+            helperText: string;
+            validationStatus: string | undefined;
+            invalidText: string | undefined;
+            validText: string | undefined;
+        };
+    };
+};
+export default _default;

package/build/components/Input/Input_1.figma.js

@@ -0,0 +1,54 @@
+// url=https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2251-10106&t=3uUSBVdxldgG5uz3-4
+// source=https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/src/components/Input/Input.tsx
+// component=Input
+import figma from 'figma';
+const disabled = figma.selectedInstance.getEnum('State', {
+    Disabled: true,
+});
+const readonly = figma.selectedInstance.getEnum('State', {
+    'Read-only': true,
+});
+const placeholder = figma.selectedInstance.getEnum('Value type', {
+    Placeholder: figma.selectedInstance.getString('Value'),
+});
+const value = figma.selectedInstance.getEnum('Value type', {
+    Filled: figma.selectedInstance.getString('Password'),
+});
+const label = figma.selectedInstance.getString('Label');
+const labelVariant = figma.selectedInstance.getEnum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+});
+const helperText = figma.selectedInstance.getBoolean('Helper text?', {
+    true: figma.selectedInstance.getString('Helper text'),
+});
+const validationStatus = figma.selectedInstance.getEnum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+});
+const invalidText = figma.selectedInstance.getEnum('State', {
+    Invalid: figma.selectedInstance.getString('Validation'),
+});
+const validText = figma.selectedInstance.getEnum('State', {
+    Valid: figma.selectedInstance.getString('Validation'),
+});
+export default {
+    id: 'Input',
+    imports: ["import { Input } from '@utilitywarehouse/hearth-react-native';"],
+    example: figma.code `<Input type="password"${figma.helpers.react.renderProp('disabled', disabled)}${figma.helpers.react.renderProp('readonly', readonly)}${figma.helpers.react.renderProp('placeholder', placeholder)}${figma.helpers.react.renderProp('value', value)}${figma.helpers.react.renderProp('label', label)}${figma.helpers.react.renderProp('labelVariant', labelVariant)}${figma.helpers.react.renderProp('helperText', helperText)}${figma.helpers.react.renderProp('validationStatus', validationStatus)}${figma.helpers.react.renderProp('invalidText', invalidText)}${figma.helpers.react.renderProp('validText', validText)}/>`,
+    metadata: {
+        nestable: true,
+        props: {
+            disabled,
+            readonly,
+            placeholder,
+            value,
+            label,
+            labelVariant,
+            helperText,
+            validationStatus,
+            invalidText,
+            validText,
+        },
+    },
+};

package/build/components/Input/Input_2.figma.d.ts

@@ -0,0 +1,17 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+        props: {
+            loading: boolean | undefined;
+            placeholder: string | undefined;
+            value: string | undefined;
+            label: string;
+            helperText: string;
+        };
+    };
+};
+export default _default;