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

package/components/item/types.d.ts

@@ -1,59 +0,0 @@
-import { ComponentProps, MouseEvent } from 'react';
-import { ListboxContextProps } from '../listbox/types.js';
-import { ButtonsColorPalette, Theme } from '../../types/colors.js';
-import { ContainerProps } from '../../types/styles.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'];
-};
-
-export { ItemColor, ItemProps, StyledItemProps };

package/components/item/useMenuItem.js

@@ -1,55 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { useFocusOnListItem } from '../focus-within-group/useFocusOnListItem.js';
-
-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
-  };
-}
-
-export { useMenuItem };
-//# sourceMappingURL=useMenuItem.js.map

package/components/item/useMenuItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMenuItem.js","sources":["../../../src/components/item/useMenuItem.ts"],"sourcesContent":["import { useCallback, useEffect, RefObject, KeyboardEvent } from 'react';\nimport { UseFocusWithinGroupProps, useFocusOnListItem } from '../focus-within-group';\n\nexport function useMenuItem(props: {\n  domElementRef: RefObject<Element>;\n  id: string;\n  isDisabled?: boolean;\n  onClick?: () => void;\n  isLinkMenuItem?: boolean;\n  linkRef?: RefObject<HTMLAnchorElement>;\n}): UseFocusWithinGroupProps & {\n  isDisabled?: boolean;\n} {\n  const { domElementRef, id, isDisabled, onClick, isLinkMenuItem, linkRef } = props;\n\n  const {\n    tabIndex,\n    isFocused,\n    handleKeyDown: handleFocusKeyDown,\n    handleClick: handleFocusClick,\n  } = useFocusOnListItem({ domElementRef, isDisabled: isDisabled!, id });\n\n  const handleKeyDown = useCallback((event: KeyboardEvent) => {\n    const code = event.code;\n    if (code === 'Enter' || code === 'Space') {\n      if (isLinkMenuItem) {\n        linkRef?.current?.click();\n      } else {\n        onClick?.();\n      }\n    }\n    handleFocusKeyDown(event);\n  }, []);\n\n  const handleClick = useCallback(() => {\n    handleFocusClick();\n    onClick?.();\n  }, []);\n\n  useEffect(() => {\n    if (isFocused && domElementRef.current) {\n      (domElementRef as RefObject<SVGElement | HTMLElement>).current?.focus();\n    }\n  }, [isFocused]);\n\n  return {\n    tabIndex,\n    isFocused,\n    isDisabled,\n    handleKeyDown,\n    handleClick,\n  };\n}\n"],"names":["useMenuItem","props","domElementRef","id","isDisabled","onClick","isLinkMenuItem","linkRef","tabIndex","isFocused","handleKeyDown","handleFocusKeyDown","handleClick","handleFocusClick","useFocusOnListItem","useCallback","event","code","_linkRef$current","current","click","useEffect","_current","focus"],"mappings":";;;AAGO,SAASA,WAAWA,CAACC,KAO3B,EAEC;EACA,MAAM;IAAEC,aAAa;IAAEC,EAAE;IAAEC,UAAU;IAAEC,OAAO;IAAEC,cAAc;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAGN,KAAK,CAAA;EAEjF,MAAM;IACJO,QAAQ;IACRC,SAAS;AACTC,IAAAA,aAAa,EAAEC,kBAAkB;AACjCC,IAAAA,WAAW,EAAEC,gBAAAA;GACd,GAAGC,kBAAkB,CAAC;IAAEZ,aAAa;AAAEE,IAAAA,UAAU,EAAEA,UAAW;AAAED,IAAAA,EAAAA;AAAG,GAAC,CAAC,CAAA;AAEtE,EAAA,MAAMO,aAAa,GAAGK,WAAW,CAAEC,KAAoB,IAAK;AAC1D,IAAA,MAAMC,IAAI,GAAGD,KAAK,CAACC,IAAI,CAAA;AACvB,IAAA,IAAIA,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,OAAO,EAAE;AACxC,MAAA,IAAIX,cAAc,EAAE;AAAA,QAAA,IAAAY,gBAAA,CAAA;AAClBX,QAAAA,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAAW,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,gBAAA,GAAPX,OAAO,CAAEY,OAAO,MAAA,IAAA,IAAAD,gBAAA,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAA,CAAkBE,KAAK,EAAE,CAAA;AAC3B,OAAC,MAAM;AACLf,QAAAA,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,EAAI,CAAA;AACb,OAAA;AACF,KAAA;IACAM,kBAAkB,CAACK,KAAK,CAAC,CAAA;GAC1B,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMJ,WAAW,GAAGG,WAAW,CAAC,MAAM;AACpCF,IAAAA,gBAAgB,EAAE,CAAA;AAClBR,IAAAA,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,EAAI,CAAA;GACZ,EAAE,EAAE,CAAC,CAAA;AAENgB,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIZ,SAAS,IAAIP,aAAa,CAACiB,OAAO,EAAE;AAAA,MAAA,IAAAG,QAAA,CAAA;AACtC,MAAA,CAAAA,QAAA,GAACpB,aAAa,CAAyCiB,OAAO,MAAA,IAAA,IAAAG,QAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA9DA,QAAA,CAAgEC,KAAK,EAAE,CAAA;AACzE,KAAA;AACF,GAAC,EAAE,CAACd,SAAS,CAAC,CAAC,CAAA;EAEf,OAAO;IACLD,QAAQ;IACRC,SAAS;IACTL,UAAU;IACVM,aAAa;AACbE,IAAAA,WAAAA;GACD,CAAA;AACH;;;;"}

package/components/link/Link.d.ts

@@ -1,14 +0,0 @@
-import { LinkProps } from './types.js';
-import { Comp } from '../../types/helpers.js';
-
-/**
- * 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 };

package/components/link/Link.js

@@ -1,67 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef } from 'react';
-import classNames from 'classnames';
-import { StyledLink } from './styles.js';
-import { useTheme } from '../theme/useTheme.js';
-import { Icon } from '../icon/Icon.js';
-
-const _excluded = ["as", "children", "className", "color", "href", "isDisabled", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "theme"];
-const COMPONENT_NAME = 'Link';
-const CLASSNAME = 'redsift-link';
-
-/**
- * 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.
- */
-const Link = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      as,
-      children,
-      className,
-      color = 'primary',
-      href,
-      isDisabled,
-      leftIcon,
-      leftIconProps,
-      rightIcon,
-      rightIconProps,
-      theme: propsTheme
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
-  const theme = useTheme(propsTheme);
-  return /*#__PURE__*/React.createElement(StyledLink, _extends({
-    as: as,
-    "aria-disabled": isDisabled,
-    role: "link",
-    tabIndex: !isDisabled ? 0 : undefined
-  }, forwardedProps, {
-    $color: color,
-    $isDisabled: isDisabled,
-    $theme: theme,
-    $hasIcons: leftIcon || rightIcon,
-    className: classNames(Link.className, className),
-    href: !isDisabled ? href : undefined,
-    ref: ref
-  }), leftIcon || rightIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, leftIcon ? /*#__PURE__*/React.createElement(Icon, _extends({
-    icon: leftIcon,
-    "aria-hidden": "true",
-    className: "left",
-    size: "xsmall"
-  }, leftIconProps)) : null, /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, children), rightIcon ? /*#__PURE__*/React.createElement(Icon, _extends({
-    icon: rightIcon,
-    "aria-hidden": "true",
-    className: "right",
-    size: "xsmall"
-  }, rightIconProps)) : null) : children);
-});
-Link.className = CLASSNAME;
-Link.displayName = COMPONENT_NAME;
-
-export { Link };
-//# sourceMappingURL=Link.js.map

package/components/link/Link.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledLink } from './styles';\nimport { LinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { Icon } from '../icon';\n\nconst COMPONENT_NAME = 'Link';\nconst CLASSNAME = 'redsift-link';\n\n/**\n * The Link is a semantic link that looks like a link.\n * Shoud be used for internal and external navigation only.\n *\n * For a semantic link that looks like a button, please use the ButtonLink component.\n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const Link: Comp<LinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n  const {\n    as,\n    children,\n    className,\n    color = 'primary',\n    href,\n    isDisabled,\n    leftIcon,\n    leftIconProps,\n    rightIcon,\n    rightIconProps,\n    theme: propsTheme,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledLink\n      as={as as any}\n      aria-disabled={isDisabled}\n      role=\"link\"\n      tabIndex={!isDisabled ? 0 : undefined}\n      {...forwardedProps}\n      $color={color}\n      $isDisabled={isDisabled}\n      $theme={theme}\n      $hasIcons={leftIcon || rightIcon}\n      className={classNames(Link.className, className)}\n      href={!isDisabled ? href : undefined}\n      ref={ref as RefObject<HTMLAnchorElement>}\n    >\n      {leftIcon || rightIcon ? (\n        <>\n          {leftIcon ? (\n            <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" size=\"xsmall\" {...leftIconProps} />\n          ) : null}\n          <span className=\"text\">{children}</span>\n          {rightIcon ? (\n            <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" size=\"xsmall\" {...rightIconProps} />\n          ) : null}\n        </>\n      ) : (\n        children\n      )}\n    </StyledLink>\n  );\n});\nLink.className = CLASSNAME;\nLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Link","forwardRef","props","ref","as","children","className","color","href","isDisabled","leftIcon","leftIconProps","rightIcon","rightIconProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledLink","_extends","role","tabIndex","undefined","$color","$isDisabled","$theme","$hasIcons","classNames","Fragment","Icon","icon","size","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,IAAwC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACjF,MAAM;MACJC,EAAE;MACFC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,GAAG,SAAS;MACjBC,IAAI;MACJC,UAAU;MACVC,QAAQ;MACRC,aAAa;MACbC,SAAS;MACTC,cAAc;AACdC,MAAAA,KAAK,EAAEC,UAAAA;AAET,KAAC,GAAGb,KAAK;AADJc,IAAAA,cAAc,GAAAC,wBAAA,CACff,KAAK,EAAAgB,SAAA,CAAA,CAAA;AAET,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACC,UAAU,EAAAC,QAAA,CAAA;AACTnB,IAAAA,EAAE,EAAEA,EAAU;AACd,IAAA,eAAA,EAAeK,UAAW;AAC1Be,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,QAAQ,EAAE,CAAChB,UAAU,GAAG,CAAC,GAAGiB,SAAAA;AAAU,GAAA,EAClCV,cAAc,EAAA;AAClBW,IAAAA,MAAM,EAAEpB,KAAM;AACdqB,IAAAA,WAAW,EAAEnB,UAAW;AACxBoB,IAAAA,MAAM,EAAEf,KAAM;IACdgB,SAAS,EAAEpB,QAAQ,IAAIE,SAAU;IACjCN,SAAS,EAAEyB,UAAU,CAAC/B,IAAI,CAACM,SAAS,EAAEA,SAAS,CAAE;AACjDE,IAAAA,IAAI,EAAE,CAACC,UAAU,GAAGD,IAAI,GAAGkB,SAAU;AACrCvB,IAAAA,GAAG,EAAEA,GAAAA;GAEJO,CAAAA,EAAAA,QAAQ,IAAIE,SAAS,gBACpBQ,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAY,QAAA,EACGtB,IAAAA,EAAAA,QAAQ,gBACPU,KAAA,CAAAC,aAAA,CAACY,IAAI,EAAAV,QAAA,CAAA;AAACW,IAAAA,IAAI,EAAExB,QAAS;AAAC,IAAA,aAAA,EAAY,MAAM;AAACJ,IAAAA,SAAS,EAAC,MAAM;AAAC6B,IAAAA,IAAI,EAAC,QAAA;GAAaxB,EAAAA,aAAa,CAAG,CAAC,GAC3F,IAAI,eACRS,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMf,IAAAA,SAAS,EAAC,MAAA;GAAQD,EAAAA,QAAe,CAAC,EACvCO,SAAS,gBACRQ,KAAA,CAAAC,aAAA,CAACY,IAAI,EAAAV,QAAA,CAAA;AAACW,IAAAA,IAAI,EAAEtB,SAAU;AAAC,IAAA,aAAA,EAAY,MAAM;AAACN,IAAAA,SAAS,EAAC,OAAO;AAAC6B,IAAAA,IAAI,EAAC,QAAA;GAAatB,EAAAA,cAAc,CAAG,CAAC,GAC9F,IACJ,CAAC,GAEHR,QAEQ,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFL,IAAI,CAACM,SAAS,GAAGP,SAAS,CAAA;AAC1BC,IAAI,CAACoC,WAAW,GAAGtC,cAAc;;;;"}

package/components/link/styles.d.ts

@@ -1,15 +0,0 @@
-import * as styled_components from 'styled-components';
-import { LinkProps } from './types.js';
-import { NotificationsColorPalette, NeutralColorPalette, Theme } from '../../types/colors.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>;
-
-export { StyledLink };

package/components/link/styles.js

@@ -1,145 +0,0 @@
-import styled, { css } from 'styled-components';
-import { baseStyling } from '../shared/styles.js';
-import { NotificationsColorPalette, NeutralColorPalette, ProductColorPalette } from '../../types/colors.js';
-
-/**
- * Component style.
- */
-const StyledLink = styled.a`
-  background: none;
-  border: none;
-  color: unset;
-  cursor: text !important;
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  font-family: var(--redsift-typography-link-font-family);
-  font-size: var(--redsift-typography-link-font-size);
-  font-weight: var(--redsift-typography-link-font-weight);
-  height: var(--redsift-typography-link-line-height);
-  line-height: var(--redsift-typography-link-line-height);
-  padding: unset;
-  position: relative;
-  text-decoration: none;
-  width: fit-content;
-
-  ${_ref => {
-  let {
-    $hasIcons
-  } = _ref;
-  return $hasIcons ? css`
-          bottom: -2px;
-        ` : '';
-}}
-
-  ${baseStyling}
-
-  ${_ref2 => {
-  let {
-    $isDisabled,
-    $color,
-    $theme,
-    $hasIcons
-  } = _ref2;
-  return !$isDisabled ? css`
-          ${$color && $color === 'radar' ? css`
-                  background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
-                  background-clip: text;
-                  color: transparent;
-
-                  path {
-                    fill: url(#${$color}-gradient-default);
-                  }
-                ` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
-                  &,
-                  .redsift-icon:not(.colored) {
-                    color: var(--redsift-color-notifications-${$color}-primary);
-                  }
-                ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
-                  &,
-                  .redsift-icon:not(.colored) {
-                    color: var(--redsift-color-neutral-${$color});
-                  }
-                ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
-                  &,
-                  .redsift-icon:not(.colored) {
-                    color: var(--redsift-color-product-${$color});
-                  }
-                ` : css`
-                  &,
-                  .redsift-icon:not(.colored) {
-                    color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};
-                  }
-                `}}
-
-          ${$color && $color === 'radar' && !$hasIcons ? css`
-                  position: relative;
-
-                  &:hover,
-                  &:focus-visible {
-                    cursor: pointer !important;
-                  }
-
-                  &:hover::before,
-                  &:focus-visible::before {
-                    content: '';
-                    position: absolute;
-                    bottom: 3px;
-                    width: 100%;
-                    left: 0;
-                    height: 1px;
-                    background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
-                  }
-                ` : $color && $color === 'radar' && $hasIcons ? css`
-                  position: relative;
-
-                  &:hover,
-                  &:focus-visible {
-                    cursor: pointer !important;
-                  }
-
-                  .text::before {
-                    content: '';
-                    position: absolute;
-                    bottom: 3px;
-                    width: 100%;
-                    left: 0;
-                    height: 1px;
-                    background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
-                    transform: scaleX(0);
-                  }
-
-                  &:hover .text::before,
-                  .icon:hover + .text::before,
-                  .text:hover::before {
-                    transform: scaleX(1);
-                  }
-                ` : css`
-                  text-decoration: underline;
-                  text-decoration-color: transparent;
-                  text-underline-offset: 2px;
-
-                  &:hover,
-                  &:focus-visible {
-                    cursor: pointer !important;
-                    ${Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
-                          text-decoration-color: var(--redsift-color-notifications-${$color}-primary);
-                        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
-                          text-decoration-color: var(--redsift-color-neutral-${$color});
-                        ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
-                          text-decoration-color: var(--redsift-color-product-${$color});
-                        ` : css`
-                          text-decoration-color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};
-                        `}
-                  }
-                `}
-        ` : '';
-}}
-
-  &:focus-visible {
-    outline: 2px solid var(--redsift-color-primary-n);
-  }
-`;
-
-export { StyledLink };
-//# sourceMappingURL=styles.js.map

package/components/link/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":["../../../src/components/link/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledLinkProps } from './types';\nimport { NotificationsColorPalette, NeutralColorPalette, ProductColorPalette } from '@redsift/design-system/types';\n\n/**\n * Component style.\n */\nexport const StyledLink = styled.a<StyledLinkProps>`\n  background: none;\n  border: none;\n  color: unset;\n  cursor: text !important;\n  display: inline-flex;\n  gap: 4px;\n  align-items: center;\n  font-family: var(--redsift-typography-link-font-family);\n  font-size: var(--redsift-typography-link-font-size);\n  font-weight: var(--redsift-typography-link-font-weight);\n  height: var(--redsift-typography-link-line-height);\n  line-height: var(--redsift-typography-link-line-height);\n  padding: unset;\n  position: relative;\n  text-decoration: none;\n  width: fit-content;\n\n  ${({ $hasIcons }) =>\n    $hasIcons\n      ? css`\n          bottom: -2px;\n        `\n      : ''}\n\n  ${baseStyling}\n\n  ${({ $isDisabled, $color, $theme, $hasIcons }) =>\n    !$isDisabled\n      ? css`\n          ${\n            $color && $color === 'radar'\n              ? css`\n                  background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);\n                  background-clip: text;\n                  color: transparent;\n\n                  path {\n                    fill: url(#${$color}-gradient-default);\n                  }\n                `\n              : Object.keys(NotificationsColorPalette).indexOf($color!) !== -1\n              ? css`\n                  &,\n                  .redsift-icon:not(.colored) {\n                    color: var(--redsift-color-notifications-${$color}-primary);\n                  }\n                `\n              : Object.keys(NeutralColorPalette).indexOf($color!) !== -1\n              ? css`\n                  &,\n                  .redsift-icon:not(.colored) {\n                    color: var(--redsift-color-neutral-${$color});\n                  }\n                `\n              : Object.keys(ProductColorPalette).indexOf($color!) !== -1\n              ? css`\n                  &,\n                  .redsift-icon:not(.colored) {\n                    color: var(--redsift-color-product-${$color});\n                  }\n                `\n              : css`\n                  &,\n                  .redsift-icon:not(.colored) {\n                    color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};\n                  }\n                `\n          }}\n\n          ${\n            $color && $color === 'radar' && !$hasIcons\n              ? css`\n                  position: relative;\n\n                  &:hover,\n                  &:focus-visible {\n                    cursor: pointer !important;\n                  }\n\n                  &:hover::before,\n                  &:focus-visible::before {\n                    content: '';\n                    position: absolute;\n                    bottom: 3px;\n                    width: 100%;\n                    left: 0;\n                    height: 1px;\n                    background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);\n                  }\n                `\n              : $color && $color === 'radar' && $hasIcons\n              ? css`\n                  position: relative;\n\n                  &:hover,\n                  &:focus-visible {\n                    cursor: pointer !important;\n                  }\n\n                  .text::before {\n                    content: '';\n                    position: absolute;\n                    bottom: 3px;\n                    width: 100%;\n                    left: 0;\n                    height: 1px;\n                    background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);\n                    transform: scaleX(0);\n                  }\n\n                  &:hover .text::before,\n                  .icon:hover + .text::before,\n                  .text:hover::before {\n                    transform: scaleX(1);\n                  }\n                `\n              : css`\n                  text-decoration: underline;\n                  text-decoration-color: transparent;\n                  text-underline-offset: 2px;\n\n                  &:hover,\n                  &:focus-visible {\n                    cursor: pointer !important;\n                    ${Object.keys(NotificationsColorPalette).indexOf($color!) !== -1\n                      ? css`\n                          text-decoration-color: var(--redsift-color-notifications-${$color}-primary);\n                        `\n                      : Object.keys(NeutralColorPalette).indexOf($color!) !== -1\n                      ? css`\n                          text-decoration-color: var(--redsift-color-neutral-${$color});\n                        `\n                      : Object.keys(ProductColorPalette).indexOf($color!) !== -1\n                      ? css`\n                          text-decoration-color: var(--redsift-color-product-${$color});\n                        `\n                      : css`\n                          text-decoration-color: ${$color ||\n                          css`var(--redsift-color-${$theme}-components-text-primary)`};\n                        `}\n                  }\n                `\n          }\n        `\n      : ''}\n\n  &:focus-visible {\n    outline: 2px solid var(--redsift-color-primary-n);\n  }\n`;\n"],"names":["StyledLink","styled","a","_ref","$hasIcons","css","baseStyling","_ref2","$isDisabled","$color","$theme","Object","keys","NotificationsColorPalette","indexOf","NeutralColorPalette","ProductColorPalette"],"mappings":"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"}

package/components/link/types.d.ts

@@ -1,40 +0,0 @@
-import { ComponentProps, ElementType } from 'react';
-import { NotificationsColorPalette, NeutralColorPalette, Theme } from '../../types/colors.js';
-import { StylingProps } from '../../types/styles.js';
-import { IconProps } from '../icon/types.js';
-
-/**
- * Component props.
- */
-interface LinkProps extends ComponentProps<'a'>, StylingProps {
-    /** Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). */
-    as?: 'a' | ElementType;
-    /** Color variant. Either from color palette or hex or rgb strings. */
-    color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /**
-     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
-     * Can also be a ReactElement.
-     */
-    leftIcon?: IconProps['icon'];
-    /** Props to add to the left icon. */
-    leftIconProps?: Omit<IconProps, 'icon' | 'ref'>;
-    /**
-     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
-     * Can also be a ReactElement.
-     */
-    rightIcon?: IconProps['icon'];
-    /** Props to add to the right icon. */
-    rightIconProps?: Omit<IconProps, 'icon' | 'ref'>;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledLinkProps = Omit<LinkProps, 'isDisabled'> & {
-    $isDisabled: LinkProps['isDisabled'];
-    $color: LinkProps['color'];
-    $theme: LinkProps['theme'];
-    $hasIcons: boolean;
-};
-
-export { LinkProps, StyledLinkProps };

package/components/link-button/LinkButton.d.ts

@@ -1,13 +0,0 @@
-import { LinkButtonProps } from './types.js';
-import { Comp } from '../../types/helpers.js';
-
-/**
- * The LinkButton is a semantic button that looks like a link.
- *
- * For a semantic button that looks like a button, please use the Button component.
- * For a semantic link that looks like a link, please use the Link component.
- * For a semantic link that looks like a button, please use the ButtonLink component.
- */
-declare const LinkButton: Comp<LinkButtonProps, HTMLButtonElement>;
-
-export { LinkButton };

package/components/link-button/LinkButton.js

@@ -1,66 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef } from 'react';
-import classNames from 'classnames';
-import { StyledLink } from '../link/styles.js';
-import { useTheme } from '../theme/useTheme.js';
-import { Icon } from '../icon/Icon.js';
-
-const _excluded = ["children", "className", "color", "disabled", "isDisabled", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "theme"];
-const COMPONENT_NAME = 'LinkButton';
-const CLASSNAME = 'redsift-link-button';
-
-/**
- * The LinkButton is a semantic button that looks like a link.
- *
- * For a semantic button that looks like a button, please use the Button component.
- * For a semantic link that looks like a link, please use the Link component.
- * For a semantic link that looks like a button, please use the ButtonLink component.
- */
-const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
-  const buttonRef = ref || useRef();
-  const {
-      children,
-      className,
-      color = 'primary',
-      disabled,
-      isDisabled: propsIsDisabled,
-      leftIcon,
-      leftIconProps,
-      rightIcon,
-      rightIconProps,
-      theme: propsTheme
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
-  const isDisabled = propsIsDisabled || disabled;
-  const theme = useTheme(propsTheme);
-  return /*#__PURE__*/React.createElement(StyledLink, _extends({
-    as: "button"
-  }, forwardedProps, {
-    $color: color,
-    $isDisabled: isDisabled || disabled,
-    $theme: theme,
-    "aria-disabled": isDisabled || disabled,
-    className: classNames(LinkButton.className, className),
-    disabled: isDisabled || disabled
-    // @ts-ignore
-    ,
-    ref: buttonRef
-  }), leftIcon || rightIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, leftIcon ? /*#__PURE__*/React.createElement(Icon, _extends({
-    icon: leftIcon,
-    "aria-hidden": "true",
-    className: "left",
-    size: "xsmall"
-  }, leftIconProps)) : null, /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, children), rightIcon ? /*#__PURE__*/React.createElement(Icon, _extends({
-    icon: rightIcon,
-    "aria-hidden": "true",
-    className: "right",
-    size: "xsmall"
-  }, rightIconProps)) : null) : children);
-});
-LinkButton.className = CLASSNAME;
-LinkButton.displayName = COMPONENT_NAME;
-
-export { LinkButton };
-//# sourceMappingURL=LinkButton.js.map

package/components/link-button/LinkButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LinkButton.js","sources":["../../../src/components/link-button/LinkButton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledLink } from '../link';\nimport { LinkButtonProps } from './types';\nimport { useTheme } from '../theme';\nimport { Icon } from '../icon';\n\nconst COMPONENT_NAME = 'LinkButton';\nconst CLASSNAME = 'redsift-link-button';\n\n/**\n * The LinkButton is a semantic button that looks like a link.\n *\n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic link that looks like a button, please use the ButtonLink component.\n */\nexport const LinkButton: Comp<LinkButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n  const buttonRef = ref || useRef<HTMLButtonElement>();\n\n  const {\n    children,\n    className,\n    color = 'primary',\n    disabled,\n    isDisabled: propsIsDisabled,\n    leftIcon,\n    leftIconProps,\n    rightIcon,\n    rightIconProps,\n    theme: propsTheme,\n    ...forwardedProps\n  } = props;\n  const isDisabled = propsIsDisabled || disabled;\n\n  const theme = useTheme(propsTheme);\n\n  return (\n    <StyledLink\n      as=\"button\"\n      {...forwardedProps}\n      $color={color}\n      $isDisabled={isDisabled || disabled}\n      $theme={theme}\n      aria-disabled={isDisabled || disabled}\n      className={classNames(LinkButton.className, className)}\n      disabled={isDisabled || disabled}\n      // @ts-ignore\n      ref={buttonRef as RefObject<HTMLButtonElement>}\n    >\n      {leftIcon || rightIcon ? (\n        <>\n          {leftIcon ? (\n            <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" size=\"xsmall\" {...leftIconProps} />\n          ) : null}\n          <span className=\"text\">{children}</span>\n          {rightIcon ? (\n            <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" size=\"xsmall\" {...rightIconProps} />\n          ) : null}\n        </>\n      ) : (\n        children\n      )}\n    </StyledLink>\n  );\n});\nLinkButton.className = CLASSNAME;\nLinkButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","LinkButton","forwardRef","props","ref","buttonRef","useRef","children","className","color","disabled","isDisabled","propsIsDisabled","leftIcon","leftIconProps","rightIcon","rightIconProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledLink","_extends","as","$color","$isDisabled","$theme","classNames","Fragment","Icon","icon","size","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAoD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAC7F,EAAA,MAAMC,SAAS,GAAGD,GAAG,IAAIE,MAAM,EAAqB,CAAA;EAEpD,MAAM;MACJC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,GAAG,SAAS;MACjBC,QAAQ;AACRC,MAAAA,UAAU,EAAEC,eAAe;MAC3BC,QAAQ;MACRC,aAAa;MACbC,SAAS;MACTC,cAAc;AACdC,MAAAA,KAAK,EAAEC,UAAAA;AAET,KAAC,GAAGf,KAAK;AADJgB,IAAAA,cAAc,GAAAC,wBAAA,CACfjB,KAAK,EAAAkB,SAAA,CAAA,CAAA;AACT,EAAA,MAAMV,UAAU,GAAGC,eAAe,IAAIF,QAAQ,CAAA;AAE9C,EAAA,MAAMO,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACC,UAAU,EAAAC,QAAA,CAAA;AACTC,IAAAA,EAAE,EAAC,QAAA;AAAQ,GAAA,EACPR,cAAc,EAAA;AAClBS,IAAAA,MAAM,EAAEnB,KAAM;IACdoB,WAAW,EAAElB,UAAU,IAAID,QAAS;AACpCoB,IAAAA,MAAM,EAAEb,KAAM;IACd,eAAeN,EAAAA,UAAU,IAAID,QAAS;IACtCF,SAAS,EAAEuB,UAAU,CAAC9B,UAAU,CAACO,SAAS,EAAEA,SAAS,CAAE;IACvDE,QAAQ,EAAEC,UAAU,IAAID,QAAAA;AACxB;AAAA;AACAN,IAAAA,GAAG,EAAEC,SAAAA;GAEJQ,CAAAA,EAAAA,QAAQ,IAAIE,SAAS,gBACpBQ,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAS,QAAA,EACGnB,IAAAA,EAAAA,QAAQ,gBACPU,KAAA,CAAAC,aAAA,CAACS,IAAI,EAAAP,QAAA,CAAA;AAACQ,IAAAA,IAAI,EAAErB,QAAS;AAAC,IAAA,aAAA,EAAY,MAAM;AAACL,IAAAA,SAAS,EAAC,MAAM;AAAC2B,IAAAA,IAAI,EAAC,QAAA;GAAarB,EAAAA,aAAa,CAAG,CAAC,GAC3F,IAAI,eACRS,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMhB,IAAAA,SAAS,EAAC,MAAA;GAAQD,EAAAA,QAAe,CAAC,EACvCQ,SAAS,gBACRQ,KAAA,CAAAC,aAAA,CAACS,IAAI,EAAAP,QAAA,CAAA;AAACQ,IAAAA,IAAI,EAAEnB,SAAU;AAAC,IAAA,aAAA,EAAY,MAAM;AAACP,IAAAA,SAAS,EAAC,OAAO;AAAC2B,IAAAA,IAAI,EAAC,QAAA;GAAanB,EAAAA,cAAc,CAAG,CAAC,GAC9F,IACJ,CAAC,GAEHT,QAEQ,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFN,UAAU,CAACO,SAAS,GAAGR,SAAS,CAAA;AAChCC,UAAU,CAACmC,WAAW,GAAGrC,cAAc;;;;"}

package/components/link-button/types.d.ts

@@ -1,13 +0,0 @@
-import { LinkProps } from '../link/types.js';
-import { ButtonProps } from '../button/types.js';
-
-/**
- * Component props.
- */
-interface LinkButtonProps extends Pick<LinkProps, 'color' | 'leftIcon' | 'leftIconProps' | 'rightIconProps' | 'rightIcon'>, Omit<ButtonProps, 'color' | 'fullWidth' | 'leftIcon' | 'leftIconProps' | 'rightIconProps' | 'rightIcon' | 'size' | 'variant'> {
-}
-type StyledLinkButtonProps = Omit<LinkButtonProps, 'isDisabled'> & {
-    $isDisabled: LinkButtonProps['isDisabled'];
-};
-
-export { LinkButtonProps, StyledLinkButtonProps };

package/components/listbox/ActiveDescendantListbox.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ListboxProps, ListboxContextProps } from './types.js';
-
-declare const ActiveDescendantListbox: React.ForwardRefExoticComponent<Pick<Omit<ListboxProps, "onChange"> & {
-    context: ListboxContextProps;
-}, "label" | "slot" | "style" | "title" | "left" | "right" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "width" | "alignContent" | "alignItems" | "flexDirection" | "flexWrap" | "gap" | "justifyContent" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyItems" | "display" | "position" | "top" | "bottom" | "zIndex" | "background" | "backgroundColor" | "border" | "borderTop" | "borderBottom" | "borderLeft" | "borderRight" | "borderRadius" | "boxShadow" | "aria-label" | "aria-labelledby" | "variant" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isInvalid" | "isRequired" | "isDisabled" | "padding" | "paddingTop" | "paddingBottom" | "direction" | "paddingLeft" | "paddingRight" | "values" | "defaultValues" | "isReadOnly" | "focusOnClick" | "focusOnInit" | "loopAround" | "focusType" | "listRole" | "activedescendant" | "maxOptionsLength" | "selectionMode" | "context"> & React.RefAttributes<HTMLDivElement>>;
-
-export { ActiveDescendantListbox };

package/components/listbox/ActiveDescendantListbox.js

@@ -1,74 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useCallback } from 'react';
-import { ListboxActionType } from './types.js';
-import { ListboxContext } from './context.js';
-import { useFocusOnList } from '../focus-within-group/useFocusOnList.js';
-import { Flexbox } from '../flexbox/Flexbox.js';
-
-const _excluded = ["children", "id", "isDisabled", "context"];
-const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
-  var _context$state$active;
-  const {
-      children,
-      id,
-      isDisabled,
-      context
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
-  const {
-    activedescendant,
-    handleKeyDown: handleFocusKeyDown,
-    handleFocus,
-    handleBlur
-  } = useFocusOnList();
-  const handleKeyDown = useCallback(event => {
-    handleFocusKeyDown(event);
-    const code = event.code;
-    if (code === 'Enter' || code === 'Space') {
-      if (context.state.selectionMode === 'multiple') {
-        var _activedescendant$;
-        context.dispatch({
-          type: ListboxActionType.TOGGLE,
-          payload: {
-            value: (_activedescendant$ = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$ !== void 0 ? _activedescendant$ : '',
-            activedescendant
-          }
-        });
-      } else {
-        var _activedescendant$2;
-        context.dispatch({
-          type: ListboxActionType.SET,
-          payload: {
-            values: [(_activedescendant$2 = activedescendant === null || activedescendant === void 0 ? void 0 : activedescendant[1]) !== null && _activedescendant$2 !== void 0 ? _activedescendant$2 : ''],
-            activedescendant
-          }
-        });
-      }
-    }
-  }, [activedescendant]);
-  return /*#__PURE__*/React.createElement(Flexbox, _extends({
-    flexDirection: "column",
-    gap: "8px"
-  }, forwardedProps, {
-    "aria-disabled": isDisabled,
-    ref: ref,
-    id: id,
-    role: "listbox",
-    "aria-activedescendant": (_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0],
-    "aria-multiselectable": context.state.selectionMode === 'multiple',
-    tabIndex: 0,
-    style: {
-      outline: 'none'
-    },
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onMouseDown: event => event.preventDefault(),
-    onMouseLeave: handleBlur,
-    onKeyDown: handleKeyDown
-  }), /*#__PURE__*/React.createElement(ListboxContext.Provider, {
-    value: context
-  }, children));
-});
-
-export { ActiveDescendantListbox };
-//# sourceMappingURL=ActiveDescendantListbox.js.map