reshaped 3.2.6-rc.0 → 3.3.0

package/dist/types/global.d.ts

@@ -12,6 +12,10 @@ export type ResponsiveOnly<T> = {
     [key in Viewport]?: T;
 };
 export type Responsive<T> = T | ResponsiveOnly<T>;
+export type Coordinates = {
+    x: number;
+    y: number;
+};
 /**
  * Form handlers
  */

package/dist/utilities/a11y/TrapFocus.js

@@ -21,6 +21,7 @@ class TrapFocus {
      * Handle keyboard navigation while focus is trapped
      */
     handleKeyDown = (event) => {
+        // if (event.defaultPrevented) return;
         if (TrapFocus.chain.tailId !== this.chainId)
             return;
         const { mode, onNavigateOutside, pseudoFocus, includeTrigger } = this.options;

package/dist/utilities/a11y/focus.d.ts

@@ -1,5 +1,5 @@
 import type { FocusableElement } from "./types";
-export declare const focusableSelector = "a,button,input:not([type=\"hidden\"]),textarea,select,details,[tabindex]:not([tabindex=\"-1\"])";
+export declare const focusableSelector = "a,button,input:not([type=\"hidden\"]),textarea,select,details,[tabindex],[contenteditable]";
 export declare const getActiveElement: (originEl?: HTMLElement | null) => HTMLButtonElement;
 export declare const focusElement: (el: FocusableElement, options?: {
     pseudoFocus?: boolean;

package/dist/utilities/a11y/focus.js

@@ -1,6 +1,6 @@
 import { getShadowRoot } from "../dom/index.js";
 const pseudoFocusAttribute = "data-rs-focus";
-export const focusableSelector = 'a,button,input:not([type="hidden"]),textarea,select,details,[tabindex]:not([tabindex="-1"])';
+export const focusableSelector = 'a,button,input:not([type="hidden"]),textarea,select,details,[tabindex],[contenteditable]';
 export const getActiveElement = (originEl) => {
     const shadowRoot = originEl ? getShadowRoot(originEl) : null;
     const rootEl = shadowRoot ?? document;
@@ -25,6 +25,9 @@ export const getFocusableElements = (rootEl, options) => {
             return false;
         if (el.clientHeight === 0)
             return false;
+        // Using getAttribute here since browser sets el.tabIndex to -1 by default
+        if (el.getAttribute("tabindex") === "-1")
+            return false;
         if (el.type === "radio") {
             let sameNameRadioEls;
             if (el.form) {

package/dist/utilities/a11y/tests/TrapFocus.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: () => React.JSX.Element;

package/dist/utilities/a11y/tests/TrapFocus.stories.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { Example } from "../../storybook/index.js";
+import TrapFocus from "../TrapFocus.js";
+import Button from "../../../components/Button/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import View from "../../../components/View/index.js";
+import TextField from "../../../components/TextField/index.js";
+import RadioGroup from "../../../components/RadioGroup/index.js";
+import Radio from "../../../components/Radio/index.js";
+import * as keys from "../../../constants/keys.js";
+export default {
+    title: "Internal/TrapFocus",
+};
+const Editor = () => {
+    const pressedCountRef = React.useRef(1);
+    const handleKeyDown = (e) => {
+        if (e.key !== keys.TAB)
+            return;
+        if (pressedCountRef.current % 5)
+            e.preventDefault();
+        pressedCountRef.current += 1;
+    };
+    return (<View backgroundColor="neutral-faded" borderColor="neutral-faded" borderRadius="medium" padding={4} attributes={{ contentEditable: true, onKeyDown: handleKeyDown }}/>);
+};
+const Demo = () => {
+    const rootRef = React.useRef(null);
+    const trapToggle = useToggle();
+    React.useEffect(() => {
+        if (!trapToggle.active)
+            return;
+        if (!rootRef.current)
+            return;
+        const trapFocus = new TrapFocus(rootRef.current);
+        trapFocus.trap();
+        return () => trapFocus.release();
+    }, [trapToggle.active]);
+    return (<View gap={4}>
+			<Button onClick={trapToggle.activate}>Activate</Button>
+			{trapToggle.active && (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} gap={4} attributes={{ ref: rootRef }}>
+					<Button onClick={() => { }}>Button</Button>
+					<Button href="#">Link</Button>
+					<TextField name="input" placeholder="Input"/>
+					<RadioGroup name="radio">
+						<Radio value="1">Option 1</Radio>
+						<Radio value="2">Option 1</Radio>
+					</RadioGroup>
+					<Editor />
+					<Button onClick={trapToggle.deactivate} attributes={{ tabIndex: -1 }}>
+						Excluded
+					</Button>
+					<Button onClick={trapToggle.deactivate}>Deactivate</Button>
+				</View>)}
+		</View>);
+};
+export const base = () => (<Example>
+		<Example.Item title="Default">
+			<Demo />
+		</Example.Item>
+	</Example>);

package/dist/utilities/dom/find.d.ts

@@ -0,0 +1,10 @@
+export declare const findParent: (element: HTMLElement, condition: (el: HTMLElement) => boolean) => HTMLElement | null;
+/**
+ * Containers used for scoping the rendering,
+ * mostly used in flyouts since the have to accommodate for positioning and overflow
+ */
+export declare const findClosestRenderContainer: (args: {
+    el: HTMLElement | null;
+    iteration?: number;
+    overflowOnly?: boolean;
+}) => HTMLElement;

package/dist/utilities/dom/find.js

@@ -0,0 +1,35 @@
+import { getShadowRoot } from "./shadowDom.js";
+export const findParent = (element, condition) => {
+    let currentElement = element.parentElement;
+    while (currentElement) {
+        if (condition(currentElement))
+            return currentElement;
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+};
+/**
+ * Containers used for scoping the rendering,
+ * mostly used in flyouts since the have to accommodate for positioning and overflow
+ */
+export const findClosestRenderContainer = (args) => {
+    const { el, iteration = 0, overflowOnly } = args;
+    const style = el && window.getComputedStyle(el);
+    const overflowY = style?.overflowY;
+    const position = style?.position;
+    const isScrollable = overflowY?.includes("scroll") || overflowY?.includes("auto");
+    const isFixed = position === "fixed" || position === "sticky";
+    // Only check shadow root on the first run
+    if (iteration === 0) {
+        const shadowRoot = getShadowRoot(el);
+        if (shadowRoot?.firstElementChild)
+            return shadowRoot.firstElementChild;
+    }
+    if (el === document.body || !el)
+        return document.body;
+    if (isScrollable && el.scrollHeight > el.clientHeight)
+        return el;
+    if (isFixed && !overflowOnly)
+        return el;
+    return findClosestRenderContainer({ el: el.parentElement, iteration: iteration + 1 });
+};

package/dist/utilities/dom/flyout.d.ts

@@ -1 +1,2 @@
-export declare const getClosestFlyoutTarget: (el: HTMLElement | null, iteration?: number) => HTMLElement;
+import type * as G from "../../types/global";
+export declare const getRectFromCoordinates: (coordinates: DOMRect | G.Coordinates) => DOMRect;

package/dist/utilities/dom/flyout.js

@@ -1,19 +1,14 @@
-import { getShadowRoot } from "./shadowDom.js";
-export const getClosestFlyoutTarget = (el, iteration = 0) => {
-    const style = el && window.getComputedStyle(el);
-    const overflowY = style?.overflowY;
-    const position = style?.position;
-    const isScrollable = overflowY?.includes("scroll");
-    const isFixed = position === "fixed" || position === "sticky";
-    // Only check shadow root on the first run
-    if (iteration === 0) {
-        const shadowRoot = getShadowRoot(el);
-        if (shadowRoot?.firstElementChild)
-            return shadowRoot.firstElementChild;
-    }
-    if (el === document.body || !el)
-        return document.body;
-    if ((isScrollable && el.scrollHeight > el.clientHeight) || isFixed)
-        return el;
-    return getClosestFlyoutTarget(el.parentElement, iteration + 1);
+export const getRectFromCoordinates = (coordinates) => {
+    if ("width" in coordinates && coordinates.width !== undefined)
+        return coordinates;
+    return {
+        ...coordinates,
+        width: 0,
+        height: 0,
+        left: coordinates.x,
+        right: coordinates.x,
+        top: coordinates.y,
+        bottom: coordinates.y,
+        toJSON: () => { },
+    };
 };

package/dist/utilities/dom/index.d.ts

@@ -1,3 +1,4 @@
-export { getClosestFlyoutTarget } from "./flyout";
+export { getRectFromCoordinates } from "./flyout";
 export { getShadowRoot } from "./shadowDom";
 export { enableUserSelect, disableUserSelect } from "./userSelect";
+export { findParent, findClosestRenderContainer } from "./find";

package/dist/utilities/dom/index.js

@@ -1,3 +1,4 @@
-export { getClosestFlyoutTarget } from "./flyout.js";
+export { getRectFromCoordinates } from "./flyout.js";
 export { getShadowRoot } from "./shadowDom.js";
 export { enableUserSelect, disableUserSelect } from "./userSelect.js";
+export { findParent, findClosestRenderContainer } from "./find.js";

package/dist/utilities/scroll/lock.js

@@ -1,17 +1,21 @@
 import { isIOS } from "../platform.js";
 import lockSafariScroll from "./lockSafari.js";
 import lockStandardScroll from "./lockStandard.js";
+import { findClosestRenderContainer } from "../dom/index.js";
 let lockedCount = 0;
 let reset = () => { };
 export const lockScroll = (args) => {
     lockedCount += 1;
     if (lockedCount > 1)
         return;
+    const customLockTargetEl = args.containerEl
+        ? findClosestRenderContainer({ el: args.containerEl, overflowOnly: true })
+        : undefined;
     if (isIOS()) {
-        reset = lockSafariScroll();
+        reset = lockSafariScroll(customLockTargetEl);
     }
     else {
-        reset = lockStandardScroll(args.containerEl);
+        reset = lockStandardScroll(customLockTargetEl);
     }
     args.cb?.();
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.2.6-rc.0",
+	"version": "3.3.0",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -93,65 +93,65 @@
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@commitlint/cli": "19.5.0",
-		"@commitlint/config-conventional": "19.5.0",
+		"@commitlint/cli": "19.6.0",
+		"@commitlint/config-conventional": "19.6.0",
 		"@commitlint/types": "19.5.0",
-		"@eslint/js": "9.13.0",
+		"@eslint/js": "9.16.0",
 		"@size-limit/preset-big-lib": "11.1.6",
-		"@storybook/addon-a11y": "8.3.6",
-		"@storybook/addon-controls": "8.3.6",
-		"@storybook/addon-docs": "8.3.6",
-		"@storybook/addon-storysource": "8.3.6",
-		"@storybook/react": "8.3.6",
-		"@storybook/react-vite": "8.3.6",
+		"@storybook/addon-a11y": "8.4.6",
+		"@storybook/addon-controls": "8.4.6",
+		"@storybook/addon-docs": "8.4.6",
+		"@storybook/addon-storysource": "8.4.6",
+		"@storybook/react": "8.4.6",
+		"@storybook/react-vite": "8.4.6",
 		"@testing-library/dom": "10.4.0",
-		"@testing-library/jest-dom": "6.6.2",
+		"@testing-library/jest-dom": "6.6.3",
 		"@testing-library/react": "16.0.1",
 		"@testing-library/user-event": "14.5.2",
 		"@types/culori": "2.1.1",
 		"@types/events": "3.0.3",
-		"@types/jest": "29.5.13",
-		"@types/node": "22.7.7",
-		"@types/react": "18.3.11",
+		"@types/jest": "29.5.14",
+		"@types/node": "22.10.1",
+		"@types/react": "18.3.12",
 		"@types/react-dom": "18.3.1",
 		"@typescript-eslint/eslint-plugin": "7.18.0",
 		"@typescript-eslint/parser": "7.18.0",
-		"@vitejs/plugin-react": "4.3.3",
-		"chromatic": "11.12.6",
+		"@vitejs/plugin-react": "4.3.4",
+		"chromatic": "11.19.0",
 		"cz-conventional-changelog": "3.3.0",
 		"eslint": "8.57.1",
 		"eslint-config-prettier": "9.1.0",
 		"eslint-plugin-import": "2.31.0",
-		"eslint-plugin-jsx-a11y": "6.10.0",
+		"eslint-plugin-jsx-a11y": "6.10.2",
 		"eslint-plugin-prettier": "5.2.1",
-		"eslint-plugin-react": "7.37.1",
+		"eslint-plugin-react": "7.37.2",
 		"eslint-plugin-react-hooks": "5.0.0",
-		"globals": "15.11.0",
+		"globals": "15.12.0",
 		"identity-obj-proxy": "3.0.0",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"jest-matchmedia-mock": "1.1.0",
-		"lefthook": "1.7.22",
-		"postcss": "8.4.47",
+		"lefthook": "1.8.4",
+		"postcss": "8.4.49",
 		"postcss-cli": "11.0.0",
 		"postcss-each": "1.1.0",
-		"postcss-nested": "6.2.0",
-		"prettier": "3.3.3",
+		"postcss-nested": "7.0.2",
+		"prettier": "3.4.1",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"react-shadow": "20.5.0",
-		"resolve-tspaths": "0.8.22",
+		"resolve-tspaths": "0.8.23",
 		"size-limit": "11.1.6",
-		"storybook": "8.3.6",
-		"stylelint": "16.10.0",
+		"storybook": "8.4.6",
+		"stylelint": "16.11.0",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "36.0.1",
 		"ts-jest": "29.2.5",
 		"ts-node": "10.9.2",
-		"typescript": "5.6.3",
-		"typescript-eslint": "8.10.0",
-		"vite": "5.4.9",
-		"vite-tsconfig-paths": "5.0.1"
+		"typescript": "5.7.2",
+		"typescript-eslint": "8.16.0",
+		"vite": "6.0.1",
+		"vite-tsconfig-paths": "5.1.3"
 	},
 	"peerDependencies": {
 		"postcss": "^8",
@@ -163,9 +163,9 @@
 		"chalk": "4.1.2",
 		"commander": "12.1.0",
 		"cssnano": "7.0.6",
-		"csstype": "^3.1.3",
+		"csstype": "3.1.3",
 		"culori": "4.0.1",
-		"postcss-custom-media": "11.0.3"
+		"postcss-custom-media": "11.0.5"
 	},
 	"size-limit": [
 		{

package/dist/styles/align/align.module.css

@@ -1 +0,0 @@
-.--align-start{align-items:flex-start!important}.--align-end{align-items:flex-end!important}.--align-center{align-items:center!important}.--align-stretch{align-items:stretch!important}.--align-baseline{align-items:baseline!important}@media (--rs-viewport-m ){.--align-start--m{align-items:flex-start!important}.--align-end--m{align-items:flex-end!important}.--align-center--m{align-items:center!important}.--align-stretch--m{align-items:stretch!important}.--align-baseline--m{align-items:baseline!important}}@media (--rs-viewport-l ){.--align-start--l{align-items:flex-start!important}.--align-end--l{align-items:flex-end!important}.--align-center--l{align-items:center!important}.--align-stretch--l{align-items:stretch!important}.--align-baseline--l{align-items:baseline!important}}@media (--rs-viewport-xl ){.--align-start--xl{align-items:flex-start!important}.--align-end--xl{align-items:flex-end!important}.--align-center--xl{align-items:center!important}.--align-stretch--xl{align-items:stretch!important}.--align-baseline--xl{align-items:baseline!important}}

package/dist/styles/aspectRatio/aspectRatio.module.css

@@ -1 +0,0 @@
-.root:empty,.root:not(:empty)>*{aspect-ratio:var(--rs-ratio)}.root>img{object-fit:cover}.root{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}@media (--rs-viewport-m ){.root{--rs-ratio:var(--rs-ratio-m)}}@media (--rs-viewport-l ){.root{--rs-ratio:var(--rs-ratio-l)}}@media (--rs-viewport-xl ){.root{--rs-ratio:var(--rs-ratio-xl)}}

package/dist/styles/inset/inset.module.css

@@ -1 +0,0 @@
-.--inset{inset:calc(var(--rs-inset) * var(--rs-unit-x1))}.--inset-end{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset-s:0;--rs-inset-m:var(--rs-inset-s);--rs-inset-l:var(--rs-inset-m);--rs-inset-xl:var(--rs-inset-l);--rs-inset:var(--rs-inset-s)}.--inset-end{--rs-inset-end-s:0;--rs-inset-end-m:var(--rs-inset-end-s);--rs-inset-end-l:var(--rs-inset-end-m);--rs-inset-end-xl:var(--rs-inset-end-l);--rs-inset-end:var(--rs-inset-end-s)}.--inset-start{--rs-inset-start-s:0;--rs-inset-start-m:var(--rs-inset-start-s);--rs-inset-start-l:var(--rs-inset-start-m);--rs-inset-start-xl:var(--rs-inset-start-l);--rs-inset-start:var(--rs-inset-start-s)}.--inset-top{--rs-inset-top-s:0;--rs-inset-top-m:var(--rs-inset-top-s);--rs-inset-top-l:var(--rs-inset-top-m);--rs-inset-top-xl:var(--rs-inset-top-l);--rs-inset-top:var(--rs-inset-top-s)}.--inset-bottom{--rs-inset-bottom-s:0;--rs-inset-bottom-m:var(--rs-inset-bottom-s);--rs-inset-bottom-l:var(--rs-inset-bottom-m);--rs-inset-bottom-xl:var(--rs-inset-bottom-l);--rs-inset-bottom:var(--rs-inset-bottom-s)}@media (--rs-viewport-m ){.--inset-end--m{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--m{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--m{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--m{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-m)}.--inset-end{--rs-inset-end:var(--rs-inset-end-m)}.--inset-start{--rs-inset-start:var(--rs-inset-start-m)}.--inset-top{--rs-inset-top:var(--rs-inset-top-m)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-m)}}@media (--rs-viewport-l ){.--inset-end--l{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--l{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--l{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--l{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-l)}.--inset-end{--rs-inset-end:var(--rs-inset-end-l)}.--inset-start{--rs-inset-start:var(--rs-inset-start-l)}.--inset-top{--rs-inset-top:var(--rs-inset-top-l)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-l)}}@media (--rs-viewport-xl ){.--inset-end--xl{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1))}.--inset-start--xl{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1))}.--inset-top--xl{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1))}.--inset-bottom--xl{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1))}.--inset{--rs-inset:var(--rs-inset-xl)}.--inset-end{--rs-inset-end:var(--rs-inset-end-xl)}.--inset-start{--rs-inset-start:var(--rs-inset-start-xl)}.--inset-top{--rs-inset-top:var(--rs-inset-top-xl)}.--inset-bottom{--rs-inset-bottom:var(--rs-inset-bottom-xl)}}

package/dist/styles/justify/justify.module.css

@@ -1 +0,0 @@
-.--justify-start{justify-content:flex-start!important}.--justify-end{justify-content:flex-end!important}.--justify-center{justify-content:center!important}.--justify-space-between{justify-content:space-between!important}@media (--rs-viewport-m ){.--justify-start--m{justify-content:flex-start!important}.--justify-end--m{justify-content:flex-end!important}.--justify-center--m{justify-content:center!important}.--justify-space-between--m{justify-content:space-between!important}}@media (--rs-viewport-l ){.--justify-start--l{justify-content:flex-start!important}.--justify-end--l{justify-content:flex-end!important}.--justify-center--l{justify-content:center!important}.--justify-space-between--l{justify-content:space-between!important}}@media (--rs-viewport-xl ){.--justify-start--xl{justify-content:flex-start!important}.--justify-end--xl{justify-content:flex-end!important}.--justify-center--xl{justify-content:center!important}.--justify-space-between--xl{justify-content:space-between!important}}

package/dist/styles/padding/padding.module.css

@@ -1 +0,0 @@
-.root{padding:calc(var(--rs-p) * var(--rs-unit-x1) - var(--rs-border-width, 0px));--rs-p-s:0;--rs-p-m:var(--rs-p-s);--rs-p-l:var(--rs-p-m);--rs-p-xl:var(--rs-p-l);--rs-p:var(--rs-p-s)}@media (--rs-viewport-m ){.root{--rs-p:var(--rs-p-m)}}@media (--rs-viewport-l ){.root{--rs-p:var(--rs-p-l)}}@media (--rs-viewport-xl ){.root{--rs-p:var(--rs-p-xl)}}

package/dist/styles/position/position.module.css

@@ -1 +0,0 @@
-.--position-static{position:static}.--position-relative{position:relative}.--position-absolute{position:absolute}.--position-fixed{position:fixed}.--position-sticky{position:sticky}@media (--rs-viewport-m ){.--position-static--m{position:static}.--position-relative--m{position:relative}.--position-absolute--m{position:absolute}.--position-fixed--m{position:fixed}.--position-sticky--m{position:sticky}}@media (--rs-viewport-l ){.--position-static--l{position:static}.--position-relative--l{position:relative}.--position-absolute--l{position:absolute}.--position-fixed--l{position:fixed}.--position-sticky--l{position:sticky}}@media (--rs-viewport-xl ){.--position-static--xl{position:static}.--position-relative--xl{position:relative}.--position-absolute--xl{position:absolute}.--position-fixed--xl{position:fixed}.--position-sticky--xl{position:sticky}}

package/dist/styles/textAlign/textAlign.module.css

@@ -1 +0,0 @@
-.--text-align-start{text-align:start}.--text-align-center{text-align:center}.--text-align-end{text-align:end}@media (--rs-viewport-m ){.--text-align-start--m{text-align:start}.--text-align-center--m{text-align:center}.--text-align-end--m{text-align:end}}@media (--rs-viewport-l ){.--text-align-start--l{text-align:start}.--text-align-center--l{text-align:center}.--text-align-end--l{text-align:end}}@media (--rs-viewport-xl ){.--text-align-start--xl{text-align:start}.--text-align-center--xl{text-align:center}.--text-align-end--xl{text-align:end}}