@empathyco/x-components 3.0.0-alpha.80 → 3.0.0-alpha.83

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.83](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.82...@empathyco/x-components@3.0.0-alpha.83) (2022-04-07)
+
+### Code Refactoring
+
+- move DeepPartial type from x-components to x-utils
+  ([a26f0c5](https://github.com/empathyco/x/commit/a26f0c54317f17144b4262c60b0a0dc086883eb9)),
+  closes [EX-5835](https://searchbroker.atlassian.net/browse/EX-5835)
+
+### Documentation
+
+- activating ready live-examples
+  ([953e6c2](https://github.com/empathyco/x/commit/953e6c2ead73cd464fbb861bcc917134eac478a1)),
+  closes [EX-5705](https://searchbroker.atlassian.net/browse/EX-5705)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.82](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.81...@empathyco/x-components@3.0.0-alpha.82) (2022-04-05)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.81](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.80...@empathyco/x-components@3.0.0-alpha.81) (2022-04-05)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.80](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.79...@empathyco/x-components@3.0.0-alpha.80) (2022-04-04)
 
 ### Testing

package/design-system/base.css

@@ -5,19 +5,6 @@
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
 }
-:root {
-  --x-color-base-lead: #36515b;
-  --x-color-base-auxiliary: #667981;
-  --x-color-base-neutral-10: #1a1a1a;
-  --x-color-base-neutral-35: #595959;
-  --x-color-base-neutral-70: #b3b3b3;
-  --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff;
-  --x-color-base-accent: #b90276;
-  --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent;
-}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -53,4 +40,17 @@
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
   --x-size-line-height-base-l: 32px;
+}
+:root {
+  --x-color-base-lead: #36515b;
+  --x-color-base-auxiliary: #667981;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #b90276;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
 }

package/design-system/default-theme.css

@@ -1634,86 +1634,6 @@
   -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
           text-decoration: var(--x-font-decoration-option-list-button-default-hover);
 }
-:root {
-  --x-color-background-option-list-button-default: transparent;
-  --x-color-border-option-list-button-default: transparent;
-  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
-  --x-color-background-option-list-button-default-hover: var(
-    --x-color-background-option-list-button-default
-  );
-  --x-color-border-option-list-button-default-hover: var(
-    --x-color-border-option-list-button-default
-  );
-  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
-  --x-color-background-option-list-button-default-selected: var(
-    --x-color-background-option-list-button-default
-  );
-  --x-color-border-option-list-button-default-selected: var(
-    --x-color-border-option-list-button-default
-  );
-  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
-  --x-color-background-option-list-button-default-selected-hover: var(
-    --x-color-background-option-list-button-default-selected
-  );
-  --x-color-border-option-list-button-default-selected-hover: var(
-    --x-color-border-option-list-button-default-selected
-  );
-  --x-color-text-option-list-button-default-selected-hover: var(
-    --x-color-text-option-list-button-default-selected
-  );
-  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
-  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
-  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
-  --x-color-border-top-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-right-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-bottom-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-color-border-left-option-list-item-default-selected: var(
-    --x-color-border-option-list-item-default-selected
-  );
-  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-option-list-item-default: 0;
-  --x-size-border-width-right-option-list-item-default: var(
-    --x-size-border-width-option-list-item-default
-  );
-  --x-size-border-width-bottom-option-list-item-default: 0;
-  --x-size-border-width-left-option-list-item-default: 0;
-  --x-size-border-width-top-option-list-item-default-selected: var(
-    --x-size-border-width-top-option-list-item-default
-  );
-  --x-size-border-width-right-option-list-item-default-selected: var(
-    --x-size-border-width-right-option-list-item-default
-  );
-  --x-size-border-width-bottom-option-list-item-default-selected: var(
-    --x-size-border-width-bottom-option-list-item-default
-  );
-  --x-size-border-width-left-option-list-item-default-selected: var(
-    --x-size-border-width-left-option-list-item-default
-  );
-  --x-size-padding-option-list-button-default: var(--x-size-base-02);
-  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
-  --x-size-padding-right-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-size-padding-bottom-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-size-padding-left-option-list-button-default: var(
-    --x-size-padding-option-list-button-default
-  );
-  --x-font-decoration-option-list-button-default-hover: underline;
-  --x-size-font-option-list-button-default: var(--x-size-font-text);
-  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
-}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -2902,4 +2822,84 @@
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
   --x-size-line-height-base-l: 32px;
+}
+:root {
+  --x-color-background-option-list-button-default: transparent;
+  --x-color-border-option-list-button-default: transparent;
+  --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
+  --x-color-background-option-list-button-default-hover: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-hover: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
+  --x-color-background-option-list-button-default-selected: var(
+    --x-color-background-option-list-button-default
+  );
+  --x-color-border-option-list-button-default-selected: var(
+    --x-color-border-option-list-button-default
+  );
+  --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
+  --x-color-background-option-list-button-default-selected-hover: var(
+    --x-color-background-option-list-button-default-selected
+  );
+  --x-color-border-option-list-button-default-selected-hover: var(
+    --x-color-border-option-list-button-default-selected
+  );
+  --x-color-text-option-list-button-default-selected-hover: var(
+    --x-color-text-option-list-button-default-selected
+  );
+  --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
+  --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
+  --x-color-border-top-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-right-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-bottom-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-color-border-left-option-list-item-default-selected: var(
+    --x-color-border-option-list-item-default-selected
+  );
+  --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-option-list-item-default: 0;
+  --x-size-border-width-right-option-list-item-default: var(
+    --x-size-border-width-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default: 0;
+  --x-size-border-width-left-option-list-item-default: 0;
+  --x-size-border-width-top-option-list-item-default-selected: var(
+    --x-size-border-width-top-option-list-item-default
+  );
+  --x-size-border-width-right-option-list-item-default-selected: var(
+    --x-size-border-width-right-option-list-item-default
+  );
+  --x-size-border-width-bottom-option-list-item-default-selected: var(
+    --x-size-border-width-bottom-option-list-item-default
+  );
+  --x-size-border-width-left-option-list-item-default-selected: var(
+    --x-size-border-width-left-option-list-item-default
+  );
+  --x-size-padding-option-list-button-default: var(--x-size-base-02);
+  --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
+  --x-size-padding-right-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-bottom-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-size-padding-left-option-list-button-default: var(
+    --x-size-padding-option-list-button-default
+  );
+  --x-font-decoration-option-list-button-default-hover: underline;
+  --x-size-font-option-list-button-default: var(--x-size-font-text);
+  --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }

package/docs/API-reference/api/x-components.md

@@ -575,7 +575,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [AnyXStoreModuleOption](./x-components.anyxstoremoduleoption.md) | Alias for any store module option. Use only when you don't care about the module concrete type. |
 |  [ArrowKey](./x-components.arrowkey.md) | Union type containing the existing arrow keys. |
 |  [DecoratorFor](./x-components.decoratorfor.md) | Creates a decorator that will only work for properties of the type passed. The decorator will only work if the property is public. |
-|  [DeepPartial](./x-components.deeppartial.md) | Makes all the properties of the T type optional in depth. |
 |  [DeviceXModule](./x-components.devicexmodule.md) | Device [XModule](./x-components.xmodule.md) alias. |
 |  [DeviceXStoreModule](./x-components.devicexstoremodule.md) | Device type safe store module. |
 |  [DocumentDirection](./x-components.documentdirection.md) | The HTML document direction orientation. Possible values: ltr (left to right) or rtl (right to left). |

package/docs/API-reference/api/x-components.xmoduleoptions.md

@@ -16,6 +16,6 @@ export interface XModuleOptions<ModuleName extends XModuleName>
 
 |  Property | Type | Description |
 |  --- | --- | --- |
-|  [config?](./x-components.xmoduleoptions.config.md) | [DeepPartial](./x-components.deeppartial.md)<!-- -->&lt;[ExtractState](./x-components.extractstate.md)<!-- -->&lt;ModuleName&gt; extends { config: infer Config; } ? Config : never&gt; | <i>(Optional)</i> The options to override the default config state for the module. |
+|  [config?](./x-components.xmoduleoptions.config.md) | DeepPartial&lt;[ExtractState](./x-components.extractstate.md)<!-- -->&lt;ModuleName&gt; extends { config: infer Config; } ? Config : never&gt; | <i>(Optional)</i> The options to override the default config state for the module. |
 |  [wiring?](./x-components.xmoduleoptions.wiring.md) | Partial&lt;[Wiring](./x-components.wiring.md)<!-- -->&gt; | <i>(Optional)</i> The options to override the default wiring configuration for the module. |
 

package/docs/API-reference/api/x-components.xstoremoduleoptions.md

@@ -16,5 +16,5 @@ export declare type XStoreModuleOptions<StoreModule extends AnyXStoreModule> = S
     mutations?: DeepPartial<MutationsTree<State, Mutations>>;
 } : never;
 ```
-<b>References:</b> [AnyXStoreModule](./x-components.anyxstoremodule.md)<!-- -->, [XStoreModule](./x-components.xstoremodule.md)<!-- -->, [DeepPartial](./x-components.deeppartial.md)<!-- -->, [ActionsTree](./x-components.actionstree.md)<!-- -->, [GettersTree](./x-components.getterstree.md)<!-- -->, [MutationsTree](./x-components.mutationstree.md)
+<b>References:</b> [AnyXStoreModule](./x-components.anyxstoremodule.md)<!-- -->, [XStoreModule](./x-components.xstoremodule.md)<!-- -->, [ActionsTree](./x-components.actionstree.md)<!-- -->, [GettersTree](./x-components.getterstree.md)<!-- -->, [MutationsTree](./x-components.mutationstree.md)
 

package/docs/API-reference/components/history-queries/x-components.clear-history-queries.md

@@ -22,10 +22,35 @@ intention to clear the whole history of queries.
 
 The component exposes a single default slot, where you can add icons or text.
 
-```vue
-<ClearHistoryQueries>
-  <img class="x-history-query__icon" src="./my-icon.svg"/>
-</ClearHistoryQueries>
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ClearHistoryQueries>Clear history queries</ClearHistoryQueries>
+    <HistoryQueries :animation="'FadeAndSlide'" :maxItemsToRender="10" />
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import {
+  HistoryQueries,
+  ClearHistoryQueries
+} from "@empathyco/x-components/history-queries";
+import { FadeAndSlide } from "@empathyco/x-components";
+
+// Registering the animation as a global component
+Vue.component("FadeAndSlide", FadeAndSlide);
+export default {
+  name: "ClearHistoryQueriesDemo",
+  components: {
+    SearchInput,
+    HistoryQueries,
+    ClearHistoryQueries
+  }
+};
+</script>
 ```
 
 ## Events

package/docs/API-reference/components/history-queries/x-components.history-queries.md

@@ -35,17 +35,22 @@ This component doesn't emit events.
 
 Here you have a basic example of how the HistoryQueries is rendered.
 
-```vue
+```vue live
 <template>
-  <HistoryQueries />
+  <div>
+    <SearchInput />
+    <HistoryQueries />
+  </div>
 </template>
 
 <script>
+import { SearchInput } from "@empathyco/x-components/search-box";
 import { HistoryQueries } from "@empathyco/x-components/history-queries";
 
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries
   }
 };
@@ -57,17 +62,22 @@ export default {
 In this example, the history queries have been limited to render a maximum of 10 queries (by default
 it is 5).
 
-```vue
+```vue live
 <template>
-  <HistoryQueries :maxItemsToRender="10" />
+  <div>
+    <SearchInput />
+    <HistoryQueries :maxItemsToRender="10" />
+  </div>
 </template>
 
 <script>
+import { SearchInput } from "@empathyco/x-components/search-box";
 import { HistoryQueries } from "@empathyco/x-components/history-queries";
 
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries
   }
 };
@@ -76,24 +86,27 @@ export default {
 
 ### Play with the animation
 
-```vue
+```vue live
 <template>
-  <HistoryQueries :animation="fadeAndSlide" />
+  <div>
+    <SearchInput />
+    <HistoryQueries :animation="'FadeAndSlide'" />
+  </div>
 </template>
 
 <script>
+import Vue from "vue";
+import { SearchInput } from "@empathyco/x-components/search-box";
 import { HistoryQueries } from "@empathyco/x-components/history-queries";
 import { FadeAndSlide } from "@empathyco/x-components";
 
+// Registering the animation as a global component
+Vue.component("FadeAndSlide", FadeAndSlide);
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries
-  },
-  data() {
-    return {
-      fadeAndSlide: FadeAndSlide
-    };
   }
 };
 </script>
@@ -104,14 +117,18 @@ export default {
 In this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the
 `suggestion` slot (although any other component could potentially be passed).
 
-```vue
+```vue live
 <template>
-  <HistoryQueries #suggestion="{ suggestion }">
-    <HistoryQuery :suggestion="suggestion"></HistoryQuery>
-  </HistoryQueries>
+  <div>
+    <SearchInput />
+    <HistoryQueries #suggestion="{ suggestion }">
+      <HistoryQuery :suggestion="suggestion" />
+    </HistoryQueries>
+  </div>
 </template>
 
 <script>
+import { SearchInput } from "@empathyco/x-components/search-box";
 import {
   HistoryQueries,
   HistoryQuery
@@ -120,6 +137,7 @@ import {
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries,
     HistoryQuery
   }
@@ -133,19 +151,24 @@ To continue the previous example, the [`HistoryQuery`](./x-components.history-qu
 passed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also
 passed.
 
-```vue
+```vue live
 <template>
-  <HistoryQueries #suggestion-content="{ suggestion }">
-    <span>{{ suggestion.query }}</span>
-  </HistoryQueries>
+  <div>
+    <SearchInput />
+    <HistoryQueries #suggestion-content="{ suggestion }">
+      <span>{{ suggestion.query }}</span>
+    </HistoryQueries>
+  </div>
 </template>
 
 <script>
+import { SearchInput } from "@empathyco/x-components/search-box";
 import { HistoryQueries } from "@empathyco/x-components/history-queries";
 
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries
   }
 };
@@ -158,20 +181,25 @@ To continue the previous example, the [`HistoryQuery`](./x-components.history-qu
 passed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the
 icon to remove the history query.
 
-```vue
+```vue live
 <template>
-  <HistoryQueries #suggestion-content-remove="{ suggestion }">
-    <CrossIcon />
-  </HistoryQueries>
+  <div>
+    <SearchInput />
+    <HistoryQueries #suggestion-remove-content="{ suggestion }">
+      <CrossIcon />
+    </HistoryQueries>
+  </div>
 </template>
 
 <script>
+import { SearchInput } from "@empathyco/x-components/search-box";
 import { HistoryQueries } from "@empathyco/x-components/history-queries";
 import { CrossIcon } from "@empathyco/x-components";
 
 export default {
   name: "HistoryQueriesDemo",
   components: {
+    SearchInput,
     HistoryQueries,
     CrossIcon
   }

package/docs/API-reference/components/history-queries/x-components.history-query.md

@@ -29,8 +29,29 @@ history queries.
 
 This component only requires a prop called `suggestion`
 
-```vue
-<HistoryQuery :suggestion="historyQuery" />
+```vue live
+<template>
+  <HistoryQuery :suggestion="suggestion" />
+</template>
+
+<script>
+import { HistoryQuery } from "@empathyco/x-components/history-queries";
+export default {
+  name: "HistoryQueryDemo",
+  components: {
+    HistoryQuery
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "HistoryQuery",
+        query: "trousers",
+        facets: []
+      }
+    };
+  }
+};
+</script>
 ```
 
 ### Customizing slots content
@@ -43,18 +64,47 @@ the suggestion itself, and a `string` of HTML with the matched query.
 The other slot is called `remove-button-content`, and allows you to set the content of the button
 that serves to remove this query from the history. This slot only has one property, the suggestion.
 
-````vue
-<HistoryQuery :suggestion="historyQuery">
-  <template #default="{ suggestion, queryHTML }">
-    <img class="x-history-query__history-icon" src="./history-icon.svg"/>
-    <span class="x-history-query__matching-part" v-html="queryHTML"/>
-  </template>
-
-  <template #remove-button-content="{ suggestion }">
-    <img class="x-history-query__remove-icon" src="./remove-icon.svg"/>
-  </template>
-</HistoryQuery>
-``` ## Events A list of events that the component will emit: -
-`UserSelectedAHistoryQuery`: the event is emitted after the user clicks the
-button. The event payload is the history query data.
-````
+```vue live
+<template>
+  <HistoryQuery :suggestion="suggestion">
+    <template #default="{ suggestion, queryHTML }">
+      <HistoryIcon />
+      <span class="x-history-query__matching-part" v-html="queryHTML" />
+    </template>
+
+    <template #remove-button-content="{ suggestion }">
+      <CrossIcon />
+    </template>
+  </HistoryQuery>
+</template>
+
+<script>
+import { HistoryQuery } from "@empathyco/x-components/history-queries";
+import { HistoryIcon, CrossIcon } from "@empathyco/x-components";
+
+export default {
+  name: "HistoryQueryDemo",
+  components: {
+    HistoryQuery,
+    HistoryIcon,
+    CrossIcon
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "HistoryQuery",
+        query: "trousers",
+        facets: []
+      }
+    };
+  }
+};
+</script>
+```
+
+## Events
+
+A list of events that the component will emit:
+
+- `UserSelectedAHistoryQuery`: the event is emitted after the user clicks the button. The event
+  payload is the history query data.

package/docs/API-reference/components/next-queries/x-components.next-queries-list.md

@@ -42,7 +42,7 @@ Usually, this component is going to be used together with the `ResultsList` one.
 will be inserted between the results, guiding users to discover new searches directly from the
 results list.
 
-```vue
+```vue live
 <template>
   <div>
     <SearchInput />
@@ -77,7 +77,7 @@ Finally, a third group will be inserted at index `192`. Because `maxGroups` is c
 more groups will be inserted. Each one of this groups will have up to `6` next queries
 (`maxNextQueriesPerGroup`).
 
-```vue
+```vue live
 <template>
   <div>
     <SearchInput />