@progress/kendo-themes-html 10.2.0-dev.1 → 10.2.0-dev.3

package/dist/esm/dropdownlist/tests/dropdownlist-adaptive.mjs

@@ -821,9 +821,63 @@ InputValidationIcon.className = className5;
 
 // src/input/input-prefix.tsx
 import { Fragment as Fragment9, jsx as jsx18 } from "react/jsx-runtime";
+var className6 = `k-input-prefix`;
+var defaultOptions11 = {
+  direction: "horizontal"
+};
+var InputPrefix = (props) => {
+  const {
+    direction = defaultOptions11.direction,
+    ...other
+  } = props;
+  if (!props.children) {
+    return /* @__PURE__ */ jsx18(Fragment9, {});
+  }
+  return /* @__PURE__ */ jsx18(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        className6,
+        props.className,
+        {
+          [`k-input-prefix-${direction}`]: direction
+        }
+      ),
+      children: props.children
+    }
+  );
+};
 
 // src/input/input-suffix.tsx
 import { Fragment as Fragment10, jsx as jsx19 } from "react/jsx-runtime";
+var className7 = `k-input-suffix`;
+var defaultOptions12 = {
+  direction: "horizontal"
+};
+var InputSuffix = (props) => {
+  const {
+    direction = defaultOptions12.direction,
+    ...other
+  } = props;
+  if (!props.children) {
+    return /* @__PURE__ */ jsx19(Fragment10, {});
+  }
+  return /* @__PURE__ */ jsx19(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        className7,
+        props.className,
+        {
+          [`k-input-suffix-${direction}`]: direction
+        }
+      ),
+      children: props.children
+    }
+  );
+};
 
 // src/input/input-prefix-text.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -851,7 +905,7 @@ var options13 = {
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultOptions11 = {
+var defaultOptions13 = {
   showIcon: true,
   icon: "search",
   size: Input.defaultOptions.size,
@@ -872,8 +926,8 @@ var Searchbox = (props) => {
     required,
     loading,
     disabled,
-    showIcon = defaultOptions11.showIcon,
-    icon = defaultOptions11.icon,
+    showIcon = defaultOptions13.showIcon,
+    icon = defaultOptions13.icon,
     ...other
   } = props;
   return /* @__PURE__ */ jsxs4(
@@ -904,7 +958,7 @@ var Searchbox = (props) => {
 Searchbox.states = states14;
 Searchbox.options = options13;
 Searchbox.className = SEARCHBOX_CLASSNAME;
-Searchbox.defaultOptions = defaultOptions11;
+Searchbox.defaultOptions = defaultOptions13;
 
 // src/searchbox/templates/searchbox-normal.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
@@ -948,14 +1002,14 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 var ACTIONBUTTONS_CLASSNAME = `k-actions`;
 var states15 = [];
 var options14 = {};
-var defaultOptions12 = {
+var defaultOptions14 = {
   alignment: "start",
   orientation: "horizontal"
 };
 var ActionButtons = (props) => {
   const {
-    alignment = defaultOptions12.alignment,
-    orientation = defaultOptions12.orientation,
+    alignment = defaultOptions14.alignment,
+    orientation = defaultOptions14.orientation,
     ...other
   } = props;
   return /* @__PURE__ */ jsx26(
@@ -977,7 +1031,7 @@ var ActionButtons = (props) => {
 ActionButtons.states = states15;
 ActionButtons.options = options14;
 ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
-ActionButtons.defaultOptions = defaultOptions12;
+ActionButtons.defaultOptions = defaultOptions14;
 var action_buttons_spec_default = ActionButtons;
 
 // src/action-sheet/actionsheet-footer.tsx
@@ -1098,8 +1152,8 @@ import { jsx as jsx33 } from "react/jsx-runtime";
 
 // src/nodata/nodata.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
-var className6 = `k-nodata`;
-var NoData = (props) => /* @__PURE__ */ jsx34("span", { className: classNames(className6, props.className), children: props.children });
+var className8 = `k-nodata`;
+var NoData = (props) => /* @__PURE__ */ jsx34("span", { className: classNames(className8, props.className), children: props.children });
 
 // src/list/list.spec.tsx
 import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -1108,12 +1162,12 @@ var states17 = [];
 var options15 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultOptions13 = {
+var defaultOptions15 = {
   size: Size.medium
 };
 var List = (props) => {
   const {
-    size = defaultOptions13.size,
+    size = defaultOptions15.size,
     virtualization,
     children,
     optionLabel,
@@ -1192,7 +1246,7 @@ var List = (props) => {
 List.states = states17;
 List.options = options15;
 List.className = LIST_CLASSNAME;
-List.defaultOptions = defaultOptions13;
+List.defaultOptions = defaultOptions15;
 
 // src/list/list-angular.spec.tsx
 import { jsx as jsx36, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -1201,12 +1255,12 @@ var states18 = [];
 var options16 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultOptions14 = {
+var defaultOptions16 = {
   size: Size.medium
 };
 var ListAngular = (props) => {
   const {
-    size = defaultOptions14.size,
+    size = defaultOptions16.size,
     virtualization,
     children,
     ...other
@@ -1287,7 +1341,7 @@ var ListAngular = (props) => {
 ListAngular.states = states18;
 ListAngular.options = options16;
 ListAngular.className = LISTANGULAR_CLASSNAME;
-ListAngular.defaultOptions = defaultOptions14;
+ListAngular.defaultOptions = defaultOptions16;
 
 // src/checkbox/checkbox.spec.tsx
 import { jsx as jsx37 } from "react/jsx-runtime";
@@ -1306,7 +1360,7 @@ var options17 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
 };
-var defaultOptions15 = {
+var defaultOptions17 = {
   size: Size.medium,
   rounded: Roundness.medium
 };
@@ -1321,8 +1375,8 @@ var Checkbox = (props) => {
     invalid,
     valid,
     required,
-    size = defaultOptions15.size,
-    rounded = defaultOptions15.rounded,
+    size = defaultOptions17.size,
+    rounded = defaultOptions17.rounded,
     ...other
   } = props;
   return /* @__PURE__ */ jsx37("span", { className: "k-checkbox-wrap", children: /* @__PURE__ */ jsx37(
@@ -1345,19 +1399,19 @@ var Checkbox = (props) => {
 Checkbox.states = states19;
 Checkbox.options = options17;
 Checkbox.className = CHECKBOX_CLASSNAME;
-Checkbox.defaultOptions = defaultOptions15;
+Checkbox.defaultOptions = defaultOptions17;
 
 // src/checkbox/checkbox-group.spec.tsx
 import { jsx as jsx38 } from "react/jsx-runtime";
 var CHECKBOXGROUP_CLASSNAME = `k-checkbox-list`;
 var states20 = [];
 var options18 = {};
-var defaultOptions16 = {
+var defaultOptions18 = {
   layout: "vertical"
 };
 var CheckboxGroup = (props) => {
   const {
-    layout = defaultOptions16.layout,
+    layout = defaultOptions18.layout,
     ...other
   } = props;
   return /* @__PURE__ */ jsx38(
@@ -1378,14 +1432,14 @@ var CheckboxGroup = (props) => {
 CheckboxGroup.states = states20;
 CheckboxGroup.options = options18;
 CheckboxGroup.className = CHECKBOXGROUP_CLASSNAME;
-CheckboxGroup.defaultOptions = defaultOptions16;
+CheckboxGroup.defaultOptions = defaultOptions18;
 
 // src/checkbox/checkbox-item.spec.tsx
 import { jsx as jsx39 } from "react/jsx-runtime";
 var CHECKBOXITEM_CLASSNAME = `k-checkbox-list-item`;
 var states21 = [];
 var options19 = {};
-var defaultOptions17 = {};
+var defaultOptions19 = {};
 var CheckboxItem = (props) => {
   const {
     ...other
@@ -1405,7 +1459,7 @@ var CheckboxItem = (props) => {
 CheckboxItem.states = states21;
 CheckboxItem.options = options19;
 CheckboxItem.className = CHECKBOXITEM_CLASSNAME;
-CheckboxItem.defaultOptions = defaultOptions17;
+CheckboxItem.defaultOptions = defaultOptions19;
 
 // src/checkbox/templates/checkbox-with-label-after.tsx
 import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -1435,7 +1489,7 @@ var states22 = [
   States.disabled
 ];
 var options20 = {};
-var defaultOptions18 = {};
+var defaultOptions20 = {};
 var ListItem = (props) => {
   const {
     text,
@@ -1478,16 +1532,16 @@ var ListItem = (props) => {
 ListItem.states = states22;
 ListItem.options = options20;
 ListItem.className = LISTITEM_CLASSNAME;
-ListItem.defaultOptions = defaultOptions18;
+ListItem.defaultOptions = defaultOptions20;
 
 // src/list/list-content.tsx
 import { jsx as jsx47, jsxs as jsxs16 } from "react/jsx-runtime";
-var className7 = `k-list-content`;
+var className9 = `k-list-content`;
 var ListContent = (props) => {
   const {
     virtualization
   } = props;
-  return /* @__PURE__ */ jsxs16("div", { className: classNames(className7, props.className), children: [
+  return /* @__PURE__ */ jsxs16("div", { className: classNames(className9, props.className), children: [
     /* @__PURE__ */ jsx47("ul", { className: classNames("k-list-ul"), children: props.children }),
     virtualization && /* @__PURE__ */ jsx47("div", { className: "k-height-container", children: /* @__PURE__ */ jsx47("div", {}) })
   ] });
@@ -1495,8 +1549,8 @@ var ListContent = (props) => {
 
 // src/list/list-header.tsx
 import { jsx as jsx48 } from "react/jsx-runtime";
-var className8 = `k-list-group-sticky-header`;
-var ListHeader = (props) => /* @__PURE__ */ jsx48("div", { className: classNames(className8, props.className), children: /* @__PURE__ */ jsx48("div", { className: "k-list-header-text", children: props.children }) });
+var className10 = `k-list-group-sticky-header`;
+var ListHeader = (props) => /* @__PURE__ */ jsx48("div", { className: classNames(className10, props.className), children: /* @__PURE__ */ jsx48("div", { className: "k-list-header-text", children: props.children }) });
 
 // src/list/list-group.tsx
 import { Fragment as Fragment18, jsx as jsx49, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -1513,8 +1567,8 @@ var ListGroup = (props) => {
 
 // src/list/list-group-item.tsx
 import { jsx as jsx50 } from "react/jsx-runtime";
-var className9 = `k-list-group-item`;
-var ListGroupItem = (props) => /* @__PURE__ */ jsx50("li", { className: classNames(className9, props.className), children: /* @__PURE__ */ jsx50("span", { className: "k-list-item-text", children: props.children }) });
+var className11 = `k-list-group-item`;
+var ListGroupItem = (props) => /* @__PURE__ */ jsx50("li", { className: classNames(className11, props.className), children: /* @__PURE__ */ jsx50("span", { className: "k-list-item-text", children: props.children }) });
 
 // src/list/list-option-label.tsx
 import { jsx as jsx51 } from "react/jsx-runtime";
@@ -1526,7 +1580,7 @@ var states23 = [
   States.disabled
 ];
 var options21 = {};
-var defaultOptions19 = {};
+var defaultOptions21 = {};
 var ListOptionLabel = (props) => {
   const {
     text,
@@ -1556,7 +1610,7 @@ var ListOptionLabel = (props) => {
 ListOptionLabel.states = states23;
 ListOptionLabel.options = options21;
 ListOptionLabel.className = LIST_OPTIONLABEL_CLASSNAME;
-ListOptionLabel.defaultOptions = defaultOptions19;
+ListOptionLabel.defaultOptions = defaultOptions21;
 
 // src/list/templates/list-normal.tsx
 import { jsx as jsx52 } from "react/jsx-runtime";
@@ -1579,8 +1633,160 @@ import { jsx as jsx57, jsxs as jsxs20 } from "react/jsx-runtime";
 // src/list/templates/list-virualization-grouping-angular.tsx
 import { jsx as jsx58, jsxs as jsxs21 } from "react/jsx-runtime";
 
+// src/popup/popup.spec.tsx
+import { jsx as jsx59 } from "react/jsx-runtime";
+var POPUP_CLASSNAME = `k-popup`;
+var states24 = [];
+var options22 = {};
+var defaultOptions22 = {
+  positionMode: "absolute"
+};
+var Popup = (props) => {
+  const {
+    offset,
+    positionMode = defaultOptions22.positionMode,
+    animationStyle,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx59(
+    AnimationContainer,
+    {
+      positionMode,
+      offset,
+      animationStyle,
+      children: /* @__PURE__ */ jsx59("div", { ...other, className: classNames(props.className, POPUP_CLASSNAME), children: props.children })
+    }
+  );
+};
+Popup.states = states24;
+Popup.options = options22;
+Popup.className = POPUP_CLASSNAME;
+Popup.defaultOptions = defaultOptions22;
+
+// src/dropdownlist/dropdownlist.spec.tsx
+import { Fragment as Fragment19, jsx as jsx60, jsxs as jsxs22 } from "react/jsx-runtime";
+var DROPDOWNLIST_CLASSNAME = `k-dropdownlist`;
+var states25 = [
+  States.hover,
+  States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
+  States.disabled,
+  States.loading,
+  States.readonly
+];
+var options23 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+};
+var defaultOptions23 = {
+  showValue: true,
+  arrowIconName: "caret-alt-down",
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid
+};
+var DropdownList = (props) => {
+  const {
+    size = defaultOptions23.size,
+    rounded = defaultOptions23.rounded,
+    fillMode = defaultOptions23.fillMode,
+    arrowIconName = defaultOptions23.arrowIconName,
+    showValue = defaultOptions23.showValue,
+    valueIconName,
+    prefix,
+    suffix,
+    value,
+    placeholder,
+    hover,
+    focus,
+    valid,
+    invalid,
+    required,
+    loading,
+    disabled,
+    readonly,
+    popup,
+    opened,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs22(Fragment19, { children: [
+    /* @__PURE__ */ jsxs22(
+      Picker,
+      {
+        ...other,
+        size,
+        rounded,
+        fillMode,
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        loading,
+        disabled,
+        readonly,
+        className: classNames(
+          props.className,
+          DROPDOWNLIST_CLASSNAME,
+          {
+            "k-icon-picker": !showValue && valueIconName
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsx60(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ jsx60(
+            InputInnerSpan,
+            {
+              placeholder,
+              value,
+              showValue,
+              valueIconName
+            }
+          ),
+          /* @__PURE__ */ jsx60(
+            InputValidationIcon,
+            {
+              valid,
+              invalid,
+              loading,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx60(
+            InputLoadingIcon,
+            {
+              loading,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx60(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ jsx60(
+            Button,
+            {
+              className: "k-input-button",
+              icon: arrowIconName,
+              rounded: null,
+              size: props.size,
+              fillMode: props.fillMode
+            }
+          )
+        ]
+      }
+    ),
+    opened && popup && /* @__PURE__ */ jsx60(Popup, { className: "k-list-container k-dropdownlist-popup", children: popup })
+  ] });
+};
+DropdownList.states = states25;
+DropdownList.options = options23;
+DropdownList.className = DROPDOWNLIST_CLASSNAME;
+DropdownList.defaultOptions = defaultOptions23;
+var dropdownlist_spec_default = DropdownList;
+
 // src/dropdownlist/tests/dropdownlist-adaptive.tsx
-import { Fragment as Fragment19, jsx as jsx59, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx61, jsxs as jsxs23 } from "react/jsx-runtime";
 var styles = `
     #test-area {
         --kendo-actionsheet-height: 400px;
@@ -1593,43 +1799,49 @@ var styles = `
         transform: translateZ(0);
     }
 `;
-var dropdownlist_adaptive_default = () => /* @__PURE__ */ jsxs22(Fragment19, { children: [
-  /* @__PURE__ */ jsx59("style", { children: styles }),
-  /* @__PURE__ */ jsxs22("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ jsx59("span", { children: "partial" }),
-    /* @__PURE__ */ jsx59("span", { children: "full screen" }),
-    /* @__PURE__ */ jsx59("section", { children: /* @__PURE__ */ jsxs22(ActionSheet, { adaptive: true, children: [
-      /* @__PURE__ */ jsx59(ActionSheetHeader, { title: "Dropdownlist label", className: "k-text-center", actions: ["x"], filter: true }),
-      /* @__PURE__ */ jsx59("div", { className: "k-list-container", children: /* @__PURE__ */ jsxs22(List, { size: "large", children: [
-        /* @__PURE__ */ jsx59(ListItem, { text: "List item" }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Hover", hover: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Focus", focus: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Selected", selected: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Hover selected", hover: true, selected: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Disabled", disabled: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "List item with very long text, that spans on multiple lines" }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Checkbox", showCheckbox: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Icon", showIcon: true, iconName: "gear" }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Checkbox icon", showCheckbox: true, showIcon: true, iconName: "gear" })
-      ] }) }),
-      /* @__PURE__ */ jsx59(ActionSheetFooter, { actions: ["Cancel", "!Select"] })
-    ] }) }),
-    /* @__PURE__ */ jsx59("section", { children: /* @__PURE__ */ jsxs22(ActionSheet, { adaptive: true, fullscreen: true, children: [
-      /* @__PURE__ */ jsx59(ActionSheetHeader, { title: "Dropdownlist label", className: "k-text-center", actions: ["x"], filter: true }),
-      /* @__PURE__ */ jsx59("div", { className: "k-list-container", children: /* @__PURE__ */ jsxs22(List, { size: "large", children: [
-        /* @__PURE__ */ jsx59(ListItem, { text: "List item" }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Hover", hover: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Focus", focus: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Selected", selected: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Hover selected", hover: true, selected: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Disabled", disabled: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "List item with very long text, that spans on multiple lines" }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Checkbox", showCheckbox: true }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Icon", showIcon: true, iconName: "gear" }),
-        /* @__PURE__ */ jsx59(ListItem, { text: "Checkbox icon", showCheckbox: true, showIcon: true, iconName: "gear" })
-      ] }) }),
-      /* @__PURE__ */ jsx59(ActionSheetFooter, { actions: ["Cancel", "!Select"] })
-    ] }) })
+var dropdownlist_adaptive_default = () => /* @__PURE__ */ jsxs23(Fragment20, { children: [
+  /* @__PURE__ */ jsx61("style", { children: styles }),
+  /* @__PURE__ */ jsxs23("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ jsx61("span", { children: "partial" }),
+    /* @__PURE__ */ jsx61("span", { children: "full screen" }),
+    /* @__PURE__ */ jsxs23("section", { children: [
+      /* @__PURE__ */ jsx61(dropdownlist_spec_default, {}),
+      /* @__PURE__ */ jsxs23(ActionSheet, { adaptive: true, children: [
+        /* @__PURE__ */ jsx61(ActionSheetHeader, { title: "Dropdownlist label", className: "k-text-center", actions: ["x"], filter: true }),
+        /* @__PURE__ */ jsx61("div", { className: "k-list-container", children: /* @__PURE__ */ jsxs23(List, { size: "large", children: [
+          /* @__PURE__ */ jsx61(ListItem, { text: "List item" }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Hover", hover: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Focus", focus: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Selected", selected: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Hover selected", hover: true, selected: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Disabled", disabled: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "List item with very long text, that spans on multiple lines" }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Checkbox", showCheckbox: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Icon", showIcon: true, iconName: "gear" }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Checkbox icon", showCheckbox: true, showIcon: true, iconName: "gear" })
+        ] }) }),
+        /* @__PURE__ */ jsx61(ActionSheetFooter, { actions: ["Cancel", "!Select"] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs23("section", { children: [
+      /* @__PURE__ */ jsx61(dropdownlist_spec_default, {}),
+      /* @__PURE__ */ jsxs23(ActionSheet, { adaptive: true, fullscreen: true, children: [
+        /* @__PURE__ */ jsx61(ActionSheetHeader, { title: "Dropdownlist label", className: "k-text-center", actions: ["x"], filter: true }),
+        /* @__PURE__ */ jsx61("div", { className: "k-list-container", children: /* @__PURE__ */ jsxs23(List, { size: "large", children: [
+          /* @__PURE__ */ jsx61(ListItem, { text: "List item" }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Hover", hover: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Focus", focus: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Selected", selected: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Hover selected", hover: true, selected: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Disabled", disabled: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "List item with very long text, that spans on multiple lines" }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Checkbox", showCheckbox: true }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Icon", showIcon: true, iconName: "gear" }),
+          /* @__PURE__ */ jsx61(ListItem, { text: "Checkbox icon", showCheckbox: true, showIcon: true, iconName: "gear" })
+        ] }) }),
+        /* @__PURE__ */ jsx61(ActionSheetFooter, { actions: ["Cancel", "!Select"] })
+      ] })
+    ] })
   ] })
 ] });
 export {