@progress/kendo-themes-html 7.0.3-dev.0 → 7.0.3-dev.2

package/src/spreadsheet/tests/spreadsheet-data-validation.tsx

@@ -1,6 +1,6 @@
 import { WindowNormal } from '../../window';
 import { Button } from '../../button';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
 import { Checkbox } from '../../checkbox';
@@ -26,7 +26,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Cell Range" editor={ <Textbox value="Input Value" /> }/>
                         <FormField label="Criteria" editor={ <DropdownList value="Number" /> }/>
                         <FormField label="Comparer" editor={ <DropdownList value="Greater than" /> } />
@@ -53,7 +53,7 @@ export default () =>(
                                 <label className="k-checkbox-label">Show hint</label>
                             </>
                         } />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 

package/src/spreadsheet/tests/spreadsheet-file-dialogs.tsx

@@ -1,10 +1,10 @@
 import { WindowNormal } from '../../window';
 import { Button } from '../../button';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
 import { UploadNormal } from '../../upload';
-import { Dropzone } from '../../dropzone';
+import { DropzoneNormal } from '../../dropzone';
 
 
 const style = `
@@ -37,11 +37,11 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="File name" editor={ <Textbox placeholder="Workbook"/> }></FormField>
 
                         <FormField label="Save as type" editor={ <DropdownList placeholder="Excel Workbook (.xlsx)" />}></FormField>
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 
@@ -52,7 +52,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Dropzone note={false} />
+                    <DropzoneNormal />
 
                     <UploadNormal status="upload"/>
                 </WindowNormal>

package/src/spreadsheet/tests/spreadsheet-find-replace-dialog.tsx

@@ -1,6 +1,6 @@
 import { WindowNormal } from '../../window';
 import { Button } from '../../button';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
 
@@ -25,11 +25,11 @@ export default () =>(
                         <Button>Replace All</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Find" editor={ <Textbox placeholder="Placeholder" /> }/>
                         <FormField label="Replace with" editor={ <Textbox placeholder="Placeholder" /> }/>
                         <FormField label="Search within" editor={ <DropdownList value="All Sheets" /> } />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 

package/src/spreadsheet/tests/spreadsheet-format-dialogs.tsx

@@ -1,6 +1,6 @@
 import { WindowNormal } from '../../window';
 import { Button } from '../../button';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
 import { ListBox } from '../../listbox';
@@ -29,7 +29,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Category" editor={ <DropdownList value="Date" /> }/>
                         <FormField label="Sample" editor={ <DateInput value="1/17/2022" /> }/>
                         <FormField label="Symbol" editor={
@@ -41,7 +41,7 @@ export default () =>(
                                 <ListItem>1/17/2022 6:25:37 PM</ListItem>
                             </ListBox>
                         }/>
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 
@@ -52,7 +52,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Apply to range" editor={ <Textbox placeholder="Placeholder" /> }/>
                         <FormField label="Format cells if" editor={ <DropdownList value="Cell value" /> }/>
                         <FormField label="is" editor={ <DropdownList value="Greater than" /> }/>
@@ -67,7 +67,7 @@ export default () =>(
                                 <ColorPicker value="fuchsia" valueIconName="droplet" />
                             </Toolbar>
                         } />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 

package/src/spreadsheet/tests/spreadsheet-formula-dialog.tsx

@@ -1,6 +1,6 @@
 import { WindowNormal } from '../../window';
 import { Button } from '../../button';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 import { DropdownList } from '../../dropdownlist';
 import { ListBox } from '../../listbox';
 import { ListItem } from '../../list';
@@ -25,7 +25,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Category" editor={ <DropdownList value="Date and Time" /> }/>
                         <FormField label="Pick a formula" hint="Returns the number of dates between the two dates." editor={
                             <ListBox style={{ width: "100%" }}>
@@ -36,7 +36,7 @@ export default () =>(
                                 <ListItem>DAYS360</ListItem>
                             </ListBox>
                         } />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 

package/src/spreadsheet/tests/spreadsheet-insert-dialogs.tsx

@@ -1,10 +1,10 @@
 import { WindowNormal } from '../../window';
 import { Textarea } from '../../textarea';
 import { Button } from '../../button';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { UploadNormal } from '../../upload';
-import { Dropzone } from '../../dropzone';
+import { DropzoneWithNote } from '../../dropzone';
 import { DropdownList } from '../../dropdownlist';
 import { ListBox } from '../../listbox';
 import { ListItem } from '../../list';
@@ -31,9 +31,9 @@ export default () =>(
                         <Button fillMode="clear" themeColor="primary">Remove comment</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Comment" editor={ <Textarea /> }/>
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 
@@ -44,7 +44,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Dropzone />
+                    <DropzoneWithNote />
 
                     <UploadNormal status="upload"></UploadNormal>
                 </WindowNormal>
@@ -59,10 +59,10 @@ export default () =>(
                         <Button fillMode="clear" themeColor="primary">Remove link</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Select link" editor={ <DropdownList value="URL" /> } />
                         <FormField label="URL address" editor={ <Textbox value="Input value" /> } />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 
@@ -75,7 +75,7 @@ export default () =>(
                         <Button fillMode="clear" themeColor="primary">Remove link</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Select link" editor={ <DropdownList value="Internal" /> } />
                         <FormField label="Cell reference" editor={ <Textbox value="B3:B11" /> } />
                         <FormField label="From sheet" editor={
@@ -86,7 +86,7 @@ export default () =>(
                                 <ListItem>Sheet 4</ListItem>
                             </ListBox>
                         }/>
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 
@@ -97,9 +97,9 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Select chart type" editor={ <DropdownList value="Donut" /> } />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 

package/src/spreadsheet/tests/spreadsheet-print.tsx

@@ -1,6 +1,6 @@
 import { WindowNormal } from '../../window';
 import { Button } from '../../button';
-import { Fieldset, Form, FormField } from '../../form';
+import { FormNormal, Fieldset, FormField } from '../../form';
 import { RadioButtonWithLabelAfter, RadioGroup, RadioItem } from '../../radio';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
@@ -33,7 +33,7 @@ export default () =>(
                             </ul>
                         </div>
                         <div className="k-tabstrip-content k-active">
-                            <Form tag="div" layout="grid">
+                            <FormNormal formButtons={null} tag="div" layout="grid">
                                 <Fieldset legend="Settings" layout="grid" cols={2} gapX={4}>
                                     <FormField
                                         colSpan="1"
@@ -124,7 +124,7 @@ export default () =>(
                                         editor={ <DropdownList value="mm" />}>
                                     </FormField>
                                 </Fieldset>
-                            </Form>
+                            </FormNormal>
                         </div>
                     </div>
                 </WindowNormal>
@@ -144,7 +144,7 @@ export default () =>(
                             </ul>
                         </div>
                         <div className="k-tabstrip-content k-active">
-                            <Form tag="div" layout="grid">
+                            <FormNormal formButtons={null} tag="div" layout="grid">
                                 <FormField label="Show" editor={
                                     <div className="k-search-options k-checkbox-list">
                                         <span className="k-checkbox-list-item">
@@ -169,7 +169,7 @@ export default () =>(
                                         </span>
                                     </div>
                                 } />
-                            </Form>
+                            </FormNormal>
                         </div>
                     </div>
                 </WindowNormal>

package/src/spreadsheet/tests/spreadsheet-sheets-bar.tsx

@@ -3,7 +3,7 @@ import { MenuList, MenuItem, MenuSeparator } from "../../menu";
 import { MenuButton } from "../../menu-button";
 import { WindowNormal } from "../../window";
 import { Popup } from "../../popup";
-import { Form, FormField } from "../../form";
+import { FormNormal, FormField } from "../../form";
 import { Textbox } from "../../textbox";
 
 const style = `
@@ -99,9 +99,9 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField label="Rename sheet" editor={ <Textbox placeholder="Sheet name"/> }></FormField>
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 

package/src/taskboard/tests/taskboard-pane.tsx

@@ -4,7 +4,7 @@ import { Card, CardBody, CardHeader } from '../../card';
 import { Searchbox } from '../../searchbox';
 import { Textbox } from '../../textbox';
 import { Toolbar } from '../../toolbar';
-import { Form, FormField } from '../../form';
+import { FormNormal , FormField } from '../../form';
 
 const style = `
     #test-area { max-width: 1037px; }
@@ -120,9 +120,9 @@ export default () =>(
                         </div>
                     </div>
                     <div className="k-taskboard-pane-content">
-                        <Form>
+                        <FormNormal formButtons={null}>
                             <FormField label="Textbox:" editor={ <Textbox /> } ></FormField>
-                        </Form>
+                        </FormNormal>
                     </div>
                     <ActionButtons alignment="end" className="k-taskboard-pane-actions">
                         <Button icon="trash">Delete</Button>
@@ -236,9 +236,9 @@ export default () =>(
                         </div>
                     </div>
                     <div className="k-taskboard-pane-content">
-                        <Form>
+                        <FormNormal formButtons={null}>
                             <FormField label="Textbox:" editor={ <Textbox /> } ></FormField>
-                        </Form>
+                        </FormNormal>
                     </div>
                     <ActionButtons alignment="end" className="k-taskboard-pane-actions">
                         <Button icon="trash">Delete</Button>

package/src/treelist/tests/treelist-editing-popup.tsx

@@ -4,7 +4,7 @@ import { NumericTextbox } from '../../numerictextbox';
 import { Textbox } from '../../textbox';
 import { Button } from '../../button';
 import { DatePicker } from '../../datepicker';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 
 
 const styles = `
@@ -29,7 +29,7 @@ export default () =>(
                         <Button icon="cancel">Cancel</Button>
                     </>
                 }>
-                    <Form tag="div">
+                    <FormNormal formButtons={null} tag="div">
                         <FormField
                             className="k-form-field-error"
                             label="Text data field label"
@@ -52,7 +52,7 @@ export default () =>(
                                 </>
                             }
                         />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 

package/dist/cjs/badge/tests/badge-position.js

@@ -1,250 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/badge/tests/badge-position.tsx
-var badge_position_exports = {};
-__export(badge_position_exports, {
-  default: () => badge_position_default
-});
-module.exports = __toCommonJS(badge_position_exports);
-
-// src/misc/class-names.ts
-var classNames = (...args) => {
-  return args.filter((arg) => arg !== true && Boolean(arg)).map((arg) => {
-    return Array.isArray(arg) ? classNames(...arg) : typeof arg === "object" ? Object.keys(arg).map((key, idx) => arg[idx] || arg[key] && key || null).filter((el) => el !== null).join(" ") : arg;
-  }).filter((arg) => Boolean(arg)).join(" ");
-};
-
-// src/misc/component-class-names.ts
-var optionClassNames = (componentClassName, props) => {
-  return classNames(
-    {
-      [`${componentClassName}-xs`]: props.size === "xsmall",
-      [`${componentClassName}-sm`]: props.size === "small",
-      [`${componentClassName}-md`]: props.size === "medium",
-      [`${componentClassName}-lg`]: props.size === "large",
-      [`${componentClassName}-xl`]: props.size === "xlarge",
-      [`${componentClassName}-xxl`]: props.size === "xxlarge",
-      [`${componentClassName}-xxxl`]: props.size === "xxxlarge"
-    },
-    {
-      [`${componentClassName}-${props.fillMode}`]: props.fillMode
-    },
-    {
-      [`${componentClassName}-${props.fillMode}-${props.themeColor}`]: props.fillMode && props.themeColor
-    },
-    {
-      [`${componentClassName}-${props.themeColor}`]: props.themeColor && props.fillMode === void 0
-    },
-    {
-      "k-rounded-sm": props.rounded === "small",
-      "k-rounded-md": props.rounded === "medium",
-      "k-rounded-lg": props.rounded === "large",
-      "k-rounded-full": props.rounded === "full"
-    }
-  );
-};
-
-// src/misc/theme.ts
-var Size = {
-  "xsmall": "xsmall",
-  "small": "small",
-  "medium": "medium",
-  "large": "large",
-  "xlarge": "xlarge",
-  "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",
-  "primary": "primary",
-  "secondary": "secondary",
-  "tertiary": "tertiary",
-  "info": "info",
-  "success": "success",
-  "warning": "warning",
-  "error": "error",
-  "dark": "dark",
-  "light": "light",
-  "inverse": "inverse"
-};
-
-// src/badge/badge.spec.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var BADGE_CLASSNAME = `k-badge`;
-var states = [];
-var options = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.outline],
-  themeColor: [
-    ThemeColor.base,
-    ThemeColor.primary,
-    ThemeColor.secondary,
-    ThemeColor.tertiary,
-    ThemeColor.success,
-    ThemeColor.warning,
-    ThemeColor.error,
-    ThemeColor.info,
-    ThemeColor.light,
-    ThemeColor.dark,
-    ThemeColor.inverse
-  ]
-};
-var defaultProps = {
-  size: Size.medium,
-  fillMode: FillMode.solid,
-  themeColor: ThemeColor.primary,
-  cutoutBorder: false
-};
-var Badge = (props) => {
-  const {
-    size = defaultProps.size,
-    rounded,
-    fillMode = defaultProps.fillMode,
-    themeColor = defaultProps.themeColor,
-    cutoutBorder = defaultProps.cutoutBorder,
-    position,
-    align,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        BADGE_CLASSNAME,
-        optionClassNames(BADGE_CLASSNAME, {
-          size,
-          rounded,
-          fillMode,
-          themeColor
-        }),
-        {
-          [`${BADGE_CLASSNAME}-${position}`]: position,
-          [`k-${align}`]: align,
-          [`${BADGE_CLASSNAME}-border-cutout`]: cutoutBorder
-        }
-      ),
-      children: props.children
-    }
-  );
-};
-Badge.states = states;
-Badge.options = options;
-Badge.className = BADGE_CLASSNAME;
-Badge.defaultProps = defaultProps;
-
-// src/badge/tests/badge-position.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var styles = `
-    .k-badge-container {
-        padding: 5px;
-        width: 80px;
-        min-height: 30px;
-        box-sizing: border-box;
-        background-color: skyblue;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-`;
-var badge_position_default = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Rectangle" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Rounded" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Pill" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Circle" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Dot" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Inline" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", children: "Round" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "full", children: "Pill" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "full", children: "1" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "full" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "^ RTL" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { fillMode: "outline", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { fillMode: "outline", rounded: "medium", children: "Round" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { fillMode: "outline", rounded: "full", children: "Pill" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { fillMode: "outline", rounded: "full", children: "1" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { fillMode: "outline", rounded: "full" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "col-6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "top start" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "top end" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "bottom start" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "bottom end" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Inside" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "inside", align: "top-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "inside", align: "top-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "inside", align: "bottom-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "inside", align: "bottom-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Edge" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "edge", align: "top-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "edge", align: "top-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "edge", align: "bottom-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "edge", align: "bottom-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "col-6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Outside" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "outside", align: "top-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "outside", align: "top-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "outside", align: "bottom-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "outside", align: "bottom-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "col-6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Inside RTL" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "inside", align: "top-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "inside", align: "top-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "inside", align: "bottom-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "inside", align: "bottom-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Edge RTL" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "edge", align: "top-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "edge", align: "top-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "edge", align: "bottom-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "edge", align: "bottom-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "col-6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Outside RTL" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "outside", align: "top-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "outside", align: "top-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "outside", align: "bottom-start", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "k-badge-container k-rtl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { rounded: "medium", position: "outside", align: "bottom-end", children: "Rect" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", {})
-  ] })
-] });