@yumehiko/jp-ui 0.3.0 → 0.4.0

package/dist/components/icon-button/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAI7D,KAAK,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAC/D,KAAK,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC;AAEpC,KAAK,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,UAAU,CAAC,GAAG;IACzE,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAIF,eAAO,MAAM,UAAU,qFAgBtB,CAAC"}

package/dist/components/index.d.ts

@@ -4,7 +4,7 @@ export * from './autocomplete/Autocomplete';
 export * from './autocomplete/AutocompleteInputBox';
 export * from './avatar/Avatar';
 export * from './button/Button';
-export * from './button/IconButton';
+export * from './icon-button/IconButton';
 export * from './checkbox/Checkbox';
 export * from './checkbox-group/CheckboxGroup';
 export * from './collapsible/Collapsible';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC"}

package/docs/llm/components/Accordion.md

@@ -0,0 +1,42 @@
+# Accordion
+
+Source: src/components/accordion/Example.tsx
+
+## Example
+
+```tsx
+import {
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionRoot,
+  AccordionTrigger,
+} from '..';
+
+export function Example() {
+  return (
+    <AccordionRoot>
+      <AccordionItem>
+        <AccordionHeader>
+          <AccordionTrigger>Accordion Example</AccordionTrigger>
+        </AccordionHeader>
+        <AccordionPanel>
+          <AccordionContent className="typesetting-body">
+            パネルの内容は後で調整できます。必要なら専用デザインを選択して下さい。
+          </AccordionContent>
+        </AccordionPanel>
+      </AccordionItem>
+    </AccordionRoot>
+  );
+}
+
+```
+
+Source: dist/components/accordion/Accordion.d.ts
+
+## Types
+
+```ts
+type AccordionContentProps = useRender.ComponentProps<'div'>;
+```

package/docs/llm/components/AlertDialog.md

@@ -0,0 +1,66 @@
+# Alert Dialog
+
+Source: src/components/alert-dialog/Example.tsx
+
+## Example
+
+```tsx
+import { Button } from '..';
+import {
+  AlertDialogActions,
+  AlertDialogBackdrop,
+  AlertDialogCaption,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTrigger,
+  AlertDialogTitle,
+  AlertDialogViewport,
+} from '..';
+
+export function Example() {
+  return (
+    <AlertDialogRoot>
+      <AlertDialogTrigger render={(props) => <Button {...props}>AlertDialogを開く</Button>} />
+      <AlertDialogPortal>
+        <AlertDialogBackdrop />
+        <AlertDialogViewport>
+          <AlertDialogPopup>
+            <AlertDialogContent>
+              <AlertDialogTitle>Discard draft?</AlertDialogTitle>
+              <AlertDialogDescription>You can't undo this action.</AlertDialogDescription>
+              <AlertDialogCaption>Changes will be lost permanently.</AlertDialogCaption>
+            </AlertDialogContent>
+            <AlertDialogActions>
+              <AlertDialogClose
+                render={(props) => (
+                  <Button {...props} variant="ghost">
+                    キャンセル
+                  </Button>
+                )}
+              />
+              <AlertDialogClose render={(props) => <Button {...props}>破棄する</Button>} />
+            </AlertDialogActions>
+          </AlertDialogPopup>
+        </AlertDialogViewport>
+      </AlertDialogPortal>
+    </AlertDialogRoot>
+  );
+}
+
+```
+
+Source: dist/components/alert-dialog/AlertDialog.d.ts
+
+## Types
+
+```ts
+type AlertDialogContentProps = useRender.ComponentProps<'div'>;
+
+type AlertDialogActionsProps = useRender.ComponentProps<'div'>;
+
+type AlertDialogCaptionProps = useRender.ComponentProps<'p'>;
+```

package/docs/llm/components/Autocomplete.md

@@ -0,0 +1,95 @@
+# Autocomplete
+
+Source: src/components/autocomplete/Example.tsx
+
+## Example
+
+```tsx
+import * as React from 'react';
+import { AutocompleteInputBox } from '..';
+import {
+  AutocompletePortal,
+  AutocompletePositioner,
+  AutocompletePopup,
+  AutocompleteList,
+  AutocompleteItem,
+  AutocompleteEmpty,
+} from '..';
+
+const tags = [
+  'feature',
+  'fix',
+  'bug',
+  'docs',
+  'internal',
+  'mobile',
+  'component: accordion',
+  'component: alert dialog',
+  'component: autocomplete',
+  'component: avatar',
+  'component: checkbox',
+  'component: dialog',
+];
+
+export function Example() {
+  const [value, setValue] = React.useState('com');
+
+  return (
+    <AutocompleteInputBox
+      items={tags}
+      value={value}
+      onValueChange={setValue}
+      placeholder="e.g. feature"
+      rootProps={{ defaultOpen: true }}
+      fieldProps={{ label: 'Search tags' }}
+    >
+      <AutocompletePortal>
+        <AutocompletePositioner sideOffset={8}>
+          <AutocompletePopup>
+            <AutocompleteEmpty>No tags found.</AutocompleteEmpty>
+            <AutocompleteList>
+              {(tag: string) => (
+                <AutocompleteItem key={tag} value={tag}>
+                  {tag}
+                </AutocompleteItem>
+              )}
+            </AutocompleteList>
+          </AutocompletePopup>
+        </AutocompletePositioner>
+      </AutocompletePortal>
+    </AutocompleteInputBox>
+  );
+}
+
+```
+
+Source: dist/components/autocomplete/AutocompleteInputBox.d.ts
+
+## Types
+
+```ts
+type AutocompleteRootProps = React.ComponentPropsWithoutRef<typeof AutocompleteRoot>;
+
+type InputBoxProps = React.ComponentPropsWithoutRef<typeof InputBox>;
+
+type FieldProps = Omit<React.ComponentPropsWithoutRef<typeof Field>, 'children'>;
+
+type ControlledAutocompleteInputBoxProps = {
+    value: string;
+    defaultValue?: never;
+    onValueChange: (value: string) => void;
+};
+
+type UncontrolledAutocompleteInputBoxProps = {
+    value?: undefined;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+
+type AutocompleteInputBoxProps = Omit<InputBoxProps, 'inputComponent' | 'value' | 'defaultValue' | 'onValueChange'> & {
+    items: AutocompleteRootProps['items'];
+    rootProps?: Omit<AutocompleteRootProps, 'items' | 'value' | 'defaultValue' | 'onValueChange' | 'children'>;
+    fieldProps?: FieldProps;
+    children?: React.ReactNode;
+} & (ControlledAutocompleteInputBoxProps | UncontrolledAutocompleteInputBoxProps);
+```

package/docs/llm/components/Avatar.md

@@ -0,0 +1,33 @@
+# Avatar
+
+Source: src/components/avatar/Example.tsx
+
+## Example
+
+```tsx
+import avatarImage from '../../assets/images/avator.jpg';
+import { AvatarFallback, AvatarImage, AvatarRoot } from '..';
+
+export function Example() {
+  return (
+    <>
+      <AvatarRoot>
+        <AvatarImage src={avatarImage} width="96" height="96" alt="" />
+        <AvatarFallback>YM</AvatarFallback>
+      </AvatarRoot>
+      <AvatarRoot>
+        <AvatarFallback>YM</AvatarFallback>
+      </AvatarRoot>
+      <AvatarRoot
+        style={{
+          ['--avatar-size' as string]: '32px',
+          ['--avatar-text-offset' as string]: '0.06em',
+        }}
+      >
+        <AvatarFallback>YM</AvatarFallback>
+      </AvatarRoot>
+    </>
+  );
+}
+
+```

package/docs/llm/components/Button.md

@@ -0,0 +1,54 @@
+# Button
+
+Source: src/components/button/Example.tsx
+
+## Example
+
+```tsx
+import * as React from 'react';
+import { Button } from '..';
+
+type ExampleProps = React.ComponentProps<typeof Button>;
+
+export function Example(props: ExampleProps) {
+  const { children = 'Submit', variant = 'filled', ...rest } = props;
+
+  return (
+    <Button {...rest} variant={variant}>
+      {children}
+    </Button>
+  );
+}
+
+```
+
+Source: dist/components/button/Button.d.ts
+
+## Types
+
+```ts
+type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'ghost';
+
+type ButtonSize = 'large' | 'small';
+
+type ButtonProps = React.ComponentPropsWithoutRef<typeof BaseButton> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+```
+
+Source: dist/components/button/IconButton.d.ts
+
+## Types
+
+```ts
+type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'ghost';
+
+type ButtonSize = 'large' | 'small';
+
+type IconButtonProps = React.ComponentPropsWithoutRef<typeof BaseButton> & {
+    'aria-label': string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+```

package/docs/llm/components/Checkbox.md

@@ -0,0 +1,173 @@
+# Checkbox
+
+Source: src/components/checkbox/Example.tsx
+
+## Example
+
+```tsx
+import * as React from 'react';
+import { Checkbox } from '..';
+import styles from './Checkbox.module.css';
+
+type ExampleProps = React.ComponentProps<typeof Checkbox>;
+
+const labelClassName = `typesetting-label typesetting-tsumegumi ${styles.Label}`;
+
+export function Example(props: ExampleProps) {
+  return (
+    <div style={{ display: 'grid', gap: 12 }}>
+      <label className={labelClassName}>
+        <Checkbox {...props} />
+        通知を有効にする
+      </label>
+      <label className={labelClassName}>
+        <Checkbox {...props} defaultChecked />
+        通知を有効にする（選択済み）
+      </label>
+      <label className={labelClassName}>
+        <Checkbox {...props} disabled />
+        通知を有効にする（無効）
+      </label>
+    </div>
+  );
+}
+
+```
+
+Source: src/components/checkbox/Checkbox.module.css
+
+## Styles
+
+```css
+.Label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--on-surface);
+  cursor: pointer;
+}
+
+.Label:has(.Checkbox[data-disabled]) {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+.Checkbox {
+  position: relative;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--inverse-on-surface);
+  cursor: pointer;
+  outline: none;
+
+  --checkbox-state-opacity: 0;
+}
+
+.Checkbox::after {
+  content: "";
+  position: absolute;
+  left: calc(-1 * (var(--focus-ring-offset) + var(--focus-ring-width)));
+  top: calc(-1 * (var(--focus-ring-offset) + var(--focus-ring-width)));
+  width: calc(24px + 2 * (var(--focus-ring-offset) + var(--focus-ring-width)));
+  height: calc(24px + 2 * (var(--focus-ring-offset) + var(--focus-ring-width)));
+  border: var(--focus-ring-width) solid var(--focus-ring-color);
+  border-radius: var(--radius-full);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.Box {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--outline);
+  background-color: transparent;
+}
+
+.StateLayer {
+  position: absolute;
+  left: -4px;
+  top: -4px;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  background-color: var(--on-surface);
+  opacity: var(--checkbox-state-opacity);
+  transition: opacity 150ms ease-out;
+  pointer-events: none;
+}
+
+.Indicator {
+  position: absolute;
+  left: 6px;
+  top: 6px;
+  width: 12px;
+  height: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--inverse-on-surface);
+}
+
+.Icon {
+  width: 12px;
+  height: 12px;
+}
+
+.Checkbox[data-unchecked] .Indicator {
+  opacity: 0;
+}
+
+.Checkbox[data-checked] .Box {
+  border: 0;
+  background-color: var(--inverse-surface);
+}
+
+.Checkbox[data-disabled] {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+.Checkbox[data-disabled] .StateLayer {
+  opacity: 0;
+}
+
+.Checkbox:focus-visible,
+.Checkbox[data-focused] {
+  --checkbox-state-opacity: 0.12;
+}
+
+.Checkbox:focus-visible::after,
+.Checkbox[data-focused]::after {
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .Checkbox:hover:not([data-disabled]) {
+    --checkbox-state-opacity: 0.08;
+  }
+
+  .Label:hover .Checkbox:not([data-disabled]) {
+    --checkbox-state-opacity: 0.08;
+  }
+}
+
+.Checkbox:active:not([data-disabled]) {
+  --checkbox-state-opacity: 0.16;
+}
+
+.Label:active .Checkbox:not([data-disabled]) {
+  --checkbox-state-opacity: 0.16;
+}
+
+```

package/docs/llm/components/CheckboxGroup.md

@@ -0,0 +1,201 @@
+# Checkbox Group
+
+Source: src/components/checkbox-group/Example.tsx
+
+## Example
+
+```tsx
+import * as React from 'react';
+import { Checkbox } from '..';
+import checkboxStyles from '../checkbox/Checkbox.module.css';
+import { CheckboxGroup } from '..';
+import styles from './CheckboxGroup.module.css';
+
+const labelClassName = `typesetting-label typesetting-tsumegumi ${checkboxStyles.Label}`;
+
+const options = [
+  { label: 'お知らせを受け取る', value: 'news' },
+  { label: 'アップデートを受け取る', value: 'updates' },
+  { label: 'ヒントを受け取る', value: 'tips' },
+];
+
+export function Example() {
+  const id = React.useId();
+  return (
+    <CheckboxGroup aria-labelledby={id} defaultValue={['news']}>
+      <div id={id} className={styles.Caption}>
+        通知設定
+      </div>
+      {options.map((option) => (
+        <label key={option.value} className={labelClassName}>
+          <Checkbox name="notifications" value={option.value} />
+          {option.label}
+        </label>
+      ))}
+    </CheckboxGroup>
+  );
+}
+
+```
+
+Source: src/components/checkbox/Checkbox.module.css
+
+## Styles
+
+```css
+.Label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--on-surface);
+  cursor: pointer;
+}
+
+.Label:has(.Checkbox[data-disabled]) {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+.Checkbox {
+  position: relative;
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--inverse-on-surface);
+  cursor: pointer;
+  outline: none;
+
+  --checkbox-state-opacity: 0;
+}
+
+.Checkbox::after {
+  content: "";
+  position: absolute;
+  left: calc(-1 * (var(--focus-ring-offset) + var(--focus-ring-width)));
+  top: calc(-1 * (var(--focus-ring-offset) + var(--focus-ring-width)));
+  width: calc(24px + 2 * (var(--focus-ring-offset) + var(--focus-ring-width)));
+  height: calc(24px + 2 * (var(--focus-ring-offset) + var(--focus-ring-width)));
+  border: var(--focus-ring-width) solid var(--focus-ring-color);
+  border-radius: var(--radius-full);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.Box {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--outline);
+  background-color: transparent;
+}
+
+.StateLayer {
+  position: absolute;
+  left: -4px;
+  top: -4px;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  background-color: var(--on-surface);
+  opacity: var(--checkbox-state-opacity);
+  transition: opacity 150ms ease-out;
+  pointer-events: none;
+}
+
+.Indicator {
+  position: absolute;
+  left: 6px;
+  top: 6px;
+  width: 12px;
+  height: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--inverse-on-surface);
+}
+
+.Icon {
+  width: 12px;
+  height: 12px;
+}
+
+.Checkbox[data-unchecked] .Indicator {
+  opacity: 0;
+}
+
+.Checkbox[data-checked] .Box {
+  border: 0;
+  background-color: var(--inverse-surface);
+}
+
+.Checkbox[data-disabled] {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+.Checkbox[data-disabled] .StateLayer {
+  opacity: 0;
+}
+
+.Checkbox:focus-visible,
+.Checkbox[data-focused] {
+  --checkbox-state-opacity: 0.12;
+}
+
+.Checkbox:focus-visible::after,
+.Checkbox[data-focused]::after {
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .Checkbox:hover:not([data-disabled]) {
+    --checkbox-state-opacity: 0.08;
+  }
+
+  .Label:hover .Checkbox:not([data-disabled]) {
+    --checkbox-state-opacity: 0.08;
+  }
+}
+
+.Checkbox:active:not([data-disabled]) {
+  --checkbox-state-opacity: 0.16;
+}
+
+.Label:active .Checkbox:not([data-disabled]) {
+  --checkbox-state-opacity: 0.16;
+}
+
+```
+
+Source: src/components/checkbox-group/CheckboxGroup.module.css
+
+## Styles
+
+```css
+.Group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  color: var(--on-surface);
+}
+
+.Caption {
+  font-family: var(--font-brand);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-label);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
+  color: var(--on-surface);
+}
+
+```