@progress/kendo-themes-html 7.1.0-dev.3 → 7.1.0-dev.4

package/dist/esm/timeline/timeline-card-title.js

@@ -40,22 +40,6 @@ var optionClassNames = (componentClassName, props) => {
     }
   );
 };
-var stateClassNames = (_componentClassName, props) => {
-  return classNames({
-    "k-valid": props.valid,
-    "k-invalid": props.invalid,
-    "k-hover": props.hover,
-    "k-focus": props.focus,
-    "k-checked": props.checked,
-    "k-active": props.active,
-    "k-selected": props.selected,
-    "k-disabled": props.disabled,
-    "k-indeterminate": props.indeterminate && !props.checked,
-    "k-loading": props.loading,
-    "k-empty": props.empty,
-    "k-readonly": props.readonly
-  });
-};
 
 // src/misc/theme.ts
 var Size = {
@@ -67,19 +51,6 @@ var Size = {
   "xxlarge": "xxlarge",
   "xxxlarge": "xxxlarge"
 };
-var Roundness = {
-  "small": "small",
-  "medium": "medium",
-  "large": "large",
-  "full": "full"
-};
-var FillMode = {
-  "solid": "solid",
-  "flat": "flat",
-  "outline": "outline",
-  "clear": "clear",
-  "link": "link"
-};
 var ThemeColor = {
   "inherit": "inherit",
   "base": "base",
@@ -94,22 +65,6 @@ var ThemeColor = {
   "light": "light",
   "inverse": "inverse"
 };
-var States = {
-  "open": "open",
-  "hover": "hover",
-  "focus": "focus",
-  "active": "active",
-  "selected": "selected",
-  "disabled": "disabled",
-  "valid": "valid",
-  "invalid": "invalid",
-  "loading": "loading",
-  "required": "required",
-  "empty": "empty",
-  "indeterminate": "indeterminate",
-  "checked": "checked",
-  "readonly": "readonly"
-};
 
 // src/icon/font-icon.spec.tsx
 import { Fragment, jsx } from "react/jsx-runtime";
@@ -4344,130 +4299,18 @@ Icon.states = states3;
 Icon.options = options3;
 Icon.defaultProps = defaultProps3;
 
-// src/button/button.spec.tsx
-import { Fragment as Fragment4, jsx as jsx4, jsxs } from "react/jsx-runtime";
-var BUTTON_CLASSNAME = `k-button`;
-var states4 = [
-  States.hover,
-  States.focus,
-  States.active,
-  States.selected,
-  States.disabled
-];
-var options4 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
-  themeColor: [
-    ThemeColor.base,
-    ThemeColor.primary,
-    ThemeColor.secondary,
-    ThemeColor.tertiary,
-    ThemeColor.success,
-    ThemeColor.warning,
-    ThemeColor.error,
-    ThemeColor.info,
-    ThemeColor.light,
-    ThemeColor.dark,
-    ThemeColor.inverse
-  ]
-};
-var defaultProps4 = {
-  size: Size.medium,
-  rounded: Roundness.medium,
-  fillMode: FillMode.solid,
-  themeColor: ThemeColor.base,
-  showArrow: false,
-  arrowIconName: "caret-alt-down"
-};
-var Button = (props) => {
-  const {
-    size = defaultProps4.size,
-    rounded = defaultProps4.rounded,
-    fillMode = defaultProps4.fillMode,
-    themeColor = defaultProps4.themeColor,
-    hover,
-    focus,
-    active,
-    selected,
-    disabled,
-    icon,
-    text,
-    iconClassName,
-    showArrow = defaultProps4.showArrow,
-    arrowIconName = defaultProps4.arrowIconName,
-    ...other
-  } = props;
-  const hasIcon = icon !== void 0;
-  const hasChildren = props.children !== void 0;
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BUTTON_CLASSNAME,
-        optionClassNames(BUTTON_CLASSNAME, {
-          size,
-          rounded,
-          fillMode,
-          themeColor
-        }),
-        stateClassNames(BUTTON_CLASSNAME, {
-          hover,
-          focus,
-          active,
-          disabled,
-          selected
-        }),
-        {
-          ["k-icon-button"]: !text && !hasChildren && hasIcon
-        }
-      ),
-      children: [
-        icon && /* @__PURE__ */ jsx4(
-          Icon,
-          {
-            className: classNames(iconClassName, "k-button-icon"),
-            icon
-          }
-        ),
-        text ? /* @__PURE__ */ jsxs(Fragment4, { children: [
-          text && /* @__PURE__ */ jsx4("span", { className: "k-button-text", children: text }),
-          props.children
-        ] }) : props.children && /* @__PURE__ */ jsx4("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ jsx4("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ jsx4(Icon, { icon: arrowIconName }) })
-      ]
-    }
-  );
-};
-Button.states = states4;
-Button.options = options4;
-Button.className = BUTTON_CLASSNAME;
-Button.defaultProps = defaultProps4;
-
-// src/button/templates/icon-button.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var IconButton = (props) => /* @__PURE__ */ jsx5(Button, { icon: "folder", ...props, children: void 0 });
-
-// src/button/templates/icon-text-button.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-
-// src/button/templates/text-button.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-
 // src/timeline/timeline-card-title.tsx
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var TIMELINECARDTITLE_CLASSNAME = `k-card-title`;
-var states5 = [];
-var defaultProps5 = {};
+var states4 = [];
+var defaultProps4 = {};
 var TimelineCardTitle = (props) => {
   const {
     collapsible,
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: classNames(
@@ -4476,15 +4319,15 @@ var TimelineCardTitle = (props) => {
       ),
       ...other,
       children: [
-        /* @__PURE__ */ jsx8("span", { className: "k-event-title", children }),
-        collapsible && /* @__PURE__ */ jsx8(IconButton, { fillMode: "flat", icon: "chevron-right", className: "k-event-collapse" })
+        /* @__PURE__ */ jsx4("span", { className: "k-event-title", children }),
+        collapsible && /* @__PURE__ */ jsx4("span", { className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button", children: /* @__PURE__ */ jsx4(Icon, { icon: "chevron-right", className: "k-button-icon" }) })
       ]
     }
   );
 };
-TimelineCardTitle.states = states5;
+TimelineCardTitle.states = states4;
 TimelineCardTitle.className = TIMELINECARDTITLE_CLASSNAME;
-TimelineCardTitle.defaultProps = defaultProps5;
+TimelineCardTitle.defaultProps = defaultProps4;
 var timeline_card_title_default = TimelineCardTitle;
 export {
   TIMELINECARDTITLE_CLASSNAME,

package/dist/esm/timeline/timeline-card.spec.js

@@ -4599,7 +4599,6 @@ Button.defaultProps = defaultProps5;
 
 // src/button/templates/icon-button.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var IconButton = (props) => /* @__PURE__ */ jsx10(Button, { icon: "folder", ...props, children: void 0 });
 
 // src/button/templates/icon-text-button.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -4945,7 +4944,7 @@ var TimelineCardTitle = (props) => {
       ...other,
       children: [
         /* @__PURE__ */ jsx27("span", { className: "k-event-title", children }),
-        collapsible && /* @__PURE__ */ jsx27(IconButton, { fillMode: "flat", icon: "chevron-right", className: "k-event-collapse" })
+        collapsible && /* @__PURE__ */ jsx27("span", { className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button", children: /* @__PURE__ */ jsx27(Icon, { icon: "chevron-right", className: "k-button-icon" }) })
       ]
     }
   );

package/dist/esm/timeline/timeline-track-wrap.spec.js

@@ -4460,7 +4460,6 @@ Button.defaultProps = defaultProps4;
 
 // src/button/templates/icon-button.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-var IconButton = (props) => /* @__PURE__ */ jsx5(Button, { icon: "folder", ...props, children: void 0 });
 
 // src/button/templates/icon-text-button.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -4973,7 +4972,7 @@ var TimelineCardTitle = (props) => {
       ...other,
       children: [
         /* @__PURE__ */ jsx28("span", { className: "k-event-title", children }),
-        collapsible && /* @__PURE__ */ jsx28(IconButton, { fillMode: "flat", icon: "chevron-right", className: "k-event-collapse" })
+        collapsible && /* @__PURE__ */ jsx28("span", { className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button", children: /* @__PURE__ */ jsx28(Icon, { icon: "chevron-right", className: "k-button-icon" }) })
       ]
     }
   );

package/dist/esm/timeline/vertical-timeline-event.spec.js

@@ -4599,7 +4599,6 @@ Button.defaultProps = defaultProps5;
 
 // src/button/templates/icon-button.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var IconButton = (props) => /* @__PURE__ */ jsx10(Button, { icon: "folder", ...props, children: void 0 });
 
 // src/button/templates/icon-text-button.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -4921,7 +4920,7 @@ var TimelineCardTitle = (props) => {
       ...other,
       children: [
         /* @__PURE__ */ jsx27("span", { className: "k-event-title", children }),
-        collapsible && /* @__PURE__ */ jsx27(IconButton, { fillMode: "flat", icon: "chevron-right", className: "k-event-collapse" })
+        collapsible && /* @__PURE__ */ jsx27("span", { className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button", children: /* @__PURE__ */ jsx27(Icon, { icon: "chevron-right", className: "k-button-icon" }) })
       ]
     }
   );

package/dist/types/prompt/index.d.ts

@@ -1,6 +1,7 @@
 export * from './prompt.spec';
 export * from './prompt-header';
 export * from './prompt-content';
+export * from './prompt-view';
 export * from './prompt-footer';
 export * from './prompt-suggestion';
 export * from './prompt-setting';

package/dist/types/prompt/prompt-content.d.ts

@@ -1,8 +1,2 @@
-/// <reference types="react" />
 export declare const PROMPTCONTENT_CLASSNAME = "k-prompt-content";
-export type KendoPromptContentProps = {
-    showSearch?: boolean;
-    suggestions?: JSX.Element;
-    settings?: JSX.Element;
-};
-export declare const PromptContent: (props: KendoPromptContentProps & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const PromptContent: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/prompt/prompt-view.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const PROMPTVIEW_CLASSNAME = "k-prompt-view";
+export type KendoPromptViewProps = {
+    showSearch?: boolean;
+    suggestions?: JSX.Element;
+    settings?: JSX.Element;
+};
+export declare const PromptView: (props: KendoPromptViewProps & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "7.1.0-dev.3",
+  "version": "7.1.0-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "08affab2e5f6db6c25943449ac5d3547283dce22"
+  "gitHead": "97b4586318367dcab02765dd178849be2121425e"
 }

package/src/prompt/index.ts

@@ -1,6 +1,7 @@
 export * from './prompt.spec';
 export * from './prompt-header';
 export * from './prompt-content';
+export * from './prompt-view';
 export * from './prompt-footer';
 export * from './prompt-suggestion';
 export * from './prompt-setting';

package/src/prompt/prompt-content.tsx

@@ -1,23 +1,11 @@
-import { IconTextButton } from '../button';
 import { classNames } from '../misc';
-import { Textarea } from '../textarea';
 
 export const PROMPTCONTENT_CLASSNAME = `k-prompt-content`;
 
-export type KendoPromptContentProps = {
-    showSearch?: boolean;
-    suggestions?: JSX.Element;
-    settings?: JSX.Element;
-}
-
 export const PromptContent = (
-    props: KendoPromptContentProps &
-    React.HTMLAttributes<HTMLDivElement>
+    props: React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
-        showSearch,
-        suggestions,
-        settings,
         ...other
     } = props;
 
@@ -28,23 +16,6 @@ export const PromptContent = (
                 props.className,
                 PROMPTCONTENT_CLASSNAME,
             )}>
-            { showSearch && <Textarea rows={1} placeholder="Ask or generate content with AI"></Textarea> }
-            { suggestions &&
-                <div className="k-prompt-expander">
-                    <IconTextButton fillMode={"flat"} icon="chevron-down">Prompt Suggestions</IconTextButton>
-                    <div className="k-prompt-expander-content">
-                        <>{suggestions}</>
-                    </div>
-                </div>
-            }
-            { settings &&
-                <div className="k-prompt-expander">
-                    <IconTextButton fillMode={"flat"} icon="chevron-down">Settings</IconTextButton>
-                    <div className="k-prompt-expander-content">
-                        {settings}
-                    </div>
-                </div>
-            }
             <>{props.children}</>
         </div>
     );

package/src/prompt/prompt-view.tsx

@@ -0,0 +1,51 @@
+import { IconTextButton } from '../button';
+import { classNames } from '../misc';
+import { Textarea } from '../textarea';
+
+export const PROMPTVIEW_CLASSNAME = `k-prompt-view`;
+
+export type KendoPromptViewProps = {
+    showSearch?: boolean;
+    suggestions?: JSX.Element;
+    settings?: JSX.Element;
+}
+
+export const PromptView = (
+    props: KendoPromptViewProps &
+    React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        showSearch,
+        suggestions,
+        settings,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                PROMPTVIEW_CLASSNAME,
+            )}>
+            { showSearch && <Textarea rows={1} placeholder="Ask or generate content with AI"></Textarea> }
+            { suggestions &&
+                <div className="k-prompt-expander">
+                    <IconTextButton fillMode={"flat"} icon="chevron-down">Prompt Suggestions</IconTextButton>
+                    <div className="k-prompt-expander-content">
+                        <>{suggestions}</>
+                    </div>
+                </div>
+            }
+            { settings &&
+                <div className="k-prompt-expander">
+                    <IconTextButton fillMode={"flat"} icon="chevron-down">Settings</IconTextButton>
+                    <div className="k-prompt-expander-content">
+                        {settings}
+                    </div>
+                </div>
+            }
+            {props.children}
+        </div>
+    );
+};

package/src/prompt/templates/prompt-more-actions.tsx

@@ -1,6 +1,6 @@
 import { IconTextButton, IconButton } from "../../button";
 import { Toolbar } from "../../toolbar";
-import { Prompt, PromptContent, PromptHeader } from "..";
+import { Prompt, PromptContent, PromptHeader, PromptView } from "..";
 import { Icon } from "../../icon";
 
 export const PromptMoreActions = (props) => (
@@ -15,18 +15,20 @@ export const PromptMoreActions = (props) => (
             </Toolbar>
         </PromptHeader>
         <PromptContent>
-            <div className="k-column-menu k-flex-col k-flex-1">
-                <div className="k-columnmenu-item-wrapper">
-                    <div className="k-columnmenu-item">
-                        <Icon icon="sort-asc-small" />
+            <PromptView>
+                <div className="k-column-menu k-flex-col k-flex-1">
+                    <div className="k-columnmenu-item-wrapper">
+                        <div className="k-columnmenu-item">
+                            <Icon icon="sort-asc-small" />
                         Command
-                    </div>
-                    <div className="k-columnmenu-item">
-                        <Icon icon="sort-desc-small" />
+                        </div>
+                        <div className="k-columnmenu-item">
+                            <Icon icon="sort-desc-small" />
                         Command
+                        </div>
                     </div>
                 </div>
-            </div>
+            </PromptView>
         </PromptContent>
     </Prompt>
 );

package/src/prompt/templates/prompt-normal.tsx

@@ -1,7 +1,7 @@
 import { ActionButtons } from "../../action-buttons";
 import { IconTextButton, IconButton } from "../../button";
 import { Toolbar } from "../../toolbar";
-import { Prompt, PromptHeader, PromptFooter, PromptContent } from "..";
+import { Prompt, PromptHeader, PromptFooter, PromptContent, PromptView } from "..";
 
 export const PromptNormal = (props) => (
     <Prompt
@@ -14,7 +14,9 @@ export const PromptNormal = (props) => (
                 <IconButton fillMode="flat" themeColor="primary" icon="more-horizontal" rounded="full"></IconButton>
             </Toolbar>
         </PromptHeader>
-        <PromptContent showSearch></PromptContent>
+        <PromptContent>
+            <PromptView showSearch></PromptView>
+        </PromptContent>
         <PromptFooter>
             <ActionButtons className="k-prompt-actions" alignment="start">
                 <IconTextButton icon="sparkles" themeColor="primary" rounded="full">Generate</IconTextButton>

package/src/prompt/templates/prompt-output.tsx

@@ -1,7 +1,7 @@
 import { ActionButtons } from "../../action-buttons";
 import { IconTextButton, IconButton } from "../../button";
 import { Toolbar } from "../../toolbar";
-import { Prompt, PromptContent, PromptHeader } from "..";
+import { Prompt, PromptContent, PromptHeader, PromptView } from "..";
 import { Card, CardHeader, CardBody } from "../../card";
 
 export const PromptOutput = (props) => (
@@ -16,37 +16,39 @@ export const PromptOutput = (props) => (
             </Toolbar>
         </PromptHeader>
         <PromptContent>
-            <div className="k-card-list">
-                <Card>
-                    <CardHeader title="Card Title" subtitle="Card Subtitle"></CardHeader>
-                    <CardBody>
-                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                    </CardBody>
-                    <ActionButtons className="k-card-actions" alignment="start">
-                        <IconTextButton fillMode="flat" themeColor="primary" icon="copy">Copy</IconTextButton>
-                        <IconTextButton fillMode="flat" themeColor="base" icon="arrow-rotate-cw">Retry</IconTextButton>
-                        <IconButton fillMode="flat" themeColor="primary" icon="more-horizontal"></IconButton>
-                        <span className="k-spacer"></span>
-                        <IconButton fillMode="flat" themeColor="base" icon="thumb-up-outline"></IconButton>
-                        <IconButton fillMode="flat" themeColor="base" icon="thumb-down-outline"></IconButton>
-                    </ActionButtons>
-                </Card>
+            <PromptView>
+                <div className="k-card-list">
+                    <Card>
+                        <CardHeader title="Card Title" subtitle="Card Subtitle"></CardHeader>
+                        <CardBody>
+                            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                        </CardBody>
+                        <ActionButtons className="k-card-actions" alignment="start">
+                            <IconTextButton fillMode="flat" themeColor="primary" icon="copy">Copy</IconTextButton>
+                            <IconTextButton fillMode="flat" themeColor="base" icon="arrow-rotate-cw">Retry</IconTextButton>
+                            <IconButton fillMode="flat" themeColor="primary" icon="more-horizontal"></IconButton>
+                            <span className="k-spacer"></span>
+                            <IconButton fillMode="flat" themeColor="base" icon="thumb-up-outline"></IconButton>
+                            <IconButton fillMode="flat" themeColor="base" icon="thumb-down-outline"></IconButton>
+                        </ActionButtons>
+                    </Card>
 
-                <Card>
-                    <CardHeader title="Card Title" subtitle="Card Subtitle"></CardHeader>
-                    <CardBody>
-                        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                    </CardBody>
-                    <ActionButtons className="k-card-actions" alignment="start">
-                        <IconTextButton fillMode="flat" themeColor="primary" icon="copy">Copy</IconTextButton>
-                        <IconTextButton fillMode="flat" themeColor="base" icon="arrow-rotate-cw">Retry</IconTextButton>
-                        <IconButton fillMode="flat" themeColor="primary" icon="more-horizontal"></IconButton>
-                        <span className="k-spacer"></span>
-                        <IconButton fillMode="flat" themeColor="base" icon="thumb-up-outline"></IconButton>
-                        <IconButton fillMode="flat" themeColor="base" icon="thumb-down-outline"></IconButton>
-                    </ActionButtons>
-                </Card>
-            </div>
+                    <Card>
+                        <CardHeader title="Card Title" subtitle="Card Subtitle"></CardHeader>
+                        <CardBody>
+                            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                        </CardBody>
+                        <ActionButtons className="k-card-actions" alignment="start">
+                            <IconTextButton fillMode="flat" themeColor="primary" icon="copy">Copy</IconTextButton>
+                            <IconTextButton fillMode="flat" themeColor="base" icon="arrow-rotate-cw">Retry</IconTextButton>
+                            <IconButton fillMode="flat" themeColor="primary" icon="more-horizontal"></IconButton>
+                            <span className="k-spacer"></span>
+                            <IconButton fillMode="flat" themeColor="base" icon="thumb-up-outline"></IconButton>
+                            <IconButton fillMode="flat" themeColor="base" icon="thumb-down-outline"></IconButton>
+                        </ActionButtons>
+                    </Card>
+                </div>
+            </PromptView>
         </PromptContent>
     </Prompt>
 );

package/src/prompt/templates/prompt-popup.tsx

@@ -1,7 +1,7 @@
 import { ActionButtons } from "../../action-buttons";
 import { IconTextButton, IconButton } from "../../button";
 import { Toolbar } from "../../toolbar";
-import { Prompt, PromptHeader, PromptFooter, PromptContent } from "..";
+import { Prompt, PromptHeader, PromptFooter, PromptContent, PromptView } from "..";
 import { Popup } from "../../popup";
 
 export const PromptInPopup = (props) => (
@@ -18,7 +18,9 @@ export const PromptInPopup = (props) => (
                     <IconButton fillMode="flat" themeColor="base" icon="x" rounded="full"></IconButton>
                 </Toolbar>
             </PromptHeader>
-            <PromptContent showSearch></PromptContent>
+            <PromptContent>
+                <PromptView showSearch></PromptView>
+            </PromptContent>
             <PromptFooter>
                 <ActionButtons className="k-prompt-actions" alignment="start">
                     <IconTextButton icon="sparkles" themeColor="primary" rounded="full">Generate</IconTextButton>

package/src/prompt/templates/prompt-settings.tsx

@@ -2,7 +2,7 @@ import { ActionButtons } from "../../action-buttons";
 import { IconTextButton, IconButton } from "../../button";
 import { ChipList, Chip } from "../../chip";
 import { Toolbar } from "../../toolbar";
-import { Prompt, PromptHeader, PromptFooter, PromptContent, PromptSetting } from "..";
+import { Prompt, PromptHeader, PromptFooter, PromptContent, PromptSetting, PromptView } from "..";
 
 export const PromptSettings = (props) => (
     <Prompt {...props}>
@@ -13,30 +13,32 @@ export const PromptSettings = (props) => (
                 <IconButton fillMode="flat" themeColor="primary" icon="more-horizontal" rounded="full"></IconButton>
             </Toolbar>
         </PromptHeader>
-        <PromptContent
-            showSearch
-            settings={
-                <>
-                    <PromptSetting>
+        <PromptContent>
+            <PromptView
+                showSearch
+                settings={
+                    <>
+                        <PromptSetting>
                         Length:
-                        <ChipList>
-                            <Chip text="Small" />
-                            <Chip text="Medium" />
-                            <Chip text="Large" />
-                        </ChipList>
-                    </PromptSetting>
-                    <PromptSetting>
+                            <ChipList>
+                                <Chip text="Small" />
+                                <Chip text="Medium" />
+                                <Chip text="Large" />
+                            </ChipList>
+                        </PromptSetting>
+                        <PromptSetting>
                         Tone:
-                        <ChipList>
-                            <Chip text="Professional" />
-                            <Chip text="Friendly" />
-                            <Chip text="Casual" />
-                            <Chip text="Straightforward" />
-                            <Chip text="Confident" />
-                        </ChipList>
-                    </PromptSetting>
-                </>
-            }>
+                            <ChipList>
+                                <Chip text="Professional" />
+                                <Chip text="Friendly" />
+                                <Chip text="Casual" />
+                                <Chip text="Straightforward" />
+                                <Chip text="Confident" />
+                            </ChipList>
+                        </PromptSetting>
+                    </>
+                }>
+            </PromptView>
         </PromptContent>
         <PromptFooter>
             <ActionButtons className="k-prompt-actions" alignment="start">