@redsift/design-system 11.6.0-muiv5-alpha.10 → 11.6.0-muiv5-alpha.11

package/packages/design-system/src/components/item/_internal/Item2.js

@@ -0,0 +1,225 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useContext } from 'react';
+import classNames from 'classnames';
+import { StyledItem } from './styles.js';
+import { useListboxItem } from '../../listbox/_internal/useListboxItem.js';
+import { useMenuItem } from './useMenuItem.js';
+import { mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@redsift/icons';
+import { StyledGradientBorder } from '../../gradient-border/_internal/gradient-border.js';
+import { FocusWithinGroupContext } from '../../focus-within-group/_internal/context.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { ButtonsColorPalette } from '../../../types/_internal/colors.js';
+import { ConditionalWrapper } from '../../conditional-wrapper/_internal/ConditionalWrapper.js';
+import { Flexbox } from '../../flexbox/_internal/Flexbox2.js';
+import { Icon } from '../../icon/_internal/Icon2.js';
+import { Text } from '../../text/_internal/Text2.js';
+import { useId } from '../../../utils/_internal/useId.js';
+import { isComponent } from '../../../utils/_internal/isComponent.js';
+
+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.
+ */
+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 { Item, RenderedListboxItem };
+//# sourceMappingURL=Item2.js.map

package/packages/design-system/src/components/item/_internal/Item2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item2.js","sources":["../../../../../../../src/components/item/Item.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { ItemProps } from './types';\nimport { StyledItem } from './styles';\nimport { useListboxItem } from '../listbox/useListboxItem';\nimport { FocusWithinGroupContext } from '../focus-within-group';\nimport { useMenuItem } from './useMenuItem';\nimport { isComponent, useId } from '../../utils';\nimport { useTheme } from '../theme';\nimport { Flexbox } from '../flexbox';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport { mdiCheckboxBlankOutline, mdiCheckboxMarked } from '@redsift/icons';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'Item';\nconst CLASSNAME = 'redsift-item';\n\nexport const RenderedListboxItem: Comp<Omit<ItemProps, 'value'> & Required<Pick<ItemProps, 'value'>>, HTMLElement> =\n  forwardRef((props, ref) => {\n    const {\n      borderRadius = '0',\n      children,\n      className,\n      color: propsColor,\n      defaultSelected,\n      id: propsId,\n      isActive,\n      isDisabled: propsIsDisabled,\n      isHovered,\n      isSelected: propsIsSelected,\n      hasBorder,\n      hasCheckbox,\n      theme: propsTheme,\n      value,\n      ...forwardedProps\n    } = props;\n    const id = propsId ?? value;\n    const _ref = useRef<HTMLElement>();\n    const divRef = ref ?? _ref;\n\n    const { tabIndex, isFocused, isSelected, isDisabled, handleKeyDown, handleClick } = useListboxItem({\n      domElementRef: divRef as RefObject<Element>,\n      value,\n      id,\n      isDisabled: propsIsDisabled!,\n      propsIsSelected: propsIsSelected ?? defaultSelected,\n    });\n\n    const theme = useTheme(propsTheme);\n    const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n    const isGradient = color === ButtonsColorPalette.radar;\n\n    return (\n      <ConditionalWrapper\n        condition={isGradient}\n        wrapper={(children) => (\n          <StyledGradientBorder\n            $borderRadius={borderRadius}\n            $color={color}\n            $isActive={isActive}\n            $isDisabled={isDisabled}\n            $isHovered={isHovered}\n            $theme={theme}\n            width=\"auto\"\n          >\n            {children}\n          </StyledGradientBorder>\n        )}\n      >\n        <StyledItem\n          role=\"option\"\n          {...forwardedProps}\n          id={id}\n          $borderRadius={borderRadius}\n          $color={color}\n          $hasBorder={hasBorder}\n          $hasCheckbox={hasCheckbox}\n          $isActive={isActive || isSelected}\n          $isDisabled={isDisabled}\n          $isGradient={isGradient}\n          $isHovered={isHovered || isFocused}\n          $theme={theme}\n          aria-selected={isSelected}\n          aria-disabled={isDisabled}\n          className={classNames(Item.className, className)}\n          onClick={isDisabled ? undefined : handleClick}\n          ref={divRef as RefObject<HTMLElement>}\n          onKeyDown={handleKeyDown}\n          tabIndex={tabIndex}\n        >\n          {hasCheckbox ? (\n            <Flexbox>\n              {isSelected ? (\n                <Icon color={isDisabled ? 'grey' : color} icon={mdiCheckboxMarked} />\n              ) : (\n                <Icon color=\"question\" icon={mdiCheckboxBlankOutline} />\n              )}\n              {children ? children : <Text>{value}</Text>}\n            </Flexbox>\n          ) : (\n            children ?? value\n          )}\n        </StyledItem>\n      </ConditionalWrapper>\n    );\n  });\n\nconst RenderedMenuItem: Comp<Omit<ItemProps, 'value'>, HTMLElement> = forwardRef((props, ref) => {\n  const {\n    borderRadius = '0',\n    children,\n    className,\n    color: propsColor,\n    hasBorder,\n    id: propsId,\n    isActive,\n    isDisabled: propsIsDisabled,\n    isHovered,\n    theme: propsTheme,\n    onClick,\n    ...forwardedProps\n  } = props;\n  const [_id] = useId();\n  const id = propsId ?? _id;\n  const _ref = useRef<HTMLElement>();\n  const divRef = ref ?? _ref;\n  const linkRef = useRef<HTMLAnchorElement>(null);\n\n  const isLinkMenuItem = isComponent('Link')(children);\n  const { tabIndex, isFocused, isDisabled, handleKeyDown, handleClick } = useMenuItem({\n    domElementRef: divRef as RefObject<Element>,\n    id,\n    isDisabled: propsIsDisabled!,\n    onClick: onClick as any,\n    isLinkMenuItem,\n    linkRef,\n  });\n\n  const theme = useTheme(propsTheme);\n  const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n  const isGradient = color === ButtonsColorPalette.radar;\n\n  return (\n    <ConditionalWrapper\n      condition={isGradient}\n      wrapper={(children) => (\n        <StyledGradientBorder\n          $borderRadius={borderRadius}\n          $color={color}\n          $isActive={isActive}\n          $isDisabled={isDisabled}\n          $isHovered={isHovered}\n          $theme={theme}\n          width=\"auto\"\n        >\n          {children}\n        </StyledGradientBorder>\n      )}\n    >\n      <StyledItem\n        as=\"li\"\n        role={isLinkMenuItem ? 'none' : 'menuitem'}\n        {...forwardedProps}\n        id={id}\n        $borderRadius={borderRadius}\n        $color={color}\n        $hasBorder={hasBorder}\n        $hasCheckbox={false}\n        $isActive={isActive}\n        $isDisabled={isDisabled}\n        $isGradient={isGradient}\n        $isHovered={isHovered || isFocused}\n        $theme={theme}\n        aria-disabled={isDisabled}\n        className={classNames(Item.className, className)}\n        onClick={isDisabled ? undefined : handleClick}\n        ref={divRef}\n        onKeyDown={handleKeyDown}\n        tabIndex={tabIndex}\n      >\n        {isLinkMenuItem\n          ? React.cloneElement(children, {\n              role: 'menuitem',\n              ref: linkRef,\n            })\n          : children}\n      </StyledItem>\n    </ConditionalWrapper>\n  );\n});\n\n/**\n * The Item component.\n */\nexport const Item: Comp<ItemProps, HTMLElement> = forwardRef((props, ref) => {\n  const { value } = props;\n  const focusContext = useContext(FocusWithinGroupContext);\n  const isListbox = focusContext.state.listRole === 'listbox';\n\n  if (!focusContext.state.filter) {\n    return isListbox ? (\n      <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n    ) : (\n      <RenderedMenuItem {...props} ref={ref} />\n    );\n  }\n\n  const { value: filterValue, type, caseSensitive } = focusContext.state.filter;\n\n  if (!filterValue) {\n    return isListbox ? (\n      <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n    ) : (\n      <RenderedMenuItem {...props} ref={ref} />\n    );\n  } else if (\n    caseSensitive &&\n    ((type === 'startsWith' && value!.startsWith(filterValue)) ||\n      (type === 'contains' && value!.includes(filterValue)) ||\n      (type === 'endsWith' && value!.endsWith(filterValue)))\n  ) {\n    return isListbox ? (\n      <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n    ) : (\n      <RenderedMenuItem {...props} ref={ref} />\n    );\n  } else if (\n    !caseSensitive &&\n    ((type === 'startsWith' && value!.toLowerCase().startsWith(filterValue.toLowerCase())) ||\n      (type === 'contains' && value!.toLowerCase().includes(filterValue.toLowerCase())) ||\n      (type === 'endsWith' && value!.toLowerCase().endsWith(filterValue.toLowerCase())))\n  ) {\n    return isListbox ? (\n      <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n    ) : (\n      <RenderedMenuItem {...props} ref={ref} />\n    );\n  }\n\n  return null;\n});\nItem.className = CLASSNAME;\nItem.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","RenderedListboxItem","forwardRef","props","ref","borderRadius","children","className","color","propsColor","defaultSelected","id","propsId","isActive","isDisabled","propsIsDisabled","isHovered","isSelected","propsIsSelected","hasBorder","hasCheckbox","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","_ref","useRef","divRef","tabIndex","isFocused","handleKeyDown","handleClick","useListboxItem","domElementRef","useTheme","Object","values","ButtonsColorPalette","includes","isGradient","radar","React","createElement","ConditionalWrapper","condition","wrapper","StyledGradientBorder","$borderRadius","$color","$isActive","$isDisabled","$isHovered","$theme","width","StyledItem","_extends","role","$hasBorder","$hasCheckbox","$isGradient","classNames","Item","onClick","undefined","onKeyDown","Flexbox","Icon","icon","mdiCheckboxMarked","mdiCheckboxBlankOutline","Text","RenderedMenuItem","_excluded2","_id","useId","linkRef","isLinkMenuItem","isComponent","useMenuItem","as","cloneElement","focusContext","useContext","FocusWithinGroupContext","isListbox","state","listRole","filter","filterValue","type","caseSensitive","startsWith","endsWith","toLowerCase","displayName"],"mappings":"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"}

package/packages/design-system/src/components/item/_internal/item.js

@@ -0,0 +1,3 @@
+export { StyledItem } from './styles.js';
+export { Item, RenderedListboxItem } from './Item2.js';
+//# sourceMappingURL=item.js.map

package/packages/design-system/src/components/item/_internal/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/packages/design-system/src/components/item/_internal/styles.js

@@ -0,0 +1,129 @@
+import styled, { css } from 'styled-components';
+import { baseContainer } from '../../shared/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+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'}
+                  );
+                `}
+          ` : ''}
+    `;
+}};
+  }
+`;
+
+export { StyledItem };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/item/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/item/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledItem = styled.div<StyledItemProps>`\n  min-height: 36px;\n  position: relative;\n  width: 100%;\n  padding: 8px 16px;\n\n  ${baseContainer}\n\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  display: inline-flex;\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  ${({ $color, $isActive, $isDisabled, $isGradient, $isHovered, $hasBorder, $theme }) => css`\n    ${!$isGradient\n      ? css`\n          background-color: var(\n            --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}\n          );\n        `\n      : css`\n          background: var(\n            --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}\n          );\n        `}\n\n    ${$hasBorder\n      ? css`\n          border: 1px solid\n            var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-text-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}\n            );\n        `\n      : ''}\n  `}\n\n  &:hover {\n    outline: none;\n\n    ${({ $color, $isDisabled, $isGradient, $hasBorder, $theme }) => css`\n      cursor: ${$isDisabled ? 'default' : 'pointer'};\n\n      ${!$isDisabled\n        ? css`\n            ${!$isGradient\n              ? css`\n                  background-color: var(\n                    --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-background-hover\n                  );\n\n                  ${$hasBorder\n                    ? css`\n                        border: 1px solid\n                          var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-hover);\n                      `\n                    : ''}\n                `\n              : css`\n                  background: var(\n                    --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-background-hover\n                  );\n                `}\n          `\n        : ''}\n    `};\n  }\n\n  &:active {\n    outline: none;\n\n    ${({ $color, $hasBorder, $isHovered, $isDisabled, $isGradient, $theme }) => css`\n      ${!$isDisabled\n        ? css`\n            ${!$isGradient\n              ? css`\n                  background-color: var(\n                    --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled\n                        ? 'grey'\n                        : $color}-background-${$isHovered ? 'hover' : 'active'}\n                  );\n\n                  ${$hasBorder\n                    ? css`\n                        border: 1px solid\n                          var(\n                            --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled\n                                ? 'grey'\n                                : $color}-text-${$isHovered ? 'hover' : 'active'}\n                          );\n                      `\n                    : ''}\n                `\n              : css`\n                  background: var(\n                    --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled\n                        ? 'grey'\n                        : $color}-background-${$isHovered ? 'hover' : 'active'}\n                  );\n                `}\n          `\n        : ''}\n    `};\n  }\n`;\n"],"names":["StyledItem","styled","div","baseContainer","_ref","$color","$isActive","$isDisabled","$isGradient","$isHovered","$hasBorder","$theme","css","_ref2","_ref3"],"mappings":"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"}

package/packages/design-system/src/components/item/_internal/useMenuItem.js

@@ -0,0 +1,55 @@
+import { useCallback, useEffect } from 'react';
+import { useFocusOnListItem } from '../../focus-within-group/_internal/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/packages/design-system/src/components/item/_internal/useMenuItem.js.map

@@ -0,0 +1 @@
+{"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/packages/design-system/src/components/link/_internal/Link2.js

@@ -0,0 +1,67 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledLink } from './styles.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { Icon } from '../../icon/_internal/Icon2.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__default.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__default.createElement(React__default.Fragment, null, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: leftIcon,
+    "aria-hidden": "true",
+    className: "left",
+    size: "xsmall"
+  }, leftIconProps)) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "text"
+  }, children), rightIcon ? /*#__PURE__*/React__default.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=Link2.js.map

package/packages/design-system/src/components/link/_internal/Link2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link2.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,cAAA,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,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAY,QAAA,EACGtB,IAAAA,EAAAA,QAAQ,gBACPU,cAAA,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,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMf,IAAAA,SAAS,EAAC,MAAA;GAAQD,EAAAA,QAAe,CAAC,EACvCO,SAAS,gBACRQ,cAAA,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/packages/design-system/src/components/link/_internal/link.js

@@ -0,0 +1,3 @@
+export { StyledLink } from './styles.js';
+export { Link } from './Link2.js';
+//# sourceMappingURL=link.js.map