colibri-ui 0.8.83 → 0.8.86

package/Icons/Setting.js

@@ -7,14 +7,13 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var Setting = function Setting(_a) {
-  var _a$fill = _a.fill,
-    fill = _a$fill === void 0 ? "currentColor" : _a$fill,
-    _a$width = _a.width,
-    width = _a$width === void 0 ? 24 : _a$width,
-    _a$height = _a.height,
-    height = _a$height === void 0 ? 24 : _a$height,
-    ref = _a.ref,
+const Setting = _a => {
+  var {
+      fill = "currentColor",
+      width = 24,
+      height = 24,
+      ref
+    } = _a,
     props = tslib.__rest(_a, ["fill", "width", "height", "ref"]);
   return /*#__PURE__*/React__default.default.createElement("svg", Object.assign({}, props, {
     ref: ref,

package/Icons/Shield.js

@@ -7,14 +7,13 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var Shield = function Shield(_a) {
-  var _a$fill = _a.fill,
-    fill = _a$fill === void 0 ? "currentColor" : _a$fill,
-    _a$width = _a.width,
-    width = _a$width === void 0 ? 24 : _a$width,
-    _a$height = _a.height,
-    height = _a$height === void 0 ? 24 : _a$height,
-    ref = _a.ref,
+const Shield = _a => {
+  var {
+      fill = "currentColor",
+      width = 24,
+      height = 24,
+      ref
+    } = _a,
     props = tslib.__rest(_a, ["fill", "width", "height", "ref"]);
   return /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",

package/Icons/Trash.js

@@ -7,14 +7,13 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var Trash = function Trash(_a) {
-  var _a$fill = _a.fill,
-    fill = _a$fill === void 0 ? "currentColor" : _a$fill,
-    _a$width = _a.width,
-    width = _a$width === void 0 ? 24 : _a$width,
-    _a$height = _a.height,
-    height = _a$height === void 0 ? 24 : _a$height,
-    ref = _a.ref,
+const Trash = _a => {
+  var {
+      fill = "currentColor",
+      width = 24,
+      height = 24,
+      ref
+    } = _a,
     props = tslib.__rest(_a, ["fill", "width", "height", "ref"]);
   return /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",

package/Icons/User.js

@@ -7,14 +7,13 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var User = function User(_a) {
-  var _a$fill = _a.fill,
-    fill = _a$fill === void 0 ? "currentColor" : _a$fill,
-    _a$width = _a.width,
-    width = _a$width === void 0 ? 24 : _a$width,
-    _a$height = _a.height,
-    height = _a$height === void 0 ? 24 : _a$height,
-    ref = _a.ref,
+const User = _a => {
+  var {
+      fill = "currentColor",
+      width = 24,
+      height = 24,
+      ref
+    } = _a,
     props = tslib.__rest(_a, ["fill", "width", "height", "ref"]);
   return /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",

package/Image/Image.module.css

@@ -11,4 +11,8 @@
 }
 .root img :-moz-broken {
   opacity: 0;
+}
+.root img:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-focus-ring);
+  outline-offset: var(--focus-ring-width);
 }

package/Image/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ImageProps } from "./index.props";
-export declare const Image: ({ className, loading, src, fallbackSrc, onClick, srcSet, sizes, ariaLabel, sources, alt, width, height, ref, ...props }: ImageProps) => React.JSX.Element;
+export declare const Image: ({ className, loading, src, fallbackSrc, onClick, onKeyDown, srcSet, sizes, ariaLabel, sources, alt, width, height, ref, ...props }: ImageProps) => React.JSX.Element;

package/Image/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var tslib = require('tslib');
 var React = require('react');
 var clsx = require('clsx');
@@ -8,61 +7,69 @@ var styles = require('./Image.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
-var Image = function Image(_a) {
-  var className = _a.className,
-    _a$loading = _a.loading,
-    loading = _a$loading === void 0 ? "lazy" : _a$loading,
-    src = _a.src,
-    fallbackSrc = _a.fallbackSrc,
-    onClick = _a.onClick,
-    srcSet = _a.srcSet,
-    sizes = _a.sizes,
-    ariaLabel = _a.ariaLabel,
-    _a$sources = _a.sources,
-    sources = _a$sources === void 0 ? [] : _a$sources,
-    _a$alt = _a.alt,
-    alt = _a$alt === void 0 ? src : _a$alt,
-    width = _a.width,
-    height = _a.height,
-    ref = _a.ref,
-    props = tslib.__rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "alt", "width", "height", "ref"]);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    isFailed = _useState2[0],
-    setFailed = _useState2[1];
-  var imageSrc = src || emptyImage;
-  var imageSrcSet = srcSet;
-  var sizeAttrs = {};
+const emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+const Image = _a => {
+  var {
+      className,
+      loading = "lazy",
+      src,
+      fallbackSrc,
+      onClick,
+      onKeyDown,
+      srcSet,
+      sizes,
+      ariaLabel,
+      sources = [],
+      alt = src,
+      width,
+      height,
+      ref
+    } = _a,
+    props = tslib.__rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "onKeyDown", "srcSet", "sizes", "ariaLabel", "sources", "alt", "width", "height", "ref"]);
+  const [isFailed, setFailed] = React.useState(false);
+  const imageSrc = src || emptyImage;
+  const imageSrcSet = srcSet;
+  const sizeAttrs = {};
   if (width !== undefined) {
     sizeAttrs.width = width;
   }
   if (height !== undefined) {
     sizeAttrs.height = height;
   }
-  var handleError = React.useCallback(function () {
+  const handleError = React.useCallback(() => {
     setFailed(true);
   }, []);
+  const interactiveProps = onClick ? {
+    role: "button",
+    tabIndex: 0,
+    onClick,
+    onKeyDown: event => {
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+      if (event.defaultPrevented) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  } : {
+    onKeyDown,
+    "aria-hidden": ariaLabel ? "false" : "true"
+  };
   return /*#__PURE__*/React__default.default.createElement("picture", {
     className: styles__default.default.root
-  }, !!sources.length && sources.map(function (source, index) {
-    return /*#__PURE__*/React__default.default.createElement("source", Object.assign({
-      key: "item-".concat(index)
-    }, source));
-  }), /*#__PURE__*/React__default.default.createElement("img", Object.assign({
+  }, !!sources.length && sources.map((source, index) => (/*#__PURE__*/React__default.default.createElement("source", Object.assign({
+    key: `item-${index}`
+  }, source)))), /*#__PURE__*/React__default.default.createElement("img", Object.assign({
     ref: ref,
     alt: alt,
     style: sizeAttrs,
     className: clsx__default.default(className),
     loading: loading,
-    "aria-hidden": ariaLabel ? "false" : "true",
-    "aria-label": ariaLabel,
-    onClick: onClick,
+    "aria-label": ariaLabel
+  }, interactiveProps, {
     onError: handleError,
     src: isFailed && fallbackSrc ? fallbackSrc : imageSrc,
     srcSet: imageSrcSet,

package/Input/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { InputProps } from "./index.props";
-export declare const Input: ({ className, startIcon, endIcon, label, hint, hasError, required, onChange, onFocus, onBlur, onKeyDown, inputRef, controlAfter, controlClassName, controlRef, disabled, variant, size, ref, ...props }: InputProps) => React.JSX.Element;
+export declare const Input: ({ className, startIcon, endIcon, label, hint, hasError, required, onChange, onFocus, onBlur, onKeyDown, inputRef, controlAfter, controlClassName, controlRef, disabled, variant, size, ref, id, ...props }: InputProps) => React.JSX.Element;

package/Input/index.js

@@ -12,30 +12,35 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var Input = function Input(_a) {
-  var className = _a.className,
-    startIcon = _a.startIcon,
-    endIcon = _a.endIcon,
-    label = _a.label,
-    hint = _a.hint,
-    hasError = _a.hasError,
-    required = _a.required,
-    onChange = _a.onChange,
-    onFocus = _a.onFocus,
-    onBlur = _a.onBlur,
-    onKeyDown = _a.onKeyDown,
-    inputRef = _a.inputRef,
-    controlAfter = _a.controlAfter,
-    controlClassName = _a.controlClassName,
-    controlRef = _a.controlRef,
-    disabled = _a.disabled,
-    _a$variant = _a.variant,
-    variant = _a$variant === void 0 ? "primary" : _a$variant,
-    _a$size = _a.size,
-    size = _a$size === void 0 ? "m" : _a$size,
-    ref = _a.ref,
-    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "hasError", "required", "onChange", "onFocus", "onBlur", "onKeyDown", "inputRef", "controlAfter", "controlClassName", "controlRef", "disabled", "variant", "size", "ref"]);
-  var control = /*#__PURE__*/React__default.default.createElement(index.InputRoot, {
+const Input = _a => {
+  var _b;
+  var {
+      className,
+      startIcon,
+      endIcon,
+      label,
+      hint,
+      hasError,
+      required,
+      onChange,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      inputRef,
+      controlAfter,
+      controlClassName,
+      controlRef,
+      disabled,
+      variant = "primary",
+      size = "m",
+      ref,
+      id
+    } = _a,
+    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "hasError", "required", "onChange", "onFocus", "onBlur", "onKeyDown", "inputRef", "controlAfter", "controlClassName", "controlRef", "disabled", "variant", "size", "ref", "id"]);
+  const generatedId = React.useId();
+  const inputId = id !== null && id !== void 0 ? id : generatedId;
+  const hintId = hint ? `${inputId}-hint` : undefined;
+  const control = /*#__PURE__*/React__default.default.createElement(index.InputRoot, {
     ref: controlRef !== null && controlRef !== void 0 ? controlRef : ref,
     startIcon: startIcon,
     endIcon: endIcon,
@@ -45,17 +50,25 @@ var Input = function Input(_a) {
     hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(index$1.BaseInput, Object.assign({
     ref: inputRef,
+    disabled: disabled,
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
     type: "text"
-  }, props)));
+  }, props, {
+    id: inputId,
+    required: required,
+    "aria-invalid": (_b = props["aria-invalid"]) !== null && _b !== void 0 ? _b : hasError || undefined,
+    "aria-describedby": clsx__default.default(props["aria-describedby"], hintId) || undefined
+  })));
   return /*#__PURE__*/React__default.default.createElement(index$2.FormField, {
     className: clsx__default.default(className),
     label: label,
+    htmlFor: inputId,
     required: required,
     hint: hint,
+    hintId: hintId,
     hasError: hasError
   }, controlAfter || controlClassName || controlRef ? (/*#__PURE__*/React__default.default.createElement("div", {
     className: controlClassName

package/Input/index.props.d.ts

@@ -1,7 +1,7 @@
 import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, ReactNode, FocusEvent, KeyboardEvent, FormEvent, Ref } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
 import type { Size, Variant } from "../base/InputRoot/index.props";
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children" | "htmlFor" | "hintId"> {
     controlAfter?: ReactNode;
     controlClassName?: string;
     controlRef?: Ref<HTMLDivElement>;

package/InputRadio/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var tslib = require('tslib');
 var React = require('react');
 var clsx = require('clsx');
@@ -9,34 +8,36 @@ var styles = require('./InputRadio.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var InputRadio = /*#__PURE__*/React.memo(function (_a) {
-  var checked = _a.checked,
-    children = _a.children,
-    className = _a.className,
-    containerClassName = _a.containerClassName,
-    disabled = _a.disabled,
-    error = _a.error,
-    id = _a.id,
-    name = _a.name,
-    note = _a.note,
-    onBlur = _a.onBlur,
-    onFocus = _a.onFocus,
-    onChange = _a.onChange,
-    onClick = _a.onClick,
-    onMouseEnter = _a.onMouseEnter,
-    style = _a.style,
-    text = _a.text,
-    value = _a.value,
-    testid = _a.testid,
+const InputRadio = /*#__PURE__*/React.memo(_a => {
+  var {
+      checked,
+      children,
+      className,
+      containerClassName,
+      disabled,
+      error,
+      id,
+      name,
+      note,
+      onBlur,
+      onFocus,
+      onChange,
+      onClick,
+      onMouseEnter,
+      style,
+      text,
+      value,
+      testid
+    } = _a,
     rest = tslib.__rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
   return (
     /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    // Keyboard activation of the nested radio dispatches a click that bubbles to the label.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     React__default.default.createElement("label", {
       className: clsx__default.default(styles__default.default.label, className),
       htmlFor: id,
@@ -45,13 +46,20 @@ var InputRadio = /*#__PURE__*/React.memo(function (_a) {
       onMouseEnter: onMouseEnter,
       "data-testid": testid
     }, /*#__PURE__*/React__default.default.createElement("div", {
-      className: clsx__default.default(styles__default.default.container, _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["container_disabled"], Boolean(disabled)), styles__default.default["container_error"], Boolean(error)), containerClassName)
+      className: clsx__default.default(styles__default.default.container, {
+        [styles__default.default["container_disabled"]]: Boolean(disabled),
+        [styles__default.default["container_error"]]: Boolean(error)
+      }, containerClassName)
     }, /*#__PURE__*/React__default.default.createElement("input", Object.assign({
       type: "radio",
       id: id,
       value: value,
       name: name,
-      className: clsx__default.default(styles__default.default.input, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["input_error"], Boolean(error)), styles__default.default["input_checked"], Boolean(checked)), styles__default.default["input_disabled"], Boolean(disabled))),
+      className: clsx__default.default(styles__default.default.input, {
+        [styles__default.default["input_error"]]: Boolean(error),
+        [styles__default.default["input_checked"]]: Boolean(checked),
+        [styles__default.default["input_disabled"]]: Boolean(disabled)
+      }),
       checked: checked,
       disabled: disabled,
       onChange: onChange,

package/List/List.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var tslib = require('tslib');
 var React = require('react');
 var clsx = require('clsx');
@@ -8,116 +7,121 @@ var styles = require('./List.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var ListContext = /*#__PURE__*/React.createContext({
+const ListContext = /*#__PURE__*/React.createContext({
   disabled: false,
   dividers: false,
   surface: "none"
 });
-var ItemContent = function ItemContent(_ref) {
-  var children = _ref.children,
-    description = _ref.description,
-    contentLeft = _ref.contentLeft,
-    contentRight = _ref.contentRight;
-  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, contentLeft != null && /*#__PURE__*/React__default.default.createElement("span", {
-    className: styles__default.default.left
-  }, contentLeft), /*#__PURE__*/React__default.default.createElement("span", {
-    className: styles__default.default.content
-  }, /*#__PURE__*/React__default.default.createElement("span", {
-    className: styles__default.default.title
-  }, children), description != null && (/*#__PURE__*/React__default.default.createElement("span", {
-    className: styles__default.default.description
-  }, description))), contentRight != null && (/*#__PURE__*/React__default.default.createElement("span", {
-    className: styles__default.default.right
-  }, contentRight)));
-};
-var List = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _a$size = _a.size,
-    size = _a$size === void 0 ? "m" : _a$size,
-    _a$density = _a.density,
-    density = _a$density === void 0 ? "normal" : _a$density,
-    _a$surface = _a.surface,
-    surface = _a$surface === void 0 ? "none" : _a$surface,
-    _a$dividers = _a.dividers,
-    dividers = _a$dividers === void 0 ? false : _a$dividers,
-    _a$disabled = _a.disabled,
-    disabled = _a$disabled === void 0 ? false : _a$disabled,
-    ariaLabel = _a.ariaLabel,
-    className = _a.className,
-    children = _a.children,
+const ItemContent = ({
+  children,
+  description,
+  contentLeft,
+  contentRight
+}) => (/*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, contentLeft != null && /*#__PURE__*/React__default.default.createElement("span", {
+  className: styles__default.default.left
+}, contentLeft), /*#__PURE__*/React__default.default.createElement("span", {
+  className: styles__default.default.content
+}, /*#__PURE__*/React__default.default.createElement("span", {
+  className: styles__default.default.title
+}, children), description != null && (/*#__PURE__*/React__default.default.createElement("span", {
+  className: styles__default.default.description
+}, description))), contentRight != null && (/*#__PURE__*/React__default.default.createElement("span", {
+  className: styles__default.default.right
+}, contentRight))));
+const List = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      size = "m",
+      density = "normal",
+      surface = "none",
+      dividers = false,
+      disabled = false,
+      ariaLabel,
+      className,
+      children
+    } = _a,
     rest = tslib.__rest(_a, ["size", "density", "surface", "dividers", "disabled", "ariaLabel", "className", "children"]);
-  var context = React.useMemo(function () {
-    return {
-      disabled: disabled,
-      dividers: dividers,
-      surface: surface
-    };
-  }, [disabled, dividers, surface]);
+  const context = React.useMemo(() => ({
+    disabled,
+    dividers,
+    surface
+  }), [disabled, dividers, surface]);
   return /*#__PURE__*/React__default.default.createElement(ListContext.Provider, {
     value: context
   }, /*#__PURE__*/React__default.default.createElement("ul", Object.assign({}, rest, {
     ref: ref,
     "aria-label": ariaLabel,
-    "aria-disabled": disabled || undefined,
-    className: clsx__default.default(styles__default.default.list, styles__default.default["size_".concat(size)], styles__default.default["density_".concat(density)], styles__default.default["surface_".concat(surface)], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.dividers, dividers), styles__default.default["list_disabled"], disabled), className)
+    className: clsx__default.default(styles__default.default.list, styles__default.default[`size_${size}`], styles__default.default[`density_${density}`], styles__default.default[`surface_${surface}`], {
+      [styles__default.default.dividers]: dividers,
+      [styles__default.default["list_disabled"]]: disabled
+    }, className)
   }), children));
 });
 List.displayName = "List";
-var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+const ListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _a;
-  var _useContext = React.useContext(ListContext),
-    listDisabled = _useContext.disabled,
-    dividers = _useContext.dividers,
-    surface = _useContext.surface;
-  var children = props.children,
-    description = props.description,
-    contentLeft = props.contentLeft,
-    contentRight = props.contentRight,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$selected = props.selected,
-    selected = _props$selected === void 0 ? false : _props$selected,
-    className = props.className,
+  const {
+    disabled: listDisabled,
+    dividers,
+    surface
+  } = React.useContext(ListContext);
+  const {
+      children,
+      description,
+      contentLeft,
+      contentRight,
+      disabled = false,
+      selected = false,
+      className
+    } = props,
     interactiveProps = tslib.__rest(props, ["children", "description", "contentLeft", "contentRight", "disabled", "selected", "className"]);
-  var isDisabled = listDisabled || disabled;
-  var itemClassName = clsx__default.default(styles__default.default.item, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["item_surface"], surface === "items"), styles__default.default["item_divider"], dividers), styles__default.default.selected, selected), styles__default.default["item_disabled"], isDisabled), className);
-  var content = /*#__PURE__*/React__default.default.createElement(ItemContent, {
+  const isDisabled = listDisabled || disabled;
+  const itemClassName = clsx__default.default(styles__default.default.item, {
+    [styles__default.default["item_surface"]]: surface === "items",
+    [styles__default.default["item_divider"]]: dividers,
+    [styles__default.default.selected]: selected,
+    [styles__default.default["item_disabled"]]: isDisabled
+  }, className);
+  const content = /*#__PURE__*/React__default.default.createElement(ItemContent, {
     contentLeft: contentLeft,
     contentRight: contentRight,
     description: description
   }, children);
   if ("href" in interactiveProps && interactiveProps.href) {
-    var _b = interactiveProps,
-      href = _b.href,
-      onAction = _b.onAction,
-      _onClick = _b.onClick,
+    const _b = interactiveProps,
+      {
+        href,
+        onAction,
+        onClick
+      } = _b,
       anchorProps = tslib.__rest(_b, ["href", "onAction", "onClick"]);
     return /*#__PURE__*/React__default.default.createElement("li", {
       ref: ref,
-      className: itemClassName,
-      "aria-disabled": isDisabled || undefined
+      className: itemClassName
     }, /*#__PURE__*/React__default.default.createElement("a", Object.assign({}, anchorProps, {
       href: isDisabled ? undefined : href,
       tabIndex: isDisabled ? -1 : anchorProps.tabIndex,
+      "aria-disabled": isDisabled || undefined,
       "aria-current": selected ? "page" : undefined,
       className: styles__default.default.action,
-      onClick: function onClick(event) {
+      onClick: event => {
         if (isDisabled) {
           event.preventDefault();
           return;
         }
-        _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (!event.defaultPrevented) onAction === null || onAction === void 0 ? void 0 : onAction();
       }
     }), content));
   }
   if ("onAction" in interactiveProps && interactiveProps.onAction) {
-    var _c = interactiveProps,
-      _onAction = _c.onAction,
+    const _c = interactiveProps,
+      {
+        onAction
+      } = _c,
       buttonProps = tslib.__rest(_c, ["onAction"]);
     return /*#__PURE__*/React__default.default.createElement("li", {
       ref: ref,
@@ -127,23 +131,24 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       disabled: isDisabled,
       "aria-pressed": selected || undefined,
       className: styles__default.default.action,
-      onClick: _onAction
+      onClick: onAction
     }), content));
   }
   return /*#__PURE__*/React__default.default.createElement("li", Object.assign({}, interactiveProps, {
     ref: ref,
     className: itemClassName,
-    "aria-disabled": isDisabled || undefined,
     "aria-current": selected || undefined
   }), /*#__PURE__*/React__default.default.createElement("div", {
     className: styles__default.default["static-content"]
   }, content));
 });
 ListItem.displayName = "ListItem";
-var ListSection = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var title = _a.title,
-    children = _a.children,
-    className = _a.className,
+const ListSection = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      title,
+      children,
+      className
+    } = _a,
     rest = tslib.__rest(_a, ["title", "children", "className"]);
   return /*#__PURE__*/React__default.default.createElement("li", Object.assign({}, rest, {
     ref: ref,