payload 1.6.4-beta.0 → 1.6.4

package/dist/admin/components/elements/Button/index.scss

@@ -0,0 +1,199 @@
+@import '../../../scss/styles.scss';
+
+.btn {
+  background: transparent;
+  line-height: base(1);
+  border-radius: $style-radius-m;
+  font-size: 1rem;
+  margin-top: base(1);
+  margin-bottom: base(1);
+  border: 0;
+  cursor: pointer;
+  font-weight: normal;
+  text-decoration: none;
+  text-align: center;
+  color: inherit;
+
+  .btn__icon {
+    border: 1px solid;
+    border-radius: 100%;
+    @include color-svg(currentColor);
+  }
+
+  &--has-tooltip {
+    position: relative;
+  }
+
+  &--icon-style-without-border {
+    .btn__icon {
+      border: none;
+    }
+  }
+
+  &--icon-style-none {
+    .btn__icon {
+      border: none;
+    }
+  }
+
+  span {
+    line-height: base(1);
+  }
+
+  span,
+  svg {
+    vertical-align: top;
+  }
+
+  &--size-medium {
+    padding: base(.5) $baseline;
+  }
+
+  &--size-small {
+    padding: base(.25) base(.5);
+  }
+
+  &--style-primary {
+    background-color: var(--theme-elevation-800);
+    color: var(--theme-elevation-0);
+
+    &.btn--disabled {
+      background-color: var(--theme-elevation-400);
+    }
+
+    &:not(.btn--disabled) {
+      &:hover {
+        background: var(--theme-elevation-750);
+      }
+
+      &:active {
+        background: var(--theme-elevation-700);
+      }
+    }
+
+    &:focus {
+      box-shadow: $focus-box-shadow;
+      outline: none;
+    }
+
+  }
+
+  &--style-secondary {
+    $base-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
+    $hover-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-700);
+
+    box-shadow: $base-box-shadow;
+    color: var(--theme-elevation-800);
+    background: none;
+
+    &:hover {
+      background: var(--theme-elevation-100);
+      box-shadow: $hover-box-shadow;
+    }
+
+    &:active {
+      background: var(--theme-elevation-200);
+    }
+
+    &.btn--disabled {
+      color: var(--theme-elevation-400);
+      background: none;
+      box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-400);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: $hover-box-shadow, $focus-box-shadow;
+    }
+  }
+
+  &--style-none {
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
+
+    &:focus {
+      opacity: .8;
+    }
+
+    &:active {
+      opacity: .7;
+    }
+  }
+
+  &--round {
+    border-radius: 100%;
+  }
+
+  &--icon {
+    span {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &.btn--style-primary {
+      .icon {
+        @include color-svg(var(--theme-elevation-0));
+      }
+    }
+  }
+
+  &--style-icon-label {
+    padding: 0;
+    font-weight: 600;
+  }
+
+  &--style-light-gray {
+    box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
+  }
+
+  &--icon-position-left {
+    .btn__content {
+      flex-direction: row-reverse;
+    }
+
+    .btn__icon {
+      margin-right: base(.5);
+    }
+  }
+
+  &--icon-position-right {
+    .btn__icon {
+      margin-left: base(.5);
+    }
+  }
+
+  &--icon-only {
+    .btn__icon {
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  &--disabled {
+    cursor: default;
+  }
+
+  &:hover {
+    .btn__icon {
+      @include color-svg(var(--theme-elevation-0));
+      background: var(--theme-elevation-800);
+    }
+  }
+
+  &:focus {
+    .btn__icon {
+      @include color-svg(var(--theme-elevation-800));
+      background: var(--theme-elevation-150);
+    }
+
+    outline: none;
+  }
+
+  &:active {
+    .btn__icon {
+      @include color-svg(var(--theme-elevation-0));
+      background: var(--theme-elevation-700);
+    }
+  }
+}

package/dist/admin/components/elements/Button/types.d.ts

@@ -0,0 +1,21 @@
+import React, { ElementType, MouseEvent } from 'react';
+export type Props = {
+    className?: string;
+    id?: string;
+    type?: 'submit' | 'button';
+    el?: 'link' | 'anchor' | ElementType;
+    to?: string;
+    url?: string;
+    children?: React.ReactNode;
+    onClick?: (event: MouseEvent) => void;
+    disabled?: boolean;
+    icon?: React.ReactNode | ['chevron' | 'x' | 'plus' | 'edit'];
+    iconStyle?: 'with-border' | 'without-border' | 'none';
+    buttonStyle?: 'primary' | 'secondary' | 'transparent' | 'error' | 'none' | 'icon-label';
+    buttonId?: string;
+    round?: boolean;
+    size?: 'small' | 'medium';
+    iconPosition?: 'left' | 'right';
+    newTab?: boolean;
+    tooltip?: string;
+};

package/dist/admin/components/elements/Button/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/admin/components/elements/Button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/admin/components/elements/Button/types.ts"],"names":[],"mappings":""}

package/dist/admin/components/elements/Card/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Card: React.FC<Props>;
+export default Card;

package/dist/admin/components/elements/Card/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Button_1 = __importDefault(require("../Button"));
+require("./index.scss");
+const baseClass = 'card';
+const Card = (props) => {
+    const { id, title, actions, onClick } = props;
+    const classes = [
+        baseClass,
+        id,
+        onClick && `${baseClass}--has-onclick`,
+    ].filter(Boolean).join(' ');
+    return (react_1.default.createElement("div", { className: classes, id: id },
+        react_1.default.createElement("h5", null, title),
+        actions && (react_1.default.createElement("div", { className: `${baseClass}__actions` }, actions)),
+        onClick && (react_1.default.createElement(Button_1.default, { className: `${baseClass}__click`, buttonStyle: "none", onClick: onClick }))));
+};
+exports.default = Card;
+//# sourceMappingURL=index.js.map

package/dist/admin/components/elements/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/admin/components/elements/Card/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,uDAA+B;AAG/B,wBAAsB;AAEtB,MAAM,SAAS,GAAG,MAAM,CAAC;AAEzB,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACtC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAE9C,MAAM,OAAO,GAAG;QACd,SAAS;QACT,EAAE;QACF,OAAO,IAAI,GAAG,SAAS,eAAe;KACvC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,uCACE,SAAS,EAAE,OAAO,EAClB,EAAE,EAAE,EAAE;QAEN,0CACG,KAAK,CACH;QACJ,OAAO,IAAI,CACV,uCAAK,SAAS,EAAE,GAAG,SAAS,WAAW,IACpC,OAAO,CACJ,CACP;QACA,OAAO,IAAI,CACV,8BAAC,gBAAM,IACL,SAAS,EAAE,GAAG,SAAS,SAAS,EAChC,WAAW,EAAC,MAAM,EAClB,OAAO,EAAE,OAAO,GAChB,CACH,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC"}

package/dist/admin/components/elements/Card/index.scss

@@ -0,0 +1,41 @@
+@import '../../../scss/styles';
+
+.card {
+  background: var(--theme-elevation-50);
+  padding: base(1.25) $baseline;
+  position: relative;
+
+  h5 {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__actions {
+    position: relative;
+    z-index: 2;
+    margin-top: base(.5);
+    display: inline-flex;
+
+    .btn {
+      margin: 0;
+    }
+  }
+
+  &--has-onclick {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--theme-elevation-100);
+    }
+  }
+
+  &__click {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

package/dist/admin/components/elements/Card/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type Props = {
+    id?: string;
+    title: string;
+    actions?: React.ReactNode;
+    onClick?: () => void;
+};

package/dist/admin/components/elements/Card/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/admin/components/elements/Card/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/admin/components/elements/Card/types.ts"],"names":[],"mappings":""}

package/dist/admin/components/elements/CodeEditor/CodeEditor.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+declare const CodeEditor: React.FC<Props>;
+export default CodeEditor;

package/dist/admin/components/elements/CodeEditor/CodeEditor.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = __importDefault(require("@monaco-editor/react"));
+const Theme_1 = require("../../utilities/Theme");
+require("./index.scss");
+const ShimmerEffect_1 = require("../ShimmerEffect");
+const baseClass = 'code-editor';
+const CodeEditor = (props) => {
+    const { readOnly, className, options, ...rest } = props;
+    const { theme } = (0, Theme_1.useTheme)();
+    const classes = [
+        baseClass,
+        className,
+        (rest === null || rest === void 0 ? void 0 : rest.defaultLanguage) ? `language--${rest.defaultLanguage}` : '',
+    ].filter(Boolean).join(' ');
+    return (react_1.default.createElement(react_2.default, { className: classes, theme: theme === 'dark' ? 'vs-dark' : 'vs', loading: react_1.default.createElement(ShimmerEffect_1.ShimmerEffect, { height: "35vh" }), options: {
+            detectIndentation: true,
+            minimap: {
+                enabled: false,
+            },
+            readOnly: Boolean(readOnly),
+            scrollBeyondLastLine: false,
+            tabSize: 2,
+            wordWrap: 'on',
+            ...options,
+        }, ...rest }));
+};
+exports.default = CodeEditor;
+//# sourceMappingURL=CodeEditor.js.map

package/dist/admin/components/elements/CodeEditor/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../../../../src/admin/components/elements/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,iEAA0C;AAE1C,iDAAiD;AAEjD,wBAAsB;AACtB,oDAAiD;AAEjD,MAAM,SAAS,GAAG,aAAa,CAAC;AAEhC,MAAM,UAAU,GAAoB,CAAC,KAAK,EAAE,EAAE;IAC5C,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAExD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,gBAAQ,GAAE,CAAC;IAE7B,MAAM,OAAO,GAAG;QACd,SAAS;QACT,SAAS;QACT,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe,EAAC,CAAC,CAAC,aAAa,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE;KACjE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,8BAAC,eAAM,IACL,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC1C,OAAO,EAAE,8BAAC,6BAAa,IAAC,MAAM,EAAC,MAAM,GAAG,EACxC,OAAO,EACL;YACE,iBAAiB,EAAE,IAAI;YACvB,OAAO,EAAE;gBACP,OAAO,EAAE,KAAK;aACf;YACD,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC;YAC3B,oBAAoB,EAAE,KAAK;YAC3B,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,IAAI;YACd,GAAG,OAAO;SACX,KAEC,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/dist/admin/components/elements/CodeEditor/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { Props } from './types';
+export declare const CodeEditor: React.FC<Props>;

package/dist/admin/components/elements/CodeEditor/index.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeEditor = void 0;
+const react_1 = __importStar(require("react"));
+const ShimmerEffect_1 = require("../ShimmerEffect");
+const LazyEditor = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./CodeEditor'))));
+const CodeEditor = (props) => {
+    const { height = '35vh' } = props;
+    return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(ShimmerEffect_1.ShimmerEffect, { height: height }) },
+        react_1.default.createElement(LazyEditor, { ...props, height: height })));
+};
+exports.CodeEditor = CodeEditor;
+//# sourceMappingURL=index.js.map

package/dist/admin/components/elements/CodeEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/admin/components/elements/CodeEditor/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8C;AAC9C,oDAAiD;AAGjD,MAAM,UAAU,GAAG,IAAA,YAAI,EAAC,GAAG,EAAE,mDAAQ,cAAc,GAAC,CAAC,CAAC;AAE/C,MAAM,UAAU,GAAoB,CAAC,KAAK,EAAE,EAAE;IACnD,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,KAAK,CAAC;IAElC,OAAO,CACL,8BAAC,gBAAQ,IAAC,QAAQ,EAAE,8BAAC,6BAAa,IAAC,MAAM,EAAE,MAAM,GAAI;QACnD,8BAAC,UAAU,OACL,KAAK,EACT,MAAM,EAAE,MAAM,GACd,CACO,CACZ,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,UAAU,cAWrB"}

package/dist/admin/components/elements/CodeEditor/index.scss

@@ -0,0 +1,21 @@
+@import '../../../scss/styles';
+
+.code-editor {
+  @include formInput;
+  height: auto;
+  padding: 0;
+
+  .monaco-editor {
+    .view-overlays .current-line {
+      max-width: calc(100% - 14px);
+      border-width: 0px;
+    }
+
+    &:focus-within {
+      .view-overlays .current-line {
+        border-right: 0;
+        border-width: 1px;
+      }
+    }
+  }
+}

package/dist/admin/components/elements/CodeEditor/types.d.ts

@@ -0,0 +1,4 @@
+import type { EditorProps } from '@monaco-editor/react';
+export type Props = EditorProps & {
+    readOnly?: boolean;
+};

package/dist/admin/components/elements/CodeEditor/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/admin/components/elements/CodeEditor/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/admin/components/elements/CodeEditor/types.ts"],"names":[],"mappings":""}

package/dist/admin/components/elements/Collapsible/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+export declare const Collapsible: React.FC<Props>;

package/dist/admin/components/elements/Collapsible/index.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collapsible = void 0;
+const react_1 = __importStar(require("react"));
+const react_animate_height_1 = __importDefault(require("react-animate-height"));
+const react_i18next_1 = require("react-i18next");
+const provider_1 = require("./provider");
+const Chevron_1 = __importDefault(require("../../icons/Chevron"));
+const Drag_1 = __importDefault(require("../../icons/Drag"));
+require("./index.scss");
+const baseClass = 'collapsible';
+const Collapsible = ({ children, collapsed: collapsedFromProps, onToggle, className, header, initCollapsed, dragHandleProps, actions, }) => {
+    const [collapsedLocal, setCollapsedLocal] = (0, react_1.useState)(Boolean(initCollapsed));
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const isNested = (0, provider_1.useCollapsible)();
+    const { t } = (0, react_i18next_1.useTranslation)('fields');
+    const collapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal;
+    return (react_1.default.createElement("div", { className: [
+            baseClass,
+            className,
+            dragHandleProps && `${baseClass}--has-drag-handle`,
+            collapsed && `${baseClass}--collapsed`,
+            isNested && `${baseClass}--nested`,
+            hovered && `${baseClass}--hovered`,
+        ].filter(Boolean).join(' ') },
+        react_1.default.createElement(provider_1.CollapsibleProvider, null,
+            react_1.default.createElement("div", { className: `${baseClass}__toggle-wrap`, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false) },
+                dragHandleProps && (react_1.default.createElement("div", { className: `${baseClass}__drag`, ...dragHandleProps },
+                    react_1.default.createElement(Drag_1.default, null))),
+                react_1.default.createElement("button", { type: "button", className: [
+                        `${baseClass}__toggle`,
+                        `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,
+                    ].filter(Boolean).join(' '), onClick: () => {
+                        if (typeof onToggle === 'function')
+                            onToggle(!collapsed);
+                        setCollapsedLocal(!collapsed);
+                    } },
+                    react_1.default.createElement("span", null, t('toggleBlock'))),
+                header && (react_1.default.createElement("div", { className: [
+                        `${baseClass}__header-wrap`,
+                        dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,
+                    ].filter(Boolean).join(' ') }, header && header)),
+                react_1.default.createElement("div", { className: `${baseClass}__actions-wrap` },
+                    actions && (react_1.default.createElement("div", { className: `${baseClass}__actions` }, actions)),
+                    react_1.default.createElement(Chevron_1.default, { className: `${baseClass}__indicator` }))),
+            react_1.default.createElement(react_animate_height_1.default, { height: collapsed ? 0 : 'auto', duration: 200 },
+                react_1.default.createElement("div", { className: `${baseClass}__content` }, children)))));
+};
+exports.Collapsible = Collapsible;
+//# sourceMappingURL=index.js.map

package/dist/admin/components/elements/Collapsible/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/admin/components/elements/Collapsible/index.tsx"],"names":[],"mappings":"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"}

package/dist/admin/components/elements/Collapsible/index.scss

@@ -0,0 +1,117 @@
+@import '../../../scss/styles.scss';
+
+.collapsible {
+  --toggle-pad-h: #{base(.75)};
+  --toggle-pad-v: #{base(.5)};
+
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: $style-radius-m;
+
+  &:hover {
+    border: 1px solid var(--theme-elevation-300);
+  }
+
+  &__toggle-wrap {
+    position: relative;
+  }
+
+  &--nested {
+    margin-bottom: $baseline !important;
+  }
+
+  &--hovered {
+    >.collapsible__toggle-wrap>.collapsible__drag {
+      opacity: 1;
+    }
+
+    >.collapsible__toggle-wrap>.collapsible__toggle {
+      background: var(--theme-elevation-100);
+    }
+  }
+
+  &__drag {
+    opacity: .5;
+    position: absolute;
+    z-index: 1;
+    top: var(--toggle-pad-v);
+    left: base(.5);
+  }
+
+  &__toggle {
+    @extend %btn-reset;
+    @extend %body;
+    text-align: left;
+    cursor: pointer;
+    background: var(--theme-elevation-50);
+    border-top-right-radius: $style-radius-s;
+    border-top-left-radius: $style-radius-s;
+    width: 100%;
+    color: transparent;
+
+    span {
+      user-select: none;
+    }
+  }
+
+  &__toggle,
+  &__header-wrap {
+    padding: var(--toggle-pad-v) var(--toggle-pad-h);
+  }
+
+  &__header-wrap {
+    position: absolute;
+    top: 0;
+    right: base(3);
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+
+    >* {
+      pointer-events: all;
+    }
+  }
+
+  &__header-wrap--has-drag-handle {
+    left: base(.875);
+  }
+
+  &--collapsed {
+    .collapsible__toggle {
+      border-bottom-right-radius: $style-radius-s;
+      border-bottom-left-radius: $style-radius-s;
+    }
+
+    .collapsible__indicator {
+      transform: rotate(0turn);
+    }
+  }
+
+  &__actions-wrap {
+    position: absolute;
+    right: var(--toggle-pad-h);
+    top: var(--toggle-pad-v);
+    pointer-events: none;
+    display: flex;
+  }
+
+  &__actions {
+    pointer-events: all;
+  }
+
+  &__indicator {
+    transform: rotate(.5turn);
+  }
+
+  &__content {
+    background-color: var(--theme-elevation-0);
+    border-bottom-left-radius: $style-radius-s;
+    border-bottom-right-radius: $style-radius-s;
+    padding: $baseline $baseline 0 $baseline;
+  }
+
+  @include small-break {
+    &__content {
+      padding: var(--gutter-h);
+    }
+  }
+}

package/dist/admin/components/elements/Collapsible/provider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const Context: React.Context<boolean>;
+export declare const CollapsibleProvider: React.FC<{
+    children?: React.ReactNode;
+    withinCollapsible?: boolean;
+}>;
+export declare const useCollapsible: () => boolean;
+export default Context;