@iress-oss/ids-mcp-server 5.14.2 → 5.20.1

package/generated/docs/components-input-docs.md

@@ -1,335 +0,0 @@
-[](#input)Input
-===============
-
-Overview
---------
-
-Inputs allow a user to input and interact with data. This component should be used as a child of the `IressField` component to ensure the correct placement of elements like label, error & hint text.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInput
-  append\=""
-  placeholder\="Enter your name"
-  prepend\=""
-/>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#types)Types
-
-The input component's `type` can be set to one of the following value: `text` (default), `date`, `email`, `number`, `password`, `search`, `tel`, `url`, `time`, `color` and `file`.
-
-For more information about each type, please see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types).
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gutter\="md"\>
-  <IressInput
-    placeholder\="Text input"
-    type\="text"
-  />
-  <IressInput
-    placeholder\="Color input"
-    type\="color"
-  />
-  <IressInput
-    placeholder\="Date input"
-    type\="date"
-  />
-  <IressInput
-    placeholder\="Datetime-local input"
-    type\="datetime-local"
-  />
-  <IressInput
-    placeholder\="Email input"
-    type\="email"
-  />
-  <IressInput
-    placeholder\="File input"
-    type\="file"
-  />
-  <IressInput
-    placeholder\="Month input"
-    type\="month"
-  />
-  <IressInput
-    placeholder\="Number input"
-    type\="number"
-  />
-  <IressInput
-    placeholder\="Password input"
-    type\="password"
-  />
-  <IressInput
-    placeholder\="Search input"
-    type\="search"
-  />
-  <IressInput
-    placeholder\="Tel input"
-    type\="tel"
-  />
-  <IressInput
-    placeholder\="Time input"
-    type\="time"
-  />
-  <IressInput
-    placeholder\="Url input"
-    type\="url"
-  />
-  <IressInput
-    placeholder\="Week input"
-    type\="week"
-  />
-</IressStack\>
-
-Copy
-
-Hidden inputs
--------------
-
-If you need to use a hidden input in a form, you can use a native Input element with its `type` set to `hidden`. Remember to set the `name` attribute so it can be included in form submissions.
-
-### [](#input-modes)Input modes
-
-The `inputmode` attribute provides a hint to browsers for devices with onscreen keyboards (usually mobile devices) to help them decide which keyboard to display when a user has selected any input or textarea element.
-
-For more information about each mode (and their expected user experience), please see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gutter\="md"\>
-  <IressInput
-    inputMode\="text"
-    placeholder\="Text mode, usually best used when type=&quot;text&quot; "
-  />
-  <IressInput
-    inputMode\="tel"
-    placeholder\="Tel mode, usually best used when type=&quot;tel&quot; "
-  />
-  <IressInput
-    inputMode\="url"
-    placeholder\="Url mode, usually best used when type=&quot;url&quot; "
-  />
-  <IressInput
-    inputMode\="email"
-    placeholder\="Email mode, usually best used when type=&quot;email&quot; "
-  />
-  <IressInput
-    inputMode\="numeric"
-    placeholder\="Numeric mode, usually best used when type=&quot;numeric&quot; "
-  />
-  <IressInput
-    inputMode\="decimal"
-    placeholder\="Decimal mode, usually best used when type=&quot;decimal&quot; "
-  />
-  <IressInput
-    inputMode\="search"
-    placeholder\="Search mode, usually best used when type=&quot;search&quot; "
-  />
-</IressStack\>
-
-Copy
-
-### [](#clearable)Clearable
-
-By setting the `clearable` prop to `true` a clear button will appear when the user has entered a value into the input.
-
-Clearing will set the focus on the input and trigger the `onClear` handler. Use this handler to clear the input value if your input is controlled.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInput
-  clearable
-  placeholder\="Search"
-  prepend\={<IressIcon name\="search" />}
-/>
-
-Copy
-
-### [](#sizing)Sizing
-
-Inputs can be resized to suit a specific number of characters. This sets an expectation of what data a user has to enter; for example using the `Sixteen` width for a credit card number.
-
-The width in this case refers to the actual input and ensures that it is wide enough for a set number of characters. If you add any appended or prepended content, the overall size of the `IressInput` will increase.
-
-Widths can also be set as a percentage, allowing the input to take up a proportion of the width of its container. In this case, the width of the actual input decreases if you add appended or prepended content.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gutter\="md"\>
-  <IressInput
-    placeholder\="2"
-    width\="2"
-  />
-  <IressInput
-    placeholder\="4"
-    width\="4"
-  />
-  <IressInput
-    placeholder\="6"
-    width\="6"
-  />
-  <IressInput
-    placeholder\="8"
-    width\="8"
-  />
-  <IressInput
-    placeholder\="10"
-    width\="10"
-  />
-  <IressInput
-    placeholder\="12"
-    width\="12"
-  />
-  <IressInput
-    placeholder\="16"
-    width\="16"
-  />
-  <IressInput
-    placeholder\="25perc"
-    width\="25perc"
-  />
-  <IressInput
-    placeholder\="50perc"
-    width\="50perc"
-  />
-  <IressInput
-    placeholder\="75perc"
-    width\="75perc"
-  />
-  <IressInput
-    placeholder\="100perc"
-    width\="100perc"
-  />
-</IressStack\>
-
-Copy
-
-### [](#textareas)Textareas
-
-You can also use `IressInput` to render a `textarea` instead of an `input`. Simply set the rows prop to the number of lines of text you'd like to display. This will set the height of the `textarea`; if a user enters more lines of text than the number of rows, a scrollbar will be displayed.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInput rows\={5} />
-
-Copy
-
-### [](#slot-props)Slot props
-
-Content (typically icons) can be added to slots (`append` and `prepend`) within the `IressInput` component.
-
-*   **Prepend**: appears before the input
-*   **Append**: appears after the input
-
-By setting the watermark prop to true the add ons will render in a different style, which is set in the theme.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gutter\="md"\>
-  <IressInput
-    placeholder\="Prepend slot"
-    prepend\={<IressIcon name\="search" />}
-  />
-  <IressInput
-    append\={<IressIcon name\="search" />}
-    placeholder\="Append slot"
-  />
-  <IressInput
-    placeholder\="Watermark prepend slot"
-    prepend\={<IressIcon name\="search" />}
-    watermark
-  />
-  <IressInput
-    append\={<IressIcon name\="search" />}
-    placeholder\="Watermark append slot"
-    watermark
-  />
-</IressStack\>
-
-Copy
-
-### [](#readonly)Readonly
-
-The `readOnly` prop can be set to prevent the user from changing the value of the input. This will change the input to a custom read-only style and the user will not be able to interact with the input.
-
-If you need more control over the read-only state (for example, rendering a stylised version of the value), you can use the [`IressReadonly` component](?path=/docs/components-readonly--docs).
-
-Value
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInput
-  append\=""
-  placeholder\="Enter your name"
-  prepend\=""
-  readOnly
-  value\="Value"
-/>
-
-Copy
-
-### [](#formatter)Formatter
-
-`formatter` allows you to display the value in a different format when the input is not focused. A typical use case is to format a string with currency symbols and commas.
-
-This prop powers the `IressInputCurrency` component to allow friendly and consistent currency display in Iress products.
-
-**Notes:**
-
-*   When `formatter` is set, the `type` of the input is changed to `text` when not in focus. Keep this in mind when you are testing the component. If you have set the `type` to number and have set a `formatter`, the role of the input will be `textbox` when not in focus, but `spinbutton` when in focus.
-*   The value of the native input will be the formatted value, not the raw value. If you need the raw value, you can use the `onChange` prop to capture the raw value.
-
-The example below changes the value entered to uppercase when the input is not focused.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInput
-  append\=""
-  formatter\={(value) \=> value ? value.toString().toUpperCase() : ""}
-  placeholder\="Enter a string and it will show in UPPERCASE when not focused, and show the raw value on focus"
-  prepend\=""
-/>
-
-Copy
-
-### [](#onchange-and-oninput)`onChange` and `onInput`
-
-As of version 5, the `onChange` and `onInput` events are now consistent with how React handles the events. This means that the `onChange` event will fire at the same time as `onInput`.
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Types](#types)
-    *   [Input modes](#input-modes)
-    *   [Clearable](#clearable)
-    *   [Sizing](#sizing)
-    *   [Textareas](#textareas)
-    *   [Slot props](#slot-props)
-    *   [Readonly](#readonly)
-    *   [Formatter](#formatter)
-    *   [onChange and onInput](#onchange-and-oninput)

package/generated/docs/components-input-recipes-docs.md

@@ -1,140 +0,0 @@
-[](#recipes)Recipes
-===================
-
-[](#percentage-formatting)Percentage formatting
------------------------------------------------
-
-You can use `IressInput` to display percentage formatting. When the field is focused, it can display the raw value, and when blurred, it can display the formatted percentage value.
-
-Feedback
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import { IressInput } from '@iress-oss/ids-components';
-export const InputPercentage \= () \=> (
-  <IressInput<number | string\>
-    defaultValue\="0.5"
-    formatter\={(value \= '') \=> {
-      if (value \=== '') return '';
-      const numericValue \= Number(value);
-      if (Number.isNaN(numericValue)) {
-        return String(value) ?? '';
-      }
-      return new Intl.NumberFormat('en-AU', {
-        style: 'percent',
-      }).format(numericValue);
-    }}
-    type\="number"
-  /\>
-);
-
-Copy
-
-[](#using-with-react-hook-forms)Using with React Hook Forms
------------------------------------------------------------
-
-You can use `IressInput` with React Hook Forms quite easily. The recommended way is to use the [`Controller` component from react-hook-forms](https://www.react-hook-form.com/get-started/#IntegratingwithUIlibraries). However, you can use the `register` method directly, with a few customisations to cater for custom `ref` as seen in the code example here.
-
-Where possible, please use `IressFormField` within an [`IressForm` component](./?path=/docs/components-form--docs).
-
-Although you can use `IressInput` directly with React Hook Forms, we recommend using `IressFormField` within `IressForm` for a more integrated experience.
-
-Input using `{ Controller } from 'react-hook-forms'`
-
-Input using `{ register } = useForm()`
-
-Submit
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  InputRef,
-  IressAlert,
-  IressButton,
-  IressInline,
-  IressInput,
-  IressLabel,
-  IressModal,
-  IressStack,
-  IressTable,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-import { Controller, UseFormRegisterReturn, useForm } from 'react-hook-form';
-const registerInnerElement \= (register: UseFormRegisterReturn) \=> {
-  return {
-    ...register,
-    onClear: register.onChange,
-    ref: (ref: InputRef | null) \=> {
-      if (ref) {
-        register.ref(ref.input);
-      }
-    },
-  };
-};
-export const ReactHookFormsInput \= () \=> {
-  const { register, handleSubmit, control } \= useForm();
-  const \[data, setData\] \= useState<Record<string, string\> | undefined\>();
-  return (
-    // eslint-disable-next-line sonarjs/void-use -- This is a mock form submission
-    <form onSubmit\={void handleSubmit(setData)}\>
-      <IressStack gutter\="md"\>
-        <IressAlert status\="info"\>
-          Although you can use <code\>IressInput</code\> directly with React Hook          Forms, we recommend using <code\>IressFormField</code\> within{' '}
-          <code\>IressForm</code\> for a more integrated experience.        </IressAlert\>
-        <IressInline gutter\="md" verticalAlign\="middle"\>
-          <IressLabel htmlFor\="Controller"\>
-            Input using <code\>{\`{ Controller } from 'react-hook-forms'\`}</code\>
-          </IressLabel\>
-          <Controller
-            name\="Controller"
-            control\={control}
-            render\={({ field }) \=> (
-              <IressInput
-                {...field}
-                clearable
-                onClear\={field.onChange}
-                id\="firstName"
-              />
-            )}
-          />
-        </IressInline\>
-        <IressInline gutter\="md" verticalAlign\="middle"\>
-          <IressLabel htmlFor\="register"\>
-            Input using <code\>{\`{ register } = useForm()\`}</code\>
-          </IressLabel\>
-          <IressInput
-            {...registerInnerElement(register('register'))}
-            clearable
-            id\="register"
-          />
-        </IressInline\>
-        <IressButton type\="submit"\>Submit</IressButton\>
-      </IressStack\>
-      {data && (
-        <IressModal
-          show\={!!data}
-          onShowChange\={(show) \=> !show && setData(undefined)}
-        \>
-          <IressTable
-            caption\="Submitted details"
-            rows\={Object.entries(data ?? {}).map((entry) \=> ({
-              name: entry\[0\],
-              value: JSON.stringify(entry\[1\], null, 2),
-            }))}
-          />
-        </IressModal\>
-      )}
-    </form\>
-  );
-};
-
-Copy
-
-On this page
-
-*   [Percentage formatting](#percentage-formatting)
-*   [Using with React Hook Forms](#using-with-react-hook-forms)

package/generated/docs/components-inputcurrency-docs.md

@@ -1,157 +0,0 @@
-[](#inputcurrency)InputCurrency
-===============================
-
-Overview
---------
-
-InputCurrency allows a user to input and interact with currency number. It works just like `IressInput`, with new props `locale` and `currencyCode`. This component meets [ISO-4217](https://en.wikipedia.org/wiki/ISO_4217) standard
-
-AUD
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInputCurrency
-  currencyCode\="AUD"
-  defaultValue\={12345.678}
-  locale\="en-AU"
-  placeholder\="Enter amount and dispay currency currency separator on blur"
-/>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#different-locale-and-currencycode)Different Locale and CurrencyCode
-
-Display the GBP with `locale="en-GB"` and `currencyCode="GBP"` props (must pass both together)
-
-GBP
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInputCurrency
-  currencyCode\="GBP"
-  defaultValue\={12345.678}
-  locale\="en-GB"
-  placeholder\="Enter amount and dispay currency currency separator on blur"
-/>
-
-Copy
-
-Display the JPY with `locale="ja-JPY"` and `currencyCode="JPY"` props (must pass both together)
-
-JPY
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInputCurrency
-  currencyCode\="JPY"
-  defaultValue\={12345678}
-  locale\="ja-JP"
-  placeholder\="Enter amount and dispay currency currency separator on blur"
-/>
-
-Copy
-
-### [](#with-symbol)With Symbol
-
-Display the currency symbol with `withSymbol` props
-
-AUD
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInputCurrency
-  currencyCode\="AUD"
-  defaultValue\={12345.678}
-  locale\="en-AU"
-  placeholder\="Enter amount and dispay currency symbol on blur"
-  withSymbol
-/>
-
-Copy
-
-### [](#more-format-options)More Format Options
-
-Pass more format options with `formatOptions` props. More format options in [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
-
-AUD
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInputCurrency
-  currencyCode\="AUD"
-  defaultValue\={12345.678}
-  formatOptions\={{
-    maximumFractionDigits: 4,
-    minimumFractionDigits: 2
-  }}
-  locale\="en-AU"
-  placeholder\="Pass and play around with other native Intl.NumberFormat options to the code sandbox"
-/>
-
-Copy
-
-### [](#read-only)Read Only
-
-The `readOnly` prop can be set to prevent the user from changing the value of the input. This will change the input to a custom read-only style and the user will not be able to interact with the input. If you want to make the number align to right, please pass `alignRight` together.
-
-$12,345.68
-
-AUD
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInputCurrency
-  alignRight
-  currencyCode\="AUD"
-  defaultValue\={12345.678}
-  locale\="en-AU"
-  readOnly
-  withSymbol
-/>
-
-Copy
-
-### [](#align-right)Align Right
-
-Set the input content align to right with `alignRight` prop, which is more friendly for number input.
-
-AUD
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressInputCurrency
-  alignRight
-  currencyCode\="AUD"
-  defaultValue\={12345.678}
-  locale\="en-AU"
-/>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Different Locale and CurrencyCode](#different-locale-and-currencycode)
-    *   [With Symbol](#with-symbol)
-    *   [More Format Options](#more-format-options)
-    *   [Read Only](#read-only)
-    *   [Align Right](#align-right)