slice-machine-ui 2.1.1-alpha.lh-delete-repeatable-zone-model-warning.2 → 2.1.1-beta.1

package/out/_next/static/css/a6b6600e19e1c0c1.css

@@ -1 +0,0 @@
-._1k08lzu3{height:calc(var(--_7j49md4m) - var(--_7j49mdh))}._1k08lzu5{height:calc(var(--_7j49md4b) - var(--_7j49md47));width:calc(var(--_7j49md4b) - var(--_7j49md47))}._1k08lzu7{box-shadow:inset 0 calc(-1 * var(--_7j49mdh)) 0 0 var(--_7j49md1d);height:calc(var(--_7j49md4m) - var(--_7j49mdh));-ms-overflow-style:none;scrollbar-width:none}._1k08lzu7::-webkit-scrollbar{display:none}._1k08lzu3+._1k08lzu6>._1k08lzu7{padding-top:var(--_7j49mdh)}._1k08lzu8:last-child:before,:not(:is(:focus,:hover,[data-state=active]))+._1k08lzu8:before{content:"";background-color:var(--_7j49md1e);bottom:var(--_7j49md53);height:var(--_7j49md4i);left:calc(-1 * var(--_7j49md4z));position:absolute;width:var(--_7j49mdh)}._1k08lzu9{max-width:256px}._1k08lzu9[data-state=active]{color:var(--_7j49md1j)}._1k08lzu9:is(:focus,:hover,[data-state=active]):before{content:"";background-color:var(--_7j49md19);border-color:var(--_7j49md1d);border-top-left-radius:var(--_7j49md7);border-top-right-radius:var(--_7j49md7);border-style:var(--_7j49mdf) var(--_7j49mdf) var(--_7j49mdd);border-width:var(--_7j49mdh);box-sizing:border-box;height:calc(var(--_7j49md4s) + var(--_7j49mdh));left:calc(-1 * var(--_7j49mdh));position:absolute;top:calc(-1 * var(--_7j49mdh));width:calc(var(--_7j49md4s) + var(--_7j49mdh))}._1k08lzub{margin-right:calc(-1 * var(--_7j49md53))}:is(:focus,:hover,[data-state=active])>._1k08lzub{visibility:visible}._1k08lzub:has(>[data-state=open]){visibility:visible}._1k08lzuc{box-shadow:inset 0 calc(-1 * var(--_7j49mdh)) 0 0 var(--_7j49md1d),0 calc(-1 * var(--_7j49mdh)) 0 0 var(--_7j49md1a)}._1k08lzud[data-state=inactive]{display:none}.List_flex__v0QQS{all:unset;display:flex}.List_row__sBVx1{flex-direction:row}.List_root__f9klF{border-color:var(--grey6);flex-direction:column;overflow-x:hidden}.List_root-border__2nh4p{border-radius:6px;border-style:solid;border-width:1px}.List_child__O_eM9{align-items:center;border-bottom-color:var(--grey6);border-bottom-width:1px;box-sizing:border-box;height:48px;padding-right:8px}.List_child__O_eM9:last-child{border-bottom-color:transparent}.List_header__J5e8m{background-color:var(--grey2);border-bottom-style:solid;gap:8px;padding-left:16px}.List_headerActions__FqUvW{align-items:center;flex-grow:1;gap:8px;justify-content:end;min-width:0}.List_item__t5SQz{background-color:var(--grey1);border-bottom-style:dashed;padding-left:12px}.ZoneEmptyState_root__K6dwt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background-color:var(--grey3);text-align:center;padding-top:32px;padding-bottom:32px;min-height:288px}.BlankSlate_column__ysDb2{all:unset;box-sizing:border-box;display:flex;flex-direction:column}.BlankSlate_root__DJ7wC{max-width:498px;min-height:400px;animation:BlankSlate_fadeIn__KMuKu ease-in-out 300;border-color:var(--grey6);border-radius:6px;border-style:solid;border-width:1px;overflow:hidden;background-color:var(--light-grey1)}.BlankSlate_withBackground___V5y5{width:100%;max-width:100%;height:100%;text-align:center;background-size:cover;background-color:transparent;border-radius:0;border-style:none}.BlankSlate_image__rOe9w{border-bottom:1px solid var(--grey6);overflow:hidden}.BlankSlate_content__wmOAI{padding:32px}.BlankSlate_withBackground___V5y5 .BlankSlate_content__wmOAI{padding:64px}.BlankSlate_title__5oTre{font-size:18px;font-weight:600;line-height:32px}.BlankSlate_desc__f6ZWf{font-weight:400;line-height:24px}.BlankSlate_withBackground___V5y5 .BlankSlate_desc__f6ZWf{max-width:464px;align-self:center}.BlankSlate_actions__6zYZr{all:unset;align-items:center;box-sizing:border-box;display:flex;gap:16px;margin-top:16px}.BlankSlate_withBackground___V5y5 .BlankSlate_actions__6zYZr{justify-content:center}.Card_flex__rWbYX{all:unset;display:flex}.Card_grid__2SfEP{all:unset;display:grid}.Card_column__Svw4j{flex-direction:column}.Card_root__nmIAy{position:relative;box-sizing:border-box;border-color:var(--grey6);border-radius:6px;border-style:solid;border-width:1px;overflow-x:hidden}.Card_size-small__gpkDz{height:240px}.Card_size-medium__O933V{height:320px}.Card_solid__Tx416{background-color:var(--grey3)}.Card_solid__Tx416[data-state=checked]{border-color:var(--purple10)}.Card_outlined__Qc3KT{background-color:var(--grey2)}.Card_outlined__Qc3KT[data-state=checked]{border-color:var(--purple8)}.Card_interactive__o6QZt:focus-visible{box-shadow:var(--box-shadow-purple-focus)}.Card_interactive__o6QZt[data-disabled]{opacity:.5}.Card_interactive__o6QZt:not([data-disabled]){cursor:pointer}.Card_interactive__o6QZt.Card_solid__Tx416:focus-visible{background-color:var(--grey5);border-color:var(--purple10)}.Card_interactive__o6QZt.Card_outlined__Qc3KT:active{background-color:var(--grey4);border-color:var(--purple9)}.Card_interactive__o6QZt.Card_outlined__Qc3KT:focus-visible{background-color:var(--grey1);border-color:var(--purple8)}.Card_interactive__o6QZt.Card_outlined__Qc3KT:hover{background-color:var(--grey4)}.Card_media__lIyZ7{flex-basis:0;flex-grow:1;min-height:0;position:relative;order:0}.Card_solid__Tx416>.Card_media__lIyZ7{padding:32px}.Card_outlined__Qc3KT>.Card_media__lIyZ7{background-color:var(--light-grey3);margin-inline:16px;margin-top:16px;padding:16px}.Card_mediaComponent-div__4DTTy{flex-grow:1}.Card_mediaComponent-img__GFdbs{height:100%;-o-object-fit:contain;object-fit:contain}.Card_mediaComponent-img__GFdbs:not([src]){visibility:hidden}.Card_mediaOverlay__ax3Tc{inset:0;position:absolute;visibility:hidden}.Card_mediaOverlay__ax3Tc:before{background-color:var(--light-grey12);content:"";inset:0;opacity:.1;position:absolute}.Card_interactive__o6QZt:focus-visible .Card_mediaOverlay__ax3Tc,.Card_interactive__o6QZt:not([data-disabled]) .Card_mediaOverlay__ax3Tc:has(:focus-visible),.Card_interactive__o6QZt:not([data-disabled]) .Card_media__lIyZ7:hover>.Card_mediaOverlay__ax3Tc{visibility:visible}.Card_nonMedia__ts5oN{align-items:center;box-sizing:border-box;flex-direction:row}.Card_solid__Tx416>.Card_nonMedia__ts5oN{background-color:var(--light-grey1)}.Card_solid__Tx416>.Card_nonMedia__ts5oN:not(:first-child){border-top-color:var(--light-grey6);border-top-style:solid;border-top-width:inherit}.Card_actions__7mTeM{height:48px;justify-content:space-between;order:1}.Card_solid__Tx416>.Card_actions__7mTeM{padding-left:12px;padding-right:8px}.Card_outlined__Qc3KT>.Card_actions__7mTeM{padding-inline:16px}.Card_footer__2UBoj{gap:8px;height:60px;order:2}.Card_solid__Tx416>.Card_footer__2UBoj{padding-inline:12px}.Card_outlined__Qc3KT>.Card_footer__2UBoj{padding-inline:16px}.Card_footerTexts__Lf0fw{flex-basis:0;flex-grow:1;min-width:0;margin-bottom:4px}.Card_status__cmKRp{height:24px;inset-inline:0;justify-content:center;padding-inline:8px;position:absolute;background-color:var(--purple4);color:var(--purple11)}.ConvertLegacySliceButton_scrollArea__gW7L4{width:448px;height:100%;display:flex;gap:8px;padding-inline:16px;padding-block:16px}.ConvertLegacySliceButton_label__yP2Pt{display:inline-flex;align-items:center;gap:4px}.ContentTabs_flex__kAimf{all:unset;display:flex}.ContentTabs_column__x5QZL{flex-direction:column}.ContentTabs_root__GPtve{background-color:var(--grey1);min-height:0}.ContentTabs_list__XarTi{border-bottom:1px solid var(--grey5);padding-inline:16px}.ContentTabs_trigger__8hs6H{color:var(--grey11);cursor:pointer;padding-block:8px}.ContentTabs_trigger__8hs6H:not(:last-child){margin-right:16px}.ContentTabs_trigger__8hs6H[data-state=active]{box-shadow:inset 0 -1px 0 0 currentColor,0 1px 0 0 currentColor;color:var(--purple9)}.ContentTabs_triggerText__ka3DD{line-height:32px}.ContentTabs_content__mMr1s{min-height:0;outline:none;flex:1 1}.ContentTabs_content__mMr1s[data-state=inactive]{display:none}.ContentTabs_scrollArea__ZBVHa{padding:16px}.CodeBlock_block__ljak4{all:unset;box-sizing:border-box;font-family:var(--font-family-body)}.CodeBlock_blockWithDisplayRevert__zM3Ns{display:revert}.CodeBlock_root__3ZYFL{border-width:1px;border-radius:6px;border-style:solid;border-color:var(--grey6)}.CodeBlock_header__kLT1f{border-top-right-radius:4px;border-top-left-radius:4px;background-color:var(--grey2);border-bottom:1px solid var(--grey6);padding-block:4px;padding-right:4px}.CodeBlock_fileInfo__ocLpL,.CodeBlock_header__kLT1f{display:flex;align-items:center;justify-content:space-between}.CodeBlock_fileName__jmuEV{font-size:calc(14rem / 16);line-height:calc(32rem / 16)}.MarkdownRenderer_section__4QTyU{padding-bottom:16px}.MarkdownRenderer_inlineCode__Oois6{font-family:var(--font-family-code);background-color:var(--grey2);border-radius:6px;padding-block:2px;padding-inline:4px}.PageSnippetDialog_content___SDjB{display:flex;flex-direction:column;min-height:0;gap:12px;overflow:hidden;grid-area:content}

package/src/components/Window/Window.css.ts

@@ -1,165 +0,0 @@
-import { colors, sprinkles, vars } from "@prismicio/editor-ui";
-import { style } from "@vanilla-extract/css";
-import { calc } from "@vanilla-extract/css-utils";
-
-const flex = sprinkles({ all: "unset", display: "flex" });
-
-const column = style([flex, sprinkles({ flexDirection: "column" })]);
-
-const row = style([flex, sprinkles({ flexDirection: "row" })]);
-
-export const root = style([
-  column,
-  sprinkles({
-    backgroundColor: colors.grey3,
-    borderColor: colors.grey6,
-    borderRadius: 6,
-    borderStyle: "solid",
-    borderWidth: 1,
-    overflowX: "hidden",
-  }),
-  // The following `{}` is necessary for the `root` class to work in selectors.
-  // It helps us remove the `List` component's borders when used in a `Window`.
-  {},
-]);
-
-export const frame = style([
-  row,
-  sprinkles({ alignItems: "center", paddingInline: 16 }),
-  { height: calc.subtract(vars.size[48], vars.borderWidth[1]) },
-]);
-
-export const titleBarOptions = style([row, sprinkles({ gap: 8 })]);
-
-export const titleBarOption = style([
-  column,
-  sprinkles({ backgroundColor: colors.grey5, borderRadius: "50%" }),
-  {
-    height: calc.subtract(vars.size[12], vars.size[1]),
-    width: calc.subtract(vars.size[12], vars.size[1]),
-  },
-]);
-
-export const tabs = style([column, sprinkles({ flexGrow: 1 })]);
-
-export const tabsList = style([
-  row,
-  sprinkles({ overflowX: "auto" }),
-  {
-    boxShadow: `inset 0 ${calc.multiply(-1, vars.borderWidth[1])} 0 0 ${
-      vars.color.greyLight6
-    }`,
-    height: calc.subtract(vars.size[48], vars.borderWidth[1]),
-    msOverflowStyle: "none",
-    scrollbarWidth: "none",
-    "::-webkit-scrollbar": { display: "none" },
-    selectors: {
-      [`${frame} + ${tabs} > &`]: { paddingTop: vars.borderWidth[1] },
-    },
-  },
-]);
-
-const tabsListChild = style([
-  row,
-  sprinkles({ alignItems: "center", paddingBottom: 1 }),
-  {
-    selectors: {
-      ':not(:is(:focus, :hover, [data-state="active"])) + &::before, &:last-child::before':
-        {
-          backgroundColor: vars.color.greyLight7,
-          bottom: vars.space[8],
-          content: "",
-          height: vars.size[32],
-          left: calc.multiply(-1, vars.space[1]),
-          position: "absolute",
-          width: vars.borderWidth[1],
-        },
-    },
-  },
-]);
-
-export const tabsTrigger = style([
-  tabsListChild,
-  sprinkles({
-    boxSizing: "border-box",
-    color: colors.grey11,
-    cursor: "pointer",
-    gap: 8,
-    paddingInline: 16,
-    position: "relative",
-  }),
-  {
-    maxWidth: "256px",
-    selectors: {
-      '&[data-state="active"]': {
-        color: vars.color.greyLight12,
-      },
-      '&:is(:focus, :hover, [data-state="active"])::before': {
-        backgroundColor: vars.color.greyLight2,
-        borderBottomStyle: vars.borderStyle.none,
-        borderColor: vars.color.greyLight6,
-        borderLeftStyle: vars.borderStyle.solid,
-        borderRightStyle: vars.borderStyle.solid,
-        borderTopLeftRadius: vars.borderRadius[6],
-        borderTopRightRadius: vars.borderRadius[6],
-        borderTopStyle: vars.borderStyle.solid,
-        borderWidth: vars.borderWidth[1],
-        boxSizing: "border-box",
-        content: "",
-        height: calc.add(vars.size["100%"], vars.borderWidth[1]),
-        left: calc.multiply(-1, vars.borderWidth[1]),
-        position: "absolute",
-        top: calc.multiply(-1, vars.borderWidth[1]),
-        width: calc.add(vars.size["100%"], vars.borderWidth[1]),
-      },
-    },
-  },
-]);
-
-const tabsTriggerChild = sprinkles({ position: "relative" });
-
-export const tabsTriggerText = style([
-  tabsTriggerChild,
-  sprinkles({ flexGrow: 1 }),
-]);
-
-export const tabsTriggerMenu = style([
-  tabsTriggerChild,
-  sprinkles({ visibility: "hidden" }),
-  {
-    marginRight: calc.multiply(-1, vars.space[8]),
-    selectors: {
-      ':is(:focus, :hover, [data-state="active"]) > &': {
-        visibility: "visible",
-      },
-      '&:has(> [data-state="open"])': { visibility: "visible" },
-    },
-  },
-]);
-
-export const newTabButton = style([
-  tabsListChild,
-  sprinkles({
-    backgroundColor: colors.grey3,
-    paddingInline: 8,
-    position: "sticky",
-    right: 0,
-  }),
-  {
-    boxShadow: `inset 0 ${calc.multiply(-1, vars.borderWidth[1])} 0 0 ${
-      vars.color.greyLight6
-    }, 0 ${calc.multiply(-1, vars.borderWidth[1])} 0 0 ${
-      vars.color.greyLight3
-    }`,
-  },
-]);
-
-export const tabsContent = style([
-  sprinkles({
-    all: "unset",
-    backgroundColor: colors.grey2,
-    display: "grid",
-    flexGrow: 1,
-  }),
-  { selectors: { '&[data-state="inactive"]': { display: "none" } } },
-]);

package/src/components/Window/Window.stories.tsx

@@ -1,135 +0,0 @@
-import { DropdownMenuItem } from "@prismicio/editor-ui";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import {
-  Window,
-  WindowFrame,
-  WindowTabs,
-  WindowTabsContent,
-  WindowTabsList,
-  WindowTabsTrigger,
-} from "./Window";
-
-type Story = StoryObj<typeof meta>;
-
-const meta = {
-  component: Window,
-  argTypes: { children: { control: { disable: true } } },
-} satisfies Meta<typeof Window>;
-
-export default meta;
-
-export const Default = {
-  args: {
-    children: (
-      <>
-        <WindowFrame />
-        <WindowTabs defaultValue="tab-0">
-          <WindowTabsList>
-            <WindowTabsTrigger
-              menu={<DropdownMenuItem>Item</DropdownMenuItem>}
-              value="tab-0"
-            >
-              Tab 1
-            </WindowTabsTrigger>
-            <WindowTabsTrigger
-              menu={<DropdownMenuItem>Item</DropdownMenuItem>}
-              value="tab-1"
-            >
-              Tab 2
-            </WindowTabsTrigger>
-          </WindowTabsList>
-          <WindowTabsContent value="tab-0">Tab 1</WindowTabsContent>
-          <WindowTabsContent value="tab-1">Tab 2</WindowTabsContent>
-        </WindowTabs>
-      </>
-    ),
-    style: { boxSizing: "border-box", height: "256px" },
-  },
-} satisfies Story;
-
-export const WithListOverflow = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <WindowFrame />
-        <WindowTabs defaultValue="tab-0">
-          <WindowTabsList>
-            {[...Array(100).keys()].map((index) => (
-              <WindowTabsTrigger
-                key={index}
-                menu={<DropdownMenuItem>Item</DropdownMenuItem>}
-                value={`tab-${index}`}
-              >
-                Tab {index + 1}
-              </WindowTabsTrigger>
-            ))}
-          </WindowTabsList>
-          {[...Array(100).keys()].map((index) => (
-            <WindowTabsContent key={index} value={`tab-${index}`}>
-              Tab {index + 1}
-            </WindowTabsContent>
-          ))}
-        </WindowTabs>
-      </>
-    ),
-  },
-} satisfies Story;
-
-export const WithTriggerOverflow = {
-  args: {
-    ...Default.args,
-    children: (
-      <>
-        <WindowFrame />
-        <WindowTabs defaultValue="tab-0">
-          <WindowTabsList>
-            <WindowTabsTrigger
-              menu={<DropdownMenuItem>Item</DropdownMenuItem>}
-              value="tab-0"
-            >
-              Tab 1
-            </WindowTabsTrigger>
-            <WindowTabsTrigger
-              menu={<DropdownMenuItem>Item</DropdownMenuItem>}
-              value="lorem-ipsum"
-            >
-              Lorem ipsum dolor sit amet, consectetur.
-            </WindowTabsTrigger>
-          </WindowTabsList>
-          <WindowTabsContent value="tab-0">Tab 1</WindowTabsContent>
-          <WindowTabsContent value="lorem-ipsum">
-            Lorem ipsum dolor sit amet, consectetur.
-          </WindowTabsContent>
-        </WindowTabs>
-      </>
-    ),
-  },
-} satisfies Story;
-
-export const WithoutFrame = {
-  args: {
-    ...Default.args,
-    children: (
-      <WindowTabs defaultValue="tab-0">
-        <WindowTabsList>
-          <WindowTabsTrigger
-            menu={<DropdownMenuItem>Item</DropdownMenuItem>}
-            value="tab-0"
-          >
-            Tab 1
-          </WindowTabsTrigger>
-          <WindowTabsTrigger
-            menu={<DropdownMenuItem>Item</DropdownMenuItem>}
-            value="tab-1"
-          >
-            Tab 2
-          </WindowTabsTrigger>
-        </WindowTabsList>
-        <WindowTabsContent value="tab-0">Tab 1</WindowTabsContent>
-        <WindowTabsContent value="tab-1">Tab 2</WindowTabsContent>
-      </WindowTabs>
-    ),
-  },
-} satisfies Story;

package/src/components/Window/Window.tsx

@@ -1,119 +0,0 @@
-import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  IconButton,
-  Text,
-} from "@prismicio/editor-ui";
-import * as Tabs from "@radix-ui/react-tabs";
-import type { CSSProperties, FC, PropsWithChildren, ReactNode } from "react";
-
-import * as styles from "./Window.css";
-
-type WindowProps = PropsWithChildren<{ style?: CSSProperties }>;
-
-export const Window: FC<WindowProps> = (props) => (
-  <div {...props} className={styles.root} />
-);
-
-export const WindowFrame: FC = (props) => (
-  <div {...props} className={styles.frame}>
-    <div className={styles.titleBarOptions}>
-      <span className={styles.titleBarOption} />
-      <span className={styles.titleBarOption} />
-      <span className={styles.titleBarOption} />
-    </div>
-  </div>
-);
-
-type WindowTabsProps = Pick<
-  Tabs.TabsProps,
-  "children" | "defaultValue" | "onValueChange" | "value"
->;
-
-export const WindowTabs: FC<WindowTabsProps> = (props) => (
-  <Tabs.Root {...props} activationMode="manual" className={styles.tabs} />
-);
-
-type WindowTabsListProps = PropsWithChildren<{ onAddNewTab?: () => void }>;
-
-export const WindowTabsList: FC<WindowTabsListProps> = ({
-  children,
-  onAddNewTab,
-  ...otherProps
-}) => (
-  <Tabs.List {...otherProps} className={styles.tabsList}>
-    {children}
-    <div className={styles.newTabButton}>
-      <IconButton icon="add" onClick={onAddNewTab} hiddenLabel="Add new tab" />
-    </div>
-  </Tabs.List>
-);
-
-type WindowTabsTriggerProps = Pick<
-  Tabs.TabsTriggerProps,
-  "children" | "value"
-> & { menu?: ReactNode };
-
-export const WindowTabsTrigger: FC<WindowTabsTriggerProps> = ({
-  children,
-  menu,
-  value,
-  ...otherProps
-}) => (
-  <Tabs.Trigger
-    {...otherProps}
-    aria-label={value}
-    asChild
-    onMouseDown={(event) => {
-      const target = event.target as HTMLElement;
-      const focusableAncestor = findFocusableAncestor(target);
-      if (
-        focusableAncestor !== event.currentTarget &&
-        focusableAncestor !== event.currentTarget.parentElement
-      ) {
-        event.preventDefault();
-      }
-      if (target === event.currentTarget) {
-        target.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest",
-          inline: "center",
-        });
-      }
-    }}
-    value={value}
-  >
-    <div className={styles.tabsTrigger}>
-      <Text
-        className={styles.tabsTriggerText}
-        color="inherit"
-        component="span"
-        noWrap
-        variant="emphasized"
-      >
-        {children}
-      </Text>
-      {Boolean(menu) ? (
-        <div className={styles.tabsTriggerMenu}>
-          <DropdownMenu>
-            <DropdownMenuTrigger>
-              <IconButton
-                icon="moreVert"
-                hiddenLabel={`tab-${value}-menu-button`}
-              />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">{menu}</DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      ) : undefined}
-    </div>
-  </Tabs.Trigger>
-);
-
-type WindowTabsContentProps = Pick<Tabs.TabsContentProps, "children" | "value">;
-
-export const WindowTabsContent: FC<WindowTabsContentProps> = (props) => (
-  <Tabs.Content {...props} className={styles.tabsContent} />
-);

package/src/components/Window/index.ts

@@ -1,8 +0,0 @@
-export {
-  Window,
-  WindowFrame,
-  WindowTabs,
-  WindowTabsContent,
-  WindowTabsList,
-  WindowTabsTrigger,
-} from "./Window";