@cdx-ui/components 0.0.1-beta.11 → 0.0.1-beta.111

package/src/components/IconButton/styles.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
 export const iconButtonRootVariants = cva(
   [
@@ -10,33 +10,131 @@ export const iconButtonRootVariants = cva(
     TRANSITION_COLORS,
     'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
-    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-ring] web:data-[focus-visible=true]:ring-offset-2',
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[var(--color-stroke-ring)] web:data-[focus-visible=true]:ring-offset-2',
   ],
   {
     variants: {
       variant: {
-        solid: [
+        solid: [],
+        tint: [],
+        ghost: ['bg-transparent'],
+      },
+      color: {
+        neutral: [],
+        action: [],
+        danger: [],
+      },
+      size: {
+        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
+        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
+      },
+    },
+    compoundVariants: [
+      // ── solid × color ───────────────────────────────────────────────────
+      {
+        variant: 'solid',
+        color: 'neutral',
+        className: [
           'bg-surface-primary border border-stroke-secondary',
           Platform.select({
             default: 'data-[active=true]:bg-surface-primary-active',
             web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
           }),
         ],
-        ghost: [
-          'bg-transparent',
+      },
+      {
+        variant: 'solid',
+        color: 'action',
+        className: [
+          'bg-surface-action-strong',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-strong-active',
+            web: 'data-[hover=true]:bg-surface-action-strong-hover data-[active=true]:data-[hover=true]:bg-surface-action-strong-active',
+          }),
+        ],
+      },
+      {
+        variant: 'solid',
+        color: 'danger',
+        className: [
+          'bg-surface-danger-strong',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-strong-active',
+            web: 'data-[hover=true]:bg-surface-danger-strong-hover data-[active=true]:data-[hover=true]:bg-surface-danger-strong-active',
+          }),
+        ],
+      },
+
+      // ── tint × color ─────────────────────────────────────────────────
+      {
+        variant: 'tint',
+        color: 'neutral',
+        className: [
+          'bg-surface-neutral-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-neutral-tint-active',
+            web: 'data-[hover=true]:bg-surface-neutral-tint-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'action',
+        className: [
+          'bg-surface-action-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-tint-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'danger',
+        className: [
+          'bg-surface-danger-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-tint-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+          }),
+        ],
+      },
+
+      // ── ghost × color ──────────────────────────────────────────────────
+      {
+        variant: 'ghost',
+        color: 'neutral',
+        className: [
           Platform.select({
             default: 'data-[active=true]:bg-surface-primary-active',
             web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
           }),
         ],
       },
-      size: {
-        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
-        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
+      {
+        variant: 'ghost',
+        color: 'action',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-tint-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+          }),
+        ],
       },
-    },
+      {
+        variant: 'ghost',
+        color: 'danger',
+        className: [
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-tint-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+          }),
+        ],
+      },
+    ],
     defaultVariants: {
       variant: 'solid',
+      color: 'neutral',
       size: 'default',
     },
   },
@@ -54,6 +152,34 @@ export const iconButtonGlyphVariants = cva([], {
   },
 });
 
-export const iconButtonIconColorVariants = cva(['text-content-primary']);
+export const iconButtonIconColorVariants = cva([], {
+  variants: {
+    variant: {
+      solid: [],
+      tint: [],
+      ghost: [],
+    },
+    color: {
+      neutral: [],
+      action: [],
+      danger: [],
+    },
+  },
+  compoundVariants: [
+    { variant: 'solid', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'solid', color: 'action', className: 'text-content-action-on-strong' },
+    { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
+    { variant: 'tint', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'tint', color: 'action', className: 'text-content-action-on-subtle' },
+    { variant: 'tint', color: 'danger', className: 'text-content-danger-on-subtle' },
+    { variant: 'ghost', color: 'neutral', className: 'text-content-primary' },
+    { variant: 'ghost', color: 'action', className: 'text-content-action' },
+    { variant: 'ghost', color: 'danger', className: 'text-content-danger' },
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    color: 'neutral',
+  },
+});
 
 export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;

package/src/components/Input/index.tsx

@@ -1,14 +1,17 @@
-import { forwardRef, type ReactNode } from 'react';
+import { forwardRef, useMemo, type ReactNode } from 'react';
 import { type TextInput, View, type ViewProps } from 'react-native';
 import {
-  createInput,
+  InputField as InputFieldPrimitive,
+  InputRoot as InputRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
   type IInputFieldProps,
   type IInputProps,
   type IInputSlotProps,
 } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
-import { Icon, IconProps } from '../Icon';
-import { BaseInput } from './BaseInput';
+import { ParentContext, cn, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
 import {
   type InputVariantProps,
   inputFieldPlaceholderVariants,
@@ -20,39 +23,54 @@ import {
 
 const SCOPE = 'INPUT';
 
-const Root = withStyleContext(View, SCOPE);
-
 const useInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
 
-const InputPrimitive = createInput({
-  Root,
-  Slot: View,
-  Field: BaseInput,
-});
-
 // =============================================================================
 // INPUT (ROOT)
 // =============================================================================
 
-export interface InputProps extends ViewProps, IInputFieldProps, InputVariantProps {
+export interface InputProps extends ViewProps, IInputFieldProps {
+  /** Render the consumer's child element in place of the default `View` host. */
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the shell's own styles. */
   className?: string;
+  /** Shell content — typically `Input.Field` plus optional `Input.Slot`/`Input.Icon`. */
   children?: ReactNode;
+  /**
+   * Visual style variant.
+   * @default 'outline'
+   */
+  variant?: 'outline';
+  /**
+   * Height and padding scale.
+   * @default 'default'
+   */
+  size?: 'default' | 'small';
 }
 
 const InputRoot = forwardRef<View, InputProps>(
-  ({ variant = 'outline', size = 'default', className, children, style, ...props }, ref) => {
+  (
+    { asChild, variant = 'outline', size = 'default', className, children, style, ...props },
+    ref,
+  ) => {
     const computedClassName = cn(inputRootVariants({ variant, size }), className);
 
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { variant, size } }), [parent, variant, size]);
+
     return (
-      <InputPrimitive
-        ref={ref}
-        className={computedClassName}
-        style={style}
-        context={{ variant, size }}
-        {...props}
-      >
-        {children}
-      </InputPrimitive>
+      <ParentContext.Provider value={ctx}>
+        <InputRootPrimitive
+          ref={ref}
+          asChild={asChild}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'input' }))}
+        >
+          {children}
+        </InputRootPrimitive>
+      </ParentContext.Provider>
     );
   },
 );
@@ -64,7 +82,9 @@ InputRoot.displayName = 'Input';
 // =============================================================================
 
 export type InputFieldProps = IInputProps & {
+  /** Additional Uniwind/Tailwind classes, merged after the field's own styles. */
   className?: string;
+  /** Uniwind class applied to the placeholder text color (native `placeholderTextColor`). */
   placeholderTextColorClassName?: string;
 };
 
@@ -79,12 +99,13 @@ const InputField = forwardRef<TextInput, InputFieldProps>(
     );
 
     return (
-      <InputPrimitive.Field
+      <InputFieldPrimitive
         ref={ref}
         className={computedClassName}
         placeholderTextColorClassName={computedPlaceholderColorClassName}
         style={style}
         {...rest}
+        {...mergeDataAttributes(rest, dataAttributes({ slot: 'input-field' }))}
       />
     );
   },
@@ -93,22 +114,33 @@ const InputField = forwardRef<TextInput, InputFieldProps>(
 InputField.displayName = 'Input.Field';
 
 // =============================================================================
-// INPUT SLOT
+// INPUT SLOT — styled-only (Standard 3: no behavior beyond layout)
 // =============================================================================
 
 export interface InputSlotProps extends ViewProps, IInputSlotProps {
+  /** Render the consumer's child element in place of the default `View` host. */
+  asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the slot's own styles. */
   className?: string;
+  /** Adornment content (icons, buttons, or adornment text). */
   children?: ReactNode;
 }
 
 const InputSlot = forwardRef<View, InputSlotProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(inputSlotVariants(), className);
+    const Comp = asChild ? Slot : View;
 
     return (
-      <InputPrimitive.Slot ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'input-slot' }))}
+      >
         {children}
-      </InputPrimitive.Slot>
+      </Comp>
     );
   },
 );
@@ -119,14 +151,44 @@ InputSlot.displayName = 'Input.Slot';
 // INPUT ICON
 // =============================================================================
 
-export interface InputIconProps extends Omit<IconProps, 'children'> {}
+export interface InputIconProps extends Omit<IconProps, 'children' | 'as'> {
+  /** Render the consumer's child element in place of the default icon host. */
+  asChild?: boolean;
+  /**
+   * Forge icon component to render. Required unless `asChild` is set, in which
+   * case the consumer's substituted element is rendered instead.
+   */
+  as?: IconProps['as'];
+}
 
-const InputIcon = ({ className, style, as, ...props }: InputIconProps) => {
+const InputIcon = ({ asChild, className, style, as, ...props }: InputIconProps) => {
   const { size } = useInputStyleContext();
-
   const computedClassName = cn(inputIconVariants({ size }), className);
 
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'input-icon' }))}
+      />
+    );
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'input-icon' }))}
+    />
+  );
 };
 
 InputIcon.displayName = 'Input.Icon';

package/src/components/Input/styles.ts

@@ -1,11 +1,12 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
 export const inputRootVariants = cva(
   [
-    'w-full flex-row items-stretch overflow-hidden',
+    'w-full flex-row items-center overflow-hidden',
     'bg-surface-primary',
-    'border-solid border-[length:var(--border-width-default)] border-stroke-primary',
+    'border-solid border-stroke-primary',
+    'web:border-default native:border-[length:var(--border-width-default)]',
     'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
     'data-[disabled=true]:bg-surface-secondary',
@@ -14,8 +15,20 @@ export const inputRootVariants = cva(
     'data-[readonly=true]:cursor-default',
     'data-[readonly=true]:bg-surface-secondary',
     'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
-    'data-[focus=true]:border-[length:var(--border-width-focused)]',
-    'data-[focus=true]:border-stroke-action',
+    // Web: inset ring avoids a border-width change so the shell never shifts on focus and
+    // no per-size padding compensation is required. Recolor the border to match the ring so
+    // the two read as a single focus outline instead of a gray border + colored ring.
+    'web:data-[focus=true]:ring-inset',
+    'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
+    'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[focus=true]:data-[invalid=false]:border-stroke-action',
+    'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+    // Native: thicker border on focus; size variants below subtract a hairline of padding
+    // so layout doesn't shift by 1px.
+    'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
+    'native:data-[field-state=focused]:border-stroke-action',
+    'native:data-[field-state=focused-invalid]:border-stroke-danger',
     'data-[invalid=true]:border-stroke-danger',
   ],
   {
@@ -24,11 +37,15 @@ export const inputRootVariants = cva(
         outline: [],
       },
       size: {
-        // TODO: Find a cleaner approach to preventing layout shift when focus border is applied.
-        default: ['h-10 px-4 py-2 gap-2', 'data-[focus=true]:px-[15px] data-[focus=true]:py-[7px]'],
+        default: [
+          'h-11 min-h-11 px-4 py-3 gap-4',
+          'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+        ],
         small: [
-          'h-8 px-3 py-1.5 gap-1.5',
-          'data-[focus=true]:px-[11px] data-[focus=true]:py-[5px]',
+          'h-8 min-h-8 px-3 py-2 gap-1.5',
+          'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
         ],
       },
     },
@@ -41,8 +58,14 @@ export const inputRootVariants = cva(
 
 export const inputFieldVariants = cva(
   [
-    'flex-1 justify-center bg-transparent p-0',
-    'font-body text-content-primary',
+    // `min-w-0` is critical on web: without it, a flex item defaults to `min-width: auto`,
+    // which is the input's intrinsic content width. When the shell ancestor uses
+    // `overflow-hidden` (for rounded corners), focusing the input via `<label htmlFor>`
+    // would make the browser auto-scroll the shell to bring the input into view — visually
+    // collapsing the left padding to zero. With `min-w-0` the field can shrink below its
+    // intrinsic width so the shell never overflows and never gets scrolled.
+    'flex-1 min-w-0 justify-center bg-transparent p-0',
+    'text-content-primary',
     'placeholder:text-content-tertiary',
     'web:outline-none',
     'tracking-normal',
@@ -60,7 +83,7 @@ export const inputFieldVariants = cva(
   },
 );
 
-export const inputSlotVariants = cva(['items-center justify-center self-center']);
+export const inputSlotVariants = cva(['items-center justify-center self-center shrink-0']);
 
 export const inputIconVariants = cva(['text-content-tertiary'], {
   variants: {

package/src/components/InsuranceDisclosure/index.tsx

@@ -0,0 +1,59 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { View, type ImageSourcePropType } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Image as ForgeImage } from '../Image/Image';
+import { HStack, type HStackProps } from '../Stack/HStack';
+import { Text } from '../Text';
+import {
+  insuranceDisclosureLogoVariants,
+  insuranceDisclosureRootVariants,
+  insuranceDisclosureTextVariants,
+} from './styles';
+
+export interface InsuranceDisclosureProps extends Omit<HStackProps, 'children'> {
+  logoSource: string | ImageSourcePropType;
+  logoAccessibilityLabel: string;
+  label?: string;
+  className?: string;
+}
+
+export const InsuranceDisclosure = forwardRef<
+  ComponentRef<typeof HStack>,
+  InsuranceDisclosureProps
+>(function InsuranceDisclosure(
+  { logoSource, logoAccessibilityLabel, label, className, style, ...props },
+  ref,
+) {
+  return (
+    <HStack
+      ref={ref}
+      space="md"
+      className={cn(insuranceDisclosureRootVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'insurance-disclosure' }))}
+    >
+      <ForgeImage
+        source={logoSource}
+        accessibilityLabel={logoAccessibilityLabel}
+        accessible
+        resizeMode="contain"
+        className={insuranceDisclosureLogoVariants()}
+        {...mergeDataAttributes({}, dataAttributes({ slot: 'insurance-disclosure-logo' }))}
+      />
+      {label ? (
+        <View
+          className="min-w-0 shrink"
+          {...mergeDataAttributes({}, dataAttributes({ slot: 'insurance-disclosure-content' }))}
+        >
+          <Text size="xs" className={insuranceDisclosureTextVariants()}>
+            {label}
+          </Text>
+        </View>
+      ) : null}
+    </HStack>
+  );
+});
+
+InsuranceDisclosure.displayName = 'InsuranceDisclosure';

package/src/components/InsuranceDisclosure/styles.ts

@@ -0,0 +1,12 @@
+import { cva } from 'class-variance-authority';
+
+export const insuranceDisclosureRootVariants = cva([
+  'w-full max-w-full items-center justify-start',
+  'border border-stroke-secondary',
+  'rounded-[var(--border-radius-default)]',
+  'p-4',
+]);
+
+export const insuranceDisclosureLogoVariants = cva(['h-[23px] w-[37px]']);
+
+export const insuranceDisclosureTextVariants = cva(['shrink text-content-secondary']);

package/src/components/Link/index.tsx

@@ -1,31 +1,46 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text as RNText, type TextProps, type View } from 'react-native';
-import { createLink, type ILinkProps } from '@cdx-ui/primitives';
+import { Platform, Text, View, type TextProps } from 'react-native';
+import {
+  LinkRoot as LinkRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useLinkInteractionContext,
+  type ILinkProps,
+} from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
-import { linkRootVariants, linkLabelVariants, linkIconVariants } from './styles';
+import {
+  linkIconVariants,
+  linkLabelVariants,
+  linkNativeUnderlineVariants,
+  linkRootVariants,
+} from './styles';
 
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
 
-const LinkPrimitive = createLink({
-  Root: Pressable,
-});
-
 // =============================================================================
 // STYLED ROOT COMPONENT
 // =============================================================================
 
 export interface LinkProps extends ILinkProps {
   className?: string;
+  children?: ReactNode;
 }
 
 const LinkRoot = forwardRef<View, LinkProps>(({ className, children, style, ...props }, ref) => {
   const rootClassName = cn(linkRootVariants(), className);
 
   return (
-    <LinkPrimitive ref={ref} className={rootClassName} style={style} {...props}>
+    <LinkRootPrimitive
+      ref={ref}
+      className={rootClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'link' }))}
+    >
       {children}
-    </LinkPrimitive>
+    </LinkRootPrimitive>
   );
 });
 
@@ -36,19 +51,34 @@ LinkRoot.displayName = 'Link';
 // =============================================================================
 
 export interface LinkLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-const LinkLabel = forwardRef<RNText, LinkLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(linkLabelVariants(), className);
-
-    return (
-      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+const LinkLabel = forwardRef<Text, LinkLabelProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { visited } = useLinkInteractionContext();
+    const computedClassName = cn(linkLabelVariants({ visited }), className);
+    const Comp = asChild ? Slot : Text;
+
+    const textElement = (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'link-label' }))}
+      >
         {children}
-      </RNText>
+      </Comp>
     );
+
+    if (Platform.OS === 'web') {
+      return textElement;
+    }
+
+    return <View className={cn(linkNativeUnderlineVariants({ visited }))}>{textElement}</View>;
   },
 );
 
@@ -61,9 +91,18 @@ LinkLabel.displayName = 'Link.Label';
 export interface LinkIconProps extends Omit<IconProps, 'children'> {}
 
 const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
-  const computedClassName = cn(linkIconVariants(), className);
+  const { visited } = useLinkInteractionContext();
+  const computedClassName = cn(linkIconVariants({ visited }), className);
 
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'link-icon' }))}
+    />
+  );
 };
 
 LinkIcon.displayName = 'Link.Icon';