@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.6

package/_internal/IconButtonLink.js

@@ -1,20 +1,16 @@
-import { b as IconButtonProps } from './types16.js';
-import { L as LinkProps } from './types18.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledGradientBorder } from './gradient-border.js';
+import { I as IconButtonVariant, S as StyledIconButton } from './styles2.js';
+import { u as useTheme } from './useTheme.js';
+import { B as ButtonsColorPalette } from './colors.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper.js';
+import { a as Icon } from './Icon2.js';
 
-/**
- * Component props.
- */
-interface IconButtonLinkProps extends Omit<LinkProps, 'color'>, Pick<IconButtonProps, 'icon' | 'iconProps' | 'color' | 'isActive' | 'isDisabled' | 'isHovered' | 'variant' | 'theme'> {
-}
-type StyledIconButtonLinkProps = Omit<IconButtonLinkProps, 'isActive' | 'isDisabled' | 'variant' | 'color' | 'size'> & {
-    $isActive: IconButtonLinkProps['isActive'];
-    $isDisabled: IconButtonLinkProps['isDisabled'];
-    $isHovered: IconButtonLinkProps['isHovered'];
-    $variant: IconButtonLinkProps['variant'];
-    $theme: IconButtonLinkProps['theme'];
-    $color: IconButtonLinkProps['color'];
-};
+const _excluded = ["as", "className", "color", "href", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "target", "theme", "variant"];
+const COMPONENT_NAME = 'IconButtonLink';
+const CLASSNAME = 'redsift-icon-button-link';
 
 /**
  * The IconButtonLink is a semantic link that looks like an icon button.
@@ -23,6 +19,57 @@ type StyledIconButtonLinkProps = Omit<IconButtonLinkProps, 'isActive' | 'isDisab
  * For a semantic link that looks like a link, please use the Link component.
  * For a semantic button that looks like a link, please use the LinkButton component.
  */
-declare const IconButtonLink: Comp<IconButtonLinkProps, HTMLAnchorElement>;
+const IconButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      className,
+      color: propsColor,
+      href,
+      icon,
+      iconProps,
+      isActive,
+      isDisabled,
+      isHovered,
+      target,
+      theme: propsTheme,
+      variant: propsVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const variant = Object.values(IconButtonVariant).includes(propsVariant) ? propsVariant : 'unstyled';
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient && variant === IconButtonVariant.secondary,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledIconButton, _extends({
+    as: as || 'a',
+    role: "link",
+    tabIndex: !isDisabled ? 0 : undefined
+  }, forwardedProps, {
+    $color: color,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isGradient: isGradient,
+    $isHovered: isHovered,
+    $theme: theme,
+    $variant: variant,
+    className: classNames(IconButtonLink.className, className),
+    href: !isDisabled ? href : undefined,
+    ref: ref,
+    target: target
+  }), /*#__PURE__*/React__default.createElement(Icon, _extends({}, iconProps, {
+    icon: icon
+  }))));
+});
+IconButtonLink.className = CLASSNAME;
+IconButtonLink.displayName = COMPONENT_NAME;
 
-export { IconButtonLinkProps as I, StyledIconButtonLinkProps as S, IconButtonLink as a };
+export { IconButtonLink as I };
+//# sourceMappingURL=IconButtonLink.js.map

package/_internal/Item.d2.ts

@@ -0,0 +1,82 @@
+import * as styled_components from 'styled-components';
+import { B as ButtonsColorPalette, T as Theme } from './colors.js';
+import { ComponentProps, MouseEvent } from 'react';
+import { d as ListboxContextProps } from './types.d19.ts';
+import { C as ContainerProps } from './styles.d2.ts';
+import { C as Comp } from './helpers.js';
+
+/**
+ * Component color.
+ */
+type ItemColor = ButtonsColorPalette;
+/**
+ * Component props.
+ */
+interface ItemProps extends Omit<ComponentProps<any>, 'onClick'>, ContainerProps {
+    /** Border radius, only if hasBorder is true. */
+    borderRadius?: string;
+    /** Color variant. */
+    color?: ItemColor;
+    /**
+     * Default select status.
+     * Used for uncontrolled version.
+     */
+    defaultSelected?: boolean;
+    /** Whether the component is active or not. */
+    isActive?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the component is focused or not. */
+    isFocused?: boolean;
+    /** Whether the component is hovered or not. */
+    isHovered?: boolean;
+    /** Whether the Item has borders or not. */
+    hasBorder?: boolean;
+    /** Whether the Item is selectable within a group of multiple selectable Items. */
+    hasCheckbox?: boolean;
+    /**
+     * Whether the component is selected or not.
+     * Used for controlled version.
+     */
+    isSelected?: boolean;
+    /** Method to handle component change. */
+    onClick?: (isSelected: boolean, value?: string, event?: MouseEvent<HTMLElement>, state?: ListboxContextProps) => void | ComponentProps<'div'>['onClick'];
+    /** Theme. */
+    theme?: Theme;
+    /** Value. */
+    value?: string;
+}
+type StyledItemProps = Omit<ItemProps, 'color' | 'onClick' | 'value'> & {
+    $borderRadius: ItemProps['borderRadius'];
+    $color: ItemProps['color'];
+    $hasBorder: ItemProps['hasBorder'];
+    $hasCheckbox: ItemProps['hasCheckbox'];
+    $isActive: ItemProps['isActive'];
+    $isDisabled: ItemProps['isDisabled'];
+    $isGradient: boolean;
+    $isHovered: ItemProps['isHovered'];
+    $theme: ItemProps['theme'];
+};
+
+/**
+ * Component style.
+ */
+declare const StyledItem: styled_components.StyledComponent<"div", any, Omit<ItemProps, "color" | "onClick" | "value"> & {
+    $borderRadius: string | undefined;
+    $color: string | undefined;
+    $hasBorder: boolean | undefined;
+    $hasCheckbox: boolean | undefined;
+    $isActive: boolean | undefined;
+    $isDisabled: boolean | undefined;
+    $isGradient: boolean;
+    $isHovered: boolean | undefined;
+    $theme: Theme | undefined;
+}, never>;
+
+declare const RenderedListboxItem: Comp<Omit<ItemProps, 'value'> & Required<Pick<ItemProps, 'value'>>, HTMLElement>;
+/**
+ * The Item component.
+ */
+declare const Item: Comp<ItemProps, HTMLElement>;
+
+export { ItemColor as I, RenderedListboxItem as R, StyledItemProps as S, ItemProps as a, StyledItem as b, Item as c };

package/_internal/Item2.js

@@ -1,82 +1,399 @@
-import * as styled_components from 'styled-components';
-import { B as ButtonsColorPalette, T as Theme } from './colors.js';
-import { ComponentProps, MouseEvent } from 'react';
-import { d as ListboxContextProps } from './types19.js';
-import { C as ContainerProps } from './styles2.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { useCallback, useEffect, forwardRef, useRef, useContext } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { j as baseContainer } from './styles4.js';
+import { u as useListboxItem } from './useListboxItem.js';
+import { c as useFocusOnListItem, b as FocusWithinGroupContext } from './useFocusOnListItem.js';
+import { mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@redsift/icons';
+import { StyledGradientBorder } from './gradient-border.js';
+import { u as useTheme } from './useTheme.js';
+import { B as ButtonsColorPalette } from './colors.js';
+import { C as ConditionalWrapper } from './ConditionalWrapper.js';
+import { F as Flexbox } from './Flexbox2.js';
+import { a as Icon } from './Icon2.js';
+import { T as Text } from './Text2.js';
+import { u as useId } from './useId.js';
+import { i as isComponent } from './isComponent.js';
 
 /**
- * Component color.
- */
-type ItemColor = ButtonsColorPalette;
-/**
- * Component props.
+ * Component style.
  */
-interface ItemProps extends Omit<ComponentProps<any>, 'onClick'>, ContainerProps {
-    /** Border radius, only if hasBorder is true. */
-    borderRadius?: string;
-    /** Color variant. */
-    color?: ItemColor;
-    /**
-     * Default select status.
-     * Used for uncontrolled version.
-     */
-    defaultSelected?: boolean;
-    /** Whether the component is active or not. */
-    isActive?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is focused or not. */
-    isFocused?: boolean;
-    /** Whether the component is hovered or not. */
-    isHovered?: boolean;
-    /** Whether the Item has borders or not. */
-    hasBorder?: boolean;
-    /** Whether the Item is selectable within a group of multiple selectable Items. */
-    hasCheckbox?: boolean;
-    /**
-     * Whether the component is selected or not.
-     * Used for controlled version.
-     */
-    isSelected?: boolean;
-    /** Method to handle component change. */
-    onClick?: (isSelected: boolean, value?: string, event?: MouseEvent<HTMLElement>, state?: ListboxContextProps) => void | ComponentProps<'div'>['onClick'];
-    /** Theme. */
-    theme?: Theme;
-    /** Value. */
-    value?: string;
+const StyledItem = styled.div`
+  min-height: 36px;
+  position: relative;
+  width: 100%;
+  padding: 8px 16px;
+
+  ${baseContainer}
+
+  align-items: center;
+  background: none;
+  border: none;
+  box-sizing: border-box;
+  display: inline-flex;
+
+  > a {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  ${_ref => {
+  let {
+    $color,
+    $isActive,
+    $isDisabled,
+    $isGradient,
+    $isHovered,
+    $hasBorder,
+    $theme
+  } = _ref;
+  return css`
+    ${!$isGradient ? css`
+          background-color: var(
+            --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}
+          );
+        ` : css`
+          background: var(
+            --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}
+          );
+        `}
+
+    ${$hasBorder ? css`
+          border: 1px solid
+            var(
+              --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-text-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}
+            );
+        ` : ''}
+  `;
+}}
+
+  &:hover {
+    outline: none;
+
+    ${_ref2 => {
+  let {
+    $color,
+    $isDisabled,
+    $isGradient,
+    $hasBorder,
+    $theme
+  } = _ref2;
+  return css`
+      cursor: ${$isDisabled ? 'default' : 'pointer'};
+
+      ${!$isDisabled ? css`
+            ${!$isGradient ? css`
+                  background-color: var(
+                    --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-background-hover
+                  );
+
+                  ${$hasBorder ? css`
+                        border: 1px solid
+                          var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-hover);
+                      ` : ''}
+                ` : css`
+                  background: var(
+                    --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-background-hover
+                  );
+                `}
+          ` : ''}
+    `;
+}};
+  }
+
+  &:active {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $color,
+    $hasBorder,
+    $isHovered,
+    $isDisabled,
+    $isGradient,
+    $theme
+  } = _ref3;
+  return css`
+      ${!$isDisabled ? css`
+            ${!$isGradient ? css`
+                  background-color: var(
+                    --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isHovered ? 'hover' : 'active'}
+                  );
+
+                  ${$hasBorder ? css`
+                        border: 1px solid
+                          var(
+                            --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-text-${$isHovered ? 'hover' : 'active'}
+                          );
+                      ` : ''}
+                ` : css`
+                  background: var(
+                    --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isHovered ? 'hover' : 'active'}
+                  );
+                `}
+          ` : ''}
+    `;
+}};
+  }
+`;
+
+function useMenuItem(props) {
+  const {
+    domElementRef,
+    id,
+    isDisabled,
+    onClick,
+    isLinkMenuItem,
+    linkRef
+  } = props;
+  const {
+    tabIndex,
+    isFocused,
+    handleKeyDown: handleFocusKeyDown,
+    handleClick: handleFocusClick
+  } = useFocusOnListItem({
+    domElementRef,
+    isDisabled: isDisabled,
+    id
+  });
+  const handleKeyDown = useCallback(event => {
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      if (isLinkMenuItem) {
+        var _linkRef$current;
+        linkRef === null || linkRef === void 0 ? void 0 : (_linkRef$current = linkRef.current) === null || _linkRef$current === void 0 ? void 0 : _linkRef$current.click();
+      } else {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+      }
+    }
+    handleFocusKeyDown(event);
+  }, []);
+  const handleClick = useCallback(() => {
+    handleFocusClick();
+    onClick === null || onClick === void 0 ? void 0 : onClick();
+  }, []);
+  useEffect(() => {
+    if (isFocused && domElementRef.current) {
+      var _current;
+      (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
+    }
+  }, [isFocused]);
+  return {
+    tabIndex,
+    isFocused,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  };
 }
-type StyledItemProps = Omit<ItemProps, 'color' | 'onClick' | 'value'> & {
-    $borderRadius: ItemProps['borderRadius'];
-    $color: ItemProps['color'];
-    $hasBorder: ItemProps['hasBorder'];
-    $hasCheckbox: ItemProps['hasCheckbox'];
-    $isActive: ItemProps['isActive'];
-    $isDisabled: ItemProps['isDisabled'];
-    $isGradient: boolean;
-    $isHovered: ItemProps['isHovered'];
-    $theme: ItemProps['theme'];
-};
 
-/**
- * Component style.
- */
-declare const StyledItem: styled_components.StyledComponent<"div", any, Omit<ItemProps, "color" | "onClick" | "value"> & {
-    $borderRadius: string | undefined;
-    $color: string | undefined;
-    $hasBorder: boolean | undefined;
-    $hasCheckbox: boolean | undefined;
-    $isActive: boolean | undefined;
-    $isDisabled: boolean | undefined;
-    $isGradient: boolean;
-    $isHovered: boolean | undefined;
-    $theme: Theme | undefined;
-}, never>;
-
-declare const RenderedListboxItem: Comp<Omit<ItemProps, 'value'> & Required<Pick<ItemProps, 'value'>>, HTMLElement>;
+const _excluded = ["borderRadius", "children", "className", "color", "defaultSelected", "id", "isActive", "isDisabled", "isHovered", "isSelected", "hasBorder", "hasCheckbox", "theme", "value"],
+  _excluded2 = ["borderRadius", "children", "className", "color", "hasBorder", "id", "isActive", "isDisabled", "isHovered", "theme", "onClick"];
+const COMPONENT_NAME = 'Item';
+const CLASSNAME = 'redsift-item';
+const RenderedListboxItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      borderRadius = '0',
+      children,
+      className,
+      color: propsColor,
+      defaultSelected,
+      id: propsId,
+      isActive,
+      isDisabled: propsIsDisabled,
+      isHovered,
+      isSelected: propsIsSelected,
+      hasBorder,
+      hasCheckbox,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const id = propsId !== null && propsId !== void 0 ? propsId : value;
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const {
+    tabIndex,
+    isFocused,
+    isSelected,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  } = useListboxItem({
+    domElementRef: divRef,
+    value,
+    id,
+    isDisabled: propsIsDisabled,
+    propsIsSelected: propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected
+  });
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $borderRadius: borderRadius,
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme,
+      width: "auto"
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledItem, _extends({
+    role: "option"
+  }, forwardedProps, {
+    id: id,
+    $borderRadius: borderRadius,
+    $color: color,
+    $hasBorder: hasBorder,
+    $hasCheckbox: hasCheckbox,
+    $isActive: isActive || isSelected,
+    $isDisabled: isDisabled,
+    $isGradient: isGradient,
+    $isHovered: isHovered || isFocused,
+    $theme: theme,
+    "aria-selected": isSelected,
+    "aria-disabled": isDisabled,
+    className: classNames(Item.className, className),
+    onClick: isDisabled ? undefined : handleClick,
+    ref: divRef,
+    onKeyDown: handleKeyDown,
+    tabIndex: tabIndex
+  }), hasCheckbox ? /*#__PURE__*/React__default.createElement(Flexbox, null, isSelected ? /*#__PURE__*/React__default.createElement(Icon, {
+    color: isDisabled ? 'grey' : color,
+    icon: mdiCheckboxMarked
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    color: "question",
+    icon: mdiCheckboxBlankOutline
+  }), children ? children : /*#__PURE__*/React__default.createElement(Text, null, value)) : children !== null && children !== void 0 ? children : value));
+});
+const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      borderRadius = '0',
+      children,
+      className,
+      color: propsColor,
+      hasBorder,
+      id: propsId,
+      isActive,
+      isDisabled: propsIsDisabled,
+      isHovered,
+      theme: propsTheme,
+      onClick
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded2);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const _ref = useRef();
+  const divRef = ref !== null && ref !== void 0 ? ref : _ref;
+  const linkRef = useRef(null);
+  const isLinkMenuItem = isComponent('Link')(children);
+  const {
+    tabIndex,
+    isFocused,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  } = useMenuItem({
+    domElementRef: divRef,
+    id,
+    isDisabled: propsIsDisabled,
+    onClick: onClick,
+    isLinkMenuItem,
+    linkRef
+  });
+  const theme = useTheme(propsTheme);
+  const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  const isGradient = color === ButtonsColorPalette.radar;
+  return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: isGradient,
+    wrapper: children => /*#__PURE__*/React__default.createElement(StyledGradientBorder, {
+      $borderRadius: borderRadius,
+      $color: color,
+      $isActive: isActive,
+      $isDisabled: isDisabled,
+      $isHovered: isHovered,
+      $theme: theme,
+      width: "auto"
+    }, children)
+  }, /*#__PURE__*/React__default.createElement(StyledItem, _extends({
+    as: "li",
+    role: isLinkMenuItem ? 'none' : 'menuitem'
+  }, forwardedProps, {
+    id: id,
+    $borderRadius: borderRadius,
+    $color: color,
+    $hasBorder: hasBorder,
+    $hasCheckbox: false,
+    $isActive: isActive,
+    $isDisabled: isDisabled,
+    $isGradient: isGradient,
+    $isHovered: isHovered || isFocused,
+    $theme: theme,
+    "aria-disabled": isDisabled,
+    className: classNames(Item.className, className),
+    onClick: isDisabled ? undefined : handleClick,
+    ref: divRef,
+    onKeyDown: handleKeyDown,
+    tabIndex: tabIndex
+  }), isLinkMenuItem ? /*#__PURE__*/React__default.cloneElement(children, {
+    role: 'menuitem',
+    ref: linkRef
+  }) : children));
+});
+
 /**
  * The Item component.
  */
-declare const Item: Comp<ItemProps, HTMLElement>;
+const Item = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value
+  } = props;
+  const focusContext = useContext(FocusWithinGroupContext);
+  const isListbox = focusContext.state.listRole === 'listbox';
+  if (!focusContext.state.filter) {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends({}, props, {
+      ref: ref
+    }));
+  }
+  const {
+    value: filterValue,
+    type,
+    caseSensitive
+  } = focusContext.state.filter;
+  if (!filterValue) {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends({}, props, {
+      ref: ref
+    }));
+  } else if (caseSensitive && (type === 'startsWith' && value.startsWith(filterValue) || type === 'contains' && value.includes(filterValue) || type === 'endsWith' && value.endsWith(filterValue))) {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends({}, props, {
+      ref: ref
+    }));
+  } else if (!caseSensitive && (type === 'startsWith' && value.toLowerCase().startsWith(filterValue.toLowerCase()) || type === 'contains' && value.toLowerCase().includes(filterValue.toLowerCase()) || type === 'endsWith' && value.toLowerCase().endsWith(filterValue.toLowerCase()))) {
+    return isListbox ? /*#__PURE__*/React__default.createElement(RenderedListboxItem, _extends({}, props, {
+      value: props.value,
+      ref: ref
+    })) : /*#__PURE__*/React__default.createElement(RenderedMenuItem, _extends({}, props, {
+      ref: ref
+    }));
+  }
+  return null;
+});
+Item.className = CLASSNAME;
+Item.displayName = COMPONENT_NAME;
 
-export { ItemColor as I, RenderedListboxItem as R, StyledItemProps as S, ItemProps as a, StyledItem as b, Item as c };
+export { Item as I, RenderedListboxItem as R, StyledItem as S };
+//# sourceMappingURL=Item2.js.map

package/_internal/Link.d2.ts

@@ -0,0 +1,26 @@
+import * as styled_components from 'styled-components';
+import { L as LinkProps } from './types.d18.ts';
+import { N as NotificationsColorPalette, d as NeutralColorPalette, T as Theme } from './colors.js';
+import { C as Comp } from './helpers.js';
+
+/**
+ * Component style.
+ */
+declare const StyledLink: styled_components.StyledComponent<"a", any, Omit<LinkProps, "isDisabled"> & {
+    $isDisabled: boolean | undefined;
+    $color: (string & {}) | "radar" | NotificationsColorPalette | NeutralColorPalette | undefined;
+    $theme: Theme | undefined;
+    $hasIcons: boolean;
+}, never>;
+
+/**
+ * The Link is a semantic link that looks like a link.
+ * Shoud be used for internal and external navigation only.
+ *
+ * For a semantic link that looks like a button, please use the ButtonLink component.
+ * For a semantic button that looks like a button, please use the Button component.
+ * For a semantic button that looks like a link, please use the LinkButton component.
+ */
+declare const Link: Comp<LinkProps, HTMLAnchorElement>;
+
+export { Link as L, StyledLink as S };