@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.40de3ec

package/dist/elements/Hierarchy/Search/HierarchySearchInput.js

@@ -1,115 +0,0 @@
-'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback } from 'react';
-import { FilterIcon } from '../../../icons/Filter/index.js';
-import { SearchIcon } from '../../../icons/Search/index.js';
-import { XIcon } from '../../../icons/X/index.js';
-import { useTranslation } from '../../../providers/Translation/index.js';
-import { CheckboxPopup } from '../../CheckboxPopup/index.js';
-const baseClass = 'hierarchy-search-input';
-export const HierarchySearchInput = t0 => {
-  const $ = _c(9);
-  const {
-    collectionSpecificOptions,
-    onChange,
-    onClear,
-    onFilterChange,
-    onSearch,
-    placeholder,
-    selectedFilters: t1,
-    value
-  } = t0;
-  const selectedFilters = t1 === undefined ? [] : t1;
-  const {
-    t
-  } = useTranslation();
-  let t2;
-  if ($[0] !== onChange) {
-    t2 = e => {
-      onChange(e.target.value);
-    };
-    $[0] = onChange;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const handleChange = t2;
-  let t3;
-  if ($[2] !== onSearch || $[3] !== value) {
-    t3 = e_0 => {
-      if (e_0.key === "Enter" && value.length > 0) {
-        onSearch(value);
-      }
-    };
-    $[2] = onSearch;
-    $[3] = value;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  const handleKeyDown = t3;
-  let t4;
-  if ($[5] !== onClear) {
-    t4 = () => {
-      onClear();
-    };
-    $[5] = onClear;
-    $[6] = t4;
-  } else {
-    t4 = $[6];
-  }
-  const handleClear = t4;
-  let t5;
-  if ($[7] !== onFilterChange) {
-    t5 = t6 => {
-      const {
-        selectedValues
-      } = t6;
-      onFilterChange?.(selectedValues);
-    };
-    $[7] = onFilterChange;
-    $[8] = t5;
-  } else {
-    t5 = $[8];
-  }
-  const handleFilterChange = t5;
-  const hasFilters = collectionSpecificOptions && collectionSpecificOptions.length > 0;
-  const hasActiveFilters = selectedFilters.length > 0;
-  const hasValue = value.length > 0;
-  return _jsxs("div", {
-    className: baseClass,
-    children: [_jsx("div", {
-      className: `${baseClass}__icon-container`,
-      children: _jsx(SearchIcon, {})
-    }), _jsx("input", {
-      "aria-label": placeholder,
-      className: `${baseClass}__input`,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      placeholder,
-      type: "text",
-      value
-    }), _jsxs("div", {
-      className: `${baseClass}__actions`,
-      children: [hasValue && _jsx("button", {
-        "aria-label": t("general:clear"),
-        className: `${baseClass}__clear`,
-        onClick: handleClear,
-        type: "button",
-        children: _jsx(XIcon, {})
-      }), hasFilters && _jsx(CheckboxPopup, {
-        Button: _jsx("div", {
-          "aria-label": t("general:filter"),
-          className: [`${baseClass}__filter`, hasActiveFilters && `${baseClass}__filter--active`].filter(Boolean).join(" "),
-          children: _jsx(FilterIcon, {})
-        }),
-        onChange: handleFilterChange,
-        options: collectionSpecificOptions,
-        selectedValues: selectedFilters
-      })]
-    })]
-  });
-};
-//# sourceMappingURL=HierarchySearchInput.js.map

package/dist/elements/Hierarchy/Search/HierarchySearchInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HierarchySearchInput.js","names":["c","_c","React","useCallback","FilterIcon","SearchIcon","XIcon","useTranslation","CheckboxPopup","baseClass","HierarchySearchInput","t0","$","collectionSpecificOptions","onChange","onClear","onFilterChange","onSearch","placeholder","selectedFilters","t1","value","undefined","t","t2","e","target","handleChange","t3","e_0","key","length","handleKeyDown","t4","handleClear","t5","t6","selectedValues","handleFilterChange","hasFilters","hasActiveFilters","hasValue","_jsxs","className","children","_jsx","onKeyDown","type","onClick","Button","filter","Boolean","join","options"],"sources":["../../../../src/elements/Hierarchy/Search/HierarchySearchInput.tsx"],"sourcesContent":["'use client'\n\nimport type { ChangeEvent, KeyboardEvent } from 'react'\n\nimport React, { useCallback } from 'react'\n\nimport { FilterIcon } from '../../../icons/Filter/index.js'\nimport { SearchIcon } from '../../../icons/Search/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { CheckboxPopup } from '../../CheckboxPopup/index.js'\n\nconst baseClass = 'hierarchy-search-input'\n\ntype FilterOption = {\n  label: string\n  value: string\n}\n\ntype HierarchySearchInputProps = {\n  collectionSpecificOptions?: FilterOption[]\n  onChange: (value: string) => void\n  onClear: () => void\n  onFilterChange?: (values: string[]) => void\n  onSearch: (value: string) => void\n  placeholder?: string\n  selectedFilters?: string[]\n  value: string\n}\n\nexport const HierarchySearchInput: React.FC<HierarchySearchInputProps> = ({\n  collectionSpecificOptions,\n  onChange,\n  onClear,\n  onFilterChange,\n  onSearch,\n  placeholder,\n  selectedFilters = [],\n  value,\n}) => {\n  const { t } = useTranslation()\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange(e.target.value)\n    },\n    [onChange],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter' && value.length > 0) {\n        onSearch(value)\n      }\n    },\n    [value, onSearch],\n  )\n\n  const handleClear = useCallback(() => {\n    onClear()\n  }, [onClear])\n\n  const handleFilterChange = useCallback(\n    ({ selectedValues }: { selectedValues: string[] }) => {\n      onFilterChange?.(selectedValues)\n    },\n    [onFilterChange],\n  )\n\n  const hasFilters = collectionSpecificOptions && collectionSpecificOptions.length > 0\n  const hasActiveFilters = selectedFilters.length > 0\n  const hasValue = value.length > 0\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__icon-container`}>\n        <SearchIcon />\n      </div>\n      <input\n        aria-label={placeholder}\n        className={`${baseClass}__input`}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        type=\"text\"\n        value={value}\n      />\n      <div className={`${baseClass}__actions`}>\n        {hasValue && (\n          <button\n            aria-label={t('general:clear')}\n            className={`${baseClass}__clear`}\n            onClick={handleClear}\n            type=\"button\"\n          >\n            <XIcon />\n          </button>\n        )}\n        {hasFilters && (\n          <CheckboxPopup\n            Button={\n              <div\n                aria-label={t('general:filter')}\n                className={[\n                  `${baseClass}__filter`,\n                  hasActiveFilters && `${baseClass}__filter--active`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                <FilterIcon />\n              </div>\n            }\n            onChange={handleFilterChange}\n            options={collectionSpecificOptions}\n            selectedValues={selectedFilters}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/IDLabel/index.scss

@@ -1,15 +0,0 @@
-@import '../../scss/styles';
-
-@layer payload-default {
-  .id-label {
-    font-size: base(0.8);
-    line-height: base(1.2);
-    font-weight: normal;
-    color: var(--theme-elevation-600);
-    background: var(--theme-elevation-100);
-    padding: base(0.2) base(0.4);
-    border-radius: $style-radius-m;
-    display: inline-flex;
-    width: fit-content;
-  }
-}

package/dist/elements/IframeLoader/index.scss

@@ -1,21 +0,0 @@
-@layer payload-default {
-  .iframe-loader__container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    flex: 1;
-    min-height: 0;
-  }
-
-  .iframe-loader__iframe {
-    background-color: white;
-    border: 0;
-    width: 100%;
-    height: 100%;
-    transform-origin: top left;
-  }
-
-  .iframe-loader__iframe--is-loading {
-    opacity: 0;
-  }
-}

package/dist/elements/ItemsDrawer/ItemSearch/index.scss

@@ -1,38 +0,0 @@
-@import '../../../scss/styles.scss';
-
-$icon-width: base(2);
-$icon-margin: base(0.25);
-
-@layer payload-default {
-  .item-search {
-    position: sticky;
-    top: 0;
-    display: flex;
-    width: 100%;
-    align-items: center;
-    z-index: 1;
-
-    &__input {
-      @include formInput;
-    }
-
-    .icon--search {
-      position: absolute;
-      top: 50%;
-      transform: translate3d(0, -50%, 0);
-      right: 0;
-      width: $icon-width;
-      margin: 0 $icon-margin;
-
-      .stroke {
-        stroke: var(--theme-elevation-300);
-      }
-    }
-
-    @include mid-break {
-      &__input {
-        margin-bottom: 0;
-      }
-    }
-  }
-}

package/dist/elements/ItemsDrawer/index.scss

@@ -1,102 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .items-drawer {
-    &__items-wrapper {
-      padding-top: base(1.5);
-    }
-
-    &__items {
-      position: relative;
-      padding: 0;
-      list-style: none;
-      display: grid;
-      grid-template-columns: repeat(6, 1fr);
-      gap: base(1);
-    }
-
-    &__default-image {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      aspect-ratio: 3 / 2;
-      overflow: hidden;
-
-      img,
-      svg {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-
-    &__item-groups {
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      gap: base(1.5);
-    }
-
-    &__item-group {
-      list-style: none;
-    }
-
-    &__item-group-label {
-      padding-bottom: base(0.5);
-    }
-
-    &__item-group-none {
-      order: 1;
-      padding-top: base(1.5);
-      border-top: 1px solid var(--theme-border-color);
-
-      &:only-child {
-        padding-top: 0;
-        border-top: 0;
-      }
-    }
-
-    @include large-break {
-      &__items {
-        grid-template-columns: repeat(5, 1fr);
-      }
-    }
-
-    @include mid-break {
-      &__items-wrapper {
-        padding-top: base(1.75);
-      }
-
-      &__items {
-        grid-template-columns: repeat(3, 1fr);
-      }
-
-      &__item-groups {
-        gap: base(1.75);
-      }
-
-      &__item-group-none {
-        padding-top: base(1.75);
-      }
-    }
-
-    @include small-break {
-      &__items-wrapper {
-        padding-top: base(0.75);
-      }
-
-      &__items {
-        grid-template-columns: repeat(2, 1fr);
-      }
-
-      &__item-groups {
-        gap: base(0.75);
-      }
-
-      &__item-group-none {
-        padding-top: base(0.75);
-      }
-    }
-  }
-}

package/dist/elements/ListControls/getTextFieldsToBeSearched.d.ts

@@ -1,4 +0,0 @@
-import type { I18nClient } from '@payloadcms/translations';
-import type { ClientField } from 'payload';
-export declare const getTextFieldsToBeSearched: (listSearchableFields: string[], fields: ClientField[], i18n: I18nClient) => ClientField[];
-//# sourceMappingURL=getTextFieldsToBeSearched.d.ts.map

package/dist/elements/ListControls/getTextFieldsToBeSearched.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getTextFieldsToBeSearched.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,eAAO,MAAM,yBAAyB,yBACd,MAAM,EAAE,UACtB,WAAW,EAAE,QACf,UAAU,KACf,WAAW,EAqBb,CAAA"}

package/dist/elements/ListControls/getTextFieldsToBeSearched.js

@@ -1,22 +0,0 @@
-'use client';
-
-import { fieldAffectsData, flattenTopLevelFields } from 'payload/shared';
-export const getTextFieldsToBeSearched = (listSearchableFields, fields, i18n) => {
-  if (listSearchableFields) {
-    const flattenedFields = flattenTopLevelFields(fields, {
-      i18n,
-      moveSubFieldsToTop: true
-    });
-    const searchableFieldNames = new Set(listSearchableFields);
-    const matchingFields = [];
-    for (const field of flattenedFields) {
-      if (fieldAffectsData(field) && searchableFieldNames.has(field.name)) {
-        matchingFields.push(field);
-        searchableFieldNames.delete(field.name);
-      }
-    }
-    return matchingFields;
-  }
-  return null;
-};
-//# sourceMappingURL=getTextFieldsToBeSearched.js.map

package/dist/elements/ListControls/getTextFieldsToBeSearched.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getTextFieldsToBeSearched.js","names":["fieldAffectsData","flattenTopLevelFields","getTextFieldsToBeSearched","listSearchableFields","fields","i18n","flattenedFields","moveSubFieldsToTop","searchableFieldNames","Set","matchingFields","field","has","name","push","delete"],"sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientField } from 'payload'\n\nimport { fieldAffectsData, flattenTopLevelFields } from 'payload/shared'\n\nexport const getTextFieldsToBeSearched = (\n  listSearchableFields: string[],\n  fields: ClientField[],\n  i18n: I18nClient,\n): ClientField[] => {\n  if (listSearchableFields) {\n    const flattenedFields = flattenTopLevelFields(fields, {\n      i18n,\n      moveSubFieldsToTop: true,\n    }) as ClientField[]\n\n    const searchableFieldNames = new Set(listSearchableFields)\n    const matchingFields: typeof flattenedFields = []\n\n    for (const field of flattenedFields) {\n      if (fieldAffectsData(field) && searchableFieldNames.has(field.name)) {\n        matchingFields.push(field)\n        searchableFieldNames.delete(field.name)\n      }\n    }\n\n    return matchingFields\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAIA,SAASA,gBAAgB,EAAEC,qBAAqB,QAAQ;AAExD,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,oBAAA,EACAC,MAAA,EACAC,IAAA;EAEA,IAAIF,oBAAA,EAAsB;IACxB,MAAMG,eAAA,GAAkBL,qBAAA,CAAsBG,MAAA,EAAQ;MACpDC,IAAA;MACAE,kBAAA,EAAoB;IACtB;IAEA,MAAMC,oBAAA,GAAuB,IAAIC,GAAA,CAAIN,oBAAA;IACrC,MAAMO,cAAA,GAAyC,EAAE;IAEjD,KAAK,MAAMC,KAAA,IAASL,eAAA,EAAiB;MACnC,IAAIN,gBAAA,CAAiBW,KAAA,KAAUH,oBAAA,CAAqBI,GAAG,CAACD,KAAA,CAAME,IAAI,GAAG;QACnEH,cAAA,CAAeI,IAAI,CAACH,KAAA;QACpBH,oBAAA,CAAqBO,MAAM,CAACJ,KAAA,CAAME,IAAI;MACxC;IACF;IAEA,OAAOH,cAAA;EACT;EAEA,OAAO;AACT","ignoreList":[]}

package/dist/elements/ListControls/index.scss

@@ -1,31 +0,0 @@
-@import '../../scss/styles';
-
-@layer payload-default {
-  .list-controls {
-    display: flex;
-    flex-direction: column;
-
-    .pill-selector,
-    .where-builder,
-    .sort-complex,
-    .group-by-builder {
-      margin-top: calc(var(--base) / 2);
-    }
-
-    @include small-break {
-      .search-bar__actions {
-        .pill {
-          padding: base(0.2) base(0.2) base(0.2) base(0.4);
-          justify-content: space-between;
-        }
-      }
-
-      &__toggle-columns,
-      &__toggle-where,
-      &__toggle-sort,
-      &__toggle-group-by {
-        flex: 1;
-      }
-    }
-  }
-}

package/dist/elements/ListHeader/index.scss

@@ -1,48 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .list-header {
-    display: flex;
-    align-items: flex-end;
-    flex-wrap: wrap;
-
-    &__content {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      width: 100%;
-    }
-
-    &__title-and-actions {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-end;
-      gap: calc(var(--base) * 0.5);
-    }
-
-    &__title {
-      margin: 0;
-    }
-
-    &__title-actions {
-      margin-bottom: 4px;
-      display: flex;
-      gap: calc(var(--base) * 0.5);
-    }
-
-    &__actions {
-      margin-bottom: 4px;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: calc(var(--base) * 0.5);
-    }
-
-    &__after-header-content {
-      width: 100%;
-    }
-
-    .btn {
-      margin: 0;
-    }
-  }
-}

package/dist/elements/ListSelection/index.scss

@@ -1,33 +0,0 @@
-@import '../../scss/styles.scss';
-
-@layer payload-default {
-  .list-selection {
-    display: flex;
-    margin-left: auto;
-    color: var(--theme-elevation-500);
-    gap: 0.5em;
-    align-items: center;
-
-    &__actions {
-      display: flex;
-      gap: calc(var(--base) * 0.5);
-    }
-
-    &__button,
-    &__button.btn {
-      color: var(--theme-elevation-800);
-      background: unset;
-      text-decoration: underline;
-      cursor: pointer;
-      padding: 0;
-      font-size: inherit;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    @include small-break {
-      margin-bottom: base(0.5);
-    }
-  }
-}

package/dist/elements/LivePreview/Toggler/index.scss

@@ -1,48 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .live-preview-toggler {
-    background: none;
-    border: none;
-    border: 1px solid;
-    border-color: var(--theme-elevation-100);
-    border-radius: var(--style-radius-s);
-    line-height: var(--btn-line-height);
-    font-size: var(--base-body-size);
-    padding: calc(var(--base) * 0.2) calc(var(--base) * 0.4);
-    cursor: pointer;
-    transition-property: border, color, background;
-    transition-duration: 100ms;
-    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-    height: calc(var(--base) * 1.6);
-    width: calc(var(--base) * 1.6);
-    position: relative;
-
-    .icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      .stroke {
-        transition-property: stroke;
-        transition-duration: 100ms;
-        transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-      }
-    }
-
-    &:hover {
-      border-color: var(--theme-elevation-300);
-      background-color: var(--theme-elevation-100);
-    }
-
-    &--active {
-      background-color: var(--theme-elevation-100);
-      border-color: var(--theme-elevation-200);
-
-      &:hover {
-        background-color: var(--theme-elevation-200);
-      }
-    }
-  }
-}

package/dist/elements/LivePreview/Toolbar/Controls/index.scss

@@ -1,61 +0,0 @@
-@import '../../../../scss/styles.scss';
-
-@layer payload-default {
-  .live-preview-toolbar-controls {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base) / 3);
-
-    &__breakpoint {
-      border: none;
-      background: transparent;
-      height: var(--base);
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    &__device-size {
-      display: flex;
-      align-items: center;
-    }
-
-    &__size {
-      width: 50px;
-      height: var(--base);
-      display: flex;
-      align-items: center;
-      border: 1px solid var(--theme-elevation-200);
-      background: var(--theme-elevation-100);
-      border-radius: 2px;
-      font-size: small;
-    }
-
-    &__zoom {
-      width: 55px;
-      border: none;
-      background: transparent;
-      height: var(--base);
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    &__external {
-      flex-shrink: 0;
-      display: flex;
-      width: var(--base);
-      height: var(--base);
-      align-items: center;
-      justify-content: center;
-      padding: 6px 0;
-    }
-
-    .popup-button {
-      display: flex;
-      align-items: center;
-    }
-  }
-}

package/dist/elements/LivePreview/Toolbar/SizeInput/index.scss

@@ -1,12 +0,0 @@
-@layer payload-default {
-  .toolbar-input {
-    width: 50px;
-    height: var(--base);
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--theme-elevation-200);
-    background: var(--theme-elevation-100);
-    border-radius: 2px;
-    font-size: small;
-  }
-}

package/dist/elements/LivePreview/Toolbar/index.scss

@@ -1,43 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .live-preview-toolbar {
-    display: flex;
-    background-color: var(--theme-bg);
-    color: var(--theme-text);
-    height: calc(var(--base) * 1.75);
-    align-items: center;
-    flex-shrink: 0;
-
-    &--static {
-      position: relative;
-      width: 100%;
-      justify-content: center;
-      border-bottom: 1px solid var(--theme-elevation-100);
-    }
-
-    &--draggable {
-      @include shadow-lg;
-      position: absolute;
-      top: 0;
-      left: 0;
-      margin: 0;
-      border-radius: 4px;
-    }
-
-    &__drag-handle {
-      background: transparent;
-      border: 0;
-      padding: 0;
-      cursor: grab;
-
-      .icon--drag-handle .fill {
-        fill: var(--theme-elevation-300);
-      }
-
-      &:active {
-        cursor: grabbing;
-      }
-    }
-  }
-}

package/dist/elements/LivePreview/Window/index.scss

@@ -1,48 +0,0 @@
-@import '../../../scss/styles.scss';
-
-@layer payload-default {
-  .live-preview-window {
-    background-color: var(--theme-bg);
-    display: none;
-    width: 60%;
-    flex-shrink: 0;
-    flex-grow: 0;
-    position: sticky;
-    top: var(--doc-controls-height);
-    height: calc(100vh - var(--doc-controls-height));
-    overflow: hidden;
-
-    &--is-live-previewing {
-      display: block;
-    }
-
-    &__wrapper {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      justify-content: flex-start;
-    }
-
-    &__main {
-      flex-grow: 1;
-      height: 100%;
-      width: 100%;
-    }
-
-    &--has-breakpoint {
-      .live-preview-iframe {
-        border: 1px solid var(--theme-elevation-100);
-      }
-
-      .live-preview-window {
-        &__main {
-          padding: var(--base);
-        }
-      }
-    }
-
-    @include mid-break {
-      width: 100%;
-    }
-  }
-}