@redocly/marketing-pages 0.1.32 → 0.1.34

package/dist/pages/calculator/components/CalculatorWrapper.js

@@ -1,4 +1,4 @@
-import e,{useEffect as P}from"react";import l from"styled-components";import{breakpoints as a}from"@redocly/theme/core/utils";import{Tooltip as V}from"@redocly/theme/components/Tooltip/Tooltip";import{Extras as i,Period as F,Plan as M,Product as o}from"../../pricing/types/types";import{periodsList as O,plansList as L,pricePerProject as B,productItems as I}from"../../pricing/pricingData/data";import{Currency as x,PriceAndCurrency as g,StyledBadge as W,TextPer as u}from"../../pricing/components/PlansSection";import{chooseProduct as h,choosePeriod as z,choosePlan as N}from"../../pricing/calculations";import{Switcher as E}from"./Switcher";import{changeExtrasValue as s,inputValueMap as d,isFocusedMap as r}from"../calculations/changeExtrasValue";const ye=({calculatorProperties:t,setCalculatorProperties:c})=>(P(()=>{r[i.SEATS]||(d[i.SEATS]=t.numOfSeats.toString()),r[i.PAGES]||(d[i.PAGES]=t.numOfPages.toString()),r[i.PROJECTS]||(d[i.PROJECTS]=t.projectsNumber.toString())},[t.numOfSeats,t.numOfPages,t.projectsNumber]),e.createElement(se,null,e.createElement(me,null,e.createElement(f,null,"Customize your plan"),e.createElement(ce,null,L.map((n,m)=>e.createElement(de,{key:m,isSelected:t.plan===n.name,onClick:()=>N(c,n.name)},e.createElement("p",null,n.name))))),e.createElement(te,null,e.createElement(oe,null,e.createElement("p",null,"Seats"),e.createElement(ae,null,e.createElement(p,{placeholder:"40",pattern:"\\d+(\\.\\d+)?",value:r[i.SEATS]?d[i.SEATS]:t.numOfSeats.toString(),onChange:n=>s(c,n,i.SEATS),onFocus:n=>{r[i.SEATS]=!0,n.target.select()},onBlur:()=>{r[i.SEATS]=!1,d[i.SEATS]=""}}),e.createElement(le,{tip:"Seats count for users who have the OWNER, MEMBER, or COMMITTER roles. Additional roles such as BILLING and VIEWER are users that do not count towards your seat limits.",width:"fit-content",children:e.createElement("img",{src:require("../images/tooltip.svg"),style:{maxWidth:"14px"}})}))),e.createElement(ne,null,e.createElement(re,null,O.map(n=>e.createElement(ie,{key:n,onClick:()=>z(c,n,t.plan),selected:t.period===n},e.createElement(R,null,n,"ly")))),t.period===F.MONTH&&e.createElement(W,{src:require("../images/save-one-month-badge.svg")}))),e.createElement(ee,null,e.createElement(f,null,"Products"),e.createElement(_,null,e.createElement(Y,{className:t.coreProducts.includes(o.REALM)||t.coreProducts.length===3?"selected":""},e.createElement(X,{gap:"4px"},e.createElement(Q,{className:t.coreProducts.includes(o.REALM)||t.coreProducts.length===3?"selected":""},o.REALM),e.createElement(K,null,"All combined (Redoc + Revel + Reef)")),e.createElement(E,{onClick:()=>h(c,o.REALM,t.coreProducts),activeColor:"linear-gradient(90deg, #1677ff 0%, #08c7e0 100%)",isActive:t.coreProducts.includes(o.REALM)||t.coreProducts.length===3})),e.createElement(U,null,I.map((n,m)=>n.title!==o.REALM&&e.createElement(J,{key:m,className:t.coreProducts.includes(n.title)||t.coreProducts.length===3?"selected":"",bgColor:n.bgColor},e.createElement(k,{className:t.coreProducts.includes(n.title)||t.coreProducts.length===3?"selected":"",bgImage:n.title===o.REDOC&&`url(${require("../images/redoc-bg.svg")})`||n.title===o.REEF&&`url(${require("../images/reef-bg.svg")})`||n.title===o.REVEL&&`url(${require("../images/revel-bg.svg")})`||"",bgColor:n.bgColor},e.createElement(G,{textColor:n.titleColor},n.title),e.createElement(D,null,n.features&&n.features.map((T,H)=>e.createElement(q,{primaryColor:n.titleColor,key:H},e.createElement("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M5.6875 10.5L1.75 6.56247L2.36863 5.94385L5.6875 9.26228L11.6314 3.31885L12.25 3.93747L5.6875 10.5Z",fill:"inherit"})),e.createElement("p",null,T)))),e.createElement(E,{onClick:()=>h(c,n.title,t.coreProducts),activeColor:n.titleColor,isActive:t.coreProducts.includes(n.title)||t.coreProducts.length===3}))))))),e.createElement(Z,null,e.createElement(f,null,"Extras"),e.createElement(j,null,e.createElement($,null,e.createElement(A,null,e.createElement(C,null,"Pages"),e.createElement(S,null,e.createElement(p,{style:{maxWidth:"409px",width:"100%"},placeholder:"40",pattern:"\\d+(\\.\\d+)?",value:r[i.PAGES]?d[i.PAGES]:t.numOfPages.toString(),onChange:n=>s(c,n,i.PAGES),onFocus:n=>{r[i.PAGES]=!0,n.target.select()},onBlur:()=>{r[i.PAGES]=!1,d[i.PAGES]=""}}),e.createElement(y,null,e.createElement(g,null,e.createElement(b,null,"$0.12"),e.createElement(x,null,"USD"),e.createElement(u,null,"per extra page / month")),e.createElement(v,null,"Number of pages in your website (keep in mind each API operation is a page). Price tiers down with volume.",e.createElement("br",null),t.plan===M.PRO?`100 pages included with ${t.plan}`:`500 pages included with ${t.plan}`,"."))),e.createElement(w,null,e.createElement("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("rect",{width:"40",height:"40",rx:"20",fill:"#EBFAF3"}),e.createElement("path",{d:"M26.0625 15.8125L21.6875 11.4375C21.5625 11.3125 21.4375 11.25 21.25 11.25H15C14.3125 11.25 13.75 11.8125 13.75 12.5V27.5C13.75 28.1875 14.3125 28.75 15 28.75H25C25.6875 28.75 26.25 28.1875 26.25 27.5V16.25C26.25 16.0625 26.1875 15.9375 26.0625 15.8125ZM21.25 12.75L24.75 16.25H21.25V12.75ZM25 27.5H15V12.5H20V16.25C20 16.9375 20.5625 17.5 21.25 17.5H25V27.5Z",fill:"#06A192"}),e.createElement("path",{d:"M23.75 23.75H16.25V25H23.75V23.75Z",fill:"#06A192"}),e.createElement("path",{d:"M23.75 20H16.25V21.25H23.75V20Z",fill:"#06A192"}))))),e.createElement($,null,e.createElement(A,null,e.createElement(C,null,"Projects"),e.createElement(S,null,e.createElement(p,{style:{maxWidth:"409px",width:"100%"},placeholder:"40",pattern:"\\d+(\\.\\d+)?",value:r[i.PROJECTS]?d[i.PROJECTS]:t.projectsNumber.toString(),onChange:n=>s(c,n,i.PROJECTS),onFocus:n=>{r[i.PROJECTS]=!0,n.target.select()},onBlur:()=>{r[i.PROJECTS]=!1,d[i.PROJECTS]=""}}),e.createElement(y,null,e.createElement(g,null,e.createElement(b,null,"$",B),e.createElement(x,null,"USD"),e.createElement(u,null,"per extra project / month")),e.createElement(v,null,"A project results in a website. Each project can have its own custom domain.",e.createElement("br",null),"1 project included."))),e.createElement(w,null,e.createElement("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("rect",{width:"40",height:"40",rx:"20",fill:"#FFF4E8"}),e.createElement("path",{d:"M18.75 21.25H15V22.5H18.75V21.25Z",fill:"#FF5722"}),e.createElement("path",{d:"M21.25 23.75H15V25H21.25V23.75Z",fill:"#FF5722"}),e.createElement("path",{d:"M26.25 12.5H13.75C13.4186 12.5004 13.1009 12.6322 12.8666 12.8666C12.6322 13.1009 12.5004 13.4186 12.5 13.75V26.25C12.5004 26.5814 12.6322 26.8991 12.8666 27.1334C13.1009 27.3678 13.4186 27.4996 13.75 27.5H26.25C26.5814 27.4996 26.8991 27.3678 27.1334 27.1334C27.3678 26.8991 27.4996 26.5814 27.5 26.25V13.75C27.4996 13.4186 27.3678 13.1009 27.1334 12.8666C26.8991 12.6322 26.5814 12.5004 26.25 12.5ZM21.25 13.75V16.25H18.75V13.75H21.25ZM13.75 26.25V13.75H17.5V17.5H22.5V13.75H26.25L26.2507 26.25H13.75Z",fill:"#FF5722"}))))))))),w=l.div`
+import e,{useEffect as V}from"react";import l from"styled-components";import{breakpoints as o}from"@redocly/theme/core/utils";import{Tooltip as M}from"@redocly/theme/components/Tooltip/Tooltip";import{Extras as i,Period as P,Plan as O,Product as a}from"../../pricing/types/types";import{periodsList as L,pricePerProject as F,productItems as I}from"../../pricing/pricingData/data";import{Currency as f,PriceAndCurrency as x,StyledBadge as W,TextPer as g}from"../../pricing/components/PlansSection";import{chooseProduct as u,choosePeriod as z,choosePlan as B}from"../../pricing/calculations";import{Switcher as h}from"./Switcher";import{PlanSwitcherControl as N}from"./PlanSwitcher";import{changeExtrasValue as s,inputValueMap as d,isFocusedMap as r}from"../calculations/changeExtrasValue";const ve=({calculatorProperties:t,setCalculatorProperties:c})=>(V(()=>{r[i.SEATS]||(d[i.SEATS]=t.numOfSeats.toString()),r[i.PAGES]||(d[i.PAGES]=t.numOfPages.toString()),r[i.PROJECTS]||(d[i.PROJECTS]=t.projectsNumber.toString())},[t.numOfSeats,t.numOfPages,t.projectsNumber]),e.createElement(ce,null,e.createElement(de,null,e.createElement(p,null,"Customize your plan"),e.createElement(N,{value:t.plan,onChange:n=>B(c,n)})),e.createElement(te,null,e.createElement(ae,null,e.createElement("p",null,"Seats"),e.createElement(oe,null,e.createElement(m,{placeholder:"40",pattern:"\\d+(\\.\\d+)?",value:r[i.SEATS]?d[i.SEATS]:t.numOfSeats.toString(),onChange:n=>s(c,n,i.SEATS),onFocus:n=>{r[i.SEATS]=!0,n.target.select()},onBlur:()=>{r[i.SEATS]=!1,d[i.SEATS]=""}}),e.createElement(le,{tip:"Seats count for users who have the OWNER, MEMBER, or COMMITTER roles. Additional roles such as BILLING and VIEWER are users that do not count towards your seat limits.",width:"fit-content",children:e.createElement("img",{src:require("../images/tooltip.svg"),style:{maxWidth:"14px"}})}))),e.createElement(ne,null,e.createElement(re,null,L.map(n=>e.createElement(ie,{key:n,onClick:()=>z(c,n,t.plan),selected:t.period===n},e.createElement(k,null,n,"ly")))),t.period===P.MONTH&&e.createElement(W,{src:require("../images/save-one-month-badge.svg")}))),e.createElement(ee,null,e.createElement(p,null,"Products"),e.createElement(_,null,e.createElement(Y,{className:t.coreProducts.includes(a.REALM)||t.coreProducts.length===3?"selected":""},e.createElement(X,{gap:"4px"},e.createElement(Q,{className:t.coreProducts.includes(a.REALM)||t.coreProducts.length===3?"selected":""},a.REALM),e.createElement(K,null,"All combined (Redoc + Revel + Reef)")),e.createElement(h,{onClick:()=>u(c,a.REALM,t.coreProducts),activeColor:"linear-gradient(90deg, #1677ff 0%, #08c7e0 100%)",isActive:t.coreProducts.includes(a.REALM)||t.coreProducts.length===3})),e.createElement(U,null,I.map((n,R)=>n.title!==a.REALM&&e.createElement(J,{key:R,className:t.coreProducts.includes(n.title)||t.coreProducts.length===3?"selected":"",bgColor:n.bgColor},e.createElement($,{className:t.coreProducts.includes(n.title)||t.coreProducts.length===3?"selected":"",bgImage:n.title===a.REDOC&&`url(${require("../images/redoc-bg.svg")})`||n.title===a.REEF&&`url(${require("../images/reef-bg.svg")})`||n.title===a.REVEL&&`url(${require("../images/revel-bg.svg")})`||"",bgColor:n.bgColor},e.createElement(G,{textColor:n.titleColor},n.title),e.createElement(q,null,n.features&&n.features.map((T,H)=>e.createElement(D,{primaryColor:n.titleColor,key:H},e.createElement("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M5.6875 10.5L1.75 6.56247L2.36863 5.94385L5.6875 9.26228L11.6314 3.31885L12.25 3.93747L5.6875 10.5Z",fill:"inherit"})),e.createElement("p",null,T)))),e.createElement(h,{onClick:()=>u(c,n.title,t.coreProducts),activeColor:n.titleColor,isActive:t.coreProducts.includes(n.title)||t.coreProducts.length===3}))))))),e.createElement(j,null,e.createElement(p,null,"Extras"),e.createElement(Z,null,e.createElement(S,null,e.createElement(A,null,e.createElement(C,null,"Pages"),e.createElement(y,null,e.createElement(m,{style:{maxWidth:"409px",width:"100%"},placeholder:"40",pattern:"\\d+(\\.\\d+)?",value:r[i.PAGES]?d[i.PAGES]:t.numOfPages.toString(),onChange:n=>s(c,n,i.PAGES),onFocus:n=>{r[i.PAGES]=!0,n.target.select()},onBlur:()=>{r[i.PAGES]=!1,d[i.PAGES]=""}}),e.createElement(v,null,e.createElement(x,null,e.createElement(b,null,"$0.12"),e.createElement(f,null,"USD"),e.createElement(g,null,"per extra page / month")),e.createElement(w,null,"Number of pages in your website (keep in mind each API operation is a page). Price tiers down with volume.",e.createElement("br",null),t.plan===O.PRO?`100 pages included with ${t.plan}`:`500 pages included with ${t.plan}`,"."))),e.createElement(E,null,e.createElement("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("rect",{width:"40",height:"40",rx:"20",fill:"#EBFAF3"}),e.createElement("path",{d:"M26.0625 15.8125L21.6875 11.4375C21.5625 11.3125 21.4375 11.25 21.25 11.25H15C14.3125 11.25 13.75 11.8125 13.75 12.5V27.5C13.75 28.1875 14.3125 28.75 15 28.75H25C25.6875 28.75 26.25 28.1875 26.25 27.5V16.25C26.25 16.0625 26.1875 15.9375 26.0625 15.8125ZM21.25 12.75L24.75 16.25H21.25V12.75ZM25 27.5H15V12.5H20V16.25C20 16.9375 20.5625 17.5 21.25 17.5H25V27.5Z",fill:"#06A192"}),e.createElement("path",{d:"M23.75 23.75H16.25V25H23.75V23.75Z",fill:"#06A192"}),e.createElement("path",{d:"M23.75 20H16.25V21.25H23.75V20Z",fill:"#06A192"}))))),e.createElement(S,null,e.createElement(A,null,e.createElement(C,null,"Projects"),e.createElement(y,null,e.createElement(m,{style:{maxWidth:"409px",width:"100%"},placeholder:"40",pattern:"\\d+(\\.\\d+)?",value:r[i.PROJECTS]?d[i.PROJECTS]:t.projectsNumber.toString(),onChange:n=>s(c,n,i.PROJECTS),onFocus:n=>{r[i.PROJECTS]=!0,n.target.select()},onBlur:()=>{r[i.PROJECTS]=!1,d[i.PROJECTS]=""}}),e.createElement(v,null,e.createElement(x,null,e.createElement(b,null,"$",F),e.createElement(f,null,"USD"),e.createElement(g,null,"per extra project / month")),e.createElement(w,null,"A project results in a website. Each project can have its own custom domain.",e.createElement("br",null),"1 project included."))),e.createElement(E,null,e.createElement("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("rect",{width:"40",height:"40",rx:"20",fill:"#FFF4E8"}),e.createElement("path",{d:"M18.75 21.25H15V22.5H18.75V21.25Z",fill:"#FF5722"}),e.createElement("path",{d:"M21.25 23.75H15V25H21.25V23.75Z",fill:"#FF5722"}),e.createElement("path",{d:"M26.25 12.5H13.75C13.4186 12.5004 13.1009 12.6322 12.8666 12.8666C12.6322 13.1009 12.5004 13.4186 12.5 13.75V26.25C12.5004 26.5814 12.6322 26.8991 12.8666 27.1334C13.1009 27.3678 13.4186 27.4996 13.75 27.5H26.25C26.5814 27.4996 26.8991 27.3678 27.1334 27.1334C27.3678 26.8991 27.4996 26.5814 27.5 26.25V13.75C27.4996 13.4186 27.3678 13.1009 27.1334 12.8666C26.8991 12.6322 26.5814 12.5004 26.25 12.5ZM21.25 13.75V16.25H18.75V13.75H21.25ZM13.75 26.25V13.75H17.5V17.5H22.5V13.75H26.25L26.2507 26.25H13.75Z",fill:"#FF5722"}))))))))),E=l.div`
   position: absolute;
   right: 4px;
   top: 4px;
@@ -10,7 +10,7 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   line-height: 20px;
 
   margin: 0;
-`,v=l.p`
+`,w=l.p`
   color: #555761;
 
   font-family: var(--font-family);
@@ -19,12 +19,12 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   line-height: 22px;
 
   margin: 0;
-`,y=l.div`
+`,v=l.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
-`,S=l.div`
+`,y=l.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -38,7 +38,7 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   line-height: 24px;
 
   margin: 0;
-`,$=l.div`
+`,S=l.div`
   border-radius: 16px;
   background: linear-gradient(90deg, #fbfbfc 60%, transparent 50%);
   width: 100%;
@@ -60,24 +60,52 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   border-radius: 16px;
 
   height: 100%;
-`,j=l.div`
+
+  /* Extend bottom border to cover bottom-right corner */
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    border-bottom: 1px solid #ededf2;
+    border-right: 1px solid #ededf2;
+    border-bottom-right-radius: 16px;
+    pointer-events: none;
+  }
+
+  /* Extend left border to cover top-left corner intersection, but stop before concave */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -1px;
+    width: 20px;
+    height: 20px;
+    border-left: 1px solid #ededf2;
+    border-top: 1px solid #ededf2;
+    border-top-left-radius: 16px;
+    pointer-events: none;
+  }
+`,Z=l.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
 
-  @media screen and (min-width: ${a.small}) {
+  @media screen and (min-width: ${o.small}) {
     flex-direction: row;
   }
-`,Z=l.div`
+`,j=l.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
-`,D=l.div`
+`,q=l.div`
   display: flex;
   gap: 4px 12px;
   flex-wrap: wrap;
-`,q=l.div`
+`,D=l.div`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -112,7 +140,7 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   &.selected {
     background: ${({bgColor:t})=>`linear-gradient(90deg, ${t} 60%, transparent 50%)`};
   }
-`,k=l.div`
+`,$=l.div`
   display: flex;
   padding: 16px 20px;
   flex-direction: column;
@@ -128,17 +156,53 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   border-bottom: 1px solid #ededf2;
   height: 100%;
 
+  /* Extend bottom border to cover bottom-right corner */
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    border-bottom: 1px solid #ededf2;
+    border-right: 1px solid #ededf2;
+    border-bottom-right-radius: 16px;
+    pointer-events: none;
+  }
+
+  /* Extend left border to cover top-left corner intersection, but stop before concave */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -1px;
+    width: 20px;
+    height: 20px;
+    border-left: 1px solid #ededf2;
+    border-top: 1px solid #ededf2;
+    border-top-left-radius: 16px;
+    pointer-events: none;
+  }
+
   &.selected {
     background-image: ${({bgImage:t})=>t};
     border-left: ${({bgColor:t})=>`1px solid ${t}`};
     border-bottom: ${({bgColor:t})=>`1px solid ${t}`};
+
+    &::after {
+      display: none;
+    }
+
+    &::before {
+      display: none;
+    }
   }
 `,U=l.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
 
-  @media screen and (min-width: ${a.small}) {
+  @media screen and (min-width: ${o.small}) {
     flex-direction: row;
   }
 `,K=l.p`
@@ -171,12 +235,12 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   flex-direction: column;
   gap: ${({gap:t})=>t};
   flex: 1 0 0;
-`,Y=l(k)`
+`,Y=l($)`
   &.selected {
     background-image: url(${require("../images/realm-bg.svg")}),
       url(${require("../../pricing/images/bg-realm-circle.svg")});
     border-bottom: 0;
-    border-left: 1px solid rgba(22, 119, 255, 0.32);
+    border-left: 0;
   }
 `,_=l.div`
   display: flex;
@@ -197,7 +261,7 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   justify-content: space-between;
   margin-top: 32px;
 
-  @media screen and (min-width: ${a.small}) {
+  @media screen and (min-width: ${o.small}) {
     flex-direction: row;
   }
 `,ne=l.div`
@@ -206,14 +270,14 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   align-items: flex-end;
   margin-top: 40px;
 
-  @media screen and (min-width: ${a.small}) {
+  @media screen and (min-width: ${o.small}) {
     margin-top: 0;
   }
-`,le=l(V)`
+`,le=l(M)`
   span {
     min-width: 400px;
   }
-`,R=l.p`
+`,k=l.p`
   color: var(--segmented-buttons-content-color);
   font-family: var(--font-family);
   font-size: 14px;
@@ -228,7 +292,7 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   align-items: center;
   width: 50%;
 
-  ${R} {
+  ${k} {
     font-weight: ${({selected:t})=>t&&"500"};
     color: ${({selected:t})=>t&&"var(--segmented-buttons-content-color-active)"};
     background-color: ${({selected:t})=>t&&"var(--color-white)"};
@@ -244,10 +308,10 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   border-radius: 6px;
   background: var(--segmented-buttons-bg-color-main);
 
-  @media screen and (min-width: ${a.small}) {
+  @media screen and (min-width: ${o.small}) {
     z-index: 1;
   }
-`,p=l.input`
+`,m=l.input`
   padding: 0 12px;
   border: 1px solid var(--color-warm-grey-3);
   border-radius: 6px;
@@ -262,14 +326,14 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
     border: 1px solid var(--color-blue-6);
   }
 
-  @media screen and (min-width: ${a.small}) {
+  @media screen and (min-width: ${o.small}) {
     max-width: 93px;
   }
-`,ae=l.div`
+`,oe=l.div`
   display: flex;
   align-items: center;
   gap: 4px;
-`,oe=l.div`
+`,ae=l.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -278,48 +342,11 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
     margin: 0;
   }
 
-  @media screen and (min-width: ${a.small}) {
+  @media screen and (min-width: ${o.small}) {
     flex-direction: row;
     align-items: center;
   }
-`,de=l.div`
-  display: flex;
-  padding: 8px 24px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex: 1 0 0;
-
-  border-radius: 8px;
-  background: ${({isSelected:t})=>t?"#2A2B33":"transparent"};
-
-  &:hover {
-    background: ${({isSelected:t})=>t?"#2A2B33":"#F3F3F6"};
-  }
-
-  p {
-    color: ${({isSelected:t})=>t?"#FFF":"#3B3C45"};
-    font-family: 'Red Hat Display';
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 28px;
-
-    margin: 0;
-  }
-`,ce=l.div`
-  display: flex;
-  flex-direction: column;
-  padding: 4px;
-  gap: 4px;
-  border-radius: 12px;
-  border: 1px solid #ededf2;
-  background: #fff;
-  cursor: pointer;
-
-  @media screen and (min-width: ${a.small}) {
-    flex-direction: row;
-  }
-`,f=l.p`
+`,p=l.p`
   color: #1a1c21;
   text-align: center;
 
@@ -330,15 +357,15 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
 
   margin: 0;
 
-  @media screen and (min-width: ${a.small}) {
+  @media screen and (min-width: ${o.small}) {
     text-align: left;
   }
-`,me=l.div`
+`,de=l.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%;
-`,se=l.div`
+`,ce=l.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -346,11 +373,11 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
   max-width: 914px;
   padding: 0 16px 48px 16px;
 
-  @media screen and (min-width: ${a.small}) {
+  @media screen and (min-width: ${o.small}) {
     padding: 0 96px 48px 96px;
   }
-  @media screen and (min-width: ${a.medium}) {
+  @media screen and (min-width: ${o.medium}) {
     padding: 0 0 64px 0;
     margin: 0 auto;
   }
-`;export{ye as CalculatorWrapper};
+`;export{ve as CalculatorWrapper};

package/dist/pages/calculator/components/PlanSwitcher.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Plan } from '../../pricing/types/types';
+export declare const PlanSwitcherControl: ({ value, onChange, transitionMs, }: {
+    value: Plan;
+    onChange: (plan: Plan) => void;
+    transitionMs?: number;
+}) => React.JSX.Element;

package/dist/pages/calculator/components/PlanSwitcher.js

@@ -0,0 +1,82 @@
+import r,{useEffect as f,useMemo as u,useState as b}from"react";import i from"styled-components";import{breakpoints as d}from"@redocly/theme/core/utils";import{plansList as n}from"../../pricing/pricingData/data";const D=({value:e,onChange:a,transitionMs:p=250})=>{const o=u(()=>Math.max(0,n.findIndex(t=>t.name===e)),[e]),[c,x]=b(o);f(()=>{x(o)},[o]);const m=t=>{const s=n.length-1;if(t.key==="ArrowRight"||t.key==="ArrowDown"){t.preventDefault();const l=Math.min(s,o+1);a(n[l].name)}else if(t.key==="ArrowLeft"||t.key==="ArrowUp"){t.preventDefault();const l=Math.max(0,o-1);a(n[l].name)}};return r.createElement(w,{role:"tablist","aria-label":"Select plan",tabIndex:0,onKeyDown:m},r.createElement(y,{count:n.length,style:{"--index":c,transitionDuration:`${p}ms`}}),n.map((t,s)=>r.createElement(g,{as:"button",type:"button",key:t.name,role:"tab","aria-selected":e===t.name,"aria-controls":`plan-panel-${t.name}`,isSelected:e===t.name,isVisuallySelected:s===c,onClick:()=>a(t.name)},r.createElement(h,null,t.name))))},h=i.p`
+  color: inherit;
+  font-family: 'Red Hat Display';
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  margin: 0;
+  position: relative;
+  z-index: 2;
+`,g=i.div`
+  display: flex;
+  padding: 8px 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 0;
+
+  border-radius: 8px;
+  background: transparent;
+  position: relative;
+  color: ${({isVisuallySelected:e})=>e?"#FFF":"#3B3C45"};
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 8px;
+    background: transparent;
+    z-index: 0;
+    transition: background 0.2s ease;
+  }
+
+  &:hover::before {
+    background: ${({isSelected:e})=>e?"transparent":"#F3F3F6"};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.4) inset;
+  }
+`,w=i.div`
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  gap: 4px;
+  border-radius: 12px;
+  border: 1px solid #ededf2;
+  background: #fff;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+
+  @media screen and (min-width: ${d.small}) {
+    flex-direction: row;
+  }
+`,y=i.div`
+  position: absolute;
+  border-radius: 8px;
+  background: #2a2b33;
+  z-index: 1;
+  pointer-events: none;
+  transition-property: transform, width, height;
+  transition-timing-function: ease;
+
+  /* mobile: vertical */
+  top: 4px;
+  left: 4px;
+  width: calc(100% - 8px);
+  height: calc((100% - 8px - ((${({count:e})=>e}) - 1) * 4px) / ${({count:e})=>e});
+  transform: translateY(calc(var(--index) * (100% + 4px)));
+
+  @media screen and (min-width: ${d.small}) {
+    /* desktop: horizontal */
+    top: 4px;
+    left: 4px;
+    width: calc((100% - 8px - ((${({count:e})=>e}) - 1) * 4px) / ${({count:e})=>e});
+    height: calc(100% - 8px);
+    transform: translateX(calc(var(--index) * (100% + 4px)));
+  }
+`;export{D as PlanSwitcherControl};

package/dist/pages/calculator/images/realm-bg.svg

@@ -1,11 +1,11 @@
-<svg width="1000" height="86" viewBox="0 0 1000 86" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-inside-1_17_10" fill="white">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16345 0 16V70C0 78.8366 7.16342 86 16 86H984C992.837 86 1000 78.8366 1000 70V42C1000 35.3726 994.627 30 988 30H968C959.163 30 952 22.8366 952 14V12C952 5.37258 946.627 0 940 0H16Z"/>
+<svg width="914" height="86" viewBox="0 0 914 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_16_2" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16345 0 16V70C0 78.8366 7.16342 86 16 86H898C906.837 86 914 78.8366 914 70V42C914 35.3726 908.627 30 902 30H882C873.163 30 866 22.8366 866 14V12C866 5.37258 860.627 0 854 0H16Z"/>
 </mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16345 0 16V70C0 78.8366 7.16342 86 16 86H984C992.837 86 1000 78.8366 1000 70V42C1000 35.3726 994.627 30 988 30H968C959.163 30 952 22.8366 952 14V12C952 5.37258 946.627 0 940 0H16Z" fill="white" fill-opacity="0.5"/>
-<path d="M1 16C1 7.71573 7.71573 1 16 1V-1C6.61116 -1 -1 6.61116 -1 16H1ZM1 70V16H-1V70H1ZM16 85C7.7157 85 1 78.2843 1 70H-1C-1 79.3888 6.61113 87 16 87V85ZM984 85H16V87H984V85ZM999 70C999 78.2843 992.284 85 984 85V87C993.389 87 1001 79.3888 1001 70H999ZM999 42V70H1001V42H999ZM988 29H968V31H988V29ZM968 29C959.716 29 953 22.2843 953 14H951C951 23.3888 958.611 31 968 31V29ZM953 14V12H951V14H953ZM16 1H940V-1H16V1ZM953 12C953 4.8203 947.18 -1 940 -1V1C946.075 1 951 5.92486 951 12H953ZM1001 42C1001 34.8203 995.18 29 988 29V31C994.075 31 999 35.9249 999 42H1001Z" fill="url(#paint0_linear_17_10)" fill-opacity="0.2" mask="url(#path-1-inside-1_17_10)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16345 0 16V70C0 78.8366 7.16342 86 16 86H898C906.837 86 914 78.8366 914 70V42C914 35.3726 908.627 30 902 30H882C873.163 30 866 22.8366 866 14V12C866 5.37258 860.627 0 854 0H16Z" fill="none"/>
+<path d="M1 16C1 7.71573 7.71573 1 16 1V-1C6.61116 -1 -1 6.61116 -1 16H1ZM1 70V16H-1V70H1ZM16 85C7.7157 85 1 78.2843 1 70H-1C-1 79.3888 6.61113 87 16 87V85ZM898 85H16V87H898V85ZM913 70C913 78.2843 906.284 85 898 85V87C907.389 87 915 79.3888 915 70H913ZM913 42V70H915V42H915ZM902 29H882V31H902V29ZM882 29C873.716 29 867 22.2843 867 14H865C865 23.3888 872.611 31 882 31V29ZM867 14V12H865V14H867ZM16 1H854V-1H16V1ZM867 12C867 4.8203 861.18 -1 854 -1V1C860.075 1 865 5.92486 865 12H867ZM915 42C915 34.8203 909.18 29 902 29V31C908.075 31 913 35.9249 913 42H915Z" fill="url(#paint0_linear_17_10)" fill-opacity="0.2" mask="url(#path-1-inside-1_16_2)"/>
 <defs>
-<linearGradient id="paint0_linear_17_10" x1="0" y1="43" x2="1000" y2="43" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_17_10" x1="0" y1="43" x2="914" y2="43" gradientUnits="userSpaceOnUse">
 <stop stop-color="#1677FF"/>
 <stop offset="1" stop-color="#08C7E0"/>
 </linearGradient>

package/dist/pages/docs-like-code/docsLikeCode.page.js

@@ -1 +1 @@
-import{Box as t}from"../../ui/Box";import{Button as c}from"../../components/Button/CustomButton";import{CallToAction as y}from"../../components/CallToAction/CallToAction";import{Circle as l,CircleWrapper as i}from"../../components/Circle/Circle";import{MediaBox as o,Skewed as m}from"../../components/PositionItems";import{ResponsiveImg as s}from"../../components/ImageComponents";import e,{useRef as w}from"react";import{linearGradient as T}from"polished";import{FEATURES as k,UPCOMING_FEATURES as I}from"./config";import{DocsCard as _}from"./components/DocsCard";import{ProcessSteps as A}from"./components/ProcessSteps";import{CardTitle as g,Group as n,Icon as h,PageSubTitle as z,PageTitle as v,SubTitle as F,TextComponent as r,TopicTitle as d,Image as E,FeatureCard as C,FeatureItem as p,TextCard as S,TranslucentCard as W,TextGradientTitle as u}from"./styled";const K={seo:{title:"Docs like code"},slug:"/docs-like-code"};function L(){const f=w(null),b=()=>{f.current&&f.current.scrollIntoView({behavior:"smooth"})};return e.createElement(e.Fragment,null,e.createElement(m,{angle:0,bg:T({colorStops:["rgb(0, 104, 251)","rgb(126, 65, 255)"],toDirection:"to right bottom"}),offsetBottom:"20px",style:{paddingBottom:"40px"}},e.createElement(o,null,e.createElement(t,{maxWidth:"1000px",m:"auto",mt:{_:2,small:4},textAlign:"center"},e.createElement(v,{mb:{base:20}},"Docs-like-code with Redocly"),e.createElement(t,{maxWidth:"830px",m:"auto"},e.createElement(r,{color:"#fff!important",mb:{base:"33px"},textAlign:{base:"center"}},"Keeping APIs and docs in sync is the key to win at the API economy. Here\u2019s why up to date is the way, and how Redocly helps you get there.")),e.createElement(t,{display:"flex",justifyContent:"center",alignItems:"center",m:"auto"},e.createElement(c,{variant:"outlined",size:"large",onClick:b,textAlign:"center"},"Scroll to features",e.createElement(h,{src:require("./images/icons/arrow-bottom.svg"),height:"21px",width:"15px"})))))),e.createElement("div",{style:{background:"#F0F5FF"}},e.createElement(m,{angle:0,bg:"#F0F5FF",offsetTop:"calc(-40px - 10vw)"},e.createElement(o,null,e.createElement(t,{maxWidth:{_:"300px",small:"680px"},mt:{_:"40px",small:"80px",medium:"100px",large:"120px"},mb:0,textAlign:"center",mx:"auto"},e.createElement(u,{mb:5},"Fast vs. usable: ",e.createElement("br",null),"The API",e.createElement(h,{src:require("./images//icons/arrow.svg"),width:"55px"}),"docs divide")),e.createElement(n,{gridTemplateColumns:{_:"1fr",medium:"1fr 1fr"},alignItems:"center",justifyItems:"center",my:{_:1,medium:1}},e.createElement(t,{maxWidth:"550px"},e.createElement(r,null,"With APIs growing at lightspeed, there\u2019s a strong case for building them as fast as possible."),e.createElement(r,null,"But when docs don\u2019t follow suit, it gets harder to keep track and document new features. Then, work doubles, time shrinks, confusion sets in, and progress slows down."),e.createElement(r,{fontWeight:"bold"},"That\u2019s the problem that docs-like-code aims to solve.")),e.createElement(t,null,e.createElement(E,{src:require("./images/docs-components.svg")}))),e.createElement(n,{gridTemplateColumns:{_:"1fr",medium:"1fr 1fr"},alignItems:"center",justifyItems:"center",my:{_:1,medium:1}},e.createElement(S,null,e.createElement(r,null,"\u201CRealize that the further the docs are from the code, the more difficult it can be to keep in sync. Think about creating a culture where code changes don\u2019t merge without corresponding doc changes.\u201D"),e.createElement(r,{fontWeight:"bold"},"Anne Gentle, Docs Like Code (2018)")))))),e.createElement(m,{angle:0,id:"features",bg:"#f8faff",ref:f},e.createElement(o,{mt:75},e.createElement(i,{zIndex:1},e.createElement(l,{size:"500px",top:"-300px",left:"-550px"}),e.createElement(l,{size:"650px",top:"-350px",left:"-650px"})),e.createElement(n,{gridTemplateColumns:{_:"1fr",medium:"1fr 1fr"},alignItems:"center",justifyItems:"center",my:{_:1,medium:1},mb:{_:"70px",small:"110px"}},e.createElement(t,{maxWidth:"550px"},e.createElement(F,{color:"var(--color-text-dark)"},"What\u2019s docs-like-code?"),e.createElement(r,{fontWeight:"bold"},"Docs-like-code means treating documentation like you treat code \u2014 with tools, processes and approaches that are as unified as possible."),e.createElement(r,null,"The end-game is merging API innovation and documentation into a cohesive flow, where you document new features as they drop, which helps you better understand your product as you go.")),e.createElement(t,null,e.createElement(E,{src:require("./images/docs-windows.svg")}))),e.createElement(n,{my:100,gridGap:10,justifyContent:"center",gridTemplateColumns:{_:"1fr",small:"1fr 1fr 1fr 1fr"}},e.createElement(p,null,e.createElement(s,{src:require("./images/icons/unify-version-control.svg"),alt:"unify version control"}),e.createElement(d,null,"Unify version control"),e.createElement(t,{maxWidth:{_:"200px",small:"initial"}},e.createElement(r,{fontSize:{base:"18px"}},"Build product and write docs on the same Git, for everyone to see and contribute."))),e.createElement(p,null,e.createElement(s,{src:require("./images/share-techniques.svg"),alt:"share techniques"}),e.createElement(d,null,"Share techniques"),e.createElement(r,{fontSize:{base:"18px"}},"Apply the same project management, Agile, Scrum, QA, versioning logic.")),e.createElement(p,null,e.createElement(s,{src:require("./images/icons/gear.svg"),alt:"automate docs"}),e.createElement(d,null,"Automate docs"),e.createElement(t,{maxWidth:{_:"200px",small:"initial"}},e.createElement(r,{fontSize:{base:"18px"}},"When product and documentation are in sync, keeping docs current gets easier."))),e.createElement(p,null,e.createElement(s,{src:require("./images/icons/people.svg"),alt:"people"}),e.createElement(d,null,"Bring people together"),e.createElement(t,{maxWidth:{_:"200px",small:"initial"}},e.createElement(r,{fontSize:{base:"18px"},color:"var(--color-text-dimmed)"},"Developers write documentation as soon as features are dropped and writers work with them.")))),e.createElement(i,{left:"100%",zIndex:2},e.createElement(l,{size:"500px",top:"-450px",right:"-520px"}),e.createElement(l,{size:"650px",top:"-500px",right:"-580px"})))),e.createElement("div",{style:{background:"#F0F5FF"}},e.createElement(m,{angle:0,bg:"#F0F5FF",offsetTop:"-100px",offsetBottom:"20px",zIndex:1},e.createElement(o,null,e.createElement(t,{maxWidth:{_:"200px",small:"680px"},mb:0,textAlign:"center",mx:"auto"},e.createElement(u,{my:5},"Redocly\u2019s commitment to docking that code")),e.createElement(n,{gridTemplateColumns:{_:"1fr",medium:"1fr 1fr"},alignItems:"center",justifyItems:"center",my:{_:1,medium:1}},e.createElement(E,{src:require("./images/companies.png")}),e.createElement(t,null,e.createElement(r,null,"The Redocly platform is built to be docs-like-code to the bone. Docs and APIs follow the same kernel of truth, all collaboration happens in one place, and we\u2019re automating every bit of the documentation process."),e.createElement(t,{display:"flex",justifyContent:{_:"center",small:"center",medium:"start",large:"start"}},e.createElement(c,{className:"landing-button",size:"medium",to:"https://auth.cloud.redocly.com/registration"},"Start 30-day free trial"))))))),e.createElement("div",{style:{background:"#f8faff",paddingBottom:"128px"}},e.createElement(m,{angle:0,bg:"#f8faff",offsetTop:"calc(-40px - 10vw)",zIndex:1},e.createElement(o,null,e.createElement(t,{maxWidth:{_:"200px",small:"680px"},mb:0,mt:{_:"40px",small:"80px",medium:"100px",large:"120px"},textAlign:"center",mx:"auto"},e.createElement(u,{textAlign:"center",t:"64px",color:"#0068FB"},"Our docs-like-code process")),e.createElement(A,null),e.createElement(i,{zIndex:1},e.createElement(l,{size:"650px",top:"-400px",left:"-700px"})),e.createElement(t,{maxWidth:{_:"200px",small:"680px"},mb:0,mt:40,textAlign:"center",mx:"auto"},e.createElement(u,{textAlign:"center",mb:"32px",color:"#0068FB"},"More docs-like-code features for your API documentation")),e.createElement(n,{gridTemplateColumns:{_:"1fr 1fr ",small:"1fr 1fr ",medium:"1fr 1fr 1fr"},gridGap:{_:1,small:1,medium:5},my:{_:5}},k.map((a,x)=>e.createElement(C,{key:x},e.createElement(g,null,a.name),e.createElement(r,{fontSize:{base:"18px"}},a.description)))),e.createElement(t,{maxWidth:{_:"200px",small:"680px"},mb:0,mt:40,textAlign:"center",mx:"auto"},e.createElement(z,{textAlign:{base:"center"},mt:{base:"32px"},mb:{base:"32px"},color:"var(--color-text-dark)"},"Upcoming features")),e.createElement(n,{gridTemplateColumns:{_:"1fr 1fr",small:"1f 1f",medium:"1fr 1fr 1fr"},gridGap:{_:3,small:3,medium:5,large:5},mt:5,mb:6},I.map((a,x)=>e.createElement(W,{key:x},e.createElement(g,null,a.name),e.createElement(r,{fontSize:{base:"18px"}},a.description)))),e.createElement(_,null),e.createElement(i,{zIndex:1},e.createElement(l,{size:"650px",top:"0",left:"-600px"}),e.createElement(l,{size:"500px",top:"50px",left:"-550px"}))))),e.createElement(t,{style:{marginTop:"0"},mt:6,zIndex:2,position:"relative"},e.createElement(y,{title:"Superpower your API lifecycle with Redocly"},e.createElement(c,{className:"landing-button",size:"large",to:"https://auth.cloud.redocly.com/registration"},"Start 30-day free trial"),e.createElement(c,{size:"large",color:"secondary",variant:"outlined",to:"/enterprise"},"Enterprise"))))}export{L as default,K as frontmatter};
+import{Box as t}from"../../ui/Box";import{Button as c}from"../../components/Button/CustomButton";import{CallToAction as y}from"../../components/CallToAction/CallToAction";import{Circle as l,CircleWrapper as i}from"../../components/Circle/Circle";import{MediaBox as o,Skewed as m}from"../../components/PositionItems";import{ResponsiveImg as s}from"../../components/ImageComponents";import e,{useRef as w}from"react";import{linearGradient as T}from"polished";import{FEATURES as k,UPCOMING_FEATURES as I}from"./config";import{DocsCard as _}from"./components/DocsCard";import{ProcessSteps as A}from"./components/ProcessSteps";import{CardTitle as g,Group as n,Icon as h,PageSubTitle as z,PageTitle as v,SubTitle as C,TextComponent as r,TopicTitle as d,Image as E,FeatureCard as F,FeatureItem as p,TextCard as S,TranslucentCard as W,TextGradientTitle as u,PageWrapper as P}from"./styled";const L={seo:{title:"Docs like code"},slug:"/docs-like-code"};function Q(){const f=w(null),b=()=>{f.current&&f.current.scrollIntoView({behavior:"smooth"})};return e.createElement(P,null,e.createElement(m,{angle:0,bg:T({colorStops:["rgb(0, 104, 251)","rgb(126, 65, 255)"],toDirection:"to right bottom"}),offsetBottom:"20px",style:{paddingBottom:"40px"}},e.createElement(o,null,e.createElement(t,{maxWidth:"1000px",m:"auto",mt:{_:2,small:4},textAlign:"center"},e.createElement(v,{mb:{base:20}},"Docs-like-code with Redocly"),e.createElement(t,{maxWidth:"830px",m:"auto"},e.createElement(r,{color:"#fff!important",mb:{base:"33px"},textAlign:{base:"center"}},"Keeping APIs and docs in sync is the key to win at the API economy. Here\u2019s why up to date is the way, and how Redocly helps you get there.")),e.createElement(t,{display:"flex",justifyContent:"center",alignItems:"center",m:"auto"},e.createElement(c,{variant:"outlined",size:"large",onClick:b,textAlign:"center"},"Scroll to features",e.createElement(h,{src:require("./images/icons/arrow-bottom.svg"),height:"21px",width:"15px"})))))),e.createElement("div",{style:{background:"#F0F5FF"}},e.createElement(m,{angle:0,bg:"#F0F5FF",offsetTop:"calc(-40px - 10vw)"},e.createElement(o,null,e.createElement(t,{maxWidth:{_:"300px",small:"680px"},mt:{_:"40px",small:"80px",medium:"100px",large:"120px"},mb:0,textAlign:"center",mx:"auto"},e.createElement(u,{mb:5},"Fast vs. usable: ",e.createElement("br",null),"The API",e.createElement(h,{src:require("./images//icons/arrow.svg"),width:"55px"}),"docs divide")),e.createElement(n,{gridTemplateColumns:{_:"1fr",medium:"1fr 1fr"},alignItems:"center",justifyItems:"center",my:{_:1,medium:1}},e.createElement(t,{maxWidth:"550px"},e.createElement(r,null,"With APIs growing at lightspeed, there\u2019s a strong case for building them as fast as possible."),e.createElement(r,null,"But when docs don\u2019t follow suit, it gets harder to keep track and document new features. Then, work doubles, time shrinks, confusion sets in, and progress slows down."),e.createElement(r,{fontWeight:"bold"},"That\u2019s the problem that docs-like-code aims to solve.")),e.createElement(t,null,e.createElement(E,{src:require("./images/docs-components.svg")}))),e.createElement(n,{gridTemplateColumns:{_:"1fr",medium:"1fr 1fr"},alignItems:"center",justifyItems:"center",my:{_:1,medium:1}},e.createElement(S,null,e.createElement(r,null,"\u201CRealize that the further the docs are from the code, the more difficult it can be to keep in sync. Think about creating a culture where code changes don\u2019t merge without corresponding doc changes.\u201D"),e.createElement(r,{fontWeight:"bold"},"Anne Gentle, Docs Like Code (2018)")))))),e.createElement(m,{angle:0,id:"features",bg:"#f8faff",ref:f},e.createElement(o,{mt:75},e.createElement(i,{zIndex:1},e.createElement(l,{size:"500px",top:"-300px",left:"-550px"}),e.createElement(l,{size:"650px",top:"-350px",left:"-650px"})),e.createElement(n,{gridTemplateColumns:{_:"1fr",medium:"1fr 1fr"},alignItems:"center",justifyItems:"center",my:{_:1,medium:1},mb:{_:"70px",small:"110px"}},e.createElement(t,{maxWidth:"550px"},e.createElement(C,{color:"var(--color-text-dark)"},"What\u2019s docs-like-code?"),e.createElement(r,{fontWeight:"bold"},"Docs-like-code means treating documentation like you treat code \u2014 with tools, processes and approaches that are as unified as possible."),e.createElement(r,null,"The end-game is merging API innovation and documentation into a cohesive flow, where you document new features as they drop, which helps you better understand your product as you go.")),e.createElement(t,null,e.createElement(E,{src:require("./images/docs-windows.svg")}))),e.createElement(n,{my:100,gridGap:10,justifyContent:"center",gridTemplateColumns:{_:"1fr",small:"1fr 1fr 1fr 1fr"}},e.createElement(p,null,e.createElement(s,{src:require("./images/icons/unify-version-control.svg"),alt:"unify version control"}),e.createElement(d,null,"Unify version control"),e.createElement(t,{maxWidth:{_:"200px",small:"initial"}},e.createElement(r,{fontSize:{base:"18px"}},"Build product and write docs on the same Git, for everyone to see and contribute."))),e.createElement(p,null,e.createElement(s,{src:require("./images/share-techniques.svg"),alt:"share techniques"}),e.createElement(d,null,"Share techniques"),e.createElement(r,{fontSize:{base:"18px"}},"Apply the same project management, Agile, Scrum, QA, versioning logic.")),e.createElement(p,null,e.createElement(s,{src:require("./images/icons/gear.svg"),alt:"automate docs"}),e.createElement(d,null,"Automate docs"),e.createElement(t,{maxWidth:{_:"200px",small:"initial"}},e.createElement(r,{fontSize:{base:"18px"}},"When product and documentation are in sync, keeping docs current gets easier."))),e.createElement(p,null,e.createElement(s,{src:require("./images/icons/people.svg"),alt:"people"}),e.createElement(d,null,"Bring people together"),e.createElement(t,{maxWidth:{_:"200px",small:"initial"}},e.createElement(r,{fontSize:{base:"18px"},color:"var(--color-text-dimmed)"},"Developers write documentation as soon as features are dropped and writers work with them.")))),e.createElement(i,{left:"100%",zIndex:2},e.createElement(l,{size:"500px",top:"-450px",right:"-520px"}),e.createElement(l,{size:"650px",top:"-500px",right:"-580px"})))),e.createElement("div",{style:{background:"#F0F5FF"}},e.createElement(m,{angle:0,bg:"#F0F5FF",offsetTop:"-100px",offsetBottom:"20px",zIndex:1},e.createElement(o,null,e.createElement(t,{maxWidth:{_:"200px",small:"680px"},mb:0,textAlign:"center",mx:"auto"},e.createElement(u,{my:5},"Redocly\u2019s commitment to docking that code")),e.createElement(n,{gridTemplateColumns:{_:"1fr",medium:"1fr 1fr"},alignItems:"center",justifyItems:"center",my:{_:1,medium:1}},e.createElement(E,{src:require("./images/companies.png")}),e.createElement(t,null,e.createElement(r,null,"The Redocly platform is built to be docs-like-code to the bone. Docs and APIs follow the same kernel of truth, all collaboration happens in one place, and we\u2019re automating every bit of the documentation process."),e.createElement(t,{display:"flex",justifyContent:{_:"center",small:"center",medium:"start",large:"start"}},e.createElement(c,{className:"landing-button",size:"medium",to:"https://auth.cloud.redocly.com/registration"},"Start 30-day free trial"))))))),e.createElement("div",{style:{background:"#f8faff",paddingBottom:"128px"}},e.createElement(m,{angle:0,bg:"#f8faff",offsetTop:"calc(-40px - 10vw)",zIndex:1},e.createElement(o,null,e.createElement(t,{maxWidth:{_:"200px",small:"680px"},mb:0,mt:{_:"40px",small:"80px",medium:"100px",large:"120px"},textAlign:"center",mx:"auto"},e.createElement(u,{textAlign:"center",t:"64px",color:"#0068FB"},"Our docs-like-code process")),e.createElement(A,null),e.createElement(i,{zIndex:1},e.createElement(l,{size:"650px",top:"-400px",left:"-700px"})),e.createElement(t,{maxWidth:{_:"200px",small:"680px"},mb:0,mt:40,textAlign:"center",mx:"auto"},e.createElement(u,{textAlign:"center",mb:"32px",color:"#0068FB"},"More docs-like-code features for your API documentation")),e.createElement(n,{gridTemplateColumns:{_:"1fr 1fr ",small:"1fr 1fr ",medium:"1fr 1fr 1fr"},gridGap:{_:1,small:1,medium:5},my:{_:5}},k.map((a,x)=>e.createElement(F,{key:x},e.createElement(g,null,a.name),e.createElement(r,{fontSize:{base:"18px"}},a.description)))),e.createElement(t,{maxWidth:{_:"200px",small:"680px"},mb:0,mt:40,textAlign:"center",mx:"auto"},e.createElement(z,{textAlign:{base:"center"},mt:{base:"32px"},mb:{base:"32px"},color:"var(--color-text-dark)"},"Upcoming features")),e.createElement(n,{gridTemplateColumns:{_:"1fr 1fr",small:"1f 1f",medium:"1fr 1fr 1fr"},gridGap:{_:3,small:3,medium:5,large:5},mt:5,mb:6},I.map((a,x)=>e.createElement(W,{key:x},e.createElement(g,null,a.name),e.createElement(r,{fontSize:{base:"18px"}},a.description)))),e.createElement(_,null),e.createElement(i,{zIndex:1},e.createElement(l,{size:"650px",top:"0",left:"-600px"}),e.createElement(l,{size:"500px",top:"50px",left:"-550px"}))))),e.createElement(t,{style:{marginTop:"0"},mt:6,zIndex:2,position:"relative"},e.createElement(y,{title:"Superpower your API lifecycle with Redocly"},e.createElement(c,{className:"landing-button",size:"large",to:"https://auth.cloud.redocly.com/registration"},"Start 30-day free trial"),e.createElement(c,{size:"large",color:"secondary",variant:"outlined",to:"/enterprise"},"Enterprise"))))}export{Q as default,L as frontmatter};

package/dist/pages/docs-like-code/styled.d.ts

@@ -18,3 +18,4 @@ export declare const FeatureCard: any;
 export declare const TranslucentCard: any;
 export declare const ButtonWrapper: any;
 export declare const TextGradientTitle: any;
+export declare const PageWrapper: any;

package/dist/pages/docs-like-code/styled.js

@@ -1,4 +1,4 @@
-import{TextGradient as r}from"../../components/TextGradient/TextGradient";import i from"styled-components";import{Grid as a,MediaBox as m}from"../../components/PositionItems";import{Box as n}from"../../ui/Box";import{ResponsiveImg as d}from"../../components/ImageComponents";import{Card as o}from"../../components/Cards/Card";import{breakpoints as t}from"@redocly/theme/core/utils";import{H1Title as p,H2Title as g,H3Title as s,Paragraph as c}from"../../components/TypographyElements";const v=i(r)`
+import{TextGradient as r}from"../../components/TextGradient/TextGradient";import i from"styled-components";import{Grid as a,MediaBox as m}from"../../components/PositionItems";import{Box as n}from"../../ui/Box";import{ResponsiveImg as d}from"../../components/ImageComponents";import{Card as o}from"../../components/Cards/Card";import{breakpoints as t}from"@redocly/theme/core/utils";import{H1Title as p,H2Title as g,H3Title as l,Paragraph as s}from"../../components/TypographyElements";const v=i(r)`
   font-size: 20px;
   line-height: 26px;
   font-family: var(--font-family);
@@ -37,7 +37,7 @@ import{TextGradient as r}from"../../components/TextGradient/TextGradient";import
   }
 `,T=i(g)`
   padding-top: ${({pt:e})=>e&&e};
-`,C=i(s)`
+`,C=i(l)`
   margin: 0;
   padding-top: ${({pt:e})=>e&&e};
 `,I=i(r)`
@@ -56,7 +56,7 @@ import{TextGradient as r}from"../../components/TextGradient/TextGradient";import
     font-size: var(--font-size-h4-lg);
     line-height: var(--line-height-h4-lg);
   }
-`,S=i(c)`
+`,S=i(s)`
   color: var(--color-text-dimmed);
 `,B=i(m)`
   display: flex;
@@ -92,14 +92,14 @@ import{TextGradient as r}from"../../components/TextGradient/TextGradient";import
   }
 `,G=i.img`
   margin: 0 15px;
-`,j=i(d)`
+`,P=i(d)`
   margin: auto;
   width: 80%;
 
   @media screen and (min-width: ${t.medium}) {
     width: 85%;
   }
-`,H=i(n)`
+`,j=i(n)`
   display: grid;
   align-items: center;
   text-align: center;
@@ -112,13 +112,13 @@ import{TextGradient as r}from"../../components/TextGradient/TextGradient";import
     width: 70px;
     height: 70px;
   }
-`,P=i(n)`
+`,H=i(n)`
   height: calc(100% - 86px);
   margin-top: 16px;
   border-left: 1px dashed rgba(0, 68, 212, 0.2);
   align-self: center;
   justify-self: center;
-`,F=i(n)`
+`,W=i(n)`
   grid-column-start: 2;
   @media screen and (min-width: ${t.small}) {
     grid-column-start: 2;
@@ -126,7 +126,7 @@ import{TextGradient as r}from"../../components/TextGradient/TextGradient";import
   @media screen and (min-width: ${t.medium}) {
     grid-column-start: 3;
   }
-`,W=i.div`
+`,F=i.div`
   background: #f8faff;
   padding-bottom: 150px;
   overflow-x: clip;
@@ -170,14 +170,14 @@ import{TextGradient as r}from"../../components/TextGradient/TextGradient";import
       align-self: center;
     }
   }
-`,l=i(o)`
+`,c=i(o)`
   padding: 24px;
   max-width: 400px;
 
   @media screen and (min-width: ${t.medium}) {
     padding: 16px;
   }
-`,D=i(l)`
+`,D=i(c)`
   opacity: 0.5;
 `,L=i(n)`
   display: flex;
@@ -195,4 +195,7 @@ import{TextGradient as r}from"../../components/TextGradient/TextGradient";import
     font-size: 40px;
     line-height: 48px;
   }
-`;export{L as ButtonWrapper,v as CardTitle,B as DocsBody,l as FeatureCard,q as FeatureItem,k as Group,G as Icon,j as Image,F as ImageContainer,T as PageSubTitle,z as PageTitle,W as Section,P as StepLine,H as StepNumberWrapper,C as SubTitle,_ as TextCard,S as TextComponent,M as TextGradientTitle,I as TopicTitle,D as TranslucentCard};
+`,N=i.div`
+  overflow-x: clip;
+  overflow-y: visible;
+`;export{L as ButtonWrapper,v as CardTitle,B as DocsBody,c as FeatureCard,q as FeatureItem,k as Group,G as Icon,P as Image,W as ImageContainer,T as PageSubTitle,z as PageTitle,N as PageWrapper,F as Section,H as StepLine,j as StepNumberWrapper,C as SubTitle,_ as TextCard,S as TextComponent,M as TextGradientTitle,I as TopicTitle,D as TranslucentCard};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/marketing-pages",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "keywords": [],
   "author": "",
   "license": "UNLICENSED",