@telefonica/mistica 16.71.0 → 16.72.0

package/src/__figma__/boxed-accordion.figma.ts

@@ -0,0 +1,63 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=13418-3207
+// source=src/accordion.tsx
+// component=BoxedAccordion
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Auto collapse" is a BOOLEAN mapping to the `singleOpen` prop.
+const singleOpen = instance.getBoolean('Auto collapse');
+
+// "Variant" is a VARIANT (Default | Brand) mapping to the item `variant` prop.
+const variant = instance.getEnum('Variant', {Default: 'default', Brand: 'brand'});
+
+const titleLayer = instance.findText('Title');
+const title = titleLayer.type === 'TEXT' ? titleLayer.textContent : '';
+
+// "Subtitle" is a VARIANT (True | False) toggling the subtitle text layer.
+const hasSubtitle = instance.getEnum('Subtitle', {True: true, False: false});
+const subtitleLayer = instance.findText('Subtitle');
+const subtitle = subtitleLayer.type === 'TEXT' ? subtitleLayer.textContent : '';
+
+const bodyLayer = instance.findText('Body content');
+const content = bodyLayer.type === 'TEXT' ? bodyLayer.textContent : '';
+
+// "Detail" is a BOOLEAN toggling the detail text layer of the same name.
+const hasDetail = instance.getBoolean('Detail');
+const detailLayer = instance.findText('Detail');
+const detail = detailLayer.type === 'TEXT' ? detailLayer.textContent : '';
+
+// "Asset" BOOLEAN toggles the "Asset" child instance rendered as the `asset` slot.
+const hasAsset = instance.getBoolean('Asset');
+const asset = hasAsset ? instance.findInstance('Asset') : null;
+let assetCode;
+if (asset && asset.type === 'INSTANCE') {
+    assetCode = asset.executeTemplate().example;
+}
+
+// "Right slot" BOOLEAN toggles the swappable "🔄 Replace right slot" instance.
+const hasRight = instance.getBoolean('Right slot');
+const right = hasRight ? instance.getInstanceSwap('🔄 Replace right slot') : null;
+let rightCode;
+if (right && right.type === 'INSTANCE') {
+    rightCode = right.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <BoxedAccordion ${singleOpen ? 'singleOpen' : ''}>
+            <BoxedAccordionItem
+                variant="${variant}"
+                title="${title}"
+                ${hasSubtitle ? figma.code`subtitle="${subtitle}"` : ''}
+                content={<Text3 regular color={skinVars.colors.textSecondary}>${content}</Text3>}
+                ${hasDetail ? figma.code`detail="${detail}"` : ''}
+                ${assetCode ? figma.code`asset={${assetCode}}` : ''}
+                ${rightCode ? figma.code`right={${rightCode}}` : ''}
+            />
+        </BoxedAccordion>
+    `,
+    imports: ['import {BoxedAccordion, BoxedAccordionItem, Text3, skinVars} from "@telefonica/mistica";'],
+    id: 'boxed-accordion',
+    metadata: {nestable: false},
+};

package/src/__figma__/boxed-row.figma.ts

@@ -0,0 +1,63 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=1298-5658
+// source=src/list.tsx
+// component=BoxedRow
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// Title/Subtitle/Description text and the row toggles live inside the nested
+// "List Structure" instance. Resolve it so its component properties are readable.
+const listStructure = instance.findInstance('List Structure');
+const ls = listStructure.type === 'INSTANCE' ? listStructure : undefined;
+
+const titleLayer = instance.findText('Title');
+const title = titleLayer.type === 'TEXT' ? titleLayer.textContent : '';
+
+const hasSubtitle = ls ? ls.getBoolean('Subtitle') : false;
+const subtitleLayer = instance.findText('Subtitle');
+const subtitle = subtitleLayer.type === 'TEXT' ? subtitleLayer.textContent : '';
+
+const hasDescription = ls ? ls.getBoolean('Description') : false;
+const descriptionLayer = instance.findText('Description');
+const description = descriptionLayer.type === 'TEXT' ? descriptionLayer.textContent : '';
+
+// "Badge" BOOLEAN on the nested List Structure toggles the row badge.
+const hasBadge = ls ? ls.getBoolean('Badge') : false;
+
+// "Slot" BOOLEAN toggles the swappable "🔄 Replace Slot" instance rendered as `extra`.
+const hasExtra = ls ? ls.getBoolean('Slot') : false;
+const extra = hasExtra && ls ? ls.getInstanceSwap('🔄 Replace Slot') : null;
+let extraCode;
+if (extra && extra.type === 'INSTANCE') {
+    extraCode = extra.executeTemplate().example;
+}
+
+// "Asset" BOOLEAN toggles the swappable asset instance rendered as `asset`.
+const hasAsset = ls ? ls.getBoolean('Asset') : false;
+const asset = hasAsset && ls ? ls.getInstanceSwap('Choose icon') : null;
+let assetCode;
+if (asset && asset.type === 'INSTANCE') {
+    assetCode = asset.executeTemplate().example;
+}
+
+// "Disabled" and "Danger" are Figma VARIANTs mapping onto boolean code props.
+const disabled = instance.getEnum('Disabled', {False: false, True: true});
+const danger = instance.getEnum('Danger', {False: false, True: true});
+
+export default {
+    example: figma.code`
+        <BoxedRow
+            title="${title}"
+            ${hasSubtitle ? figma.code`subtitle="${subtitle}"` : ''}
+            ${hasDescription ? figma.code`description="${description}"` : ''}
+            ${hasBadge ? 'badge' : ''}
+            ${assetCode ? figma.code`asset={${assetCode}}` : ''}
+            ${extraCode ? figma.code`extra={${extraCode}}` : ''}
+            ${disabled ? 'disabled' : ''}
+            ${danger ? 'danger' : ''}
+        />
+    `,
+    imports: ['import {BoxedRow} from "@telefonica/mistica";'],
+    id: 'boxed-row',
+    metadata: {nestable: false},
+};

package/src/__figma__/boxed-row.mobile.figma.ts

@@ -0,0 +1,63 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=1428-8270
+// source=src/list.tsx
+// component=BoxedRow
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// Title/Subtitle/Description text and the row toggles live inside the nested
+// "List Structure" instance. Resolve it so its component properties are readable.
+const listStructure = instance.findInstance('List Structure');
+const ls = listStructure.type === 'INSTANCE' ? listStructure : undefined;
+
+const titleLayer = instance.findText('Title');
+const title = titleLayer.type === 'TEXT' ? titleLayer.textContent : '';
+
+const hasSubtitle = ls ? ls.getBoolean('Subtitle') : false;
+const subtitleLayer = instance.findText('Subtitle');
+const subtitle = subtitleLayer.type === 'TEXT' ? subtitleLayer.textContent : '';
+
+const hasDescription = ls ? ls.getBoolean('Description') : false;
+const descriptionLayer = instance.findText('Description');
+const description = descriptionLayer.type === 'TEXT' ? descriptionLayer.textContent : '';
+
+// "Badge" BOOLEAN on the nested List Structure toggles the row badge.
+const hasBadge = ls ? ls.getBoolean('Badge') : false;
+
+// "Slot" BOOLEAN toggles the swappable "🔄 Replace Slot" instance rendered as `extra`.
+const hasExtra = ls ? ls.getBoolean('Slot') : false;
+const extra = hasExtra && ls ? ls.getInstanceSwap('🔄 Replace Slot') : null;
+let extraCode;
+if (extra && extra.type === 'INSTANCE') {
+    extraCode = extra.executeTemplate().example;
+}
+
+// "Asset" BOOLEAN toggles the swappable asset instance rendered as `asset`.
+const hasAsset = ls ? ls.getBoolean('Asset') : false;
+const asset = hasAsset && ls ? ls.getInstanceSwap('Choose icon') : null;
+let assetCode;
+if (asset && asset.type === 'INSTANCE') {
+    assetCode = asset.executeTemplate().example;
+}
+
+// "Disabled" and "Danger" are Figma VARIANTs mapping onto boolean code props.
+const disabled = instance.getEnum('Disabled', {False: false, True: true});
+const danger = instance.getEnum('Danger', {False: false, True: true});
+
+export default {
+    example: figma.code`
+        <BoxedRow
+            title="${title}"
+            ${hasSubtitle ? figma.code`subtitle="${subtitle}"` : ''}
+            ${hasDescription ? figma.code`description="${description}"` : ''}
+            ${hasBadge ? 'badge' : ''}
+            ${assetCode ? figma.code`asset={${assetCode}}` : ''}
+            ${extraCode ? figma.code`extra={${extraCode}}` : ''}
+            ${disabled ? 'disabled' : ''}
+            ${danger ? 'danger' : ''}
+        />
+    `,
+    imports: ['import {BoxedRow} from "@telefonica/mistica";'],
+    id: 'boxed-row-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/boxed.mobile.figma.ts

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=2203-7639
+// source=src/boxed.tsx
+// component=Boxed
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Variant" VARIANT maps to the `variant` prop.
+const variant = instance.getEnum('Variant', {
+    Default: 'default',
+    Brand: 'brand',
+    Negative: 'negative',
+});
+
+// "Slot" BOOLEAN toggles the swappable "🔄 Replace slot" instance rendered as children.
+const hasChildren = instance.getBoolean('Slot');
+const child = hasChildren ? instance.getInstanceSwap('🔄 Replace slot') : null;
+let childCode;
+if (child && child.type === 'INSTANCE') {
+    childCode = child.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <Boxed ${variant && variant !== 'default' ? figma.code`variant="${variant}"` : ''}>
+            ${childCode}
+        </Boxed>
+    `,
+    imports: ['import {Boxed} from "@telefonica/mistica";'],
+    id: 'boxed-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/button-danger.figma.ts

@@ -0,0 +1,48 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=10659-9868
+// source=src/button.tsx
+// component=ButtonDanger
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const labelLayer = instance.findText('Action');
+const label = labelLayer.type === 'TEXT' ? labelLayer.textContent : '';
+
+const state = instance.getEnum('State', {
+    Default: 'default',
+    Disabled: 'disabled',
+    Loading: 'loading',
+    Pressed: 'default',
+});
+
+const small = instance.getEnum('Small', {True: true, False: false});
+
+const iconPosition = instance.getEnum('Icon', {
+    None: 'none',
+    startIcon: 'start',
+    endIcon: 'end',
+});
+
+const icon = instance.getInstanceSwap('Choose icon →');
+let iconCode;
+if (icon && icon.type === 'INSTANCE') {
+    iconCode = icon.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <ButtonDanger
+            ${small ? 'small' : ''}
+            ${state === 'disabled' ? 'disabled' : ''}
+            ${state === 'loading' ? 'showSpinner' : ''}
+            ${iconCode && iconPosition === 'start' ? figma.code`StartIcon={${iconCode}}` : ''}
+            ${iconCode && iconPosition === 'end' ? figma.code`EndIcon={${iconCode}}` : ''}
+            onPress={() => {}}
+        >
+            ${label}
+        </ButtonDanger>
+    `,
+    imports: ['import {ButtonDanger} from "@telefonica/mistica";'],
+    id: 'button-danger',
+    metadata: {nestable: false},
+};

package/src/__figma__/button-fixed-footer-layout.figma.ts

@@ -0,0 +1,42 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=5212-4201
+// source=src/button-fixed-footer-layout.tsx
+// component=ButtonFixedFooterLayout
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// The primary, secondary and link buttons are named child instances (their presence
+// is driven by the "Variant" VARIANT). Resolve each dynamically and only render the
+// matching slot when the instance exists in the selected variant.
+const primary = instance.findInstance('Button Primary [D]');
+let primaryCode;
+if (primary.type === 'INSTANCE') {
+    primaryCode = primary.executeTemplate().example;
+}
+
+const secondary = instance.findInstance('Button Secondary [D]');
+let secondaryCode;
+if (secondary.type === 'INSTANCE') {
+    secondaryCode = secondary.executeTemplate().example;
+}
+
+const link = instance.findInstance('Button Link [D]');
+let linkCode;
+if (link.type === 'INSTANCE') {
+    linkCode = link.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <ButtonFixedFooterLayout
+            ${primaryCode ? figma.code`button={${primaryCode}}` : ''}
+            ${secondaryCode ? figma.code`secondaryButton={${secondaryCode}}` : ''}
+            ${linkCode ? figma.code`link={${linkCode}}` : ''}
+        >
+            Content
+        </ButtonFixedFooterLayout>
+    `,
+    imports: ['import {ButtonFixedFooterLayout} from "@telefonica/mistica";'],
+    id: 'button-fixed-footer-layout',
+    metadata: {nestable: false},
+};

package/src/__figma__/button-fixed-footer-layout.mobile.figma.ts

@@ -0,0 +1,42 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=37-5257
+// source=src/button-fixed-footer-layout.tsx
+// component=ButtonFixedFooterLayout
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// The primary, secondary and link buttons are named child instances (their presence
+// is driven by the "Secondary" and "Add link" VARIANTs). Resolve each dynamically and
+// only render the matching slot when the instance exists in the selected variant.
+const primary = instance.findInstance('Button Primary');
+let primaryCode;
+if (primary.type === 'INSTANCE') {
+    primaryCode = primary.executeTemplate().example;
+}
+
+const secondary = instance.findInstance('Button Secondary');
+let secondaryCode;
+if (secondary.type === 'INSTANCE') {
+    secondaryCode = secondary.executeTemplate().example;
+}
+
+const link = instance.findInstance('Button Link');
+let linkCode;
+if (link.type === 'INSTANCE') {
+    linkCode = link.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <ButtonFixedFooterLayout
+            ${primaryCode ? figma.code`button={${primaryCode}}` : ''}
+            ${secondaryCode ? figma.code`secondaryButton={${secondaryCode}}` : ''}
+            ${linkCode ? figma.code`link={${linkCode}}` : ''}
+        >
+            Content
+        </ButtonFixedFooterLayout>
+    `,
+    imports: ['import {ButtonFixedFooterLayout} from "@telefonica/mistica";'],
+    id: 'button-fixed-footer-layout-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/button-group.figma.ts

@@ -0,0 +1,40 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=184-5972
+// source=src/button-group.tsx
+// component=ButtonGroup
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// The primary, secondary and link buttons are named child instances (their presence
+// is driven by the "Variant" VARIANT). Resolve each dynamically and only render the
+// matching slot when the instance exists in the selected variant.
+const primary = instance.findInstance('Button Primary [D]');
+let primaryCode;
+if (primary.type === 'INSTANCE') {
+    primaryCode = primary.executeTemplate().example;
+}
+
+const secondary = instance.findInstance('Button Secondary [D]');
+let secondaryCode;
+if (secondary.type === 'INSTANCE') {
+    secondaryCode = secondary.executeTemplate().example;
+}
+
+const link = instance.findInstance('Button Link [D]');
+let linkCode;
+if (link.type === 'INSTANCE') {
+    linkCode = link.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <ButtonGroup
+            ${primaryCode ? figma.code`primaryButton={${primaryCode}}` : ''}
+            ${secondaryCode ? figma.code`secondaryButton={${secondaryCode}}` : ''}
+            ${linkCode ? figma.code`link={${linkCode}}` : ''}
+        />
+    `,
+    imports: ['import {ButtonGroup} from "@telefonica/mistica";'],
+    id: 'button-group',
+    metadata: {nestable: false},
+};

package/src/__figma__/button-group.mobile.figma.ts

@@ -0,0 +1,43 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=184-5972
+// source=src/button-group.tsx
+// component=ButtonGroup
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// The primary, secondary and link buttons are named child instances (their presence
+// is driven by the "Variant" VARIANT). Resolve each dynamically and only render the
+// matching slot when the instance exists in the selected variant.
+const primary = instance.findInstance('Button Primary');
+let primaryCode;
+if (primary.type === 'INSTANCE') {
+    primaryCode = primary.executeTemplate().example;
+}
+
+const secondary = instance.findInstance('Button Secondary');
+let secondaryCode;
+if (secondary.type === 'INSTANCE') {
+    secondaryCode = secondary.executeTemplate().example;
+}
+
+let link = instance.findInstance('ButtonLink');
+if (link.type !== 'INSTANCE') {
+    link = instance.findInstance('Button Link');
+}
+let linkCode;
+if (link.type === 'INSTANCE') {
+    linkCode = link.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <ButtonGroup
+            ${primaryCode ? figma.code`primaryButton={${primaryCode}}` : ''}
+            ${secondaryCode ? figma.code`secondaryButton={${secondaryCode}}` : ''}
+            ${linkCode ? figma.code`link={${linkCode}}` : ''}
+        />
+    `,
+    imports: ['import {ButtonGroup} from "@telefonica/mistica";'],
+    id: 'button-group-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/button-layout.figma.ts

@@ -0,0 +1,49 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=16295-216
+// source=src/button-layout.tsx
+// component=ButtonLayout
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Align" VARIANT maps to the `align` prop.
+const align = instance.getEnum('Align', {
+    'Full width': 'full-width',
+    Left: 'left',
+    Center: 'center',
+    Right: 'right',
+});
+
+// The primary, secondary and link buttons are named child instances (their presence
+// is driven by the "Primary", "Secondary" and "Link" VARIANTs). Resolve each
+// dynamically and only render the matching slot when the instance is present.
+const primary = instance.findInstance('Button Primary [D]');
+let primaryCode;
+if (primary.type === 'INSTANCE') {
+    primaryCode = primary.executeTemplate().example;
+}
+
+const secondary = instance.findInstance('Button Secondary [D]');
+let secondaryCode;
+if (secondary.type === 'INSTANCE') {
+    secondaryCode = secondary.executeTemplate().example;
+}
+
+const link = instance.findInstance('Button Link [D]');
+let linkCode;
+if (link.type === 'INSTANCE') {
+    linkCode = link.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <ButtonLayout
+            align="${align}"
+            ${primaryCode ? figma.code`primaryButton={${primaryCode}}` : ''}
+            ${secondaryCode ? figma.code`secondaryButton={${secondaryCode}}` : ''}
+            ${linkCode ? figma.code`link={${linkCode}}` : ''}
+        />
+    `,
+    imports: ['import {ButtonLayout} from "@telefonica/mistica";'],
+    id: 'button-layout',
+    metadata: {nestable: false},
+};

package/src/__figma__/button-layout.mobile.figma.ts

@@ -0,0 +1,49 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=35946-4151
+// source=src/button-layout.tsx
+// component=ButtonLayout
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Align" VARIANT maps to the `align` prop.
+const align = instance.getEnum('Align', {
+    'Full width': 'full-width',
+    Left: 'left',
+    Center: 'center',
+    Right: 'right',
+});
+
+// The primary, secondary and link buttons are named child instances (their presence
+// is driven by the "Primary", "Secondary" and "Link" VARIANTs). Resolve each
+// dynamically and only render the matching slot when the instance is present.
+const primary = instance.findInstance('Button Primary');
+let primaryCode;
+if (primary.type === 'INSTANCE') {
+    primaryCode = primary.executeTemplate().example;
+}
+
+const secondary = instance.findInstance('Button Secondary');
+let secondaryCode;
+if (secondary.type === 'INSTANCE') {
+    secondaryCode = secondary.executeTemplate().example;
+}
+
+const link = instance.findInstance('Button Link');
+let linkCode;
+if (link.type === 'INSTANCE') {
+    linkCode = link.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <ButtonLayout
+            align="${align}"
+            ${primaryCode ? figma.code`primaryButton={${primaryCode}}` : ''}
+            ${secondaryCode ? figma.code`secondaryButton={${secondaryCode}}` : ''}
+            ${linkCode ? figma.code`link={${linkCode}}` : ''}
+        />
+    `,
+    imports: ['import {ButtonLayout} from "@telefonica/mistica";'],
+    id: 'button-layout-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/button-link-danger.figma.ts

@@ -0,0 +1,55 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=14974-377
+// source=src/button.tsx
+// component=ButtonLinkDanger
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const labelLayer = instance.findText('Action');
+const label = labelLayer.type === 'TEXT' ? labelLayer.textContent : '';
+
+const state = instance.getEnum('State', {
+    Default: 'default',
+    Disabled: 'disabled',
+    Loading: 'loading',
+    Pressed: 'default',
+});
+
+const small = instance.getEnum('Small', {True: true, False: false});
+
+const bleedLeft = instance.getBoolean('BleedLeft');
+const bleedRight = instance.getBoolean('BleedRight');
+const bleedY = instance.getBoolean('BleedY');
+
+const iconPosition = instance.getEnum('Icon', {
+    None: 'none',
+    startIcon: 'start',
+    endIcon: 'end',
+});
+
+const icon = instance.getInstanceSwap('Choose icon →');
+let iconCode;
+if (icon && icon.type === 'INSTANCE') {
+    iconCode = icon.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <ButtonLinkDanger
+            ${small ? 'small' : ''}
+            ${state === 'disabled' ? 'disabled' : ''}
+            ${state === 'loading' ? 'showSpinner' : ''}
+            ${bleedLeft ? 'bleedLeft' : ''}
+            ${bleedRight ? 'bleedRight' : ''}
+            ${bleedY ? 'bleedY' : ''}
+            ${iconCode && iconPosition === 'start' ? figma.code`StartIcon={${iconCode}}` : ''}
+            ${iconCode && iconPosition === 'end' ? figma.code`EndIcon={${iconCode}}` : ''}
+            onPress={() => {}}
+        >
+            ${label}
+        </ButtonLinkDanger>
+    `,
+    imports: ['import {ButtonLinkDanger} from "@telefonica/mistica";'],
+    id: 'button-link-danger',
+    metadata: {nestable: false},
+};

package/src/__figma__/button-link.figma.ts

@@ -0,0 +1,55 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=10659-9869
+// source=src/button.tsx
+// component=ButtonLink
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const labelLayer = instance.findText('Action');
+const label = labelLayer.type === 'TEXT' ? labelLayer.textContent : '';
+
+const state = instance.getEnum('State', {
+    Default: 'default',
+    Disabled: 'disabled',
+    Loading: 'loading',
+    Pressed: 'default',
+});
+
+const small = instance.getEnum('Small', {True: true, False: false});
+
+const bleedLeft = instance.getBoolean('BleedLeft');
+const bleedRight = instance.getBoolean('BleedRight');
+const bleedY = instance.getBoolean('BleedY');
+
+const iconPosition = instance.getEnum('Icon', {
+    None: 'none',
+    startIcon: 'start',
+    endIcon: 'end',
+});
+
+const icon = instance.getInstanceSwap('Choose icon →');
+let iconCode;
+if (icon && icon.type === 'INSTANCE') {
+    iconCode = icon.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <ButtonLink
+            ${small ? 'small' : ''}
+            ${state === 'disabled' ? 'disabled' : ''}
+            ${state === 'loading' ? 'showSpinner' : ''}
+            ${bleedLeft ? 'bleedLeft' : ''}
+            ${bleedRight ? 'bleedRight' : ''}
+            ${bleedY ? 'bleedY' : ''}
+            ${iconCode && iconPosition === 'start' ? figma.code`StartIcon={${iconCode}}` : ''}
+            ${iconCode && iconPosition === 'end' ? figma.code`EndIcon={${iconCode}}` : ''}
+            onPress={() => {}}
+        >
+            ${label}
+        </ButtonLink>
+    `,
+    imports: ['import {ButtonLink} from "@telefonica/mistica";'],
+    id: 'button-link',
+    metadata: {nestable: false},
+};