@dotss/ui 1.0.3 → 1.0.4

package/node_modules/@storybook/addon-links/README.md

@@ -1,147 +0,0 @@
-# Story Links Addon
-
-The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org).
-
-[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
-
-## Getting Started
-
-Install this addon by adding the `@storybook/addon-links` dependency:
-
-```sh
-yarn add -D @storybook/addon-links
-```
-
-within `.storybook/main.js`:
-
-```js
-export default {
-  addons: ['@storybook/addon-links'],
-};
-```
-
-Then you can import `linkTo` in your stories and use like this:
-
-```js
-import { linkTo } from '@storybook/addon-links';
-
-export default {
-  title: 'Button',
-};
-
-export const first = () => <button onClick={linkTo('Button', 'second')}>Go to "Second"</button>;
-export const second = () => <button onClick={linkTo('Button', 'first')}>Go to "First"</button>;
-```
-
-Have a look at the linkTo function:
-
-```js
-import { linkTo } from '@storybook/addon-links';
-
-linkTo('Toggle', 'off');
-linkTo(
-  () => 'Toggle',
-  () => 'off'
-);
-linkTo('Toggle'); // Links to the first story in the 'Toggle' kind
-```
-
-With that, you can link an event in a component to any story in the Storybook.
-
-- First parameter is the story kind name (what you named with `title`).
-- Second (optional) parameter is the story name (what you named with `exported name`).
-  If the second parameter is omitted, the link will point to the first story in the given kind.
-
-You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string:
-
-```js
-import { linkTo } from '@storybook/addon-links';
-import LinkTo from '@storybook/addon-links/react';
-
-export default {
-  title: 'Select',
-};
-
-export const index = () => (
-  <select value="Index" onChange={linkTo('Select', (e) => e.currentTarget.value)}>
-    <option>index</option>
-    <option>first</option>
-    <option>second</option>
-    <option>third</option>
-  </select>
-);
-export const first = () => <LinkTo story="index">Go back</LinkTo>;
-export const second = () => <LinkTo story="index">Go back</LinkTo>;
-export const third = () => <LinkTo story="index">Go back</LinkTo>;
-```
-
-## hrefTo function
-
-If you want to get an URL for a particular story, you may use `hrefTo` function. It returns a promise, which resolves to string containing a relative URL:
-
-```js
-import { action } from '@storybook/addon-actions';
-import { hrefTo } from '@storybook/addon-links';
-
-export default {
-  title: 'Href',
-};
-
-export const log = () => {
-  hrefTo('Href', 'log').then(action('URL of this story'));
-
-  return <span>See action logger</span>;
-};
-```
-
-## withLinks decorator
-
-`withLinks` decorator enables a declarative way of defining story links, using data attributes.
-Here is an example in React, but it works with any framework:
-
-```js
-import { withLinks } from '@storybook/addon-links';
-
-export default {
-  title: 'Button',
-  decorators: [withLinks],
-};
-
-export const first = () => (
-  <button data-sb-kind="OtherKind" data-sb-story="otherStory">
-    Go to "OtherStory"
-  </button>
-);
-```
-
-## LinkTo component (React only)
-
-One possible way of using `hrefTo` is to create a component that uses native `a` element, but prevents page reloads on plain left click, so that one can still use default browser methods to open link in new tab.
-A React implementation of such a component can be imported from `@storybook/addon-links` package:
-
-```js
-import LinkTo from '@storybook/addon-links/react';
-
-export default {
-  title: 'Link',
-};
-
-export const first = () => <LinkTo story="second">Go to Second</LinkTo>;
-export const second = () => <LinkTo story="first">Go to First</LinkTo>;
-```
-
-It accepts all the props the `a` element does, plus `story` and `kind`. It the `kind` prop is omitted, the current kind will be preserved.
-
-```js
-<LinkTo
-  kind="Toggle"
-  story="off"
-  target="_blank"
-  title="link to second story"
-  style={{ color: '#1474f3' }}
->
-  Go to Second
-</LinkTo>
-```
-
-To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/next/code/addons/links/src/react/components/RoutedLink.tsx) for reference.

package/node_modules/@storybook/addon-links/dist/chunk-DQW2J2JG.mjs

@@ -1,8 +0,0 @@
-import { STORY_CHANGED, SELECT_STORY } from 'storybook/internal/core-events';
-import { toId } from 'storybook/internal/csf';
-import { makeDecorator, addons } from 'storybook/internal/preview-api';
-import { global } from '@storybook/global';
-
-var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var PARAM_KEY="links";var{document,HTMLElement}=global;function parseQuery(queryString){let query={},pairs=(queryString[0]==="?"?queryString.substring(1):queryString).split("&").filter(Boolean);for(let i=0;i<pairs.length;i++){let pair=pairs[i].split("=");query[decodeURIComponent(pair[0])]=decodeURIComponent(pair[1]||"");}return query}var navigate=params=>addons.getChannel().emit(SELECT_STORY,params),hrefTo=(title,name)=>new Promise(resolve=>{let{location}=document,existingId=parseQuery(location.search).id,titleToLink=title||existingId.split("--",2)[0],path=`/story/${toId(titleToLink,name)}`,sbPath=location.pathname.replace(/iframe\.html$/,""),url=`${location.origin+sbPath}?${Object.entries({path}).map(item=>`${item[0]}=${item[1]}`).join("&")}`;resolve(url);}),valueOrCall=args=>value=>typeof value=="function"?value(...args):value,linkTo=(idOrTitle,nameInput)=>(...args)=>{let resolver=valueOrCall(args),title=resolver(idOrTitle),name=nameInput?resolver(nameInput):!1;title?.match(/--/)&&!name?navigate({storyId:title}):name&&title?navigate({kind:title,story:name}):title?navigate({kind:title}):name&&navigate({story:name});},linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),navigate({kind,story}));},hasListener=!1,on=()=>{hasListener||(hasListener=!0,document.addEventListener("click",linksListener));},off=()=>{hasListener&&(hasListener=!1,document.removeEventListener("click",linksListener));},withLinks=makeDecorator({name:"withLinks",parameterName:PARAM_KEY,wrapper:(getStory,context)=>(on(),addons.getChannel().once(STORY_CHANGED,off),getStory(context))});
-
-export { __export, hrefTo, linkTo, navigate, withLinks };

package/node_modules/@storybook/addon-links/dist/index.d.ts

@@ -1,20 +0,0 @@
-import * as core_dist_types from 'storybook/internal/types';
-import { ComponentTitle, StoryName, StoryId, StoryKind } from 'storybook/internal/types';
-
-interface ParamsId {
-    storyId: StoryId;
-}
-interface ParamsCombo {
-    kind?: StoryKind;
-    title?: ComponentTitle;
-    story?: StoryName;
-    name?: StoryName;
-}
-declare const navigate: (params: ParamsId | ParamsCombo) => void;
-declare const hrefTo: (title: ComponentTitle, name: StoryName) => Promise<string>;
-declare const linkTo: (idOrTitle: string | ((...args: any[]) => string), nameInput?: string | ((...args: any[]) => string)) => (...args: any[]) => void;
-declare const withLinks: (...args: any) => any;
-
-declare const _default: () => core_dist_types.ProjectAnnotations<core_dist_types.Renderer>;
-
-export { _default as default, hrefTo, linkTo, navigate, withLinks };

package/node_modules/@storybook/addon-links/dist/index.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var previewApi = require('storybook/internal/preview-api');
-var coreEvents = require('storybook/internal/core-events');
-var csf = require('storybook/internal/csf');
-var global = require('@storybook/global');
-
-var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{decorators:()=>decorators});var decorators=[withLinks];var PARAM_KEY="links";var{document,HTMLElement}=global.global;function parseQuery(queryString){let query={},pairs=(queryString[0]==="?"?queryString.substring(1):queryString).split("&").filter(Boolean);for(let i=0;i<pairs.length;i++){let pair=pairs[i].split("=");query[decodeURIComponent(pair[0])]=decodeURIComponent(pair[1]||"");}return query}var navigate=params=>previewApi.addons.getChannel().emit(coreEvents.SELECT_STORY,params),hrefTo=(title,name)=>new Promise(resolve=>{let{location}=document,existingId=parseQuery(location.search).id,titleToLink=title||existingId.split("--",2)[0],path=`/story/${csf.toId(titleToLink,name)}`,sbPath=location.pathname.replace(/iframe\.html$/,""),url=`${location.origin+sbPath}?${Object.entries({path}).map(item=>`${item[0]}=${item[1]}`).join("&")}`;resolve(url);}),valueOrCall=args=>value=>typeof value=="function"?value(...args):value,linkTo=(idOrTitle,nameInput)=>(...args)=>{let resolver=valueOrCall(args),title=resolver(idOrTitle),name=nameInput?resolver(nameInput):!1;title?.match(/--/)&&!name?navigate({storyId:title}):name&&title?navigate({kind:title,story:name}):title?navigate({kind:title}):name&&navigate({story:name});},linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),navigate({kind,story}));},hasListener=!1,on=()=>{hasListener||(hasListener=!0,document.addEventListener("click",linksListener));},off=()=>{hasListener&&(hasListener=!1,document.removeEventListener("click",linksListener));},withLinks=previewApi.makeDecorator({name:"withLinks",parameterName:PARAM_KEY,wrapper:(getStory,context)=>(on(),previewApi.addons.getChannel().once(coreEvents.STORY_CHANGED,off),getStory(context))});var index_default=()=>previewApi.definePreview(preview_exports);
-
-exports.default = index_default;
-exports.hrefTo = hrefTo;
-exports.linkTo = linkTo;
-exports.navigate = navigate;
-exports.withLinks = withLinks;

package/node_modules/@storybook/addon-links/dist/index.mjs

@@ -1,7 +0,0 @@
-import { __export, withLinks } from './chunk-DQW2J2JG.mjs';
-export { hrefTo, linkTo, navigate, withLinks } from './chunk-DQW2J2JG.mjs';
-import { definePreview } from 'storybook/internal/preview-api';
-
-var preview_exports={};__export(preview_exports,{decorators:()=>decorators});var decorators=[withLinks];var index_default=()=>definePreview(preview_exports);
-
-export { index_default as default };

package/node_modules/@storybook/addon-links/dist/manager.js

@@ -1,3 +0,0 @@
-import { addons } from 'storybook/internal/manager-api';
-
-var ADDON_ID="storybook/links";var constants_default={NAVIGATE:`${ADDON_ID}/navigate`,REQUEST:`${ADDON_ID}/request`,RECEIVE:`${ADDON_ID}/receive`};addons.register(ADDON_ID,api=>{api.on(constants_default.REQUEST,({kind,name})=>{let id=api.storyId(kind,name);api.emit(constants_default.RECEIVE,id);});});

package/node_modules/@storybook/addon-links/dist/preview.d.ts

@@ -1,3 +0,0 @@
-declare const decorators: ((...args: any) => any)[];
-
-export { decorators };

package/node_modules/@storybook/addon-links/dist/preview.js

@@ -1,10 +0,0 @@
-'use strict';
-
-var previewApi = require('storybook/internal/preview-api');
-var coreEvents = require('storybook/internal/core-events');
-require('storybook/internal/csf');
-var global = require('@storybook/global');
-
-var PARAM_KEY="links";var{document,HTMLElement}=global.global;var navigate=params=>previewApi.addons.getChannel().emit(coreEvents.SELECT_STORY,params);var linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),navigate({kind,story}));},hasListener=!1,on=()=>{hasListener||(hasListener=!0,document.addEventListener("click",linksListener));},off=()=>{hasListener&&(hasListener=!1,document.removeEventListener("click",linksListener));},withLinks=previewApi.makeDecorator({name:"withLinks",parameterName:PARAM_KEY,wrapper:(getStory,context)=>(on(),previewApi.addons.getChannel().once(coreEvents.STORY_CHANGED,off),getStory(context))});var decorators=[withLinks];
-
-exports.decorators = decorators;

package/node_modules/@storybook/addon-links/dist/preview.mjs

@@ -1,8 +0,0 @@
-import { makeDecorator, addons } from 'storybook/internal/preview-api';
-import { STORY_CHANGED, SELECT_STORY } from 'storybook/internal/core-events';
-import 'storybook/internal/csf';
-import { global } from '@storybook/global';
-
-var PARAM_KEY="links";var{document,HTMLElement}=global;var navigate=params=>addons.getChannel().emit(SELECT_STORY,params);var linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),navigate({kind,story}));},hasListener=!1,on=()=>{hasListener||(hasListener=!0,document.addEventListener("click",linksListener));},off=()=>{hasListener&&(hasListener=!1,document.removeEventListener("click",linksListener));},withLinks=makeDecorator({name:"withLinks",parameterName:PARAM_KEY,wrapper:(getStory,context)=>(on(),addons.getChannel().once(STORY_CHANGED,off),getStory(context))});var decorators=[withLinks];
-
-export { decorators };

package/node_modules/@storybook/addon-links/dist/react/index.d.ts

@@ -1,24 +0,0 @@
-import React, { PureComponent, ReactNode } from 'react';
-import { StoryKind, ComponentTitle, StoryName } from 'storybook/internal/types';
-
-interface Props {
-    kind?: StoryKind;
-    title?: ComponentTitle;
-    story?: StoryName;
-    name?: StoryName;
-    children: ReactNode;
-}
-interface State {
-    href: string;
-}
-declare class LinkTo extends PureComponent<Props, State> {
-    static defaultProps: Props;
-    state: State;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Props): void;
-    updateHref: () => Promise<void>;
-    handleClick: () => void;
-    render(): React.JSX.Element;
-}
-
-export { LinkTo as default };

package/node_modules/@storybook/addon-links/dist/react/index.js

@@ -1,15 +0,0 @@
-'use strict';
-
-var React = require('react');
-var coreEvents = require('storybook/internal/core-events');
-var csf = require('storybook/internal/csf');
-var previewApi = require('storybook/internal/preview-api');
-var global = require('@storybook/global');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-var PARAM_KEY="links";var{document,HTMLElement}=global.global;function parseQuery(queryString){let query={},pairs=(queryString[0]==="?"?queryString.substring(1):queryString).split("&").filter(Boolean);for(let i=0;i<pairs.length;i++){let pair=pairs[i].split("=");query[decodeURIComponent(pair[0])]=decodeURIComponent(pair[1]||"");}return query}var navigate=params=>previewApi.addons.getChannel().emit(coreEvents.SELECT_STORY,params),hrefTo=(title,name)=>new Promise(resolve=>{let{location}=document,existingId=parseQuery(location.search).id,titleToLink=title||existingId.split("--",2)[0],path=`/story/${csf.toId(titleToLink,name)}`,sbPath=location.pathname.replace(/iframe\.html$/,""),url=`${location.origin+sbPath}?${Object.entries({path}).map(item=>`${item[0]}=${item[1]}`).join("&")}`;resolve(url);});var linksListener=e=>{let{target}=e;if(!(target instanceof HTMLElement))return;let element=target,{sbKind:kind,sbStory:story}=element.dataset;(kind||story)&&(e.preventDefault(),navigate({kind,story}));},hasListener=!1,on=()=>{hasListener||(hasListener=!0,document.addEventListener("click",linksListener));},off=()=>{hasListener&&(hasListener=!1,document.removeEventListener("click",linksListener));};previewApi.makeDecorator({name:"withLinks",parameterName:PARAM_KEY,wrapper:(getStory,context)=>(on(),previewApi.addons.getChannel().once(coreEvents.STORY_CHANGED,off),getStory(context))});var LEFT_BUTTON=0,isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey,cancelled=(e,cb=_e=>{})=>{isPlainLeftClick(e)&&(e.preventDefault(),cb(e));},LinkTo=class extends React.PureComponent{constructor(){super(...arguments);this.state={href:"/"};this.updateHref=async()=>{let{kind,title=kind,story,name=story}=this.props;if(title&&name){let href=await hrefTo(title,name);this.setState({href});}};this.handleClick=()=>{let{kind,title=kind,story,name=story}=this.props;title&&name&&navigate({title,name});};}componentDidMount(){this.updateHref();}componentDidUpdate(prevProps){let{kind,title,story,name}=this.props;(prevProps.kind!==kind||prevProps.story!==story||prevProps.title!==title||prevProps.name!==name)&&this.updateHref();}render(){let{kind,title=kind,story,name=story,children,...rest}=this.props,{href}=this.state;return React__default.default.createElement("a",{href,onClick:e=>cancelled(e,this.handleClick),...rest},children)}};LinkTo.defaultProps={children:void 0};var react_default=LinkTo;
-
-module.exports = react_default;

package/node_modules/@storybook/addon-links/dist/react/index.mjs

@@ -1,6 +0,0 @@
-import { hrefTo, navigate } from '../chunk-DQW2J2JG.mjs';
-import React, { PureComponent } from 'react';
-
-var LEFT_BUTTON=0,isPlainLeftClick=e=>e.button===LEFT_BUTTON&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey,cancelled=(e,cb=_e=>{})=>{isPlainLeftClick(e)&&(e.preventDefault(),cb(e));},LinkTo=class extends PureComponent{constructor(){super(...arguments);this.state={href:"/"};this.updateHref=async()=>{let{kind,title=kind,story,name=story}=this.props;if(title&&name){let href=await hrefTo(title,name);this.setState({href});}};this.handleClick=()=>{let{kind,title=kind,story,name=story}=this.props;title&&name&&navigate({title,name});};}componentDidMount(){this.updateHref();}componentDidUpdate(prevProps){let{kind,title,story,name}=this.props;(prevProps.kind!==kind||prevProps.story!==story||prevProps.title!==title||prevProps.name!==name)&&this.updateHref();}render(){let{kind,title=kind,story,name=story,children,...rest}=this.props,{href}=this.state;return React.createElement("a",{href,onClick:e=>cancelled(e,this.handleClick),...rest},children)}};LinkTo.defaultProps={children:void 0};var react_default=LinkTo;
-
-export { react_default as default };

package/node_modules/@storybook/addon-links/manager.js

@@ -1 +0,0 @@
-import './dist/manager';

package/node_modules/@storybook/addon-links/package.json

@@ -1,110 +0,0 @@
-{
-  "name": "@storybook/addon-links",
-  "version": "8.6.14",
-  "description": "Link stories together to build demos and prototypes with your UI components",
-  "keywords": [
-    "storybook-addons",
-    "organize"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/links",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "code/addons/links"
-  },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/storybook"
-  },
-  "license": "MIT",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./react": {
-      "types": "./dist/react/index.d.ts",
-      "import": "./dist/react/index.mjs",
-      "require": "./dist/react/index.js"
-    },
-    "./preview": {
-      "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
-    },
-    "./manager": "./dist/manager.js",
-    "./register": "./dist/manager.js",
-    "./package.json": "./package.json"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "preview": [
-        "dist/preview.d.ts"
-      ],
-      "react": [
-        "dist/react/index.d.ts"
-      ]
-    }
-  },
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts",
-    "!src/**/*"
-  ],
-  "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
-    "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
-  },
-  "dependencies": {
-    "@storybook/global": "^5.0.0",
-    "ts-dedent": "^2.0.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.7.3"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-    "storybook": "^8.6.14"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "bundler": {
-    "exportEntries": [
-      "./src/react/index.ts",
-      "./src/index.ts"
-    ],
-    "managerEntries": [
-      "./src/manager.ts"
-    ],
-    "previewEntries": [
-      "./src/preview.ts"
-    ],
-    "post": "./scripts/fix-preview-api-reference.ts"
-  },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
-  "storybook": {
-    "displayName": "Links",
-    "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
-    "unsupportedFrameworks": [
-      "react-native"
-    ]
-  }
-}

package/node_modules/@storybook/addon-links/preview.js

@@ -1 +0,0 @@
-export * from './dist/preview';

package/node_modules/@storybook/addon-links/react.d.ts

@@ -1 +0,0 @@
-export * from './dist/react/index';

package/node_modules/@storybook/addon-links/react.js

@@ -1,3 +0,0 @@
-import LinkTo from './dist/react/index';
-
-export default LinkTo;

package/node_modules/@storybook/addon-viewport/README.md

@@ -1,29 +0,0 @@
-# Storybook Viewport Addon
-
-Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook.
-
-[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
-
-![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/viewport/docs/viewport.png)
-
-## Installation
-
-Viewport is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
-
-```sh
-npm i -D @storybook/addon-viewport
-```
-
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
-
-```js
-export default {
-  addons: ['@storybook/addon-viewport'],
-};
-```
-
-You should now be able to see the viewport addon icon in the toolbar at the top of the screen.
-
-## Usage
-
-The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/viewport).