@manifoldco/web-components - npm Package Compare versions

Comparing version 0.0.45 to 0.0.46

dist/cjs/manifold-plan-table.cjs.entry.js

@@ -6,3 +6,3 @@ 'use strict';
 const index = require('./index-8fab79ff.js');
-const helpCircle = require('./help-circle-d81b9527.js');
+const helpCircle = require('./help-circle-f9367770.js');
 
@@ -9,0 +9,0 @@ const Tooltip = ({ id, title, innerHTML, direction, show, hide, }) => {

dist/cjs/plangraph-plan-table.cjs.entry.js

@@ -6,3 +6,3 @@ 'use strict';
 const index = require('./index-8fab79ff.js');
-const helpCircle = require('./help-circle-d81b9527.js');
+const helpCircle = require('./help-circle-f9367770.js');
 
@@ -141,3 +141,3 @@ const Tooltip = ({ id, title, innerHTML, direction, show, hide, }) => {
 
-const plangraphPlanTableCss = ".Manifold-Typography--Body{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Body{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--Label{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2143;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Label{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2143;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--Heading{font-size:18px;font-weight:400;letter-spacing:normal;line-height:1.2222;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Heading{font-size:20px;font-weight:400;letter-spacing:normal;line-height:1.2;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--HeadingLarge{font-size:22px;font-weight:400;letter-spacing:normal;line-height:1.1818;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--HeadingLarge{font-size:25px;font-weight:400;letter-spacing:normal;line-height:1.2;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--SubheadingSmall{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}.Manifold-Typography--Caption{font-size:13px;font-weight:400;letter-spacing:normal;line-height:1.2308;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";margin:0;color:var(--plangraph-color-text-secondary)}@media (min-width: 600px){.Manifold-Typography--Caption{font-size:12px;font-weight:400;letter-spacing:normal;line-height:1.3333;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";color:var(--plangraph-color-text-secondary)}}.Manifold-Tooltip{position:relative;padding:8px 12px;color:#ffffff;white-space:nowrap;text-align:center;text-indent:0;background:#323940;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);cursor:default;pointer-events:none;font-size:12px;font-weight:400;letter-spacing:normal;line-height:1.3333;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}.Manifold-Tooltip::after{position:absolute;top:100%;left:50%;width:0;height:0;margin-left:-5px;border:solid transparent;border-color:rgba(0, 0, 0, 0);border-width:5px;border-top-color:#323940;content:\"\";pointer-events:none}.Manifold-Tooltip__Container{position:relative;cursor:pointer}.Manifold-Tooltip__Container [role=tooltip]{position:absolute;bottom:100%;left:50%;margin-bottom:8px;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);-webkit-transform-origin:top;transform-origin:top;opacity:0;-webkit-transition:all 0.1s ease-in-out 0.1s;transition:all 0.1s ease-in-out 0.1s}.Manifold-Tooltip__Container:hover [role=tooltip]{-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px);opacity:1}.Manifold-Tooltip__Container--Down [role=tooltip]{top:100%;bottom:auto;margin-top:13px;-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px)}.Manifold-Tooltip__Container--Down:hover [role=tooltip]{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}.Manifold-Tooltip__Container--Up [role=tooltip]{top:auto;bottom:100%;z-index:10;margin-bottom:13px;-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px)}.Manifold-Tooltip__Container--Up:hover [role=tooltip]{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}.Manifold-Tooltip--Up::after{top:100%;bottom:auto;border-color:rgba(0, 0, 0, 0);border-bottom-color:#323940;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.Manifold-Tooltip--Down::after{top:auto;bottom:100%;border-color:rgba(0, 0, 0, 0);border-bottom-color:#323940}.Skeleton__Grid{display:grid;grid-template-columns:1fr 1fr 1fr;-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.Skeleton__Grid p{margin:6px 0}.Skeleton__Grid h2{max-width:200px}.Skeleton{position:relative;display:inline-block;overflow:hidden;color:transparent;line-height:1;border-radius:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}@-webkit-keyframes Skeleton__Animation{to{-webkit-transform:translateX(125%);transform:translateX(125%)}}@keyframes Skeleton__Animation{to{-webkit-transform:translateX(125%);transform:translateX(125%)}}.Skeleton::before{position:absolute;top:0;right:0;bottom:0;left:0;background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), color-stop(1em, rgba(0, 0, 0, 0.1)), color-stop(1em, rgba(0, 0, 0, 0)), color-stop(1.5em, rgba(0, 0, 0, 0)));background-image:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1em, rgba(0, 0, 0, 0) 1em, rgba(0, 0, 0, 0) 1.5em);background-repeat:repeat-y;background-size:100% 1.5em;content:\"\";pointer-events:none}.Skeleton::after{position:absolute;top:0;right:100%;width:60em;height:100%;background-image:linear-gradient(60deg, rgba(255, 255, 255, 0) 33.3333%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 66.6666%);background-repeat:no-repeat;opacity:0.4;-webkit-animation-name:Skeleton__Animation;animation-name:Skeleton__Animation;-webkit-animation-duration:1.4s;animation-duration:1.4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;content:\"\";pointer-events:none}:host{--theme-color-brand:var(--plangraph-color-brand);--theme-color-brand-accent:var(--plangraph-color-brand-accent);--theme-color-error:var(--plangraph-color-error);--theme-color-disabled:var(--plangraph-color-disabled);--theme-color-disabled-accent:var(--plangraph-color-disabled-accent);--theme-color-background:var(--plangraph-color-background);--theme-color-input-background:var(--plangraph-color-input-background);--theme-color-text:var(--plangraph-color-text);--theme-color-text-secondary:var(--plangraph-color-text-secondary);--theme-border:var(--plangraph-border);--theme-border-secondary:var(--plangraph-border-secondary);--theme-radius:var(--plangraph-radius);position:relative;display:block;overflow:auto}:host table.plan-table{--plangraph-color-brand:var(--theme-color-brand, #1e50da);--plangraph-color-brand-accent:var(--theme-color-brand-accent, #ffffff);--plangraph-color-error:var(--theme-color-error, #d52049);--plangraph-color-disabled:var(--theme-color-disabled, #ececed);--plangraph-color-disabled-accent:var(--theme-color-disabled-accent, #8f8f95);--plangraph-color-background:var(--theme-color-background, #ffffff);--plangraph-color-input-background:var(\n    --theme-color-input-background,\n    #ffffff\n  );--plangraph-color-text:var(--theme-color-text, #323940);--plangraph-color-text-secondary:var(--theme-color-text-secondary, #8f8f95);--plangraph-border:var(--theme-border, 1px solid #c4c7ca);--plangraph-border-secondary:var(\n    --theme-border-secondary,\n    1px solid #ececed\n  );--plangraph-radius:var(--theme-radius, 4px);color:var(--plangraph-color-text);background:var(--plangraph-color-background);border-radius:var(--plangraph-radius);border-spacing:0}:host table.plan-table th{vertical-align:top;border-bottom:var(--plangraph-border);border-left:var(--plangraph-border)}:host table.plan-table th h1{margin:0.5rem}:host table.plan-table th h3{margin:0;color:var(--plangraph-color-text);font-weight:700}:host table.plan-table th label{color:var(--plangraph-color-brand)}:host table.plan-table .plan-description,:host table.plan-table .feature-description{max-width:100%;margin:0.25rem 0;word-wrap:break-word}:host table.plan-table td{vertical-align:top;border-bottom:var(--plangraph-border-secondary);border-left:var(--plangraph-border)}:host table.plan-table td.feature-name,:host table.plan-table th.feature-name{position:-webkit-sticky;position:sticky;border-right:var(--plangraph-border)}:host table.plan-table .feature-name{left:0;z-index:1;color:var(--plangraph-color-text);font-weight:600;font-size:14px;text-align:left}@media (min-width: 600px){:host table.plan-table .feature-name{font-size:16px}}:host table.plan-table th,:host table.plan-table td{padding:0.5rem;text-align:left;background-color:var(--plangraph-color-background)}@media (min-width: 600px){:host table.plan-table th,:host table.plan-table td{padding:1rem}}@media (min-width: 850px){:host table.plan-table th,:host table.plan-table td{padding:1rem}}:host table.plan-table th:nth-child(2),:host table.plan-table td:nth-child(2){border-left:none}:host table.plan-table th:last-child,:host table.plan-table td:last-child{border-right:var(--plangraph-border)}:host table.plan-table tr:first-child th{border-top:var(--plangraph-border)}:host table.plan-table tr:first-child th:first-child{border-top-left-radius:var(--plangraph-radius)}:host table.plan-table tr:first-child th:last-child{border-top-right-radius:var(--plangraph-radius)}:host table.plan-table tr:last-child td{border-bottom:var(--plangraph-border)}:host table.plan-table tr:last-child td:first-child{border-bottom-left-radius:var(--plangraph-radius)}:host table.plan-table tr:last-child td:last-child{border-bottom-right-radius:var(--plangraph-radius)}:host table.plan-table .plan-cell{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host table.plan-table.scrolled .feature-name{-webkit-box-shadow:0 0 30px 0 rgba(0, 0, 0, 0.15);box-shadow:0 0 30px 0 rgba(0, 0, 0, 0.15);-webkit-clip-path:inset(0 -30px 0 0);clip-path:inset(0 -30px 0 0)}:host table.plan-table.lg .feature-name{min-width:200px;max-width:400px}:host table.plan-table.md .feature-name{min-width:150px;max-width:300px}:host table.plan-table.sm{display:none}:host table.plan-table.sm .feature-name{min-width:100px;max-width:250px}:host table.plan-table.xs{display:none;max-width:478px}:host td button,:host td .button{position:relative;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10.5px 21px;color:#323940;font-weight:500;font-size:16px;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";line-height:1;white-space:nowrap;text-decoration:none;background:#ffffff;border-color:#c4c7ca;border-style:solid;border-width:1px;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);cursor:pointer;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:background-color, border-color, color, -webkit-box-shadow, -webkit-filter;transition-property:background-color, border-color, color, -webkit-box-shadow, -webkit-filter;transition-property:background-color, border-color, color, box-shadow, filter;transition-property:background-color, border-color, color, box-shadow, filter, -webkit-box-shadow, -webkit-filter;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;color:var(--plangraph-color-brand-accent);text-align:center;background:var(--plangraph-color-brand);border:none;border-radius:var(--plangraph-radius)}:host td button::before,:host td .button::before{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:2px solid #1e50da;border-radius:8px;-webkit-transform:scale(0.95, 0.9);transform:scale(0.95, 0.9);opacity:0;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5), -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);content:\"\";pointer-events:none}:host td button::-moz-focus-inner,:host td .button::-moz-focus-inner{border:0}:host td button:focus,:host td button:hover,:host td .button:focus,:host td .button:hover{border-color:#8f8f95}:host td button:focus,:host td .button:focus{outline:none}:host td button:focus::before,:host td .button:focus::before{-webkit-transform:scale(1);transform:scale(1);opacity:1;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, transform 150ms cubic-bezier(0, 0.5, 0.5, 1), -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1)}:host td button:active,:host td .button:active{-webkit-transform:translateY(1px);transform:translateY(1px)}:host td button:disabled,:host td .button:disabled{color:#8f8f95;background:#ececed;border:1px solid #c4c7ca;-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:0.8}:host td button:disabled:focus,:host td button:disabled:hover,:host td .button:disabled:focus,:host td .button:disabled:hover{color:#8f8f95;background:#ececed;border:1px solid #c4c7ca;-webkit-box-shadow:none;box-shadow:none}:host td button:disabled:focus::before,:host td .button:disabled:focus::before{opacity:0}:host td button:disabled:active,:host td .button:disabled:active{color:#8f8f95;background:#ececed;border-color:#c4c7ca;-webkit-box-shadow:none;box-shadow:none;-webkit-transform:none;transform:none}:host td button:disabled,:host td .button:disabled{color:var(--plangraph-color-disabled-accent);background:var(--plangraph-color-disabled);border-color:var(--plangraph-color-disabled)}:host td button:disabled:hover,:host td .button:disabled:hover{background:var(--plangraph-color-disabled);border-color:var(--plangraph-color-disabled)}:host td button:focus::before,:host td .button:focus::before{border-color:var(--plangraph-color-brand)}@media (min-width: 600px){:host td button,:host td .button{min-width:240px}}:host .icon{width:1.25rem;height:1.25rem}:host .icon svg{fill:#8f8f95}:host .icon.icon-green svg{fill:#31baa2}:host .toggle-feature{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .toggle-feature .Manifold-Toggle{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .toggle-feature .Manifold-Toggle::before{position:absolute;top:50%;right:-4px;width:2.75rem;height:1.75rem;border:2px solid #1e50da;border-radius:2rem;-webkit-transform:translateY(-50%) scale(0.9);transform:translateY(-50%) scale(0.9);opacity:0;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5), -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);content:\"\";pointer-events:none}:host .toggle-feature .Manifold-Toggle label{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:0;color:currentColor;cursor:pointer}@media (min-width: 600px){:host .toggle-feature .Manifold-Toggle label{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .toggle-feature .Manifold-Toggle label::before{-ms-flex-order:1;order:1;-webkit-box-sizing:border-box;box-sizing:border-box;width:2.5rem;height:1.5rem;margin-left:0.75rem;background:#ececed;border-radius:2rem;-webkit-transition:background-color 150ms linear;transition:background-color 150ms linear;content:\"\";pointer-events:none}:host .toggle-feature .Manifold-Toggle label::after{position:absolute;top:50%;right:0.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;width:1rem;height:1rem;background-color:#8f8f95;border-radius:50%;-webkit-transform:translate(-100%, -50%);transform:translate(-100%, -50%);-webkit-transition:background-color 150ms linear, -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04), -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);content:\"\"}:host .toggle-feature .Manifold-Toggle input{position:absolute;right:100vw;opacity:0}:host .toggle-feature .Manifold-Toggle input:disabled~label{cursor:default}:host .toggle-feature .Manifold-Toggle input:disabled~label::before{background:#ececed;border:1px solid #ddddde}:host .toggle-feature .Manifold-Toggle input:disabled~label::after{background:#ddddde;border:1px solid #c4c7ca}:host .toggle-feature .Manifold-Toggle input:disabled:checked~label::before{background:#ececed}:host .toggle-feature .Manifold-Toggle input:disabled:checked~label::after{background:#8f8f95;border:1px solid #8f8f95}:host .toggle-feature .Manifold-Toggle:focus-within{color:#1e50da}:host .toggle-feature .Manifold-Toggle:focus-within::before{-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);opacity:1}:host .toggle-feature .Manifold-Toggle input:checked~label::before{background:#dde9fe}:host .toggle-feature .Manifold-Toggle input:checked~label::after{background:#1e50da;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}:host .toggle-feature .Manifold-Toggle::before{border-color:var(--plangraph-color-brand)}:host .toggle-feature .Manifold-Toggle label::before{margin-left:0;background:var(--plangraph-color-text-secondary);opacity:0.2}:host .toggle-feature .Manifold-Toggle label::after{background:var(--plangraph-color-text-secondary)}:host .toggle-feature .Manifold-Toggle input:checked+label::before{margin-left:0;background:var(--plangraph-color-brand);opacity:0.2}:host .toggle-feature .Manifold-Toggle input:checked+label::after{background:var(--plangraph-color-brand)}:host .Manifold-Select{-webkit-transition:border-color 150ms linear;transition:border-color 150ms linear;width:100%}:host .Manifold-Select label{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;padding-bottom:0.25rem;color:#575b5f;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:color;transition-property:color}:host .Manifold-Select select{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:2.25em;margin:0;padding:0 1.5rem 0 0.75rem;color:#575b5f;line-height:2.25;background-color:#ffffff;background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%23575b5f\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');background-repeat:no-repeat, repeat;background-position:right 0.25rem top 50%;background-size:1.5rem auto;border:1px solid #c4c7ca;border-radius:4px;-webkit-transition:border-color 150ms linear, color 150ms linear;transition:border-color 150ms linear, color 150ms linear;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .Manifold-Select select::-ms-expand{display:none}:host .Manifold-Select select:hover{border-color:#8f8f95}:host .Manifold-Select select:focus{outline:none}@media (min-width: 600px){:host .Manifold-Select select{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .Manifold-Select option{font-weight:400}:host .Manifold-Select select:invalid,:host .Manifold-Select select[aria-invalid]{background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%23d52049\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');border-color:#d52049;-webkit-box-shadow:none;box-shadow:none}:host .Manifold-Select select:disabled{color:#8f8f95;background-color:#f7f7f8;background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%238f8f95\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');}:host .Manifold-Select select:disabled:hover{border-color:#c4c7ca}:host .Manifold-Select:focus-within label{color:#1e50da}:host .Manifold-Select:focus-within select{border-color:#1e50da}:host .Manifold-Select select{color:var(--plangraph-color-text);background-color:var(--plangraph-color-input-background);border:var(--plangraph-border)}:host .Manifold-Select select:focus{border-color:var(--plangraph-color-brand)}:host .Manifold-Select select.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .int-range-configured-feature{width:100%}:host .int-range-configured-feature .int-range-label{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}:host .int-range-configured-feature .int-range-label .label-bold{color:var(--plangraph-color-text);font-weight:500;text-transform:uppercase}:host .int-range-configured-feature .int-range-label .int-range-tooltip{z-index:10;display:-ms-flexbox;display:flex;margin-left:auto}:host .int-range-configured-feature .int-range-label .int-range-tooltip .icon{width:1em;height:1em}:host .int-range-configured-feature .label-limit{color:var(--plangraph-color-text-secondary)}:host .int-range-tooltip-content{text-align:left}:host .int-range-tooltip-content .int-range-tooltip-title{padding-bottom:6px;color:var(--plangraph-color-text-secondary);text-transform:uppercase}:host .int-range-tooltip-content .int-range-tooltip-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-width:100px}:host .int-range-tooltip-content .int-range-tooltip-row .int-range-tooltip-row-unit{text-align:right}:host option.string-select-cost{color:var(--plangraph-color-text-secondary)}:host .Manifold-Input{-webkit-transition:border-color 150ms linear;transition:border-color 150ms linear;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;width:100%;padding:6px 0}:host .Manifold-Input label{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;padding-bottom:0.25rem;color:#575b5f;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:color;transition-property:color}:host .Manifold-Input input{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;min-width:none;height:2.25rem;padding:0 0.75em;color:#323940;line-height:2.25rem;background:#ffffff;border:1px solid #c4c7ca;border-radius:3px;outline:0;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:border-color;transition-property:border-color;-webkit-appearance:none;appearance:none;-moz-appearance:textfield}@media (min-width: 600px){:host .Manifold-Input input{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .Manifold-Input input:hover{border-color:#8f8f95}:host .Manifold-Input input[type=number],:host .Manifold-Input input[inputmode=numeric],:host .Manifold-Input input[inputmode=decimal],:host .Manifold-Input input[pattern=\"[0-9]*\"],:host .Manifold-Input input[pattern^=\"\\a\"]{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2857;text-transform:none;font-family:\"IBM Plex Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace;text-align:right}:host .Manifold-Input input::-webkit-inner-spin-button,:host .Manifold-Input input::-webkit-outer-spin-button{display:none}:host .Manifold-Input input:invalid,:host .Manifold-Input input[aria-invalid]{border-color:#d52049;-webkit-box-shadow:none;box-shadow:none}:host .Manifold-Input input:disabled{color:#8f8f95;background:#f7f7f8;}:host .Manifold-Input input:disabled:hover{border-color:#c4c7ca}:host .Manifold-Input:focus-within label{color:#1e50da}:host .Manifold-Input:focus-within input{border-color:#1e50da}:host .Manifold-Input input{color:var(--plangraph-color-text);background-color:var(--plangraph-color-input-background);border:var(--plangraph-border)}:host .Manifold-Input input[type=number]{width:100%;padding:0.5em;text-align:left;border-top:border;border-right:none;border-bottom:border;border-left:none;border-radius:0}:host .Manifold-Input input[type=number]:focus{border-color:var(--plangraph-color-brand)}:host .Manifold-Input .Manifold-Tooltip__Container{-ms-flex:6 auto;flex:6 auto;min-width:7em}:host .Manifold-Input input.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .Manifold-Input button{display:-ms-flexbox;display:flex;-ms-flex:1 auto;flex:1 auto;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.25em;min-width:0;height:2.25em;padding:0;background-color:var(--plangraph-color-background);border:var(--plangraph-border)}:host .Manifold-Input button::before,:host .Manifold-Input button::after{border-color:var(--plangraph-color-brand)}:host .Manifold-Input button:first-child{border-radius:0.25em 0 0 0.25em}:host .Manifold-Input button:last-child{border-radius:0 0.25em 0.25em 0}:host .Manifold-Input button.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .Manifold-Input .helper{color:var(--plangraph-color-text-secondary);text-align:left}:host .excluded{color:var(--plangraph-color-text-secondary)}:host table.cost-tiers{-ms-flex-item-align:start;align-self:flex-start;width:100%}:host table.cost-tiers tr.label-bold,:host table.cost-tiers tr:first-child.label-bold,:host table.cost-tiers tr:last-child.label-bold{color:var(--plangraph-color-text);font-weight:600}:host table.cost-tiers tr td,:host table.cost-tiers tr th,:host table.cost-tiers tr:first-child td,:host table.cost-tiers tr:first-child th,:host table.cost-tiers tr:last-child td,:host table.cost-tiers tr:last-child th{padding:0.2rem 0;text-align:left;border:none}:host table.cost-tiers tr th,:host table.cost-tiers tr:first-child th,:host table.cost-tiers tr:last-child th{padding-top:0;color:var(--plangraph-color-text-secondary)}:host table.cost-tiers tr td:last-child,:host table.cost-tiers tr:first-child td:last-child,:host table.cost-tiers tr:last-child td:last-child{text-align:right;border-right:none}:host .plan-carousel .slides{display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-flow:row nowrap;flex-flow:row nowrap;width:100%;overflow:auto;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}:host .plan-carousel tr.feature-row>td{padding:0}:host .plan-carousel tr.feature-row>td .feature-cell,:host .plan-carousel tr.feature-row>td .value-cell{padding:1rem}:host .plan-carousel.sm tr.feature-row>td>div{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .plan-carousel.sm tr.feature-row>td>div .feature-cell{-ms-flex:1;flex:1}:host .plan-carousel.sm tr.feature-row>td>div .value-cell{-ms-flex:1;flex:1}:host .plan-carousel.xs tr.feature-row>td .feature-cell{padding:0.5rem 0.5rem 0.25rem 0.5rem}:host .plan-carousel.xs tr.feature-row>td .value-cell{padding:0.25rem 0.5rem 0.5rem 0.5rem}:host .plan-carousel .slide{-ms-flex:none;flex:none;width:80%;max-height:calc(80vh - 4rem);overflow-x:hidden;overflow-y:auto;scroll-snap-align:center}:host .plan-carousel .slide>table{width:90%;margin:0 auto}:host .plan-carousel th.header-cell{position:-webkit-sticky;position:sticky;top:0;z-index:20}:host .plan-carousel .footer-cell{position:-webkit-sticky;position:sticky;bottom:0;z-index:20}:host .plan-carousel .slide:first-child{padding-left:10%}:host .plan-carousel .slide:last-child{padding-right:10%}:host .plan-carousel nav ol{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:4rem;margin:0;padding:0;list-style:none}:host .plan-carousel nav li{width:1rem;height:1rem;margin:0 1rem;padding:0;background-color:#c4c7ca;border-radius:1rem;cursor:pointer}:host .plan-carousel nav li.active{background-color:#8f8f95}";
+const plangraphPlanTableCss = ".Manifold-Typography--Body{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Body{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--Label{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2143;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Label{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2143;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--Heading{font-size:18px;font-weight:400;letter-spacing:normal;line-height:1.2222;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Heading{font-size:20px;font-weight:400;letter-spacing:normal;line-height:1.2;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--HeadingLarge{font-size:22px;font-weight:400;letter-spacing:normal;line-height:1.1818;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--HeadingLarge{font-size:25px;font-weight:400;letter-spacing:normal;line-height:1.2;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--SubheadingSmall{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}.Manifold-Typography--Caption{font-size:13px;font-weight:400;letter-spacing:normal;line-height:1.2308;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";margin:0;color:var(--plangraph-color-text-secondary)}@media (min-width: 600px){.Manifold-Typography--Caption{font-size:12px;font-weight:400;letter-spacing:normal;line-height:1.3333;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";color:var(--plangraph-color-text-secondary)}}.Manifold-Tooltip{position:relative;padding:8px 12px;color:#ffffff;white-space:nowrap;text-align:center;text-indent:0;background:#323940;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);cursor:default;pointer-events:none;font-size:12px;font-weight:400;letter-spacing:normal;line-height:1.3333;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}.Manifold-Tooltip::after{position:absolute;top:100%;left:50%;width:0;height:0;margin-left:-5px;border:solid transparent;border-color:rgba(0, 0, 0, 0);border-width:5px;border-top-color:#323940;content:\"\";pointer-events:none}.Manifold-Tooltip__Container{position:relative;cursor:pointer}.Manifold-Tooltip__Container [role=tooltip]{position:absolute;bottom:100%;left:50%;margin-bottom:8px;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);-webkit-transform-origin:top;transform-origin:top;opacity:0;-webkit-transition:all 0.1s ease-in-out 0.1s;transition:all 0.1s ease-in-out 0.1s}.Manifold-Tooltip__Container:hover [role=tooltip]{-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px);opacity:1}.Manifold-Tooltip__Container--Down [role=tooltip]{top:100%;bottom:auto;margin-top:13px;-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px)}.Manifold-Tooltip__Container--Down:hover [role=tooltip]{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}.Manifold-Tooltip__Container--Up [role=tooltip]{top:auto;bottom:100%;z-index:10;margin-bottom:13px;-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px)}.Manifold-Tooltip__Container--Up:hover [role=tooltip]{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}.Manifold-Tooltip--Up::after{top:100%;bottom:auto;border-color:rgba(0, 0, 0, 0);border-bottom-color:#323940;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.Manifold-Tooltip--Down::after{top:auto;bottom:100%;border-color:rgba(0, 0, 0, 0);border-bottom-color:#323940}.Skeleton__Grid{display:grid;grid-template-columns:1fr 1fr 1fr;-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.Skeleton__Grid p{margin:6px 0}.Skeleton__Grid h2{max-width:200px}.Skeleton{position:relative;display:inline-block;overflow:hidden;color:transparent;line-height:1;border-radius:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}@-webkit-keyframes Skeleton__Animation{to{-webkit-transform:translateX(125%);transform:translateX(125%)}}@keyframes Skeleton__Animation{to{-webkit-transform:translateX(125%);transform:translateX(125%)}}.Skeleton::before{position:absolute;top:0;right:0;bottom:0;left:0;background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), color-stop(1em, rgba(0, 0, 0, 0.1)), color-stop(1em, rgba(0, 0, 0, 0)), color-stop(1.5em, rgba(0, 0, 0, 0)));background-image:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1em, rgba(0, 0, 0, 0) 1em, rgba(0, 0, 0, 0) 1.5em);background-repeat:repeat-y;background-size:100% 1.5em;content:\"\";pointer-events:none}.Skeleton::after{position:absolute;top:0;right:100%;width:60em;height:100%;background-image:linear-gradient(60deg, rgba(255, 255, 255, 0) 33.3333%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 66.6666%);background-repeat:no-repeat;opacity:0.4;-webkit-animation-name:Skeleton__Animation;animation-name:Skeleton__Animation;-webkit-animation-duration:1.4s;animation-duration:1.4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;content:\"\";pointer-events:none}:host{--theme-color-brand:var(--plangraph-color-brand);--theme-color-brand-accent:var(--plangraph-color-brand-accent);--theme-color-error:var(--plangraph-color-error);--theme-color-disabled:var(--plangraph-color-disabled);--theme-color-disabled-accent:var(--plangraph-color-disabled-accent);--theme-color-background:var(--plangraph-color-background);--theme-color-input-background:var(--plangraph-color-input-background);--theme-color-text:var(--plangraph-color-text);--theme-color-text-secondary:var(--plangraph-color-text-secondary);--theme-border:var(--plangraph-border);--theme-border-secondary:var(--plangraph-border-secondary);--theme-radius:var(--plangraph-radius);position:relative;display:block;overflow:auto}:host table.plan-table{--plangraph-color-brand:var(--theme-color-brand, #1e50da);--plangraph-color-brand-accent:var(--theme-color-brand-accent, #ffffff);--plangraph-color-error:var(--theme-color-error, #d52049);--plangraph-color-disabled:var(--theme-color-disabled, #ececed);--plangraph-color-disabled-accent:var(--theme-color-disabled-accent, #8f8f95);--plangraph-color-background:var(--theme-color-background, #ffffff);--plangraph-color-input-background:var(\n    --theme-color-input-background,\n    #ffffff\n  );--plangraph-color-text:var(--theme-color-text, #323940);--plangraph-color-text-secondary:var(--theme-color-text-secondary, #8f8f95);--plangraph-border:var(--theme-border, 1px solid #c4c7ca);--plangraph-border-secondary:var(\n    --theme-border-secondary,\n    1px solid #ececed\n  );--plangraph-radius:var(--theme-radius, 4px);color:var(--plangraph-color-text);background:var(--plangraph-color-background);border-radius:var(--plangraph-radius);border-spacing:0}:host table.plan-table th{vertical-align:top;border-bottom:var(--plangraph-border);border-left:var(--plangraph-border)}:host table.plan-table th h1{margin:0.5rem}:host table.plan-table th h3{margin:0;color:var(--plangraph-color-text);font-weight:700}:host table.plan-table th label{color:var(--plangraph-color-brand)}:host table.plan-table .plan-description,:host table.plan-table .feature-description{display:block;max-width:100%;margin:0.25rem 0}:host table.plan-table td{vertical-align:top;border-bottom:var(--plangraph-border-secondary);border-left:var(--plangraph-border)}:host table.plan-table td.feature-name,:host table.plan-table th.feature-name{position:-webkit-sticky;position:sticky;border-right:var(--plangraph-border)}:host table.plan-table .feature-name{left:0;z-index:1;color:var(--plangraph-color-text);font-weight:600;font-size:14px;text-align:left}@media (min-width: 600px){:host table.plan-table .feature-name{font-size:16px}}:host table.plan-table th,:host table.plan-table td{padding:0.5rem;text-align:left;background-color:var(--plangraph-color-background)}@media (min-width: 600px){:host table.plan-table th,:host table.plan-table td{padding:1rem}}@media (min-width: 850px){:host table.plan-table th,:host table.plan-table td{padding:1rem}}:host table.plan-table th:nth-child(2),:host table.plan-table td:nth-child(2){border-left:none}:host table.plan-table th:last-child,:host table.plan-table td:last-child{border-right:var(--plangraph-border)}:host table.plan-table tr:first-child th{border-top:var(--plangraph-border)}:host table.plan-table tr:first-child th:first-child{border-top-left-radius:var(--plangraph-radius)}:host table.plan-table tr:first-child th:last-child{border-top-right-radius:var(--plangraph-radius)}:host table.plan-table tr:last-child td{border-bottom:var(--plangraph-border)}:host table.plan-table tr:last-child td:first-child{border-bottom-left-radius:var(--plangraph-radius)}:host table.plan-table tr:last-child td:last-child{border-bottom-right-radius:var(--plangraph-radius)}:host table.plan-table .plan-cell{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host table.plan-table.scrolled .feature-name{-webkit-box-shadow:0 0 30px 0 rgba(0, 0, 0, 0.15);box-shadow:0 0 30px 0 rgba(0, 0, 0, 0.15);-webkit-clip-path:inset(0 -30px 0 0);clip-path:inset(0 -30px 0 0)}:host table.plan-table.lg .feature-name{min-width:200px;max-width:400px}:host table.plan-table.md .feature-name{min-width:150px;max-width:300px}:host table.plan-table.sm{display:none}:host table.plan-table.sm .feature-name{min-width:100px;max-width:250px}:host table.plan-table.xs{display:none;max-width:478px}:host td button,:host td .button{position:relative;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10.5px 21px;color:#323940;font-weight:500;font-size:16px;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";line-height:1;white-space:nowrap;text-decoration:none;background:#ffffff;border-color:#c4c7ca;border-style:solid;border-width:1px;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);cursor:pointer;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:background-color, border-color, color, -webkit-box-shadow, -webkit-filter;transition-property:background-color, border-color, color, -webkit-box-shadow, -webkit-filter;transition-property:background-color, border-color, color, box-shadow, filter;transition-property:background-color, border-color, color, box-shadow, filter, -webkit-box-shadow, -webkit-filter;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;color:var(--plangraph-color-brand-accent);text-align:center;background:var(--plangraph-color-brand);border:none;border-radius:var(--plangraph-radius)}:host td button::before,:host td .button::before{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:2px solid #1e50da;border-radius:8px;-webkit-transform:scale(0.95, 0.9);transform:scale(0.95, 0.9);opacity:0;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5), -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);content:\"\";pointer-events:none}:host td button::-moz-focus-inner,:host td .button::-moz-focus-inner{border:0}:host td button:focus,:host td button:hover,:host td .button:focus,:host td .button:hover{border-color:#8f8f95}:host td button:focus,:host td .button:focus{outline:none}:host td button:focus::before,:host td .button:focus::before{-webkit-transform:scale(1);transform:scale(1);opacity:1;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, transform 150ms cubic-bezier(0, 0.5, 0.5, 1), -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1)}:host td button:active,:host td .button:active{-webkit-transform:translateY(1px);transform:translateY(1px)}:host td button:disabled,:host td .button:disabled{color:#8f8f95;background:#ececed;border:1px solid #c4c7ca;-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:0.8}:host td button:disabled:focus,:host td button:disabled:hover,:host td .button:disabled:focus,:host td .button:disabled:hover{color:#8f8f95;background:#ececed;border:1px solid #c4c7ca;-webkit-box-shadow:none;box-shadow:none}:host td button:disabled:focus::before,:host td .button:disabled:focus::before{opacity:0}:host td button:disabled:active,:host td .button:disabled:active{color:#8f8f95;background:#ececed;border-color:#c4c7ca;-webkit-box-shadow:none;box-shadow:none;-webkit-transform:none;transform:none}:host td button:disabled,:host td .button:disabled{color:var(--plangraph-color-disabled-accent);background:var(--plangraph-color-disabled);border-color:var(--plangraph-color-disabled)}:host td button:disabled:hover,:host td .button:disabled:hover{background:var(--plangraph-color-disabled);border-color:var(--plangraph-color-disabled)}:host td button:focus::before,:host td .button:focus::before{border-color:var(--plangraph-color-brand)}@media (min-width: 600px){:host td button,:host td .button{min-width:240px}}:host .icon{width:1.25rem;height:1.25rem}:host .icon svg{fill:#8f8f95}:host .icon.icon-green svg{fill:#31baa2}:host .toggle-feature{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .toggle-feature .Manifold-Toggle{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .toggle-feature .Manifold-Toggle::before{position:absolute;top:50%;right:-4px;width:2.75rem;height:1.75rem;border:2px solid #1e50da;border-radius:2rem;-webkit-transform:translateY(-50%) scale(0.9);transform:translateY(-50%) scale(0.9);opacity:0;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5), -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);content:\"\";pointer-events:none}:host .toggle-feature .Manifold-Toggle label{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:0;color:currentColor;cursor:pointer}@media (min-width: 600px){:host .toggle-feature .Manifold-Toggle label{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .toggle-feature .Manifold-Toggle label::before{-ms-flex-order:1;order:1;-webkit-box-sizing:border-box;box-sizing:border-box;width:2.5rem;height:1.5rem;margin-left:0.75rem;background:#ececed;border-radius:2rem;-webkit-transition:background-color 150ms linear;transition:background-color 150ms linear;content:\"\";pointer-events:none}:host .toggle-feature .Manifold-Toggle label::after{position:absolute;top:50%;right:0.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;width:1rem;height:1rem;background-color:#8f8f95;border-radius:50%;-webkit-transform:translate(-100%, -50%);transform:translate(-100%, -50%);-webkit-transition:background-color 150ms linear, -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04), -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);content:\"\"}:host .toggle-feature .Manifold-Toggle input{position:absolute;right:100vw;opacity:0}:host .toggle-feature .Manifold-Toggle input:disabled~label{cursor:default}:host .toggle-feature .Manifold-Toggle input:disabled~label::before{background:#ececed;border:1px solid #ddddde}:host .toggle-feature .Manifold-Toggle input:disabled~label::after{background:#ddddde;border:1px solid #c4c7ca}:host .toggle-feature .Manifold-Toggle input:disabled:checked~label::before{background:#ececed}:host .toggle-feature .Manifold-Toggle input:disabled:checked~label::after{background:#8f8f95;border:1px solid #8f8f95}:host .toggle-feature .Manifold-Toggle:focus-within{color:#1e50da}:host .toggle-feature .Manifold-Toggle:focus-within::before{-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);opacity:1}:host .toggle-feature .Manifold-Toggle input:checked~label::before{background:#dde9fe}:host .toggle-feature .Manifold-Toggle input:checked~label::after{background:#1e50da;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}:host .toggle-feature .Manifold-Toggle::before{border-color:var(--plangraph-color-brand)}:host .toggle-feature .Manifold-Toggle label::before{margin-left:0;background:var(--plangraph-color-text-secondary);opacity:0.2}:host .toggle-feature .Manifold-Toggle label::after{background:var(--plangraph-color-text-secondary)}:host .toggle-feature .Manifold-Toggle input:checked+label::before{margin-left:0;background:var(--plangraph-color-brand);opacity:0.2}:host .toggle-feature .Manifold-Toggle input:checked+label::after{background:var(--plangraph-color-brand)}:host .Manifold-Select{-webkit-transition:border-color 150ms linear;transition:border-color 150ms linear;width:100%}:host .Manifold-Select label{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;padding-bottom:0.25rem;color:#575b5f;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:color;transition-property:color}:host .Manifold-Select select{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:2.25em;margin:0;padding:0 1.5rem 0 0.75rem;color:#575b5f;line-height:2.25;background-color:#ffffff;background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%23575b5f\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');background-repeat:no-repeat, repeat;background-position:right 0.25rem top 50%;background-size:1.5rem auto;border:1px solid #c4c7ca;border-radius:4px;-webkit-transition:border-color 150ms linear, color 150ms linear;transition:border-color 150ms linear, color 150ms linear;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .Manifold-Select select::-ms-expand{display:none}:host .Manifold-Select select:hover{border-color:#8f8f95}:host .Manifold-Select select:focus{outline:none}@media (min-width: 600px){:host .Manifold-Select select{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .Manifold-Select option{font-weight:400}:host .Manifold-Select select:invalid,:host .Manifold-Select select[aria-invalid]{background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%23d52049\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');border-color:#d52049;-webkit-box-shadow:none;box-shadow:none}:host .Manifold-Select select:disabled{color:#8f8f95;background-color:#f7f7f8;background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%238f8f95\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');}:host .Manifold-Select select:disabled:hover{border-color:#c4c7ca}:host .Manifold-Select:focus-within label{color:#1e50da}:host .Manifold-Select:focus-within select{border-color:#1e50da}:host .Manifold-Select select{color:var(--plangraph-color-text);background-color:var(--plangraph-color-input-background);border:var(--plangraph-border)}:host .Manifold-Select select:focus{border-color:var(--plangraph-color-brand)}:host .Manifold-Select select.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .int-range-configured-feature{width:100%}:host .int-range-configured-feature .int-range-label{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}:host .int-range-configured-feature .int-range-label .label-bold{color:var(--plangraph-color-text);font-weight:500;text-transform:uppercase}:host .int-range-configured-feature .int-range-label .int-range-tooltip{z-index:10;display:-ms-flexbox;display:flex;margin-left:auto}:host .int-range-configured-feature .int-range-label .int-range-tooltip .icon{width:1em;height:1em}:host .int-range-configured-feature .label-limit{color:var(--plangraph-color-text-secondary)}:host .int-range-tooltip-content{text-align:left}:host .int-range-tooltip-content .int-range-tooltip-title{padding-bottom:6px;color:var(--plangraph-color-text-secondary);text-transform:uppercase}:host .int-range-tooltip-content .int-range-tooltip-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-width:100px}:host .int-range-tooltip-content .int-range-tooltip-row .int-range-tooltip-row-unit{text-align:right}:host option.string-select-cost{color:var(--plangraph-color-text-secondary)}:host .Manifold-Input{-webkit-transition:border-color 150ms linear;transition:border-color 150ms linear;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;width:100%;padding:6px 0}:host .Manifold-Input label{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;padding-bottom:0.25rem;color:#575b5f;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:color;transition-property:color}:host .Manifold-Input input{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;min-width:none;height:2.25rem;padding:0 0.75em;color:#323940;line-height:2.25rem;background:#ffffff;border:1px solid #c4c7ca;border-radius:3px;outline:0;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:border-color;transition-property:border-color;-webkit-appearance:none;appearance:none;-moz-appearance:textfield}@media (min-width: 600px){:host .Manifold-Input input{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .Manifold-Input input:hover{border-color:#8f8f95}:host .Manifold-Input input[type=number],:host .Manifold-Input input[inputmode=numeric],:host .Manifold-Input input[inputmode=decimal],:host .Manifold-Input input[pattern=\"[0-9]*\"],:host .Manifold-Input input[pattern^=\"\\a\"]{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2857;text-transform:none;font-family:\"IBM Plex Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace;text-align:right}:host .Manifold-Input input::-webkit-inner-spin-button,:host .Manifold-Input input::-webkit-outer-spin-button{display:none}:host .Manifold-Input input:invalid,:host .Manifold-Input input[aria-invalid]{border-color:#d52049;-webkit-box-shadow:none;box-shadow:none}:host .Manifold-Input input:disabled{color:#8f8f95;background:#f7f7f8;}:host .Manifold-Input input:disabled:hover{border-color:#c4c7ca}:host .Manifold-Input:focus-within label{color:#1e50da}:host .Manifold-Input:focus-within input{border-color:#1e50da}:host .Manifold-Input input{color:var(--plangraph-color-text);background-color:var(--plangraph-color-input-background);border:var(--plangraph-border)}:host .Manifold-Input input[type=number]{width:100%;padding:0.5em;text-align:left;border-top:border;border-right:none;border-bottom:border;border-left:none;border-radius:0}:host .Manifold-Input input[type=number]:focus{border-color:var(--plangraph-color-brand)}:host .Manifold-Input .Manifold-Tooltip__Container{-ms-flex:6 auto;flex:6 auto;min-width:7em}:host .Manifold-Input input.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .Manifold-Input button{display:-ms-flexbox;display:flex;-ms-flex:1 auto;flex:1 auto;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.25em;min-width:0;height:2.25em;padding:0;background-color:var(--plangraph-color-background);border:var(--plangraph-border)}:host .Manifold-Input button::before,:host .Manifold-Input button::after{border-color:var(--plangraph-color-brand)}:host .Manifold-Input button:first-child{border-radius:0.25em 0 0 0.25em}:host .Manifold-Input button:last-child{border-radius:0 0.25em 0.25em 0}:host .Manifold-Input button.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .Manifold-Input .helper{color:var(--plangraph-color-text-secondary);text-align:left}:host .excluded{color:var(--plangraph-color-text-secondary)}:host table.cost-tiers{-ms-flex-item-align:start;align-self:flex-start;width:100%}:host table.cost-tiers tr.label-bold,:host table.cost-tiers tr:first-child.label-bold,:host table.cost-tiers tr:last-child.label-bold{color:var(--plangraph-color-text);font-weight:600}:host table.cost-tiers tr td,:host table.cost-tiers tr th,:host table.cost-tiers tr:first-child td,:host table.cost-tiers tr:first-child th,:host table.cost-tiers tr:last-child td,:host table.cost-tiers tr:last-child th{padding:0.2rem 0;text-align:left;border:none}:host table.cost-tiers tr th,:host table.cost-tiers tr:first-child th,:host table.cost-tiers tr:last-child th{padding-top:0;color:var(--plangraph-color-text-secondary)}:host table.cost-tiers tr td:last-child,:host table.cost-tiers tr:first-child td:last-child,:host table.cost-tiers tr:last-child td:last-child{text-align:right;border-right:none}:host .plan-carousel .slides{display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-flow:row nowrap;flex-flow:row nowrap;width:100%;overflow:auto;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}:host .plan-carousel tr.feature-row>td{padding:0}:host .plan-carousel tr.feature-row>td .feature-cell,:host .plan-carousel tr.feature-row>td .value-cell{padding:1rem}:host .plan-carousel.sm tr.feature-row>td>div{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .plan-carousel.sm tr.feature-row>td>div .feature-cell{-ms-flex:1;flex:1}:host .plan-carousel.sm tr.feature-row>td>div .value-cell{display:grid;-ms-flex:1;flex:1}:host .plan-carousel.xs tr.feature-row>td .feature-cell{padding:0.5rem 0.5rem 0.25rem 0.5rem}:host .plan-carousel.xs tr.feature-row>td .value-cell{padding:0.25rem 0.5rem 0.5rem 0.5rem}:host .plan-carousel .slide{-ms-flex:none;flex:none;width:80%;max-height:calc(80vh - 4rem);overflow-x:hidden;overflow-y:auto;scroll-snap-align:center}:host .plan-carousel .slide>table{width:90%;margin:0 auto}:host .plan-carousel th.header-cell{position:-webkit-sticky;position:sticky;top:0;z-index:20}:host .plan-carousel .footer-cell{position:-webkit-sticky;position:sticky;bottom:0;z-index:20}:host .plan-carousel .slide:first-child{padding-left:10%}:host .plan-carousel .slide:last-child{padding-right:10%}:host .plan-carousel nav ol{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:4rem;margin:0;padding:0;list-style:none}:host .plan-carousel nav li{width:1rem;height:1rem;margin:0 1rem;padding:0;background-color:#c4c7ca;border-radius:1rem;cursor:pointer}:host .plan-carousel nav li.active{background-color:#8f8f95}";
 
@@ -176,2 +176,11 @@ const breakpoints = [
         });
+        this.getFeature = (planSlug, featureSlug) => {
+            var _a;
+            const plan = this.plans.find((p) => p.slug === planSlug);
+            if (!plan) {
+                throw new Error(`Could not find plan with slug ${planSlug}`);
+            }
+            const feature = (_a = plan.features) === null || _a === void 0 ? void 0 : _a.features.find((f) => f.featureSlug.slug === featureSlug);
+            return feature;
+        };
         this.ctaClick = index.createEvent(this, "ctaClick", 3);
@@ -383,9 +392,4 @@ this.featureSelected = index.createEvent(this, "featureSelected", 3);
     }
-    planCellForFeature(planSlug, featureSlug) {
-        var _a, _b, _c, _d, _e, _f;
-        const plan = this.plans.find((p) => p.slug === planSlug);
-        if (!plan) {
-            throw new Error(`Could not find plan with slug ${planSlug}`);
-        }
-        const feature = (_a = plan.features) === null || _a === void 0 ? void 0 : _a.features.find((f) => f.featureSlug.slug === featureSlug);
+    planCellForFeature({ plan, featureSlug: { slug: featureSlug }, feature, }) {
+        var _a, _b, _c, _d, _e;
         if (!feature) {
@@ -402,7 +406,7 @@ return index.h("span", { class: "excluded" }, "\u2022");
                 {
-                    const selectedValue = (_b = this.featureSelections[planSlug]) === null || _b === void 0 ? void 0 : _b.find((e) => e.slug === featureSlug);
-                    const currentError = (_c = this.featureErrors) === null || _c === void 0 ? void 0 : _c.find((e) => {
-                        return e.planSlug === planSlug && e.slug === featureSlug;
+                    const selectedValue = (_a = this.featureSelections[plan.slug]) === null || _a === void 0 ? void 0 : _a.find((e) => e.slug === featureSlug);
+                    const currentError = (_b = this.featureErrors) === null || _b === void 0 ? void 0 : _b.find((e) => {
+                        return e.planSlug === plan.slug && e.slug === featureSlug;
                     });
-                    return (index.h(StringSelect, { featureValues: feature.stringValues, featureSlug: featureSlug, planSlug: planSlug, value: selectedValue, onChange: (v) => {
+                    return (index.h(StringSelect, { featureValues: feature.stringValues, featureSlug: featureSlug, planSlug: plan.slug, value: selectedValue, onChange: (v) => {
                             if (v === '') {
@@ -429,6 +433,6 @@ this.removeFeature(plan.slug, plan.name, featureSlug);
                     // Toggle Feature
-                    const defaultValue = (_d = feature === null || feature === void 0 ? void 0 : feature.booleanValues) === null || _d === void 0 ? void 0 : _d.some((e) => e.default && e.value);
-                    return (index.h("div", { class: "toggle-feature" }, index.h("div", { class: "Manifold-Toggle" }, index.h("input", { name: featureSlug, id: `feature-${planSlug}-${featureSlug}`, "aria-labelledby": `feature-${featureSlug}`, type: "checkbox", value: "on", checked: defaultValue, onChange: (e) => {
-                            this.selectFeature(planSlug, plan.name, featureSlug, e.target.checked);
-                        } }), index.h("label", { htmlFor: `feature-${planSlug}-${featureSlug}` }))));
+                    const defaultValue = (_c = feature === null || feature === void 0 ? void 0 : feature.booleanValues) === null || _c === void 0 ? void 0 : _c.some((e) => e.default && e.value);
+                    return (index.h("div", { class: "toggle-feature" }, index.h("div", { class: "Manifold-Toggle" }, index.h("input", { name: featureSlug, id: `feature-${plan.slug}-${featureSlug}`, "aria-labelledby": `feature-${featureSlug}`, type: "checkbox", value: "on", checked: defaultValue, onChange: (e) => {
+                            this.selectFeature(plan.slug, plan.name, featureSlug, e.target.checked);
+                        } }), index.h("label", { htmlFor: `feature-${plan.slug}-${featureSlug}` }))));
                 }
@@ -441,3 +445,3 @@ case 'IntFeature':
                 // Select Feature
-                return (index.h("div", { class: "Manifold-Select" }, index.h("label", { htmlFor: `feature-${planSlug}-${featureSlug}` }), index.h("select", { id: `feature-${planSlug}-${featureSlug}` }, feature.intValues.map((value) => {
+                return (index.h("div", { class: "Manifold-Select" }, index.h("label", { htmlFor: `feature-${plan.slug}-${featureSlug}` }), index.h("select", { id: `feature-${plan.slug}-${featureSlug}` }, feature.intValues.map((value) => {
                     var _a;
@@ -449,3 +453,3 @@ return (index.h("option", { value: (_a = value.value) === null || _a === void 0 ? void 0 : _a.toString() }, `${value.display} (${helpCircle.toUSD(value.cost)})`));
                     // Pay as you go feature
-                    return (index.h("table", { class: "cost-tiers" }, index.h("thead", null, index.h("tr", null, index.h("th", { colSpan: 2, class: "Manifold-Typography--Caption" }, "Billed per ", ((_e = feature.units) === null || _e === void 0 ? void 0 : _e.single) || 'unit'))), index.h("tbody", null, feature.intRangeValues.sort(helpCircle.compareRange).map((range, idx) => {
+                    return (index.h("table", { class: "cost-tiers" }, index.h("thead", null, index.h("tr", null, index.h("th", { colSpan: 2, class: "Manifold-Typography--Caption" }, "Billed per ", ((_d = feature.units) === null || _d === void 0 ? void 0 : _d.single) || 'unit'))), index.h("tbody", null, feature.intRangeValues.sort(helpCircle.compareRange).map((range, idx) => {
                         var _a;
@@ -456,11 +460,11 @@ return (index.h("tr", { class: "Manifold-Typography--Label label-bold" }, index.h("td", null, helpCircle.displayRange(range.min, range.max, idx)), index.h("td", null, helpCircle.toUSD(range.cost), " / ", ((_a = feature.units) === null || _a === void 0 ? void 0 : _a.single) || 'unit')));
                 {
-                    if (!this.featureSelections[planSlug]) {
-                        this.featureSelections[planSlug] = [];
+                    if (!this.featureSelections[plan.slug]) {
+                        this.featureSelections[plan.slug] = [];
                     }
-                    const selectedValue = this.featureSelections[planSlug].find((e) => e.slug === featureSlug);
+                    const selectedValue = this.featureSelections[plan.slug].find((e) => e.slug === featureSlug);
                     const currentError = this.featureErrors.find((e) => {
-                        return e.planSlug === planSlug && e.slug === featureSlug;
+                        return e.planSlug === plan.slug && e.slug === featureSlug;
                     });
                     // Numeric Range Feature
-                    return (index.h(ConfiguredTiers, { featureValues: feature.intRangeValues, unit: (_f = feature.units) === null || _f === void 0 ? void 0 : _f.plural, featureSlug: featureSlug, planSlug: plan.slug, value: selectedValue, error: currentError, onChange: (v) => {
+                    return (index.h(ConfiguredTiers, { featureValues: feature.intRangeValues, unit: (_e = feature.units) === null || _e === void 0 ? void 0 : _e.plural, featureSlug: featureSlug, planSlug: plan.slug, value: selectedValue, error: currentError, onChange: (v) => {
                             this.removeFeatureSelectionError(plan.slug, featureSlug);
@@ -516,3 +520,6 @@ this.selectFeature(plan.slug, plan.name, featureSlug, v);
     renderTable() {
-        return (index.h("table", { class: `Manifold-Typography--Body plan-table ${this.breakpoint} ${this.scrolled ? 'scrolled' : ''}`, part: "table" }, index.h("thead", null, index.h("tr", null, index.h("th", { class: "feature-name", part: "feature-header-cell cell feature-cell header-cell" }), this.plans.map((plan) => this.renderHeaderCell(plan)))), index.h("tbody", null, this.featureSlugs.map((featureSlug) => (index.h("tr", null, index.h("td", { class: "feature-name", part: "cell feature-cell" }, featureSlug.name, featureSlug.description && (index.h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))), this.plans.map((plan) => (index.h("td", { part: `plan--${plan.slug} cell value-cell` }, index.h("div", { class: "plan-cell" }, this.planCellForFeature(plan.slug, featureSlug.slug)))))))), index.h("tr", null, index.h("td", { class: "feature-name", part: "footer-cell feature-cell feature-footer-cell" }), this.plans.map((plan) => this.renderCTA(plan))))));
+        return (index.h("table", { class: `Manifold-Typography--Body plan-table ${this.breakpoint} ${this.scrolled ? 'scrolled' : ''}`, part: "table" }, index.h("thead", null, index.h("tr", null, index.h("th", { class: "feature-name", part: "feature-header-cell cell feature-cell header-cell" }), this.plans.map((plan) => this.renderHeaderCell(plan)))), index.h("tbody", null, this.featureSlugs.map((featureSlug) => (index.h("tr", null, index.h("td", { class: "feature-name", part: "cell feature-cell" }, featureSlug.name, featureSlug.description && (index.h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))), this.plans.map((plan) => {
+            const feature = this.getFeature(plan.slug, featureSlug.slug);
+            return (index.h("td", { part: `plan--${plan.slug} cell value-cell` }, index.h("div", { class: "plan-cell" }, this.planCellForFeature({ plan, featureSlug, feature })), (feature === null || feature === void 0 ? void 0 : feature.description) && (index.h("p", { class: "Manifold-Typography--Caption feature-description" }, feature === null || feature === void 0 ? void 0 : feature.description))));
+        })))), index.h("tr", null, index.h("td", { class: "feature-name", part: "footer-cell feature-cell feature-footer-cell" }), this.plans.map((plan) => this.renderCTA(plan))))));
     }
@@ -531,14 +538,17 @@ renderCarousel() {
                     .set(plan.slug, el);
-            } }, this.renderHeaderCell(plan))), index.h("tbody", null, this.featureSlugs.map((featureSlug) => (index.h("tr", { class: "feature-row", ref: (el) => {
-                if (!this.carouselRows.get(featureSlug.slug)) {
-                    this.carouselRows.set(featureSlug.slug, new Map());
-                }
-                this.carouselRows
-                    .get(featureSlug.slug)
-                    .set(plan.slug, el);
-            } }, index.h("td", null, index.h("div", { style: {
-                minHeight: this.maxRowHeights
-                    ? `calc(${this.maxRowHeights.get(featureSlug.slug)}px - 1px)` // account for borders
-                    : '0',
-            } }, index.h("div", { class: "feature-name feature-cell", part: "cell feature-cell" }, featureSlug.name, featureSlug.description && (index.h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))), index.h("div", { class: "value-cell", part: `plan--${plan.slug} cell value-cell` }, index.h("div", { class: "plan-cell" }, this.planCellForFeature(plan.slug, featureSlug.slug)))))))), index.h("tr", null, this.renderCTA(plan)))))))), index.h("nav", null, index.h("ol", null, this.plans.map((_plan, index$1) => (index.h("li", { class: index$1 === this.currentSlide ? 'active' : '', onClick: () => this.scrollCarouselTo(index$1) })))))));
+            } }, this.renderHeaderCell(plan))), index.h("tbody", null, this.featureSlugs.map((featureSlug) => {
+            const feature = this.getFeature(plan.slug, featureSlug.slug);
+            return (index.h("tr", { class: "feature-row", ref: (el) => {
+                    if (!this.carouselRows.get(featureSlug.slug)) {
+                        this.carouselRows.set(featureSlug.slug, new Map());
+                    }
+                    this.carouselRows
+                        .get(featureSlug.slug)
+                        .set(plan.slug, el);
+                } }, index.h("td", null, index.h("div", { style: {
+                    minHeight: this.maxRowHeights
+                        ? `calc(${this.maxRowHeights.get(featureSlug.slug)}px - 1px)` // account for borders
+                        : '0',
+                } }, index.h("div", { class: "feature-name feature-cell", part: "cell feature-cell" }, featureSlug.name, featureSlug.description && (index.h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))), index.h("div", { class: "value-cell", part: `plan--${plan.slug} cell value-cell` }, index.h("div", { class: "plan-cell" }, this.planCellForFeature({ plan, featureSlug, feature })), (feature === null || feature === void 0 ? void 0 : feature.description) && (index.h("p", { class: "Manifold-Typography--Caption feature-description" }, feature === null || feature === void 0 ? void 0 : feature.description)))))));
+        }), index.h("tr", null, this.renderCTA(plan)))))))), index.h("nav", null, index.h("ol", null, this.plans.map((_plan, index$1) => (index.h("li", { class: index$1 === this.currentSlide ? 'active' : '', onClick: () => this.scrollCarouselTo(index$1) })))))));
     }
@@ -545,0 +555,0 @@ render() {

dist/collection/components/manifold-plan-table/manifold-plan-table.js

@@ -573,3 +573,3 @@ import { Component, Element, Event, Host, State, Prop, h, Watch, Listen, } from '@stencil/core';
                 "original": "EmbeddedProductQuery['embeddedProduct']",
-                "resolved": "null | undefined | { __typename?: \"EmbeddedProduct\" | undefined; } & Pick<EmbeddedProduct, \"slug\" | \"name\"> & { featureSlugs?: ({ __typename?: \"FeatureSlugPage\" | undefined; } & { featureSlugs: ({ __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\" | \"name\" | \"description\">)[]; }) | null | undefined; plans?: ({ __typename?: \"PlanPage\" | undefined; } & { plans: ({ __typename?: \"Plan\" | undefined; } & Pick<Plan, \"slug\" | \"name\" | \"description\" | \"cost\"> & { features?: ({ __typename?: \"FeaturePage\" | undefined; } & { features: (({ __typename: \"ExcludedFeature\"; } & Pick<ExcludedFeature, \"class\"> & { featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"BooleanFeature\"; } & Pick<BooleanFeature, \"class\"> & { booleanValues: ({ __typename?: \"BooleanFeatureValue\" | undefined; } & Pick<BooleanFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"IntRangeFeature\"; } & Pick<IntRangeFeature, \"class\"> & { intRangeValues: ({ __typename?: \"IntRangeFeatureValue\" | undefined; } & Pick<IntRangeFeatureValue, \"cost\" | \"min\" | \"max\" | \"increments\">)[]; units?: ({ __typename?: \"Units\" | undefined; } & Pick<Units, \"single\" | \"plural\">) | null | undefined; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"IntFeature\"; } & Pick<IntFeature, \"class\"> & { intValues: ({ __typename?: \"IntFeatureValue\" | undefined; } & Pick<IntFeatureValue, \"cost\" | \"display\" | \"value\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"StringFeature\"; } & Pick<StringFeature, \"class\"> & { stringValues: ({ __typename?: \"StringFeatureValue\" | undefined; } & Pick<StringFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }))[]; }) | null | undefined; cta?: ({ __typename?: \"Cta\" | undefined; } & Pick<Cta, \"text\" | \"uri\">) | null | undefined; })[]; }) | null | undefined; }",
+                "resolved": "null | undefined | { __typename?: \"EmbeddedProduct\" | undefined; } & Pick<EmbeddedProduct, \"slug\" | \"name\"> & { featureSlugs?: ({ __typename?: \"FeatureSlugPage\" | undefined; } & { featureSlugs: ({ __typename?: \"FeatureSlug\" | undefined; } & { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\" | \"name\" | \"description\">)[]; }) | null | undefined; plans?: ({ __typename?: \"PlanPage\" | undefined; } & { plans: ({ __typename?: \"Plan\" | undefined; } & { __typename?: \"Plan\" | undefined; } & Pick<Plan, \"slug\" | \"name\" | \"description\" | \"cost\"> & { features?: ({ __typename?: \"FeaturePage\" | undefined; } & { features: (({ __typename?: \"StringFeature\" | undefined; } & { __typename: \"StringFeature\"; } & Pick<StringFeature, \"description\" | \"class\"> & { stringValues: ({ __typename?: \"StringFeatureValue\" | undefined; } & Pick<StringFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename?: \"IntRangeFeature\" | undefined; } & { __typename: \"IntRangeFeature\"; } & Pick<IntRangeFeature, \"description\" | \"class\"> & { intRangeValues: ({ __typename?: \"IntRangeFeatureValue\" | undefined; } & Pick<IntRangeFeatureValue, \"cost\" | \"min\" | \"max\" | \"increments\">)[]; units?: ({ __typename?: \"Units\" | undefined; } & Pick<Units, \"single\" | \"plural\">) | null | undefined; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename?: \"ExcludedFeature\" | undefined; } & { __typename: \"ExcludedFeature\"; } & Pick<ExcludedFeature, \"description\" | \"class\"> & { featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename?: \"BooleanFeature\" | undefined; } & { __typename: \"BooleanFeature\"; } & Pick<BooleanFeature, \"description\" | \"class\"> & { booleanValues: ({ __typename?: \"BooleanFeatureValue\" | undefined; } & Pick<BooleanFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename?: \"IntFeature\" | undefined; } & { __typename: \"IntFeature\"; } & Pick<IntFeature, \"description\" | \"class\"> & { intValues: ({ __typename?: \"IntFeatureValue\" | undefined; } & Pick<IntFeatureValue, \"cost\" | \"display\" | \"value\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }))[]; }) | null | undefined; cta?: ({ __typename?: \"Cta\" | undefined; } & Pick<Cta, \"text\" | \"uri\">) | null | undefined; })[]; }) | null | undefined; }",
                 "references": {
@@ -576,0 +576,0 @@ "EmbeddedProductQuery": {

dist/collection/components/plangraph-plan-table/plangraph-plan-table.js

@@ -42,2 +42,11 @@ import { Component, Element, Event, Host, State, Prop, h, Watch, Listen, } from '@stencil/core';
         });
+        this.getFeature = (planSlug, featureSlug) => {
+            var _a;
+            const plan = this.plans.find((p) => p.slug === planSlug);
+            if (!plan) {
+                throw new Error(`Could not find plan with slug ${planSlug}`);
+            }
+            const feature = (_a = plan.features) === null || _a === void 0 ? void 0 : _a.features.find((f) => f.featureSlug.slug === featureSlug);
+            return feature;
+        };
     }
@@ -247,9 +256,4 @@ updateProductData(newValue) {
     }
-    planCellForFeature(planSlug, featureSlug) {
-        var _a, _b, _c, _d, _e, _f;
-        const plan = this.plans.find((p) => p.slug === planSlug);
-        if (!plan) {
-            throw new Error(`Could not find plan with slug ${planSlug}`);
-        }
-        const feature = (_a = plan.features) === null || _a === void 0 ? void 0 : _a.features.find((f) => f.featureSlug.slug === featureSlug);
+    planCellForFeature({ plan, featureSlug: { slug: featureSlug }, feature, }) {
+        var _a, _b, _c, _d, _e;
         if (!feature) {
@@ -266,7 +270,7 @@ return h("span", { class: "excluded" }, "\u2022");
                 {
-                    const selectedValue = (_b = this.featureSelections[planSlug]) === null || _b === void 0 ? void 0 : _b.find((e) => e.slug === featureSlug);
-                    const currentError = (_c = this.featureErrors) === null || _c === void 0 ? void 0 : _c.find((e) => {
-                        return e.planSlug === planSlug && e.slug === featureSlug;
+                    const selectedValue = (_a = this.featureSelections[plan.slug]) === null || _a === void 0 ? void 0 : _a.find((e) => e.slug === featureSlug);
+                    const currentError = (_b = this.featureErrors) === null || _b === void 0 ? void 0 : _b.find((e) => {
+                        return e.planSlug === plan.slug && e.slug === featureSlug;
                     });
-                    return (h(StringSelect, { featureValues: feature.stringValues, featureSlug: featureSlug, planSlug: planSlug, value: selectedValue, onChange: (v) => {
+                    return (h(StringSelect, { featureValues: feature.stringValues, featureSlug: featureSlug, planSlug: plan.slug, value: selectedValue, onChange: (v) => {
                             if (v === '') {
@@ -293,9 +297,9 @@ this.removeFeature(plan.slug, plan.name, featureSlug);
                     // Toggle Feature
-                    const defaultValue = (_d = feature === null || feature === void 0 ? void 0 : feature.booleanValues) === null || _d === void 0 ? void 0 : _d.some((e) => e.default && e.value);
+                    const defaultValue = (_c = feature === null || feature === void 0 ? void 0 : feature.booleanValues) === null || _c === void 0 ? void 0 : _c.some((e) => e.default && e.value);
                     return (h("div", { class: "toggle-feature" },
                         h("div", { class: "Manifold-Toggle" },
-                            h("input", { name: featureSlug, id: `feature-${planSlug}-${featureSlug}`, "aria-labelledby": `feature-${featureSlug}`, type: "checkbox", value: "on", checked: defaultValue, onChange: (e) => {
-                                    this.selectFeature(planSlug, plan.name, featureSlug, e.target.checked);
+                            h("input", { name: featureSlug, id: `feature-${plan.slug}-${featureSlug}`, "aria-labelledby": `feature-${featureSlug}`, type: "checkbox", value: "on", checked: defaultValue, onChange: (e) => {
+                                    this.selectFeature(plan.slug, plan.name, featureSlug, e.target.checked);
                                 } }),
-                            h("label", { htmlFor: `feature-${planSlug}-${featureSlug}` }))));
+                            h("label", { htmlFor: `feature-${plan.slug}-${featureSlug}` }))));
                 }
@@ -309,4 +313,4 @@ case 'IntFeature':
                 return (h("div", { class: "Manifold-Select" },
-                    h("label", { htmlFor: `feature-${planSlug}-${featureSlug}` }),
-                    h("select", { id: `feature-${planSlug}-${featureSlug}` }, feature.intValues.map((value) => {
+                    h("label", { htmlFor: `feature-${plan.slug}-${featureSlug}` }),
+                    h("select", { id: `feature-${plan.slug}-${featureSlug}` }, feature.intValues.map((value) => {
                         var _a;
@@ -323,3 +327,3 @@ return (h("option", { value: (_a = value.value) === null || _a === void 0 ? void 0 : _a.toString() }, `${value.display} (${toUSD(value.cost)})`));
                                     "Billed per ",
-                                    ((_e = feature.units) === null || _e === void 0 ? void 0 : _e.single) || 'unit'))),
+                                    ((_d = feature.units) === null || _d === void 0 ? void 0 : _d.single) || 'unit'))),
                         h("tbody", null, feature.intRangeValues.sort(compareRange).map((range, idx) => {
@@ -336,11 +340,11 @@ var _a;
                 {
-                    if (!this.featureSelections[planSlug]) {
-                        this.featureSelections[planSlug] = [];
+                    if (!this.featureSelections[plan.slug]) {
+                        this.featureSelections[plan.slug] = [];
                     }
-                    const selectedValue = this.featureSelections[planSlug].find((e) => e.slug === featureSlug);
+                    const selectedValue = this.featureSelections[plan.slug].find((e) => e.slug === featureSlug);
                     const currentError = this.featureErrors.find((e) => {
-                        return e.planSlug === planSlug && e.slug === featureSlug;
+                        return e.planSlug === plan.slug && e.slug === featureSlug;
                     });
                     // Numeric Range Feature
-                    return (h(ConfiguredTiers, { featureValues: feature.intRangeValues, unit: (_f = feature.units) === null || _f === void 0 ? void 0 : _f.plural, featureSlug: featureSlug, planSlug: plan.slug, value: selectedValue, error: currentError, onChange: (v) => {
+                    return (h(ConfiguredTiers, { featureValues: feature.intRangeValues, unit: (_e = feature.units) === null || _e === void 0 ? void 0 : _e.plural, featureSlug: featureSlug, planSlug: plan.slug, value: selectedValue, error: currentError, onChange: (v) => {
                             this.removeFeatureSelectionError(plan.slug, featureSlug);
@@ -412,4 +416,8 @@ this.selectFeature(plan.slug, plan.name, featureSlug, v);
                         featureSlug.description && (h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))),
-                    this.plans.map((plan) => (h("td", { part: `plan--${plan.slug} cell value-cell` },
-                        h("div", { class: "plan-cell" }, this.planCellForFeature(plan.slug, featureSlug.slug)))))))),
+                    this.plans.map((plan) => {
+                        const feature = this.getFeature(plan.slug, featureSlug.slug);
+                        return (h("td", { part: `plan--${plan.slug} cell value-cell` },
+                            h("div", { class: "plan-cell" }, this.planCellForFeature({ plan, featureSlug, feature })),
+                            (feature === null || feature === void 0 ? void 0 : feature.description) && (h("p", { class: "Manifold-Typography--Caption feature-description" }, feature === null || feature === void 0 ? void 0 : feature.description))));
+                    })))),
                 h("tr", null,
@@ -437,21 +445,25 @@ h("td", { class: "feature-name", part: "footer-cell feature-cell feature-footer-cell" }),
                     h("tbody", null,
-                        this.featureSlugs.map((featureSlug) => (h("tr", { class: "feature-row", ref: (el) => {
-                                if (!this.carouselRows.get(featureSlug.slug)) {
-                                    this.carouselRows.set(featureSlug.slug, new Map());
-                                }
-                                this.carouselRows
-                                    .get(featureSlug.slug)
-                                    .set(plan.slug, el);
-                            } },
-                            h("td", null,
-                                h("div", { style: {
-                                        minHeight: this.maxRowHeights
-                                            ? `calc(${this.maxRowHeights.get(featureSlug.slug)}px - 1px)` // account for borders
-                                            : '0',
-                                    } },
-                                    h("div", { class: "feature-name feature-cell", part: "cell feature-cell" },
-                                        featureSlug.name,
-                                        featureSlug.description && (h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))),
-                                    h("div", { class: "value-cell", part: `plan--${plan.slug} cell value-cell` },
-                                        h("div", { class: "plan-cell" }, this.planCellForFeature(plan.slug, featureSlug.slug)))))))),
+                        this.featureSlugs.map((featureSlug) => {
+                            const feature = this.getFeature(plan.slug, featureSlug.slug);
+                            return (h("tr", { class: "feature-row", ref: (el) => {
+                                    if (!this.carouselRows.get(featureSlug.slug)) {
+                                        this.carouselRows.set(featureSlug.slug, new Map());
+                                    }
+                                    this.carouselRows
+                                        .get(featureSlug.slug)
+                                        .set(plan.slug, el);
+                                } },
+                                h("td", null,
+                                    h("div", { style: {
+                                            minHeight: this.maxRowHeights
+                                                ? `calc(${this.maxRowHeights.get(featureSlug.slug)}px - 1px)` // account for borders
+                                                : '0',
+                                        } },
+                                        h("div", { class: "feature-name feature-cell", part: "cell feature-cell" },
+                                            featureSlug.name,
+                                            featureSlug.description && (h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))),
+                                        h("div", { class: "value-cell", part: `plan--${plan.slug} cell value-cell` },
+                                            h("div", { class: "plan-cell" }, this.planCellForFeature({ plan, featureSlug, feature })),
+                                            (feature === null || feature === void 0 ? void 0 : feature.description) && (h("p", { class: "Manifold-Typography--Caption feature-description" }, feature === null || feature === void 0 ? void 0 : feature.description)))))));
+                        }),
                         h("tr", null, this.renderCTA(plan)))))))),
@@ -586,3 +598,3 @@ h("nav", null,
                 "original": "EmbeddedProductQuery['embeddedProduct']",
-                "resolved": "null | undefined | { __typename?: \"EmbeddedProduct\" | undefined; } & Pick<EmbeddedProduct, \"slug\" | \"name\"> & { featureSlugs?: ({ __typename?: \"FeatureSlugPage\" | undefined; } & { featureSlugs: ({ __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\" | \"name\" | \"description\">)[]; }) | null | undefined; plans?: ({ __typename?: \"PlanPage\" | undefined; } & { plans: ({ __typename?: \"Plan\" | undefined; } & Pick<Plan, \"slug\" | \"name\" | \"description\" | \"cost\"> & { features?: ({ __typename?: \"FeaturePage\" | undefined; } & { features: (({ __typename: \"ExcludedFeature\"; } & Pick<ExcludedFeature, \"class\"> & { featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"BooleanFeature\"; } & Pick<BooleanFeature, \"class\"> & { booleanValues: ({ __typename?: \"BooleanFeatureValue\" | undefined; } & Pick<BooleanFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"IntRangeFeature\"; } & Pick<IntRangeFeature, \"class\"> & { intRangeValues: ({ __typename?: \"IntRangeFeatureValue\" | undefined; } & Pick<IntRangeFeatureValue, \"cost\" | \"min\" | \"max\" | \"increments\">)[]; units?: ({ __typename?: \"Units\" | undefined; } & Pick<Units, \"single\" | \"plural\">) | null | undefined; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"IntFeature\"; } & Pick<IntFeature, \"class\"> & { intValues: ({ __typename?: \"IntFeatureValue\" | undefined; } & Pick<IntFeatureValue, \"cost\" | \"display\" | \"value\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename: \"StringFeature\"; } & Pick<StringFeature, \"class\"> & { stringValues: ({ __typename?: \"StringFeatureValue\" | undefined; } & Pick<StringFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }))[]; }) | null | undefined; cta?: ({ __typename?: \"Cta\" | undefined; } & Pick<Cta, \"text\" | \"uri\">) | null | undefined; })[]; }) | null | undefined; }",
+                "resolved": "null | undefined | { __typename?: \"EmbeddedProduct\" | undefined; } & Pick<EmbeddedProduct, \"slug\" | \"name\"> & { featureSlugs?: ({ __typename?: \"FeatureSlugPage\" | undefined; } & { featureSlugs: ({ __typename?: \"FeatureSlug\" | undefined; } & { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\" | \"name\" | \"description\">)[]; }) | null | undefined; plans?: ({ __typename?: \"PlanPage\" | undefined; } & { plans: ({ __typename?: \"Plan\" | undefined; } & { __typename?: \"Plan\" | undefined; } & Pick<Plan, \"slug\" | \"name\" | \"description\" | \"cost\"> & { features?: ({ __typename?: \"FeaturePage\" | undefined; } & { features: (({ __typename?: \"StringFeature\" | undefined; } & { __typename: \"StringFeature\"; } & Pick<StringFeature, \"description\" | \"class\"> & { stringValues: ({ __typename?: \"StringFeatureValue\" | undefined; } & Pick<StringFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename?: \"IntRangeFeature\" | undefined; } & { __typename: \"IntRangeFeature\"; } & Pick<IntRangeFeature, \"description\" | \"class\"> & { intRangeValues: ({ __typename?: \"IntRangeFeatureValue\" | undefined; } & Pick<IntRangeFeatureValue, \"cost\" | \"min\" | \"max\" | \"increments\">)[]; units?: ({ __typename?: \"Units\" | undefined; } & Pick<Units, \"single\" | \"plural\">) | null | undefined; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename?: \"ExcludedFeature\" | undefined; } & { __typename: \"ExcludedFeature\"; } & Pick<ExcludedFeature, \"description\" | \"class\"> & { featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename?: \"BooleanFeature\" | undefined; } & { __typename: \"BooleanFeature\"; } & Pick<BooleanFeature, \"description\" | \"class\"> & { booleanValues: ({ __typename?: \"BooleanFeatureValue\" | undefined; } & Pick<BooleanFeatureValue, \"cost\" | \"display\" | \"value\" | \"default\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }) | ({ __typename?: \"IntFeature\" | undefined; } & { __typename: \"IntFeature\"; } & Pick<IntFeature, \"description\" | \"class\"> & { intValues: ({ __typename?: \"IntFeatureValue\" | undefined; } & Pick<IntFeatureValue, \"cost\" | \"display\" | \"value\">)[]; featureSlug: { __typename?: \"FeatureSlug\" | undefined; } & Pick<FeatureSlug, \"slug\">; }))[]; }) | null | undefined; cta?: ({ __typename?: \"Cta\" | undefined; } & Pick<Cta, \"text\" | \"uri\">) | null | undefined; })[]; }) | null | undefined; }",
                 "references": {
@@ -589,0 +601,0 @@ "EmbeddedProductQuery": {

dist/collection/types/graphql.js

@@ -0,1 +1,19 @@
+/** FilterBy values for feature slug visibility. */
+export var FeatureSlugVisibilityFilter;
+(function (FeatureSlugVisibilityFilter) {
+    /** Select all feature slugs. */
+    FeatureSlugVisibilityFilter["All"] = "ALL";
+    /** Select only feature slugs which are marked hidden. */
+    FeatureSlugVisibilityFilter["Hidden"] = "HIDDEN";
+    /** Select only feature slugs which are marked visible. */
+    FeatureSlugVisibilityFilter["Visible"] = "VISIBLE";
+})(FeatureSlugVisibilityFilter || (FeatureSlugVisibilityFilter = {}));
+/** FeatureOrderByField is the field by which the feature list will be ordered. */
+export var FeatureOrderByField;
+(function (FeatureOrderByField) {
+    /** Order by the feature class. */
+    FeatureOrderByField["Class"] = "CLASS";
+    /** Order by the feature type. */
+    FeatureOrderByField["Type"] = "TYPE";
+})(FeatureOrderByField || (FeatureOrderByField = {}));
 /** CostType describes how the cost for a specific feature is calculated. */
@@ -16,45 +34,23 @@ export var CostType;
 })(CostType || (CostType = {}));
-/** Plan visibility options. */
-export var PlanVisibility;
-(function (PlanVisibility) {
-    /** Only hidden plans. */
-    PlanVisibility["Hidden"] = "HIDDEN";
-    /** Only visible plans. */
-    PlanVisibility["Visible"] = "VISIBLE";
-})(PlanVisibility || (PlanVisibility = {}));
-/** FeatureOrderByField is the field by which the feature list will be ordered. */
-export var FeatureOrderByField;
-(function (FeatureOrderByField) {
-    /** Order by the feature class. */
-    FeatureOrderByField["Class"] = "CLASS";
-    /** Order by the feature type. */
-    FeatureOrderByField["Type"] = "TYPE";
-})(FeatureOrderByField || (FeatureOrderByField = {}));
+/** Visibility options for feature slugs. */
+export var FeatureSlugVisibility;
+(function (FeatureSlugVisibility) {
+    /** Filter feature slugs how are hidden. */
+    FeatureSlugVisibility["Hidden"] = "HIDDEN";
+    /** Filter feature slugs which are visible. */
+    FeatureSlugVisibility["Visible"] = "VISIBLE";
+})(FeatureSlugVisibility || (FeatureSlugVisibility = {}));
 /**
- * OrderByDirection is used in all paginated queries to order by a specific
- * field's direction.
+ * The classes of features we support in our system. This is used to distinguish
+ * between an abstract Feature type.
  */
-export var OrderByDirection;
-(function (OrderByDirection) {
-    /** Sort the data in ascending order. */
-    OrderByDirection["Asc"] = "ASC";
-    /** Sort the data in descending order. */
-    OrderByDirection["Desc"] = "DESC";
-})(OrderByDirection || (OrderByDirection = {}));
-/**
- * FeatureSlugOrderByField is the field by which the feature slug list will be
- * ordered.
- */
-export var FeatureSlugOrderByField;
-(function (FeatureSlugOrderByField) {
-    /** Order feature slugs by their name. */
-    FeatureSlugOrderByField["Name"] = "NAME";
-    /**
-     * Order feature slugs by their configured position in relation to to the product
-     * they belong to.
-     */
-    FeatureSlugOrderByField["Position"] = "POSITION";
-    /** Order features by their configured slug. */
-    FeatureSlugOrderByField["Slug"] = "SLUG";
-})(FeatureSlugOrderByField || (FeatureSlugOrderByField = {}));
+export var FeatureClass;
+(function (FeatureClass) {
+    /** A set of pre-configured features with a range of tiers. */
+    FeatureClass["Configured"] = "CONFIGURED";
+    /** A fixed feature, such as a string of text or a fixed number. */
+    FeatureClass["Fixed"] = "FIXED";
+    /** A usage based feature, where usage is bucketed in a range of tiers. */
+    FeatureClass["Metered"] = "METERED";
+})(FeatureClass || (FeatureClass = {}));
 /** The state of the product. */
@@ -73,15 +69,2 @@ export var ProductState;
 })(ProductState || (ProductState = {}));
-/**
- * The classes of features we support in our system. This is used to distinguish
- * between an abstract Feature type.
- */
-export var FeatureClass;
-(function (FeatureClass) {
-    /** A set of pre-configured features with a range of tiers. */
-    FeatureClass["Configured"] = "CONFIGURED";
-    /** A fixed feature, such as a string of text or a fixed number. */
-    FeatureClass["Fixed"] = "FIXED";
-    /** A usage based feature, where usage is bucketed in a range of tiers. */
-    FeatureClass["Metered"] = "METERED";
-})(FeatureClass || (FeatureClass = {}));
 /** FilterBy values for plan visibility. */
@@ -97,2 +80,37 @@ export var PlanVisibilityFilter;
 })(PlanVisibilityFilter || (PlanVisibilityFilter = {}));
+/**
+ * FeatureSlugOrderByField is the field by which the feature slug list will be
+ * ordered.
+ */
+export var FeatureSlugOrderByField;
+(function (FeatureSlugOrderByField) {
+    /** Order feature slugs by their name. */
+    FeatureSlugOrderByField["Name"] = "NAME";
+    /**
+     * Order feature slugs by their configured position in relation to to the product
+     * they belong to.
+     */
+    FeatureSlugOrderByField["Position"] = "POSITION";
+    /** Order features by their configured slug. */
+    FeatureSlugOrderByField["Slug"] = "SLUG";
+})(FeatureSlugOrderByField || (FeatureSlugOrderByField = {}));
+/**
+ * OrderByDirection is used in all paginated queries to order by a specific
+ * field's direction.
+ */
+export var OrderByDirection;
+(function (OrderByDirection) {
+    /** Sort the data in ascending order. */
+    OrderByDirection["Asc"] = "ASC";
+    /** Sort the data in descending order. */
+    OrderByDirection["Desc"] = "DESC";
+})(OrderByDirection || (OrderByDirection = {}));
+/** Plan visibility options. */
+export var PlanVisibility;
+(function (PlanVisibility) {
+    /** Only hidden plans. */
+    PlanVisibility["Hidden"] = "HIDDEN";
+    /** Only visible plans. */
+    PlanVisibility["Visible"] = "VISIBLE";
+})(PlanVisibility || (PlanVisibility = {}));
 /** PlanOrderByField is the field by which the plan list will be ordered. */
@@ -110,19 +128,1 @@ export var PlanOrderByField;
 })(PlanOrderByField || (PlanOrderByField = {}));
-/** Visibility options for feature slugs. */
-export var FeatureSlugVisibility;
-(function (FeatureSlugVisibility) {
-    /** Filter feature slugs how are hidden. */
-    FeatureSlugVisibility["Hidden"] = "HIDDEN";
-    /** Filter feature slugs which are visible. */
-    FeatureSlugVisibility["Visible"] = "VISIBLE";
-})(FeatureSlugVisibility || (FeatureSlugVisibility = {}));
-/** FilterBy values for feature slug visibility. */
-export var FeatureSlugVisibilityFilter;
-(function (FeatureSlugVisibilityFilter) {
-    /** Select all feature slugs. */
-    FeatureSlugVisibilityFilter["All"] = "ALL";
-    /** Select only feature slugs which are marked hidden. */
-    FeatureSlugVisibilityFilter["Hidden"] = "HIDDEN";
-    /** Select only feature slugs which are marked visible. */
-    FeatureSlugVisibilityFilter["Visible"] = "VISIBLE";
-})(FeatureSlugVisibilityFilter || (FeatureSlugVisibilityFilter = {}));

dist/esm-es5/manifold-plan-table.entry.js

@@ -9,3 +9,3 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-09695c84.js';
-import { i as incrementIcon, d as decrementIcon, c as compareRange, t as toUSD, a as displayRange, h as helpIcon, R as ResizeObserver, q as query, p as planQuery, b as createClient, e as planCost, f as checkIcon, x as xIcon } from './help-circle-5a4f9a4f.js';
+import { i as incrementIcon, d as decrementIcon, c as compareRange, t as toUSD, a as displayRange, h as helpIcon, R as ResizeObserver, q as query, p as planQuery, b as createClient, e as planCost, f as checkIcon, x as xIcon } from './help-circle-34041322.js';
 var Tooltip = function (_h) {
@@ -12,0 +12,0 @@ var id = _h.id, title = _h.title, innerHTML = _h.innerHTML, direction = _h.direction, show = _h.show, hide = _h.hide;

dist/esm/manifold-plan-table.entry.js

 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-09695c84.js';
-import { i as incrementIcon, d as decrementIcon, c as compareRange, t as toUSD, a as displayRange, h as helpIcon, R as ResizeObserver, q as query, p as planQuery, b as createClient, e as planCost, f as checkIcon, x as xIcon } from './help-circle-5a4f9a4f.js';
+import { i as incrementIcon, d as decrementIcon, c as compareRange, t as toUSD, a as displayRange, h as helpIcon, R as ResizeObserver, q as query, p as planQuery, b as createClient, e as planCost, f as checkIcon, x as xIcon } from './help-circle-34041322.js';
 
@@ -4,0 +4,0 @@ const Tooltip = ({ id, title, innerHTML, direction, show, hide, }) => {

dist/esm/plangraph-plan-table.entry.js

 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-09695c84.js';
-import { i as incrementIcon, d as decrementIcon, c as compareRange, t as toUSD, a as displayRange, h as helpIcon, R as ResizeObserver, q as query, p as planQuery, b as createClient, e as planCost, f as checkIcon, x as xIcon } from './help-circle-5a4f9a4f.js';
+import { i as incrementIcon, d as decrementIcon, c as compareRange, t as toUSD, a as displayRange, h as helpIcon, R as ResizeObserver, q as query, p as planQuery, b as createClient, e as planCost, f as checkIcon, x as xIcon } from './help-circle-34041322.js';
 
@@ -136,3 +136,3 @@ const Tooltip = ({ id, title, innerHTML, direction, show, hide, }) => {
 
-const plangraphPlanTableCss = ".Manifold-Typography--Body{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Body{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--Label{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2143;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Label{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2143;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--Heading{font-size:18px;font-weight:400;letter-spacing:normal;line-height:1.2222;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Heading{font-size:20px;font-weight:400;letter-spacing:normal;line-height:1.2;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--HeadingLarge{font-size:22px;font-weight:400;letter-spacing:normal;line-height:1.1818;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--HeadingLarge{font-size:25px;font-weight:400;letter-spacing:normal;line-height:1.2;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--SubheadingSmall{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}.Manifold-Typography--Caption{font-size:13px;font-weight:400;letter-spacing:normal;line-height:1.2308;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";margin:0;color:var(--plangraph-color-text-secondary)}@media (min-width: 600px){.Manifold-Typography--Caption{font-size:12px;font-weight:400;letter-spacing:normal;line-height:1.3333;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";color:var(--plangraph-color-text-secondary)}}.Manifold-Tooltip{position:relative;padding:8px 12px;color:#ffffff;white-space:nowrap;text-align:center;text-indent:0;background:#323940;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);cursor:default;pointer-events:none;font-size:12px;font-weight:400;letter-spacing:normal;line-height:1.3333;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}.Manifold-Tooltip::after{position:absolute;top:100%;left:50%;width:0;height:0;margin-left:-5px;border:solid transparent;border-color:rgba(0, 0, 0, 0);border-width:5px;border-top-color:#323940;content:\"\";pointer-events:none}.Manifold-Tooltip__Container{position:relative;cursor:pointer}.Manifold-Tooltip__Container [role=tooltip]{position:absolute;bottom:100%;left:50%;margin-bottom:8px;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);-webkit-transform-origin:top;transform-origin:top;opacity:0;-webkit-transition:all 0.1s ease-in-out 0.1s;transition:all 0.1s ease-in-out 0.1s}.Manifold-Tooltip__Container:hover [role=tooltip]{-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px);opacity:1}.Manifold-Tooltip__Container--Down [role=tooltip]{top:100%;bottom:auto;margin-top:13px;-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px)}.Manifold-Tooltip__Container--Down:hover [role=tooltip]{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}.Manifold-Tooltip__Container--Up [role=tooltip]{top:auto;bottom:100%;z-index:10;margin-bottom:13px;-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px)}.Manifold-Tooltip__Container--Up:hover [role=tooltip]{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}.Manifold-Tooltip--Up::after{top:100%;bottom:auto;border-color:rgba(0, 0, 0, 0);border-bottom-color:#323940;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.Manifold-Tooltip--Down::after{top:auto;bottom:100%;border-color:rgba(0, 0, 0, 0);border-bottom-color:#323940}.Skeleton__Grid{display:grid;grid-template-columns:1fr 1fr 1fr;-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.Skeleton__Grid p{margin:6px 0}.Skeleton__Grid h2{max-width:200px}.Skeleton{position:relative;display:inline-block;overflow:hidden;color:transparent;line-height:1;border-radius:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}@-webkit-keyframes Skeleton__Animation{to{-webkit-transform:translateX(125%);transform:translateX(125%)}}@keyframes Skeleton__Animation{to{-webkit-transform:translateX(125%);transform:translateX(125%)}}.Skeleton::before{position:absolute;top:0;right:0;bottom:0;left:0;background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), color-stop(1em, rgba(0, 0, 0, 0.1)), color-stop(1em, rgba(0, 0, 0, 0)), color-stop(1.5em, rgba(0, 0, 0, 0)));background-image:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1em, rgba(0, 0, 0, 0) 1em, rgba(0, 0, 0, 0) 1.5em);background-repeat:repeat-y;background-size:100% 1.5em;content:\"\";pointer-events:none}.Skeleton::after{position:absolute;top:0;right:100%;width:60em;height:100%;background-image:linear-gradient(60deg, rgba(255, 255, 255, 0) 33.3333%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 66.6666%);background-repeat:no-repeat;opacity:0.4;-webkit-animation-name:Skeleton__Animation;animation-name:Skeleton__Animation;-webkit-animation-duration:1.4s;animation-duration:1.4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;content:\"\";pointer-events:none}:host{--theme-color-brand:var(--plangraph-color-brand);--theme-color-brand-accent:var(--plangraph-color-brand-accent);--theme-color-error:var(--plangraph-color-error);--theme-color-disabled:var(--plangraph-color-disabled);--theme-color-disabled-accent:var(--plangraph-color-disabled-accent);--theme-color-background:var(--plangraph-color-background);--theme-color-input-background:var(--plangraph-color-input-background);--theme-color-text:var(--plangraph-color-text);--theme-color-text-secondary:var(--plangraph-color-text-secondary);--theme-border:var(--plangraph-border);--theme-border-secondary:var(--plangraph-border-secondary);--theme-radius:var(--plangraph-radius);position:relative;display:block;overflow:auto}:host table.plan-table{--plangraph-color-brand:var(--theme-color-brand, #1e50da);--plangraph-color-brand-accent:var(--theme-color-brand-accent, #ffffff);--plangraph-color-error:var(--theme-color-error, #d52049);--plangraph-color-disabled:var(--theme-color-disabled, #ececed);--plangraph-color-disabled-accent:var(--theme-color-disabled-accent, #8f8f95);--plangraph-color-background:var(--theme-color-background, #ffffff);--plangraph-color-input-background:var(\n    --theme-color-input-background,\n    #ffffff\n  );--plangraph-color-text:var(--theme-color-text, #323940);--plangraph-color-text-secondary:var(--theme-color-text-secondary, #8f8f95);--plangraph-border:var(--theme-border, 1px solid #c4c7ca);--plangraph-border-secondary:var(\n    --theme-border-secondary,\n    1px solid #ececed\n  );--plangraph-radius:var(--theme-radius, 4px);color:var(--plangraph-color-text);background:var(--plangraph-color-background);border-radius:var(--plangraph-radius);border-spacing:0}:host table.plan-table th{vertical-align:top;border-bottom:var(--plangraph-border);border-left:var(--plangraph-border)}:host table.plan-table th h1{margin:0.5rem}:host table.plan-table th h3{margin:0;color:var(--plangraph-color-text);font-weight:700}:host table.plan-table th label{color:var(--plangraph-color-brand)}:host table.plan-table .plan-description,:host table.plan-table .feature-description{max-width:100%;margin:0.25rem 0;word-wrap:break-word}:host table.plan-table td{vertical-align:top;border-bottom:var(--plangraph-border-secondary);border-left:var(--plangraph-border)}:host table.plan-table td.feature-name,:host table.plan-table th.feature-name{position:-webkit-sticky;position:sticky;border-right:var(--plangraph-border)}:host table.plan-table .feature-name{left:0;z-index:1;color:var(--plangraph-color-text);font-weight:600;font-size:14px;text-align:left}@media (min-width: 600px){:host table.plan-table .feature-name{font-size:16px}}:host table.plan-table th,:host table.plan-table td{padding:0.5rem;text-align:left;background-color:var(--plangraph-color-background)}@media (min-width: 600px){:host table.plan-table th,:host table.plan-table td{padding:1rem}}@media (min-width: 850px){:host table.plan-table th,:host table.plan-table td{padding:1rem}}:host table.plan-table th:nth-child(2),:host table.plan-table td:nth-child(2){border-left:none}:host table.plan-table th:last-child,:host table.plan-table td:last-child{border-right:var(--plangraph-border)}:host table.plan-table tr:first-child th{border-top:var(--plangraph-border)}:host table.plan-table tr:first-child th:first-child{border-top-left-radius:var(--plangraph-radius)}:host table.plan-table tr:first-child th:last-child{border-top-right-radius:var(--plangraph-radius)}:host table.plan-table tr:last-child td{border-bottom:var(--plangraph-border)}:host table.plan-table tr:last-child td:first-child{border-bottom-left-radius:var(--plangraph-radius)}:host table.plan-table tr:last-child td:last-child{border-bottom-right-radius:var(--plangraph-radius)}:host table.plan-table .plan-cell{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host table.plan-table.scrolled .feature-name{-webkit-box-shadow:0 0 30px 0 rgba(0, 0, 0, 0.15);box-shadow:0 0 30px 0 rgba(0, 0, 0, 0.15);-webkit-clip-path:inset(0 -30px 0 0);clip-path:inset(0 -30px 0 0)}:host table.plan-table.lg .feature-name{min-width:200px;max-width:400px}:host table.plan-table.md .feature-name{min-width:150px;max-width:300px}:host table.plan-table.sm{display:none}:host table.plan-table.sm .feature-name{min-width:100px;max-width:250px}:host table.plan-table.xs{display:none;max-width:478px}:host td button,:host td .button{position:relative;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10.5px 21px;color:#323940;font-weight:500;font-size:16px;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";line-height:1;white-space:nowrap;text-decoration:none;background:#ffffff;border-color:#c4c7ca;border-style:solid;border-width:1px;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);cursor:pointer;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:background-color, border-color, color, -webkit-box-shadow, -webkit-filter;transition-property:background-color, border-color, color, -webkit-box-shadow, -webkit-filter;transition-property:background-color, border-color, color, box-shadow, filter;transition-property:background-color, border-color, color, box-shadow, filter, -webkit-box-shadow, -webkit-filter;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;color:var(--plangraph-color-brand-accent);text-align:center;background:var(--plangraph-color-brand);border:none;border-radius:var(--plangraph-radius)}:host td button::before,:host td .button::before{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:2px solid #1e50da;border-radius:8px;-webkit-transform:scale(0.95, 0.9);transform:scale(0.95, 0.9);opacity:0;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5), -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);content:\"\";pointer-events:none}:host td button::-moz-focus-inner,:host td .button::-moz-focus-inner{border:0}:host td button:focus,:host td button:hover,:host td .button:focus,:host td .button:hover{border-color:#8f8f95}:host td button:focus,:host td .button:focus{outline:none}:host td button:focus::before,:host td .button:focus::before{-webkit-transform:scale(1);transform:scale(1);opacity:1;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, transform 150ms cubic-bezier(0, 0.5, 0.5, 1), -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1)}:host td button:active,:host td .button:active{-webkit-transform:translateY(1px);transform:translateY(1px)}:host td button:disabled,:host td .button:disabled{color:#8f8f95;background:#ececed;border:1px solid #c4c7ca;-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:0.8}:host td button:disabled:focus,:host td button:disabled:hover,:host td .button:disabled:focus,:host td .button:disabled:hover{color:#8f8f95;background:#ececed;border:1px solid #c4c7ca;-webkit-box-shadow:none;box-shadow:none}:host td button:disabled:focus::before,:host td .button:disabled:focus::before{opacity:0}:host td button:disabled:active,:host td .button:disabled:active{color:#8f8f95;background:#ececed;border-color:#c4c7ca;-webkit-box-shadow:none;box-shadow:none;-webkit-transform:none;transform:none}:host td button:disabled,:host td .button:disabled{color:var(--plangraph-color-disabled-accent);background:var(--plangraph-color-disabled);border-color:var(--plangraph-color-disabled)}:host td button:disabled:hover,:host td .button:disabled:hover{background:var(--plangraph-color-disabled);border-color:var(--plangraph-color-disabled)}:host td button:focus::before,:host td .button:focus::before{border-color:var(--plangraph-color-brand)}@media (min-width: 600px){:host td button,:host td .button{min-width:240px}}:host .icon{width:1.25rem;height:1.25rem}:host .icon svg{fill:#8f8f95}:host .icon.icon-green svg{fill:#31baa2}:host .toggle-feature{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .toggle-feature .Manifold-Toggle{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .toggle-feature .Manifold-Toggle::before{position:absolute;top:50%;right:-4px;width:2.75rem;height:1.75rem;border:2px solid #1e50da;border-radius:2rem;-webkit-transform:translateY(-50%) scale(0.9);transform:translateY(-50%) scale(0.9);opacity:0;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5), -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);content:\"\";pointer-events:none}:host .toggle-feature .Manifold-Toggle label{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:0;color:currentColor;cursor:pointer}@media (min-width: 600px){:host .toggle-feature .Manifold-Toggle label{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .toggle-feature .Manifold-Toggle label::before{-ms-flex-order:1;order:1;-webkit-box-sizing:border-box;box-sizing:border-box;width:2.5rem;height:1.5rem;margin-left:0.75rem;background:#ececed;border-radius:2rem;-webkit-transition:background-color 150ms linear;transition:background-color 150ms linear;content:\"\";pointer-events:none}:host .toggle-feature .Manifold-Toggle label::after{position:absolute;top:50%;right:0.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;width:1rem;height:1rem;background-color:#8f8f95;border-radius:50%;-webkit-transform:translate(-100%, -50%);transform:translate(-100%, -50%);-webkit-transition:background-color 150ms linear, -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04), -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);content:\"\"}:host .toggle-feature .Manifold-Toggle input{position:absolute;right:100vw;opacity:0}:host .toggle-feature .Manifold-Toggle input:disabled~label{cursor:default}:host .toggle-feature .Manifold-Toggle input:disabled~label::before{background:#ececed;border:1px solid #ddddde}:host .toggle-feature .Manifold-Toggle input:disabled~label::after{background:#ddddde;border:1px solid #c4c7ca}:host .toggle-feature .Manifold-Toggle input:disabled:checked~label::before{background:#ececed}:host .toggle-feature .Manifold-Toggle input:disabled:checked~label::after{background:#8f8f95;border:1px solid #8f8f95}:host .toggle-feature .Manifold-Toggle:focus-within{color:#1e50da}:host .toggle-feature .Manifold-Toggle:focus-within::before{-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);opacity:1}:host .toggle-feature .Manifold-Toggle input:checked~label::before{background:#dde9fe}:host .toggle-feature .Manifold-Toggle input:checked~label::after{background:#1e50da;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}:host .toggle-feature .Manifold-Toggle::before{border-color:var(--plangraph-color-brand)}:host .toggle-feature .Manifold-Toggle label::before{margin-left:0;background:var(--plangraph-color-text-secondary);opacity:0.2}:host .toggle-feature .Manifold-Toggle label::after{background:var(--plangraph-color-text-secondary)}:host .toggle-feature .Manifold-Toggle input:checked+label::before{margin-left:0;background:var(--plangraph-color-brand);opacity:0.2}:host .toggle-feature .Manifold-Toggle input:checked+label::after{background:var(--plangraph-color-brand)}:host .Manifold-Select{-webkit-transition:border-color 150ms linear;transition:border-color 150ms linear;width:100%}:host .Manifold-Select label{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;padding-bottom:0.25rem;color:#575b5f;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:color;transition-property:color}:host .Manifold-Select select{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:2.25em;margin:0;padding:0 1.5rem 0 0.75rem;color:#575b5f;line-height:2.25;background-color:#ffffff;background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%23575b5f\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');background-repeat:no-repeat, repeat;background-position:right 0.25rem top 50%;background-size:1.5rem auto;border:1px solid #c4c7ca;border-radius:4px;-webkit-transition:border-color 150ms linear, color 150ms linear;transition:border-color 150ms linear, color 150ms linear;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .Manifold-Select select::-ms-expand{display:none}:host .Manifold-Select select:hover{border-color:#8f8f95}:host .Manifold-Select select:focus{outline:none}@media (min-width: 600px){:host .Manifold-Select select{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .Manifold-Select option{font-weight:400}:host .Manifold-Select select:invalid,:host .Manifold-Select select[aria-invalid]{background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%23d52049\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');border-color:#d52049;-webkit-box-shadow:none;box-shadow:none}:host .Manifold-Select select:disabled{color:#8f8f95;background-color:#f7f7f8;background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%238f8f95\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');}:host .Manifold-Select select:disabled:hover{border-color:#c4c7ca}:host .Manifold-Select:focus-within label{color:#1e50da}:host .Manifold-Select:focus-within select{border-color:#1e50da}:host .Manifold-Select select{color:var(--plangraph-color-text);background-color:var(--plangraph-color-input-background);border:var(--plangraph-border)}:host .Manifold-Select select:focus{border-color:var(--plangraph-color-brand)}:host .Manifold-Select select.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .int-range-configured-feature{width:100%}:host .int-range-configured-feature .int-range-label{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}:host .int-range-configured-feature .int-range-label .label-bold{color:var(--plangraph-color-text);font-weight:500;text-transform:uppercase}:host .int-range-configured-feature .int-range-label .int-range-tooltip{z-index:10;display:-ms-flexbox;display:flex;margin-left:auto}:host .int-range-configured-feature .int-range-label .int-range-tooltip .icon{width:1em;height:1em}:host .int-range-configured-feature .label-limit{color:var(--plangraph-color-text-secondary)}:host .int-range-tooltip-content{text-align:left}:host .int-range-tooltip-content .int-range-tooltip-title{padding-bottom:6px;color:var(--plangraph-color-text-secondary);text-transform:uppercase}:host .int-range-tooltip-content .int-range-tooltip-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-width:100px}:host .int-range-tooltip-content .int-range-tooltip-row .int-range-tooltip-row-unit{text-align:right}:host option.string-select-cost{color:var(--plangraph-color-text-secondary)}:host .Manifold-Input{-webkit-transition:border-color 150ms linear;transition:border-color 150ms linear;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;width:100%;padding:6px 0}:host .Manifold-Input label{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;padding-bottom:0.25rem;color:#575b5f;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:color;transition-property:color}:host .Manifold-Input input{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;min-width:none;height:2.25rem;padding:0 0.75em;color:#323940;line-height:2.25rem;background:#ffffff;border:1px solid #c4c7ca;border-radius:3px;outline:0;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:border-color;transition-property:border-color;-webkit-appearance:none;appearance:none;-moz-appearance:textfield}@media (min-width: 600px){:host .Manifold-Input input{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .Manifold-Input input:hover{border-color:#8f8f95}:host .Manifold-Input input[type=number],:host .Manifold-Input input[inputmode=numeric],:host .Manifold-Input input[inputmode=decimal],:host .Manifold-Input input[pattern=\"[0-9]*\"],:host .Manifold-Input input[pattern^=\"\\a\"]{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2857;text-transform:none;font-family:\"IBM Plex Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace;text-align:right}:host .Manifold-Input input::-webkit-inner-spin-button,:host .Manifold-Input input::-webkit-outer-spin-button{display:none}:host .Manifold-Input input:invalid,:host .Manifold-Input input[aria-invalid]{border-color:#d52049;-webkit-box-shadow:none;box-shadow:none}:host .Manifold-Input input:disabled{color:#8f8f95;background:#f7f7f8;}:host .Manifold-Input input:disabled:hover{border-color:#c4c7ca}:host .Manifold-Input:focus-within label{color:#1e50da}:host .Manifold-Input:focus-within input{border-color:#1e50da}:host .Manifold-Input input{color:var(--plangraph-color-text);background-color:var(--plangraph-color-input-background);border:var(--plangraph-border)}:host .Manifold-Input input[type=number]{width:100%;padding:0.5em;text-align:left;border-top:border;border-right:none;border-bottom:border;border-left:none;border-radius:0}:host .Manifold-Input input[type=number]:focus{border-color:var(--plangraph-color-brand)}:host .Manifold-Input .Manifold-Tooltip__Container{-ms-flex:6 auto;flex:6 auto;min-width:7em}:host .Manifold-Input input.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .Manifold-Input button{display:-ms-flexbox;display:flex;-ms-flex:1 auto;flex:1 auto;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.25em;min-width:0;height:2.25em;padding:0;background-color:var(--plangraph-color-background);border:var(--plangraph-border)}:host .Manifold-Input button::before,:host .Manifold-Input button::after{border-color:var(--plangraph-color-brand)}:host .Manifold-Input button:first-child{border-radius:0.25em 0 0 0.25em}:host .Manifold-Input button:last-child{border-radius:0 0.25em 0.25em 0}:host .Manifold-Input button.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .Manifold-Input .helper{color:var(--plangraph-color-text-secondary);text-align:left}:host .excluded{color:var(--plangraph-color-text-secondary)}:host table.cost-tiers{-ms-flex-item-align:start;align-self:flex-start;width:100%}:host table.cost-tiers tr.label-bold,:host table.cost-tiers tr:first-child.label-bold,:host table.cost-tiers tr:last-child.label-bold{color:var(--plangraph-color-text);font-weight:600}:host table.cost-tiers tr td,:host table.cost-tiers tr th,:host table.cost-tiers tr:first-child td,:host table.cost-tiers tr:first-child th,:host table.cost-tiers tr:last-child td,:host table.cost-tiers tr:last-child th{padding:0.2rem 0;text-align:left;border:none}:host table.cost-tiers tr th,:host table.cost-tiers tr:first-child th,:host table.cost-tiers tr:last-child th{padding-top:0;color:var(--plangraph-color-text-secondary)}:host table.cost-tiers tr td:last-child,:host table.cost-tiers tr:first-child td:last-child,:host table.cost-tiers tr:last-child td:last-child{text-align:right;border-right:none}:host .plan-carousel .slides{display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-flow:row nowrap;flex-flow:row nowrap;width:100%;overflow:auto;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}:host .plan-carousel tr.feature-row>td{padding:0}:host .plan-carousel tr.feature-row>td .feature-cell,:host .plan-carousel tr.feature-row>td .value-cell{padding:1rem}:host .plan-carousel.sm tr.feature-row>td>div{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .plan-carousel.sm tr.feature-row>td>div .feature-cell{-ms-flex:1;flex:1}:host .plan-carousel.sm tr.feature-row>td>div .value-cell{-ms-flex:1;flex:1}:host .plan-carousel.xs tr.feature-row>td .feature-cell{padding:0.5rem 0.5rem 0.25rem 0.5rem}:host .plan-carousel.xs tr.feature-row>td .value-cell{padding:0.25rem 0.5rem 0.5rem 0.5rem}:host .plan-carousel .slide{-ms-flex:none;flex:none;width:80%;max-height:calc(80vh - 4rem);overflow-x:hidden;overflow-y:auto;scroll-snap-align:center}:host .plan-carousel .slide>table{width:90%;margin:0 auto}:host .plan-carousel th.header-cell{position:-webkit-sticky;position:sticky;top:0;z-index:20}:host .plan-carousel .footer-cell{position:-webkit-sticky;position:sticky;bottom:0;z-index:20}:host .plan-carousel .slide:first-child{padding-left:10%}:host .plan-carousel .slide:last-child{padding-right:10%}:host .plan-carousel nav ol{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:4rem;margin:0;padding:0;list-style:none}:host .plan-carousel nav li{width:1rem;height:1rem;margin:0 1rem;padding:0;background-color:#c4c7ca;border-radius:1rem;cursor:pointer}:host .plan-carousel nav li.active{background-color:#8f8f95}";
+const plangraphPlanTableCss = ".Manifold-Typography--Body{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Body{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--Label{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2143;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Label{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2143;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--Heading{font-size:18px;font-weight:400;letter-spacing:normal;line-height:1.2222;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--Heading{font-size:20px;font-weight:400;letter-spacing:normal;line-height:1.2;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--HeadingLarge{font-size:22px;font-weight:400;letter-spacing:normal;line-height:1.1818;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}@media (min-width: 600px){.Manifold-Typography--HeadingLarge{font-size:25px;font-weight:400;letter-spacing:normal;line-height:1.2;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}.Manifold-Typography--SubheadingSmall{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}.Manifold-Typography--Caption{font-size:13px;font-weight:400;letter-spacing:normal;line-height:1.2308;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";margin:0;color:var(--plangraph-color-text-secondary)}@media (min-width: 600px){.Manifold-Typography--Caption{font-size:12px;font-weight:400;letter-spacing:normal;line-height:1.3333;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";color:var(--plangraph-color-text-secondary)}}.Manifold-Tooltip{position:relative;padding:8px 12px;color:#ffffff;white-space:nowrap;text-align:center;text-indent:0;background:#323940;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);cursor:default;pointer-events:none;font-size:12px;font-weight:400;letter-spacing:normal;line-height:1.3333;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}.Manifold-Tooltip::after{position:absolute;top:100%;left:50%;width:0;height:0;margin-left:-5px;border:solid transparent;border-color:rgba(0, 0, 0, 0);border-width:5px;border-top-color:#323940;content:\"\";pointer-events:none}.Manifold-Tooltip__Container{position:relative;cursor:pointer}.Manifold-Tooltip__Container [role=tooltip]{position:absolute;bottom:100%;left:50%;margin-bottom:8px;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);-webkit-transform-origin:top;transform-origin:top;opacity:0;-webkit-transition:all 0.1s ease-in-out 0.1s;transition:all 0.1s ease-in-out 0.1s}.Manifold-Tooltip__Container:hover [role=tooltip]{-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px);opacity:1}.Manifold-Tooltip__Container--Down [role=tooltip]{top:100%;bottom:auto;margin-top:13px;-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px)}.Manifold-Tooltip__Container--Down:hover [role=tooltip]{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}.Manifold-Tooltip__Container--Up [role=tooltip]{top:auto;bottom:100%;z-index:10;margin-bottom:13px;-webkit-transform:translate(-50%, -4px);transform:translate(-50%, -4px)}.Manifold-Tooltip__Container--Up:hover [role=tooltip]{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}.Manifold-Tooltip--Up::after{top:100%;bottom:auto;border-color:rgba(0, 0, 0, 0);border-bottom-color:#323940;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.Manifold-Tooltip--Down::after{top:auto;bottom:100%;border-color:rgba(0, 0, 0, 0);border-bottom-color:#323940}.Skeleton__Grid{display:grid;grid-template-columns:1fr 1fr 1fr;-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.Skeleton__Grid p{margin:6px 0}.Skeleton__Grid h2{max-width:200px}.Skeleton{position:relative;display:inline-block;overflow:hidden;color:transparent;line-height:1;border-radius:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}@-webkit-keyframes Skeleton__Animation{to{-webkit-transform:translateX(125%);transform:translateX(125%)}}@keyframes Skeleton__Animation{to{-webkit-transform:translateX(125%);transform:translateX(125%)}}.Skeleton::before{position:absolute;top:0;right:0;bottom:0;left:0;background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), color-stop(1em, rgba(0, 0, 0, 0.1)), color-stop(1em, rgba(0, 0, 0, 0)), color-stop(1.5em, rgba(0, 0, 0, 0)));background-image:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1em, rgba(0, 0, 0, 0) 1em, rgba(0, 0, 0, 0) 1.5em);background-repeat:repeat-y;background-size:100% 1.5em;content:\"\";pointer-events:none}.Skeleton::after{position:absolute;top:0;right:100%;width:60em;height:100%;background-image:linear-gradient(60deg, rgba(255, 255, 255, 0) 33.3333%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 66.6666%);background-repeat:no-repeat;opacity:0.4;-webkit-animation-name:Skeleton__Animation;animation-name:Skeleton__Animation;-webkit-animation-duration:1.4s;animation-duration:1.4s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;content:\"\";pointer-events:none}:host{--theme-color-brand:var(--plangraph-color-brand);--theme-color-brand-accent:var(--plangraph-color-brand-accent);--theme-color-error:var(--plangraph-color-error);--theme-color-disabled:var(--plangraph-color-disabled);--theme-color-disabled-accent:var(--plangraph-color-disabled-accent);--theme-color-background:var(--plangraph-color-background);--theme-color-input-background:var(--plangraph-color-input-background);--theme-color-text:var(--plangraph-color-text);--theme-color-text-secondary:var(--plangraph-color-text-secondary);--theme-border:var(--plangraph-border);--theme-border-secondary:var(--plangraph-border-secondary);--theme-radius:var(--plangraph-radius);position:relative;display:block;overflow:auto}:host table.plan-table{--plangraph-color-brand:var(--theme-color-brand, #1e50da);--plangraph-color-brand-accent:var(--theme-color-brand-accent, #ffffff);--plangraph-color-error:var(--theme-color-error, #d52049);--plangraph-color-disabled:var(--theme-color-disabled, #ececed);--plangraph-color-disabled-accent:var(--theme-color-disabled-accent, #8f8f95);--plangraph-color-background:var(--theme-color-background, #ffffff);--plangraph-color-input-background:var(\n    --theme-color-input-background,\n    #ffffff\n  );--plangraph-color-text:var(--theme-color-text, #323940);--plangraph-color-text-secondary:var(--theme-color-text-secondary, #8f8f95);--plangraph-border:var(--theme-border, 1px solid #c4c7ca);--plangraph-border-secondary:var(\n    --theme-border-secondary,\n    1px solid #ececed\n  );--plangraph-radius:var(--theme-radius, 4px);color:var(--plangraph-color-text);background:var(--plangraph-color-background);border-radius:var(--plangraph-radius);border-spacing:0}:host table.plan-table th{vertical-align:top;border-bottom:var(--plangraph-border);border-left:var(--plangraph-border)}:host table.plan-table th h1{margin:0.5rem}:host table.plan-table th h3{margin:0;color:var(--plangraph-color-text);font-weight:700}:host table.plan-table th label{color:var(--plangraph-color-brand)}:host table.plan-table .plan-description,:host table.plan-table .feature-description{display:block;max-width:100%;margin:0.25rem 0}:host table.plan-table td{vertical-align:top;border-bottom:var(--plangraph-border-secondary);border-left:var(--plangraph-border)}:host table.plan-table td.feature-name,:host table.plan-table th.feature-name{position:-webkit-sticky;position:sticky;border-right:var(--plangraph-border)}:host table.plan-table .feature-name{left:0;z-index:1;color:var(--plangraph-color-text);font-weight:600;font-size:14px;text-align:left}@media (min-width: 600px){:host table.plan-table .feature-name{font-size:16px}}:host table.plan-table th,:host table.plan-table td{padding:0.5rem;text-align:left;background-color:var(--plangraph-color-background)}@media (min-width: 600px){:host table.plan-table th,:host table.plan-table td{padding:1rem}}@media (min-width: 850px){:host table.plan-table th,:host table.plan-table td{padding:1rem}}:host table.plan-table th:nth-child(2),:host table.plan-table td:nth-child(2){border-left:none}:host table.plan-table th:last-child,:host table.plan-table td:last-child{border-right:var(--plangraph-border)}:host table.plan-table tr:first-child th{border-top:var(--plangraph-border)}:host table.plan-table tr:first-child th:first-child{border-top-left-radius:var(--plangraph-radius)}:host table.plan-table tr:first-child th:last-child{border-top-right-radius:var(--plangraph-radius)}:host table.plan-table tr:last-child td{border-bottom:var(--plangraph-border)}:host table.plan-table tr:last-child td:first-child{border-bottom-left-radius:var(--plangraph-radius)}:host table.plan-table tr:last-child td:last-child{border-bottom-right-radius:var(--plangraph-radius)}:host table.plan-table .plan-cell{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host table.plan-table.scrolled .feature-name{-webkit-box-shadow:0 0 30px 0 rgba(0, 0, 0, 0.15);box-shadow:0 0 30px 0 rgba(0, 0, 0, 0.15);-webkit-clip-path:inset(0 -30px 0 0);clip-path:inset(0 -30px 0 0)}:host table.plan-table.lg .feature-name{min-width:200px;max-width:400px}:host table.plan-table.md .feature-name{min-width:150px;max-width:300px}:host table.plan-table.sm{display:none}:host table.plan-table.sm .feature-name{min-width:100px;max-width:250px}:host table.plan-table.xs{display:none;max-width:478px}:host td button,:host td .button{position:relative;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10.5px 21px;color:#323940;font-weight:500;font-size:16px;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";line-height:1;white-space:nowrap;text-decoration:none;background:#ffffff;border-color:#c4c7ca;border-style:solid;border-width:1px;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);cursor:pointer;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:background-color, border-color, color, -webkit-box-shadow, -webkit-filter;transition-property:background-color, border-color, color, -webkit-box-shadow, -webkit-filter;transition-property:background-color, border-color, color, box-shadow, filter;transition-property:background-color, border-color, color, box-shadow, filter, -webkit-box-shadow, -webkit-filter;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;color:var(--plangraph-color-brand-accent);text-align:center;background:var(--plangraph-color-brand);border:none;border-radius:var(--plangraph-radius)}:host td button::before,:host td .button::before{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:2px solid #1e50da;border-radius:8px;-webkit-transform:scale(0.95, 0.9);transform:scale(0.95, 0.9);opacity:0;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5), -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);content:\"\";pointer-events:none}:host td button::-moz-focus-inner,:host td .button::-moz-focus-inner{border:0}:host td button:focus,:host td button:hover,:host td .button:focus,:host td .button:hover{border-color:#8f8f95}:host td button:focus,:host td .button:focus{outline:none}:host td button:focus::before,:host td .button:focus::before{-webkit-transform:scale(1);transform:scale(1);opacity:1;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, transform 150ms cubic-bezier(0, 0.5, 0.5, 1);transition:opacity 150ms linear, transform 150ms cubic-bezier(0, 0.5, 0.5, 1), -webkit-transform 150ms cubic-bezier(0, 0.5, 0.5, 1)}:host td button:active,:host td .button:active{-webkit-transform:translateY(1px);transform:translateY(1px)}:host td button:disabled,:host td .button:disabled{color:#8f8f95;background:#ececed;border:1px solid #c4c7ca;-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:0.8}:host td button:disabled:focus,:host td button:disabled:hover,:host td .button:disabled:focus,:host td .button:disabled:hover{color:#8f8f95;background:#ececed;border:1px solid #c4c7ca;-webkit-box-shadow:none;box-shadow:none}:host td button:disabled:focus::before,:host td .button:disabled:focus::before{opacity:0}:host td button:disabled:active,:host td .button:disabled:active{color:#8f8f95;background:#ececed;border-color:#c4c7ca;-webkit-box-shadow:none;box-shadow:none;-webkit-transform:none;transform:none}:host td button:disabled,:host td .button:disabled{color:var(--plangraph-color-disabled-accent);background:var(--plangraph-color-disabled);border-color:var(--plangraph-color-disabled)}:host td button:disabled:hover,:host td .button:disabled:hover{background:var(--plangraph-color-disabled);border-color:var(--plangraph-color-disabled)}:host td button:focus::before,:host td .button:focus::before{border-color:var(--plangraph-color-brand)}@media (min-width: 600px){:host td button,:host td .button{min-width:240px}}:host .icon{width:1.25rem;height:1.25rem}:host .icon svg{fill:#8f8f95}:host .icon.icon-green svg{fill:#31baa2}:host .toggle-feature{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .toggle-feature .Manifold-Toggle{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .toggle-feature .Manifold-Toggle::before{position:absolute;top:50%;right:-4px;width:2.75rem;height:1.75rem;border:2px solid #1e50da;border-radius:2rem;-webkit-transform:translateY(-50%) scale(0.9);transform:translateY(-50%) scale(0.9);opacity:0;-webkit-transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5);transition:opacity 150ms linear, transform 150ms cubic-bezier(0.5, 0, 1, 0.5), -webkit-transform 150ms cubic-bezier(0.5, 0, 1, 0.5);content:\"\";pointer-events:none}:host .toggle-feature .Manifold-Toggle label{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:0;color:currentColor;cursor:pointer}@media (min-width: 600px){:host .toggle-feature .Manifold-Toggle label{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .toggle-feature .Manifold-Toggle label::before{-ms-flex-order:1;order:1;-webkit-box-sizing:border-box;box-sizing:border-box;width:2.5rem;height:1.5rem;margin-left:0.75rem;background:#ececed;border-radius:2rem;-webkit-transition:background-color 150ms linear;transition:background-color 150ms linear;content:\"\";pointer-events:none}:host .toggle-feature .Manifold-Toggle label::after{position:absolute;top:50%;right:0.25rem;-webkit-box-sizing:border-box;box-sizing:border-box;width:1rem;height:1rem;background-color:#8f8f95;border-radius:50%;-webkit-transform:translate(-100%, -50%);transform:translate(-100%, -50%);-webkit-transition:background-color 150ms linear, -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);transition:background-color 150ms linear, transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04), -webkit-transform 100ms cubic-bezier(0.95, 0.05, 0.8, 0.04);content:\"\"}:host .toggle-feature .Manifold-Toggle input{position:absolute;right:100vw;opacity:0}:host .toggle-feature .Manifold-Toggle input:disabled~label{cursor:default}:host .toggle-feature .Manifold-Toggle input:disabled~label::before{background:#ececed;border:1px solid #ddddde}:host .toggle-feature .Manifold-Toggle input:disabled~label::after{background:#ddddde;border:1px solid #c4c7ca}:host .toggle-feature .Manifold-Toggle input:disabled:checked~label::before{background:#ececed}:host .toggle-feature .Manifold-Toggle input:disabled:checked~label::after{background:#8f8f95;border:1px solid #8f8f95}:host .toggle-feature .Manifold-Toggle:focus-within{color:#1e50da}:host .toggle-feature .Manifold-Toggle:focus-within::before{-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);opacity:1}:host .toggle-feature .Manifold-Toggle input:checked~label::before{background:#dde9fe}:host .toggle-feature .Manifold-Toggle input:checked~label::after{background:#1e50da;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}:host .toggle-feature .Manifold-Toggle::before{border-color:var(--plangraph-color-brand)}:host .toggle-feature .Manifold-Toggle label::before{margin-left:0;background:var(--plangraph-color-text-secondary);opacity:0.2}:host .toggle-feature .Manifold-Toggle label::after{background:var(--plangraph-color-text-secondary)}:host .toggle-feature .Manifold-Toggle input:checked+label::before{margin-left:0;background:var(--plangraph-color-brand);opacity:0.2}:host .toggle-feature .Manifold-Toggle input:checked+label::after{background:var(--plangraph-color-brand)}:host .Manifold-Select{-webkit-transition:border-color 150ms linear;transition:border-color 150ms linear;width:100%}:host .Manifold-Select label{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;padding-bottom:0.25rem;color:#575b5f;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:color;transition-property:color}:host .Manifold-Select select{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:2.25em;margin:0;padding:0 1.5rem 0 0.75rem;color:#575b5f;line-height:2.25;background-color:#ffffff;background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%23575b5f\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');background-repeat:no-repeat, repeat;background-position:right 0.25rem top 50%;background-size:1.5rem auto;border:1px solid #c4c7ca;border-radius:4px;-webkit-transition:border-color 150ms linear, color 150ms linear;transition:border-color 150ms linear, color 150ms linear;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .Manifold-Select select::-ms-expand{display:none}:host .Manifold-Select select:hover{border-color:#8f8f95}:host .Manifold-Select select:focus{outline:none}@media (min-width: 600px){:host .Manifold-Select select{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .Manifold-Select option{font-weight:400}:host .Manifold-Select select:invalid,:host .Manifold-Select select[aria-invalid]{background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%23d52049\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');border-color:#d52049;-webkit-box-shadow:none;box-shadow:none}:host .Manifold-Select select:disabled{color:#8f8f95;background-color:#f7f7f8;background-image:url('data:image/svg+xml,%3Csvg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath fill=\"%238f8f95\" d=\"M7.558 12.808a.625.625 0 01.884 0l3.308 3.308 3.308-3.308a.625.625 0 11.884.884l-3.75 3.75a.625.625 0 01-.884 0l-3.75-3.75a.625.625 0 010-.884zM15.942 10.192a.625.625 0 01-.884 0L11.75 6.884l-3.308 3.308a.625.625 0 11-.884-.884l3.75-3.75a.625.625 0 01.884 0l3.75 3.75a.625.625 0 010 .884z\"/%3E%3C/svg%3E');}:host .Manifold-Select select:disabled:hover{border-color:#c4c7ca}:host .Manifold-Select:focus-within label{color:#1e50da}:host .Manifold-Select:focus-within select{border-color:#1e50da}:host .Manifold-Select select{color:var(--plangraph-color-text);background-color:var(--plangraph-color-input-background);border:var(--plangraph-border)}:host .Manifold-Select select:focus{border-color:var(--plangraph-color-brand)}:host .Manifold-Select select.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .int-range-configured-feature{width:100%}:host .int-range-configured-feature .int-range-label{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch}:host .int-range-configured-feature .int-range-label .label-bold{color:var(--plangraph-color-text);font-weight:500;text-transform:uppercase}:host .int-range-configured-feature .int-range-label .int-range-tooltip{z-index:10;display:-ms-flexbox;display:flex;margin-left:auto}:host .int-range-configured-feature .int-range-label .int-range-tooltip .icon{width:1em;height:1em}:host .int-range-configured-feature .label-limit{color:var(--plangraph-color-text-secondary)}:host .int-range-tooltip-content{text-align:left}:host .int-range-tooltip-content .int-range-tooltip-title{padding-bottom:6px;color:var(--plangraph-color-text-secondary);text-transform:uppercase}:host .int-range-tooltip-content .int-range-tooltip-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;min-width:100px}:host .int-range-tooltip-content .int-range-tooltip-row .int-range-tooltip-row-unit{text-align:right}:host option.string-select-cost{color:var(--plangraph-color-text-secondary)}:host .Manifold-Input{-webkit-transition:border-color 150ms linear;transition:border-color 150ms linear;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;width:100%;padding:6px 0}:host .Manifold-Input label{font-size:11px;font-weight:500;letter-spacing:0.04em;line-height:1.2727;text-transform:uppercase;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;padding-bottom:0.25rem;color:#575b5f;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:color;transition-property:color}:host .Manifold-Input input{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.25;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";display:block;-webkit-box-sizing:border-box;box-sizing:border-box;width:auto;min-width:none;height:2.25rem;padding:0 0.75em;color:#323940;line-height:2.25rem;background:#ffffff;border:1px solid #c4c7ca;border-radius:3px;outline:0;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-property:border-color;transition-property:border-color;-webkit-appearance:none;appearance:none;-moz-appearance:textfield}@media (min-width: 600px){:host .Manifold-Input input{font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.1875;text-transform:none;font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"}}:host .Manifold-Input input:hover{border-color:#8f8f95}:host .Manifold-Input input[type=number],:host .Manifold-Input input[inputmode=numeric],:host .Manifold-Input input[inputmode=decimal],:host .Manifold-Input input[pattern=\"[0-9]*\"],:host .Manifold-Input input[pattern^=\"\\a\"]{font-size:14px;font-weight:400;letter-spacing:normal;line-height:1.2857;text-transform:none;font-family:\"IBM Plex Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace;text-align:right}:host .Manifold-Input input::-webkit-inner-spin-button,:host .Manifold-Input input::-webkit-outer-spin-button{display:none}:host .Manifold-Input input:invalid,:host .Manifold-Input input[aria-invalid]{border-color:#d52049;-webkit-box-shadow:none;box-shadow:none}:host .Manifold-Input input:disabled{color:#8f8f95;background:#f7f7f8;}:host .Manifold-Input input:disabled:hover{border-color:#c4c7ca}:host .Manifold-Input:focus-within label{color:#1e50da}:host .Manifold-Input:focus-within input{border-color:#1e50da}:host .Manifold-Input input{color:var(--plangraph-color-text);background-color:var(--plangraph-color-input-background);border:var(--plangraph-border)}:host .Manifold-Input input[type=number]{width:100%;padding:0.5em;text-align:left;border-top:border;border-right:none;border-bottom:border;border-left:none;border-radius:0}:host .Manifold-Input input[type=number]:focus{border-color:var(--plangraph-color-brand)}:host .Manifold-Input .Manifold-Tooltip__Container{-ms-flex:6 auto;flex:6 auto;min-width:7em}:host .Manifold-Input input.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .Manifold-Input button{display:-ms-flexbox;display:flex;-ms-flex:1 auto;flex:1 auto;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.25em;min-width:0;height:2.25em;padding:0;background-color:var(--plangraph-color-background);border:var(--plangraph-border)}:host .Manifold-Input button::before,:host .Manifold-Input button::after{border-color:var(--plangraph-color-brand)}:host .Manifold-Input button:first-child{border-radius:0.25em 0 0 0.25em}:host .Manifold-Input button:last-child{border-radius:0 0.25em 0.25em 0}:host .Manifold-Input button.error{border:0;-webkit-box-shadow:0 0 3px var(--plangraph-color-error);box-shadow:0 0 3px var(--plangraph-color-error)}:host .Manifold-Input .helper{color:var(--plangraph-color-text-secondary);text-align:left}:host .excluded{color:var(--plangraph-color-text-secondary)}:host table.cost-tiers{-ms-flex-item-align:start;align-self:flex-start;width:100%}:host table.cost-tiers tr.label-bold,:host table.cost-tiers tr:first-child.label-bold,:host table.cost-tiers tr:last-child.label-bold{color:var(--plangraph-color-text);font-weight:600}:host table.cost-tiers tr td,:host table.cost-tiers tr th,:host table.cost-tiers tr:first-child td,:host table.cost-tiers tr:first-child th,:host table.cost-tiers tr:last-child td,:host table.cost-tiers tr:last-child th{padding:0.2rem 0;text-align:left;border:none}:host table.cost-tiers tr th,:host table.cost-tiers tr:first-child th,:host table.cost-tiers tr:last-child th{padding-top:0;color:var(--plangraph-color-text-secondary)}:host table.cost-tiers tr td:last-child,:host table.cost-tiers tr:first-child td:last-child,:host table.cost-tiers tr:last-child td:last-child{text-align:right;border-right:none}:host .plan-carousel .slides{display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-flow:row nowrap;flex-flow:row nowrap;width:100%;overflow:auto;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}:host .plan-carousel tr.feature-row>td{padding:0}:host .plan-carousel tr.feature-row>td .feature-cell,:host .plan-carousel tr.feature-row>td .value-cell{padding:1rem}:host .plan-carousel.sm tr.feature-row>td>div{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .plan-carousel.sm tr.feature-row>td>div .feature-cell{-ms-flex:1;flex:1}:host .plan-carousel.sm tr.feature-row>td>div .value-cell{display:grid;-ms-flex:1;flex:1}:host .plan-carousel.xs tr.feature-row>td .feature-cell{padding:0.5rem 0.5rem 0.25rem 0.5rem}:host .plan-carousel.xs tr.feature-row>td .value-cell{padding:0.25rem 0.5rem 0.5rem 0.5rem}:host .plan-carousel .slide{-ms-flex:none;flex:none;width:80%;max-height:calc(80vh - 4rem);overflow-x:hidden;overflow-y:auto;scroll-snap-align:center}:host .plan-carousel .slide>table{width:90%;margin:0 auto}:host .plan-carousel th.header-cell{position:-webkit-sticky;position:sticky;top:0;z-index:20}:host .plan-carousel .footer-cell{position:-webkit-sticky;position:sticky;bottom:0;z-index:20}:host .plan-carousel .slide:first-child{padding-left:10%}:host .plan-carousel .slide:last-child{padding-right:10%}:host .plan-carousel nav ol{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:4rem;margin:0;padding:0;list-style:none}:host .plan-carousel nav li{width:1rem;height:1rem;margin:0 1rem;padding:0;background-color:#c4c7ca;border-radius:1rem;cursor:pointer}:host .plan-carousel nav li.active{background-color:#8f8f95}";
 
@@ -171,2 +171,11 @@ const breakpoints = [
         });
+        this.getFeature = (planSlug, featureSlug) => {
+            var _a;
+            const plan = this.plans.find((p) => p.slug === planSlug);
+            if (!plan) {
+                throw new Error(`Could not find plan with slug ${planSlug}`);
+            }
+            const feature = (_a = plan.features) === null || _a === void 0 ? void 0 : _a.features.find((f) => f.featureSlug.slug === featureSlug);
+            return feature;
+        };
         this.ctaClick = createEvent(this, "ctaClick", 3);
@@ -378,9 +387,4 @@ this.featureSelected = createEvent(this, "featureSelected", 3);
     }
-    planCellForFeature(planSlug, featureSlug) {
-        var _a, _b, _c, _d, _e, _f;
-        const plan = this.plans.find((p) => p.slug === planSlug);
-        if (!plan) {
-            throw new Error(`Could not find plan with slug ${planSlug}`);
-        }
-        const feature = (_a = plan.features) === null || _a === void 0 ? void 0 : _a.features.find((f) => f.featureSlug.slug === featureSlug);
+    planCellForFeature({ plan, featureSlug: { slug: featureSlug }, feature, }) {
+        var _a, _b, _c, _d, _e;
         if (!feature) {
@@ -397,7 +401,7 @@ return h("span", { class: "excluded" }, "\u2022");
                 {
-                    const selectedValue = (_b = this.featureSelections[planSlug]) === null || _b === void 0 ? void 0 : _b.find((e) => e.slug === featureSlug);
-                    const currentError = (_c = this.featureErrors) === null || _c === void 0 ? void 0 : _c.find((e) => {
-                        return e.planSlug === planSlug && e.slug === featureSlug;
+                    const selectedValue = (_a = this.featureSelections[plan.slug]) === null || _a === void 0 ? void 0 : _a.find((e) => e.slug === featureSlug);
+                    const currentError = (_b = this.featureErrors) === null || _b === void 0 ? void 0 : _b.find((e) => {
+                        return e.planSlug === plan.slug && e.slug === featureSlug;
                     });
-                    return (h(StringSelect, { featureValues: feature.stringValues, featureSlug: featureSlug, planSlug: planSlug, value: selectedValue, onChange: (v) => {
+                    return (h(StringSelect, { featureValues: feature.stringValues, featureSlug: featureSlug, planSlug: plan.slug, value: selectedValue, onChange: (v) => {
                             if (v === '') {
@@ -424,6 +428,6 @@ this.removeFeature(plan.slug, plan.name, featureSlug);
                     // Toggle Feature
-                    const defaultValue = (_d = feature === null || feature === void 0 ? void 0 : feature.booleanValues) === null || _d === void 0 ? void 0 : _d.some((e) => e.default && e.value);
-                    return (h("div", { class: "toggle-feature" }, h("div", { class: "Manifold-Toggle" }, h("input", { name: featureSlug, id: `feature-${planSlug}-${featureSlug}`, "aria-labelledby": `feature-${featureSlug}`, type: "checkbox", value: "on", checked: defaultValue, onChange: (e) => {
-                            this.selectFeature(planSlug, plan.name, featureSlug, e.target.checked);
-                        } }), h("label", { htmlFor: `feature-${planSlug}-${featureSlug}` }))));
+                    const defaultValue = (_c = feature === null || feature === void 0 ? void 0 : feature.booleanValues) === null || _c === void 0 ? void 0 : _c.some((e) => e.default && e.value);
+                    return (h("div", { class: "toggle-feature" }, h("div", { class: "Manifold-Toggle" }, h("input", { name: featureSlug, id: `feature-${plan.slug}-${featureSlug}`, "aria-labelledby": `feature-${featureSlug}`, type: "checkbox", value: "on", checked: defaultValue, onChange: (e) => {
+                            this.selectFeature(plan.slug, plan.name, featureSlug, e.target.checked);
+                        } }), h("label", { htmlFor: `feature-${plan.slug}-${featureSlug}` }))));
                 }
@@ -436,3 +440,3 @@ case 'IntFeature':
                 // Select Feature
-                return (h("div", { class: "Manifold-Select" }, h("label", { htmlFor: `feature-${planSlug}-${featureSlug}` }), h("select", { id: `feature-${planSlug}-${featureSlug}` }, feature.intValues.map((value) => {
+                return (h("div", { class: "Manifold-Select" }, h("label", { htmlFor: `feature-${plan.slug}-${featureSlug}` }), h("select", { id: `feature-${plan.slug}-${featureSlug}` }, feature.intValues.map((value) => {
                     var _a;
@@ -444,3 +448,3 @@ return (h("option", { value: (_a = value.value) === null || _a === void 0 ? void 0 : _a.toString() }, `${value.display} (${toUSD(value.cost)})`));
                     // Pay as you go feature
-                    return (h("table", { class: "cost-tiers" }, h("thead", null, h("tr", null, h("th", { colSpan: 2, class: "Manifold-Typography--Caption" }, "Billed per ", ((_e = feature.units) === null || _e === void 0 ? void 0 : _e.single) || 'unit'))), h("tbody", null, feature.intRangeValues.sort(compareRange).map((range, idx) => {
+                    return (h("table", { class: "cost-tiers" }, h("thead", null, h("tr", null, h("th", { colSpan: 2, class: "Manifold-Typography--Caption" }, "Billed per ", ((_d = feature.units) === null || _d === void 0 ? void 0 : _d.single) || 'unit'))), h("tbody", null, feature.intRangeValues.sort(compareRange).map((range, idx) => {
                         var _a;
@@ -451,11 +455,11 @@ return (h("tr", { class: "Manifold-Typography--Label label-bold" }, h("td", null, displayRange(range.min, range.max, idx)), h("td", null, toUSD(range.cost), " / ", ((_a = feature.units) === null || _a === void 0 ? void 0 : _a.single) || 'unit')));
                 {
-                    if (!this.featureSelections[planSlug]) {
-                        this.featureSelections[planSlug] = [];
+                    if (!this.featureSelections[plan.slug]) {
+                        this.featureSelections[plan.slug] = [];
                     }
-                    const selectedValue = this.featureSelections[planSlug].find((e) => e.slug === featureSlug);
+                    const selectedValue = this.featureSelections[plan.slug].find((e) => e.slug === featureSlug);
                     const currentError = this.featureErrors.find((e) => {
-                        return e.planSlug === planSlug && e.slug === featureSlug;
+                        return e.planSlug === plan.slug && e.slug === featureSlug;
                     });
                     // Numeric Range Feature
-                    return (h(ConfiguredTiers, { featureValues: feature.intRangeValues, unit: (_f = feature.units) === null || _f === void 0 ? void 0 : _f.plural, featureSlug: featureSlug, planSlug: plan.slug, value: selectedValue, error: currentError, onChange: (v) => {
+                    return (h(ConfiguredTiers, { featureValues: feature.intRangeValues, unit: (_e = feature.units) === null || _e === void 0 ? void 0 : _e.plural, featureSlug: featureSlug, planSlug: plan.slug, value: selectedValue, error: currentError, onChange: (v) => {
                             this.removeFeatureSelectionError(plan.slug, featureSlug);
@@ -511,3 +515,6 @@ this.selectFeature(plan.slug, plan.name, featureSlug, v);
     renderTable() {
-        return (h("table", { class: `Manifold-Typography--Body plan-table ${this.breakpoint} ${this.scrolled ? 'scrolled' : ''}`, part: "table" }, h("thead", null, h("tr", null, h("th", { class: "feature-name", part: "feature-header-cell cell feature-cell header-cell" }), this.plans.map((plan) => this.renderHeaderCell(plan)))), h("tbody", null, this.featureSlugs.map((featureSlug) => (h("tr", null, h("td", { class: "feature-name", part: "cell feature-cell" }, featureSlug.name, featureSlug.description && (h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))), this.plans.map((plan) => (h("td", { part: `plan--${plan.slug} cell value-cell` }, h("div", { class: "plan-cell" }, this.planCellForFeature(plan.slug, featureSlug.slug)))))))), h("tr", null, h("td", { class: "feature-name", part: "footer-cell feature-cell feature-footer-cell" }), this.plans.map((plan) => this.renderCTA(plan))))));
+        return (h("table", { class: `Manifold-Typography--Body plan-table ${this.breakpoint} ${this.scrolled ? 'scrolled' : ''}`, part: "table" }, h("thead", null, h("tr", null, h("th", { class: "feature-name", part: "feature-header-cell cell feature-cell header-cell" }), this.plans.map((plan) => this.renderHeaderCell(plan)))), h("tbody", null, this.featureSlugs.map((featureSlug) => (h("tr", null, h("td", { class: "feature-name", part: "cell feature-cell" }, featureSlug.name, featureSlug.description && (h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))), this.plans.map((plan) => {
+            const feature = this.getFeature(plan.slug, featureSlug.slug);
+            return (h("td", { part: `plan--${plan.slug} cell value-cell` }, h("div", { class: "plan-cell" }, this.planCellForFeature({ plan, featureSlug, feature })), (feature === null || feature === void 0 ? void 0 : feature.description) && (h("p", { class: "Manifold-Typography--Caption feature-description" }, feature === null || feature === void 0 ? void 0 : feature.description))));
+        })))), h("tr", null, h("td", { class: "feature-name", part: "footer-cell feature-cell feature-footer-cell" }), this.plans.map((plan) => this.renderCTA(plan))))));
     }
@@ -526,14 +533,17 @@ renderCarousel() {
                     .set(plan.slug, el);
-            } }, this.renderHeaderCell(plan))), h("tbody", null, this.featureSlugs.map((featureSlug) => (h("tr", { class: "feature-row", ref: (el) => {
-                if (!this.carouselRows.get(featureSlug.slug)) {
-                    this.carouselRows.set(featureSlug.slug, new Map());
-                }
-                this.carouselRows
-                    .get(featureSlug.slug)
-                    .set(plan.slug, el);
-            } }, h("td", null, h("div", { style: {
-                minHeight: this.maxRowHeights
-                    ? `calc(${this.maxRowHeights.get(featureSlug.slug)}px - 1px)` // account for borders
-                    : '0',
-            } }, h("div", { class: "feature-name feature-cell", part: "cell feature-cell" }, featureSlug.name, featureSlug.description && (h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))), h("div", { class: "value-cell", part: `plan--${plan.slug} cell value-cell` }, h("div", { class: "plan-cell" }, this.planCellForFeature(plan.slug, featureSlug.slug)))))))), h("tr", null, this.renderCTA(plan)))))))), h("nav", null, h("ol", null, this.plans.map((_plan, index) => (h("li", { class: index === this.currentSlide ? 'active' : '', onClick: () => this.scrollCarouselTo(index) })))))));
+            } }, this.renderHeaderCell(plan))), h("tbody", null, this.featureSlugs.map((featureSlug) => {
+            const feature = this.getFeature(plan.slug, featureSlug.slug);
+            return (h("tr", { class: "feature-row", ref: (el) => {
+                    if (!this.carouselRows.get(featureSlug.slug)) {
+                        this.carouselRows.set(featureSlug.slug, new Map());
+                    }
+                    this.carouselRows
+                        .get(featureSlug.slug)
+                        .set(plan.slug, el);
+                } }, h("td", null, h("div", { style: {
+                    minHeight: this.maxRowHeights
+                        ? `calc(${this.maxRowHeights.get(featureSlug.slug)}px - 1px)` // account for borders
+                        : '0',
+                } }, h("div", { class: "feature-name feature-cell", part: "cell feature-cell" }, featureSlug.name, featureSlug.description && (h("p", { class: "Manifold-Typography--Caption feature-description", part: `description feature-description feature-description--${featureSlug.slug}` }, featureSlug.description))), h("div", { class: "value-cell", part: `plan--${plan.slug} cell value-cell` }, h("div", { class: "plan-cell" }, this.planCellForFeature({ plan, featureSlug, feature })), (feature === null || feature === void 0 ? void 0 : feature.description) && (h("p", { class: "Manifold-Typography--Caption feature-description" }, feature === null || feature === void 0 ? void 0 : feature.description)))))));
+        }), h("tr", null, this.renderCTA(plan)))))))), h("nav", null, h("ol", null, this.plans.map((_plan, index) => (h("li", { class: index === this.currentSlide ? 'active' : '', onClick: () => this.scrollCarouselTo(index) })))))));
     }
@@ -540,0 +550,0 @@ render() {

dist/manifold/manifold.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as r}from"./p-fdbb6cfd.js";e().then(e=>r([["p-6c2cb2ca",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],planOptions:[16],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32],breakpoint:[32],scrolled:[32],maxRowHeights:[32],currentSlide:[32]},[[1,"scroll","scrollHandler"]]]]],["p-04d24617",[[1,"plangraph-plan-table",{embed:[1],ctaText:[1,"cta-text"],planOptions:[16],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32],breakpoint:[32],scrolled:[32],maxRowHeights:[32],currentSlide:[32]},[[1,"scroll","scrollHandler"]]]]]],e));
+import{p as e,b as a}from"./p-fdbb6cfd.js";e().then(e=>a([["p-89a6d8bd",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],planOptions:[16],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32],breakpoint:[32],scrolled:[32],maxRowHeights:[32],currentSlide:[32]},[[1,"scroll","scrollHandler"]]]]],["p-f719acfb",[[1,"plangraph-plan-table",{embed:[1],ctaText:[1,"cta-text"],planOptions:[16],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32],breakpoint:[32],scrolled:[32],maxRowHeights:[32],currentSlide:[32]},[[1,"scroll","scrollHandler"]]]]]],e));

dist/manifold/p-be11e044.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-7408ba89.system.js"],(function(){"use strict";var e,t;return{setters:[function(r){e=r.p;t=r.b}],execute:function(){e().then((function(e){return t([["p-e6241838.system",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],planOptions:[16],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32],breakpoint:[32],scrolled:[32],maxRowHeights:[32],currentSlide:[32]},[[1,"scroll","scrollHandler"]]]]],["p-4ec04ae2.system",[[1,"plangraph-plan-table",{embed:[1],ctaText:[1,"cta-text"],planOptions:[16],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32],breakpoint:[32],scrolled:[32],maxRowHeights:[32],currentSlide:[32]},[[1,"scroll","scrollHandler"]]]]]],e)}))}}}));
+System.register(["./p-7408ba89.system.js"],(function(){"use strict";var e,t;return{setters:[function(r){e=r.p;t=r.b}],execute:function(){e().then((function(e){return t([["p-3a071e5e.system",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],planOptions:[16],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32],breakpoint:[32],scrolled:[32],maxRowHeights:[32],currentSlide:[32]},[[1,"scroll","scrollHandler"]]]]],["p-9eb7abe0.system",[[1,"plangraph-plan-table",{embed:[1],ctaText:[1,"cta-text"],planOptions:[16],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32],breakpoint:[32],scrolled:[32],maxRowHeights:[32],currentSlide:[32]},[[1,"scroll","scrollHandler"]]]]]],e)}))}}}));

dist/types/components/manifold-plan-table/manifold-plan-table.d.ts

@@ -66,3 +66,5 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
         __typename?: "Plan" | undefined;
-    } & Pick<import("../../types/graphql").Plan, "slug" | "name" | "description" | "cost"> & {
+    } & {
+        __typename?: "Plan" | undefined;
+    } & Pick<import("../../types/graphql").Plan, "description" | "cost" | "slug" | "name"> & {
         features?: ({
@@ -72,4 +74,9 @@ __typename?: "FeaturePage" | undefined;
             features: (({
-                __typename: "ExcludedFeature";
-            } & Pick<import("../../types/graphql").ExcludedFeature, "class"> & {
+                __typename?: "StringFeature" | undefined;
+            } & {
+                __typename: "StringFeature";
+            } & Pick<import("../../types/graphql").StringFeature, "class" | "description"> & {
+                stringValues: ({
+                    __typename?: "StringFeatureValue" | undefined;
+                } & Pick<import("../../types/graphql").StringFeatureValue, "value" | "display" | "cost" | "default">)[];
                 featureSlug: {
@@ -79,13 +86,6 @@ __typename?: "FeatureSlug" | undefined;
             }) | ({
-                __typename: "BooleanFeature";
-            } & Pick<import("../../types/graphql").BooleanFeature, "class"> & {
-                booleanValues: ({
-                    __typename?: "BooleanFeatureValue" | undefined;
-                } & Pick<import("../../types/graphql").BooleanFeatureValue, "cost" | "value" | "display" | "default">)[];
-                featureSlug: {
-                    __typename?: "FeatureSlug" | undefined;
-                } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
-            }) | ({
+                __typename?: "IntRangeFeature" | undefined;
+            } & {
                 __typename: "IntRangeFeature";
-            } & Pick<import("../../types/graphql").IntRangeFeature, "class"> & {
+            } & Pick<import("../../types/graphql").IntRangeFeature, "class" | "description"> & {
                 intRangeValues: ({
@@ -101,7 +101,6 @@ __typename?: "IntRangeFeatureValue" | undefined;
             }) | ({
-                __typename: "IntFeature";
-            } & Pick<import("../../types/graphql").IntFeature, "class"> & {
-                intValues: ({
-                    __typename?: "IntFeatureValue" | undefined;
-                } & Pick<import("../../types/graphql").IntFeatureValue, "cost" | "value" | "display">)[];
+                __typename?: "ExcludedFeature" | undefined;
+            } & {
+                __typename: "ExcludedFeature";
+            } & Pick<import("../../types/graphql").ExcludedFeature, "class" | "description"> & {
                 featureSlug: {
@@ -111,10 +110,23 @@ __typename?: "FeatureSlug" | undefined;
             }) | ({
-                __typename: "StringFeature";
-            } & Pick<import("../../types/graphql").StringFeature, "class"> & {
-                stringValues: ({
-                    __typename?: "StringFeatureValue" | undefined;
-                } & Pick<import("../../types/graphql").StringFeatureValue, "cost" | "value" | "display" | "default">)[];
+                __typename?: "BooleanFeature" | undefined;
+            } & {
+                __typename: "BooleanFeature";
+            } & Pick<import("../../types/graphql").BooleanFeature, "class" | "description"> & {
+                booleanValues: ({
+                    __typename?: "BooleanFeatureValue" | undefined;
+                } & Pick<import("../../types/graphql").BooleanFeatureValue, "value" | "display" | "cost" | "default">)[];
                 featureSlug: {
                     __typename?: "FeatureSlug" | undefined;
                 } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
+            }) | ({
+                __typename?: "IntFeature" | undefined;
+            } & {
+                __typename: "IntFeature";
+            } & Pick<import("../../types/graphql").IntFeature, "class" | "description"> & {
+                intValues: ({
+                    __typename?: "IntFeatureValue" | undefined;
+                } & Pick<import("../../types/graphql").IntFeatureValue, "value" | "display" | "cost">)[];
+                featureSlug: {
+                    __typename?: "FeatureSlug" | undefined;
+                } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
             }))[];
@@ -128,3 +140,5 @@ }) | null | undefined;
         __typename?: "FeatureSlug" | undefined;
-    } & Pick<import("../../types/graphql").FeatureSlug, "slug" | "name" | "description">)[];
+    } & {
+        __typename?: "FeatureSlug" | undefined;
+    } & Pick<import("../../types/graphql").FeatureSlug, "description" | "slug" | "name">)[];
     planCellForFeature(planSlug: string, featureSlug: string): any;
@@ -131,0 +145,0 @@ renderHeaderCell({ slug, name, cost }: {

dist/types/components/plangraph-plan-table/plangraph-plan-table.d.ts

 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { Client } from '@urql/core';
 import ResizeObserver from 'resize-observer-polyfill';
-import { EmbeddedProductQuery } from '../../types/graphql';
+import { EmbeddedProductQuery, FeatureFragment, FeatureSlugFragment, PlanFragment } from '../../types/graphql';
 import { FeatureSelection, FeatureSelections, FeatureError } from './feature-selections';
@@ -72,3 +72,5 @@ export interface PlanTableEvent {
         __typename?: "Plan" | undefined;
-    } & Pick<import("../../types/graphql").Plan, "slug" | "name" | "description" | "cost"> & {
+    } & {
+        __typename?: "Plan" | undefined;
+    } & Pick<import("../../types/graphql").Plan, "description" | "cost" | "slug" | "name"> & {
         features?: ({
@@ -78,4 +80,9 @@ __typename?: "FeaturePage" | undefined;
             features: (({
-                __typename: "ExcludedFeature";
-            } & Pick<import("../../types/graphql").ExcludedFeature, "class"> & {
+                __typename?: "StringFeature" | undefined;
+            } & {
+                __typename: "StringFeature";
+            } & Pick<import("../../types/graphql").StringFeature, "class" | "description"> & {
+                stringValues: ({
+                    __typename?: "StringFeatureValue" | undefined;
+                } & Pick<import("../../types/graphql").StringFeatureValue, "value" | "display" | "cost" | "default">)[];
                 featureSlug: {
@@ -85,13 +92,6 @@ __typename?: "FeatureSlug" | undefined;
             }) | ({
-                __typename: "BooleanFeature";
-            } & Pick<import("../../types/graphql").BooleanFeature, "class"> & {
-                booleanValues: ({
-                    __typename?: "BooleanFeatureValue" | undefined;
-                } & Pick<import("../../types/graphql").BooleanFeatureValue, "cost" | "value" | "display" | "default">)[];
-                featureSlug: {
-                    __typename?: "FeatureSlug" | undefined;
-                } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
-            }) | ({
+                __typename?: "IntRangeFeature" | undefined;
+            } & {
                 __typename: "IntRangeFeature";
-            } & Pick<import("../../types/graphql").IntRangeFeature, "class"> & {
+            } & Pick<import("../../types/graphql").IntRangeFeature, "class" | "description"> & {
                 intRangeValues: ({
@@ -107,7 +107,6 @@ __typename?: "IntRangeFeatureValue" | undefined;
             }) | ({
-                __typename: "IntFeature";
-            } & Pick<import("../../types/graphql").IntFeature, "class"> & {
-                intValues: ({
-                    __typename?: "IntFeatureValue" | undefined;
-                } & Pick<import("../../types/graphql").IntFeatureValue, "cost" | "value" | "display">)[];
+                __typename?: "ExcludedFeature" | undefined;
+            } & {
+                __typename: "ExcludedFeature";
+            } & Pick<import("../../types/graphql").ExcludedFeature, "class" | "description"> & {
                 featureSlug: {
@@ -117,10 +116,23 @@ __typename?: "FeatureSlug" | undefined;
             }) | ({
-                __typename: "StringFeature";
-            } & Pick<import("../../types/graphql").StringFeature, "class"> & {
-                stringValues: ({
-                    __typename?: "StringFeatureValue" | undefined;
-                } & Pick<import("../../types/graphql").StringFeatureValue, "cost" | "value" | "display" | "default">)[];
+                __typename?: "BooleanFeature" | undefined;
+            } & {
+                __typename: "BooleanFeature";
+            } & Pick<import("../../types/graphql").BooleanFeature, "class" | "description"> & {
+                booleanValues: ({
+                    __typename?: "BooleanFeatureValue" | undefined;
+                } & Pick<import("../../types/graphql").BooleanFeatureValue, "value" | "display" | "cost" | "default">)[];
                 featureSlug: {
                     __typename?: "FeatureSlug" | undefined;
                 } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
+            }) | ({
+                __typename?: "IntFeature" | undefined;
+            } & {
+                __typename: "IntFeature";
+            } & Pick<import("../../types/graphql").IntFeature, "class" | "description"> & {
+                intValues: ({
+                    __typename?: "IntFeatureValue" | undefined;
+                } & Pick<import("../../types/graphql").IntFeatureValue, "value" | "display" | "cost">)[];
+                featureSlug: {
+                    __typename?: "FeatureSlug" | undefined;
+                } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
             }))[];
@@ -134,4 +146,56 @@ }) | null | undefined;
         __typename?: "FeatureSlug" | undefined;
-    } & Pick<import("../../types/graphql").FeatureSlug, "slug" | "name" | "description">)[];
-    planCellForFeature(planSlug: string, featureSlug: string): any;
+    } & {
+        __typename?: "FeatureSlug" | undefined;
+    } & Pick<import("../../types/graphql").FeatureSlug, "description" | "slug" | "name">)[];
+    getFeature: (planSlug: string, featureSlug: string) => ({
+        __typename: "StringFeature";
+    } & Pick<import("../../types/graphql").StringFeature, "class" | "description"> & {
+        stringValues: ({
+            __typename?: "StringFeatureValue" | undefined;
+        } & Pick<import("../../types/graphql").StringFeatureValue, "value" | "display" | "cost" | "default">)[];
+        featureSlug: {
+            __typename?: "FeatureSlug" | undefined;
+        } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
+    }) | ({
+        __typename: "IntRangeFeature";
+    } & Pick<import("../../types/graphql").IntRangeFeature, "class" | "description"> & {
+        intRangeValues: ({
+            __typename?: "IntRangeFeatureValue" | undefined;
+        } & Pick<import("../../types/graphql").IntRangeFeatureValue, "cost" | "min" | "max" | "increments">)[];
+        units?: ({
+            __typename?: "Units" | undefined;
+        } & Pick<import("../../types/graphql").Units, "single" | "plural">) | null | undefined;
+        featureSlug: {
+            __typename?: "FeatureSlug" | undefined;
+        } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
+    }) | ({
+        __typename: "ExcludedFeature";
+    } & Pick<import("../../types/graphql").ExcludedFeature, "class" | "description"> & {
+        featureSlug: {
+            __typename?: "FeatureSlug" | undefined;
+        } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
+    }) | ({
+        __typename: "BooleanFeature";
+    } & Pick<import("../../types/graphql").BooleanFeature, "class" | "description"> & {
+        booleanValues: ({
+            __typename?: "BooleanFeatureValue" | undefined;
+        } & Pick<import("../../types/graphql").BooleanFeatureValue, "value" | "display" | "cost" | "default">)[];
+        featureSlug: {
+            __typename?: "FeatureSlug" | undefined;
+        } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
+    }) | ({
+        __typename: "IntFeature";
+    } & Pick<import("../../types/graphql").IntFeature, "class" | "description"> & {
+        intValues: ({
+            __typename?: "IntFeatureValue" | undefined;
+        } & Pick<import("../../types/graphql").IntFeatureValue, "value" | "display" | "cost">)[];
+        featureSlug: {
+            __typename?: "FeatureSlug" | undefined;
+        } & Pick<import("../../types/graphql").FeatureSlug, "slug">;
+    }) | undefined;
+    planCellForFeature({ plan, featureSlug: { slug: featureSlug }, feature, }: {
+        plan: PlanFragment;
+        featureSlug: FeatureSlugFragment;
+        feature?: FeatureFragment;
+    }): any;
     renderHeaderCell({ slug, name, cost, description }: HeaderCellProps): any;
@@ -138,0 +202,0 @@ renderCTA(plan: plan): any;

dist/types/types/graphql.d.ts

@@ -17,15 +17,25 @@ export declare type Maybe<T> = T | null;
 };
-/**
- * ExcludedFeature is a special class of feature to explicitly exclude it from a
- * plan, so that it may be displayed differently than implicit omission.
- */
-export declare type ExcludedFeature = Feature & {
-    __typename?: 'ExcludedFeature';
-    /** ExcludedFeatures always have class FIXED. */
-    class: FeatureClass;
-    /** The optional description of this feature value. */
-    description?: Maybe<Scalars['String']>;
-    /** The featureSlug associated with the boolean feature. */
-    featureSlug: FeatureSlug;
+/** FilterBy values for feature slug visibility. */
+export declare enum FeatureSlugVisibilityFilter {
+    /** Select all feature slugs. */
+    All = "ALL",
+    /** Select only feature slugs which are marked hidden. */
+    Hidden = "HIDDEN",
+    /** Select only feature slugs which are marked visible. */
+    Visible = "VISIBLE"
+}
+/** FeaturerderBy defines how a list of queried features are to be ordered. */
+export declare type FeatureOrderBy = {
+    /** The direction to order the features by. */
+    direction: OrderByDirection;
+    /** The field to order the features by. */
+    field: FeatureOrderByField;
 };
+/** FeatureOrderByField is the field by which the feature list will be ordered. */
+export declare enum FeatureOrderByField {
+    /** Order by the feature class. */
+    Class = "CLASS",
+    /** Order by the feature type. */
+    Type = "TYPE"
+}
 /** CostType describes how the cost for a specific feature is calculated. */
@@ -45,101 +55,115 @@ export declare enum CostType {
 }
-/** Plan visibility options. */
-export declare enum PlanVisibility {
-    /** Only hidden plans. */
+/** A specific version of a product. */
+export declare type ProductVersion = {
+    __typename?: 'ProductVersion';
+    /** The name of the new version. */
+    name?: Maybe<Scalars['String']>;
+    /** The number of the new version. */
+    number?: Maybe<Scalars['String']>;
+    /** The summary of changes to the new version. */
+    summary?: Maybe<Scalars['String']>;
+};
+/** A FeatureSlugPage is a page of queried feature slugs. */
+export declare type FeatureSlugPage = {
+    __typename?: 'FeatureSlugPage';
+    /** The feature slugs selected in the current's page of pagination. */
+    featureSlugs: Array<FeatureSlug>;
+    /** The total number of feature slugs available. */
+    totalCount: Scalars['Int'];
+};
+/** Visibility options for feature slugs. */
+export declare enum FeatureSlugVisibility {
+    /** Filter feature slugs how are hidden. */
     Hidden = "HIDDEN",
-    /** Only visible plans. */
+    /** Filter feature slugs which are visible. */
     Visible = "VISIBLE"
 }
-/** PlanOrderBy defines how a list of queried plans are to be ordered. */
-export declare type PlanOrderBy = {
-    /** The direction to order in. */
-    direction: OrderByDirection;
-    /** The field to order by. */
-    field: PlanOrderByField;
+/**
+ * The classes of features we support in our system. This is used to distinguish
+ * between an abstract Feature type.
+ */
+export declare enum FeatureClass {
+    /** A set of pre-configured features with a range of tiers. */
+    Configured = "CONFIGURED",
+    /** A fixed feature, such as a string of text or a fixed number. */
+    Fixed = "FIXED",
+    /** A usage based feature, where usage is bucketed in a range of tiers. */
+    Metered = "METERED"
+}
+/** A FeaturePage is a page of queried feature pages. */
+export declare type FeaturePage = {
+    __typename?: 'FeaturePage';
+    /** The selected features available in this page. */
+    features: Array<Feature>;
+    /** The total number of features available. */
+    totalCount: Scalars['Int'];
 };
-/** Plan is the product plan. */
-export declare type Plan = {
-    __typename?: 'Plan';
+/** A FeatureVAlue implementation for the BOOLEAN or EXCLUSIVE feature type. */
+export declare type BooleanFeatureValue = {
+    __typename?: 'BooleanFeatureValue';
+    /** The additional cost of this feature. */
+    cost: Scalars['Int'];
     /**
-     * The plan's base cost without the addition of any feature costs, expressed in
-     * the smallest unit of the currency.
+     * Indicates wether or not this value is the default value for its feature. There
+     * can only be one default value per feature.
      */
-    baseCost: Scalars['Int'];
+    default: Scalars['Boolean'];
+    /** The display value for this feature, used in an embedded widget. */
+    display?: Maybe<Scalars['String']>;
+    /** The value used to configure this feature. */
+    value: Scalars['Boolean'];
+};
+/** A FeatureValue implementation which is used an INT_RANGE type. */
+export declare type IntRangeFeatureValue = {
+    __typename?: 'IntRangeFeatureValue';
+    /** The additional cost of this feature. */
+    cost: Scalars['Int'];
     /**
-     * The plan's estimated cost, including costs from fixed features, and the
-     * provided values for configured and metered features.
+     * The costExponent is an exponent used to calculate the final cost for this
+     * feature value, of the form: cost x 10^(costExponent).
+     *
+     * It defaults to zero, meaning the cost is used as entered. It can be used with
+     * a negative value to charge fractions of a cent (or appropriate currency) per
+     * unit. Only values between 0 and 10 (inclusive) are valid for costExponent.
      */
-    cost: Scalars['Int'];
+    costExponent: Scalars['Int'];
+    /** The cost type associated with this feature. */
+    costType: CostType;
     /**
-     * The plan's call-to-action is only populated when an embed variant is
-     * specified.
+     * Indicates wether or not this value is the default value for its feature. There
+     * can only be one default value per feature.
      */
-    cta?: Maybe<Cta>;
-    /** The optional description for this plan. */
-    description?: Maybe<Scalars['String']>;
-    /** List Features asscociated with the Plan. */
-    features?: Maybe<FeaturePage>;
-    /** A human-readable display name for this plan. */
-    name: Scalars['String'];
-    /** A URL-friendly slug for this Plan. */
-    slug: Scalars['String'];
-    /** The plan's visibility. */
-    visibility: PlanVisibility;
+    default: Scalars['Boolean'];
+    /**
+     * Optional value to express a step-based incrementing for
+     * configuration/metering.
+     *
+     * Must be a positive integer. Defaults to 1.
+     */
+    increments: Scalars['Int'];
+    /** Unset means no maximum (eg infinity). */
+    max?: Maybe<Scalars['Int']>;
+    /** Negative infinity not supported. */
+    min: Scalars['Int'];
 };
-/** Plan is the product plan. */
-export declare type PlanCostArgs = {
-    features?: Maybe<Array<FeatureSelection>>;
-};
-/** Plan is the product plan. */
-export declare type PlanFeaturesArgs = {
-    limit: Scalars['Int'];
-    offset: Scalars['Int'];
-    orderBy?: Maybe<Array<FeatureOrderBy>>;
-};
-/** Cta is the plan's call-to-action. */
-export declare type Cta = {
-    __typename?: 'Cta';
-    /** The text displayed on the CTA. */
-    text: Scalars['String'];
-    /** The endpoint for the CTA. */
-    uri?: Maybe<Scalars['String']>;
-};
-/** A PlanPage is a page of queried plans. */
-export declare type PlanPage = {
-    __typename?: 'PlanPage';
-    /** The plans selected for this page in the pagination. */
-    plans: Array<Plan>;
-    /** The total amount of plans available. */
-    totalCount: Scalars['Int'];
-};
-/** Feature describes an interface which all types of features adhere to. */
-export declare type Feature = {
-    /** The class of feature described with the given configuration. */
-    class?: Maybe<FeatureClass>;
-    /** The optional description of this feature value. */
-    description?: Maybe<Scalars['String']>;
-    /** The feature slug this feature is associated with. */
-    featureSlug: FeatureSlug;
-};
-/**
- * FeatureSlugOrderBy defines how a list of queried feature slugs are to be
- * ordered.
- */
-export declare type FeatureSlugOrderBy = {
-    /** The direction to order feature slugs by. */
-    direction: OrderByDirection;
-    /** The field to order feature slugs by. */
-    field: FeatureSlugOrderByField;
-};
-/**
- * BooleanFeature describes a feature which has either a true or false value
- * associated with it, indicating that this feature is on the plan or not.
- */
-export declare type BooleanFeature = Feature & {
-    __typename?: 'BooleanFeature';
-    /** METERED is not a valid class for Boolean features. */
+/** The state of the product. */
+export declare enum ProductState {
+    /**
+     * A product which was live, but is no longer due to another version being
+     * published.
+     */
+    Legacy = "LEGACY",
+    /** A published product. */
+    Live = "LIVE",
+    /** A non-published version of a product, also known as draft. */
+    Working = "WORKING"
+}
+/** StringFeature is a feature which uses a StringFeatureValue as it's value. */
+export declare type StringFeature = Feature & {
+    __typename?: 'StringFeature';
+    /** METERED is not a valid class for String features. */
     class: FeatureClass;
     /** The optional description of this feature value. */
     description?: Maybe<Scalars['String']>;
-    /** The featureSlug associated with the boolean feature. */
+    /** The featureSlug associated with the string feature. */
     featureSlug: FeatureSlug;
@@ -151,3 +175,3 @@ /**
      */
-    value?: Maybe<BooleanFeatureValue>;
+    value?: Maybe<StringFeatureValue>;
     /**
@@ -162,3 +186,3 @@ * The values field is the list of FeatureValues for this feature. CONFIGURED and
      */
-    values: Array<BooleanFeatureValue>;
+    values: Array<StringFeatureValue>;
 };
@@ -196,2 +220,56 @@ /**
 };
+/** FilterBy values for plan visibility. */
+export declare enum PlanVisibilityFilter {
+    /** All plans. */
+    All = "ALL",
+    /** Plans that are marked as hidden. */
+    Hidden = "HIDDEN",
+    /** Plans that are marked as visible. */
+    Visible = "VISIBLE"
+}
+/** EmbeddedProduct represents a product for sale. */
+export declare type EmbeddedProduct = {
+    __typename?: 'EmbeddedProduct';
+    /** List FeatureSlugs associated with the EmbeddedProduct. */
+    featureSlugs?: Maybe<FeatureSlugPage>;
+    /** The embedded product's configured name. */
+    name: Scalars['String'];
+    /** Get specific plan for this EmbeddedProduct. */
+    plan?: Maybe<Plan>;
+    /** List Plans associated with the EmbeddedProduct. */
+    plans?: Maybe<PlanPage>;
+    /** The embedded product's configured slug. */
+    slug: Scalars['String'];
+};
+/** EmbeddedProduct represents a product for sale. */
+export declare type EmbeddedProductFeatureSlugsArgs = {
+    limit: Scalars['Int'];
+    offset: Scalars['Int'];
+    orderBy?: Maybe<Array<FeatureSlugOrderBy>>;
+    filterBy?: Maybe<FeatureSlugFilterBy>;
+};
+/** EmbeddedProduct represents a product for sale. */
+export declare type EmbeddedProductPlanArgs = {
+    slug: Scalars['String'];
+};
+/** EmbeddedProduct represents a product for sale. */
+export declare type EmbeddedProductPlansArgs = {
+    limit: Scalars['Int'];
+    offset: Scalars['Int'];
+    orderBy?: Maybe<Array<PlanOrderBy>>;
+    filterBy?: Maybe<PlanFilterBy>;
+};
+/**
+ * ExcludedFeature is a special class of feature to explicitly exclude it from a
+ * plan, so that it may be displayed differently than implicit omission.
+ */
+export declare type ExcludedFeature = Feature & {
+    __typename?: 'ExcludedFeature';
+    /** ExcludedFeatures always have class FIXED. */
+    class: FeatureClass;
+    /** The optional description of this feature value. */
+    description?: Maybe<Scalars['String']>;
+    /** The featureSlug associated with the boolean feature. */
+    featureSlug: FeatureSlug;
+};
 /** A FeatureVAlue implementation for the STRING feature type. */
@@ -212,60 +290,77 @@ export declare type StringFeatureValue = {
 };
-/** A FeatureValue implementation which is used an INT_RANGE type. */
-export declare type IntRangeFeatureValue = {
-    __typename?: 'IntRangeFeatureValue';
-    /** The additional cost of this feature. */
-    cost: Scalars['Int'];
+/** Plan is the product plan. */
+export declare type Plan = {
+    __typename?: 'Plan';
     /**
-     * The costExponent is an exponent used to calculate the final cost for this
-     * feature value, of the form: cost x 10^(costExponent).
-     *
-     * It defaults to zero, meaning the cost is used as entered. It can be used with
-     * a negative value to charge fractions of a cent (or appropriate currency) per
-     * unit. Only values between 0 and 10 (inclusive) are valid for costExponent.
+     * The plan's base cost without the addition of any feature costs, expressed in
+     * the smallest unit of the currency.
      */
-    costExponent: Scalars['Int'];
-    /** The cost type associated with this feature. */
-    costType: CostType;
+    baseCost: Scalars['Int'];
     /**
-     * Indicates wether or not this value is the default value for its feature. There
-     * can only be one default value per feature.
+     * The plan's estimated cost, including costs from fixed features, and the
+     * provided values for configured and metered features.
      */
-    default: Scalars['Boolean'];
+    cost: Scalars['Int'];
     /**
-     * Optional value to express a step-based incrementing for
-     * configuration/metering.
-     *
-     * Must be a positive integer. Defaults to 1.
+     * The plan's call-to-action is only populated when an embed variant is
+     * specified.
      */
-    increments: Scalars['Int'];
-    /** Unset means no maximum (eg infinity). */
-    max?: Maybe<Scalars['Int']>;
-    /** Negative infinity not supported. */
-    min: Scalars['Int'];
+    cta?: Maybe<Cta>;
+    /** The optional description for this plan. */
+    description?: Maybe<Scalars['String']>;
+    /** List Features asscociated with the Plan. */
+    features?: Maybe<FeaturePage>;
+    /** A human-readable display name for this plan. */
+    name: Scalars['String'];
+    /** A URL-friendly slug for this Plan. */
+    slug: Scalars['String'];
+    /** The plan's visibility. */
+    visibility: PlanVisibility;
 };
-/** Units defines an optional unit suffix for Int or IntRange features. */
-export declare type Units = {
-    __typename?: 'Units';
-    /** The unit name value to display if it is a plural unit. */
-    plural: Scalars['String'];
-    /** The unit name value to display if it is a singular unit. */
-    single: Scalars['String'];
+/** Plan is the product plan. */
+export declare type PlanCostArgs = {
+    features?: Maybe<Array<FeatureSelection>>;
 };
-/** FeatureOrderByField is the field by which the feature list will be ordered. */
-export declare enum FeatureOrderByField {
-    /** Order by the feature class. */
-    Class = "CLASS",
-    /** Order by the feature type. */
-    Type = "TYPE"
-}
-/**
- * OrderByDirection is used in all paginated queries to order by a specific
- * field's direction.
- */
-export declare enum OrderByDirection {
-    /** Sort the data in ascending order. */
-    Asc = "ASC",
-    /** Sort the data in descending order. */
-    Desc = "DESC"
-}
+/** Plan is the product plan. */
+export declare type PlanFeaturesArgs = {
+    limit: Scalars['Int'];
+    offset: Scalars['Int'];
+    orderBy?: Maybe<Array<FeatureOrderBy>>;
+};
+/** Product represents a product for sale. */
+export declare type Product = {
+    __typename?: 'Product';
+    /** List FeatureSlugs associated with the Product. */
+    featureSlugs?: Maybe<FeatureSlugPage>;
+    /** URL to an uploaded product logo. */
+    logoAddress?: Maybe<Scalars['String']>;
+    /** Logo background color in hex format. */
+    logoBackgroundColor: Scalars['String'];
+    /** The configured product name. */
+    name: Scalars['String'];
+    /** List Plans associated with the Product. */
+    plans?: Maybe<PlanPage>;
+    /** The datetime this product was published. */
+    publishedAt: Scalars['Time'];
+    /** The configured product slug. */
+    slug: Scalars['String'];
+    /** The embed's product state. */
+    state: ProductState;
+    /** The version for this specific product. */
+    version?: Maybe<ProductVersion>;
+};
+/** Product represents a product for sale. */
+export declare type ProductFeatureSlugsArgs = {
+    limit: Scalars['Int'];
+    offset: Scalars['Int'];
+    orderBy?: Maybe<Array<FeatureSlugOrderBy>>;
+    filterBy?: Maybe<FeatureSlugFilterBy>;
+};
+/** Product represents a product for sale. */
+export declare type ProductPlansArgs = {
+    limit: Scalars['Int'];
+    offset: Scalars['Int'];
+    orderBy?: Maybe<Array<PlanOrderBy>>;
+    filterBy?: Maybe<PlanFilterBy>;
+};
 /** FeatureSlug represents the name and slug of a set of features. */
@@ -298,16 +393,74 @@ export declare type FeatureSlug = {
 }
+/** Cta is the plan's call-to-action. */
+export declare type Cta = {
+    __typename?: 'Cta';
+    /** The text displayed on the CTA. */
+    text: Scalars['String'];
+    /** The endpoint for the CTA. */
+    uri?: Maybe<Scalars['String']>;
+};
+/** FeatureSlugFilterBy defines filter rules for listing feature slugs. */
+export declare type FeatureSlugFilterBy = {
+    /**
+     * provide this value to filter the result by feature slug's visibility
+     * defaults to VISIBLE.
+     */
+    visibility?: Maybe<FeatureSlugVisibilityFilter>;
+};
+/** Feature describes an interface which all types of features adhere to. */
+export declare type Feature = {
+    /** The class of feature described with the given configuration. */
+    class?: Maybe<FeatureClass>;
+    /** The optional description of this feature value. */
+    description?: Maybe<Scalars['String']>;
+    /** The feature slug this feature is associated with. */
+    featureSlug: FeatureSlug;
+};
+/** A PlanPage is a page of queried plans. */
+export declare type PlanPage = {
+    __typename?: 'PlanPage';
+    /** The plans selected for this page in the pagination. */
+    plans: Array<Plan>;
+    /** The total amount of plans available. */
+    totalCount: Scalars['Int'];
+};
+/** Queries for the public API. */
+export declare type Query = {
+    __typename?: 'Query';
+    /** Look up a Product variant by it's embed id. */
+    embeddedProduct?: Maybe<EmbeddedProduct>;
+    /** Look up a Product by its `slug`. */
+    product?: Maybe<Product>;
+};
+/** Queries for the public API. */
+export declare type QueryEmbeddedProductArgs = {
+    embedId: Scalars['ID'];
+};
+/** Queries for the public API. */
+export declare type QueryProductArgs = {
+    slug: Scalars['String'];
+    version?: Maybe<Scalars['String']>;
+};
 /**
- * IntFeature is a feature which uses a singular integer value to describe the
- * feature's unit value.
+ * OrderByDirection is used in all paginated queries to order by a specific
+ * field's direction.
  */
-export declare type IntFeature = Feature & {
-    __typename?: 'IntFeature';
-    /** METERED is not a valid class for Int features. */
+export declare enum OrderByDirection {
+    /** Sort the data in ascending order. */
+    Asc = "ASC",
+    /** Sort the data in descending order. */
+    Desc = "DESC"
+}
+/**
+ * BooleanFeature describes a feature which has either a true or false value
+ * associated with it, indicating that this feature is on the plan or not.
+ */
+export declare type BooleanFeature = Feature & {
+    __typename?: 'BooleanFeature';
+    /** METERED is not a valid class for Boolean features. */
     class: FeatureClass;
     /** The optional description of this feature value. */
     description?: Maybe<Scalars['String']>;
-    /** The featureSlug associated with this feature. */
+    /** The featureSlug associated with the boolean feature. */
     featureSlug: FeatureSlug;
-    /** The units this feature uses. */
-    units?: Maybe<Units>;
     /**
@@ -318,3 +471,3 @@ * The value field is a convenience field.
      */
-    value?: Maybe<IntFeatureValue>;
+    value?: Maybe<BooleanFeatureValue>;
     /**
@@ -326,22 +479,7 @@ * The values field is the list of FeatureValues for this feature. CONFIGURED and
      * TODO: add a note about when publishing you must have exactly one value for FIXED,
-     * at least 2 for CONFIGURED Boolean and String, and at least 1 for CONFIGURED and
-     * METERED Int.
+     * at least 2 for CONFIGURED BOOL and STRING, and at least 1 for CONFIGURED and
+     * METERED INT.
      */
-    values: Array<IntFeatureValue>;
+    values: Array<BooleanFeatureValue>;
 };
-/** FeaturerderBy defines how a list of queried features are to be ordered. */
-export declare type FeatureOrderBy = {
-    /** The direction to order the features by. */
-    direction: OrderByDirection;
-    /** The field to order the features by. */
-    field: FeatureOrderByField;
-};
-/** FeatureSlugFilterBy defines filter rules for listing feature slugs. */
-export declare type FeatureSlugFilterBy = {
-    /**
-     * provide this value to filter the result by feature slug's visibility
-     * defaults to VISIBLE.
-     */
-    visibility?: Maybe<FeatureSlugVisibilityFilter>;
-};
 /**
@@ -362,67 +500,59 @@ * FeatureSelection. for cost estimation, and eventual subscription.
 };
-/** The state of the product. */
-export declare enum ProductState {
+/** Plan visibility options. */
+export declare enum PlanVisibility {
+    /** Only hidden plans. */
+    Hidden = "HIDDEN",
+    /** Only visible plans. */
+    Visible = "VISIBLE"
+}
+/** PlanOrderBy defines how a list of queried plans are to be ordered. */
+export declare type PlanOrderBy = {
+    /** The direction to order in. */
+    direction: OrderByDirection;
+    /** The field to order by. */
+    field: PlanOrderByField;
+};
+/** PlanOrderByField is the field by which the plan list will be ordered. */
+export declare enum PlanOrderByField {
+    /** Order by the cost of a plan. */
+    Cost = "COST",
+    /** Order by the name of a plan. */
+    Name = "NAME",
+    /** Order by the sorted position in relation to the plan's product. */
+    Position = "POSITION",
+    /** Order by the slug of a plan. */
+    Slug = "SLUG"
+}
+/** PlanFilterBy defines filter rules for listing plans. */
+export declare type PlanFilterBy = {
     /**
-     * A product which was live, but is no longer due to another version being
-     * published.
+     * provide this value to filter the result by plan's visibility
+     * defaults to VISIBLE.
      */
-    Legacy = "LEGACY",
-    /** A published product. */
-    Live = "LIVE",
-    /** A non-published version of a product, also known as draft. */
-    Working = "WORKING"
-}
-/** EmbeddedProduct represents a product for sale. */
-export declare type EmbeddedProduct = {
-    __typename?: 'EmbeddedProduct';
-    /** List FeatureSlugs associated with the EmbeddedProduct. */
-    featureSlugs?: Maybe<FeatureSlugPage>;
-    /** The embedded product's configured name. */
-    name: Scalars['String'];
-    /** Get specific plan for this EmbeddedProduct. */
-    plan?: Maybe<Plan>;
-    /** List Plans associated with the EmbeddedProduct. */
-    plans?: Maybe<PlanPage>;
-    /** The embedded product's configured slug. */
-    slug: Scalars['String'];
+    visibility?: Maybe<PlanVisibilityFilter>;
 };
-/** EmbeddedProduct represents a product for sale. */
-export declare type EmbeddedProductFeatureSlugsArgs = {
-    limit: Scalars['Int'];
-    offset: Scalars['Int'];
-    orderBy?: Maybe<Array<FeatureSlugOrderBy>>;
-    filterBy?: Maybe<FeatureSlugFilterBy>;
+/**
+ * FeatureSlugOrderBy defines how a list of queried feature slugs are to be
+ * ordered.
+ */
+export declare type FeatureSlugOrderBy = {
+    /** The direction to order feature slugs by. */
+    direction: OrderByDirection;
+    /** The field to order feature slugs by. */
+    field: FeatureSlugOrderByField;
 };
-/** EmbeddedProduct represents a product for sale. */
-export declare type EmbeddedProductPlanArgs = {
-    slug: Scalars['String'];
-};
-/** EmbeddedProduct represents a product for sale. */
-export declare type EmbeddedProductPlansArgs = {
-    limit: Scalars['Int'];
-    offset: Scalars['Int'];
-    orderBy?: Maybe<Array<PlanOrderBy>>;
-    filterBy?: Maybe<PlanFilterBy>;
-};
 /**
- * The classes of features we support in our system. This is used to distinguish
- * between an abstract Feature type.
+ * IntFeature is a feature which uses a singular integer value to describe the
+ * feature's unit value.
  */
-export declare enum FeatureClass {
-    /** A set of pre-configured features with a range of tiers. */
-    Configured = "CONFIGURED",
-    /** A fixed feature, such as a string of text or a fixed number. */
-    Fixed = "FIXED",
-    /** A usage based feature, where usage is bucketed in a range of tiers. */
-    Metered = "METERED"
-}
-/** StringFeature is a feature which uses a StringFeatureValue as it's value. */
-export declare type StringFeature = Feature & {
-    __typename?: 'StringFeature';
-    /** METERED is not a valid class for String features. */
+export declare type IntFeature = Feature & {
+    __typename?: 'IntFeature';
+    /** METERED is not a valid class for Int features. */
     class: FeatureClass;
     /** The optional description of this feature value. */
     description?: Maybe<Scalars['String']>;
-    /** The featureSlug associated with the string feature. */
+    /** The featureSlug associated with this feature. */
     featureSlug: FeatureSlug;
+    /** The units this feature uses. */
+    units?: Maybe<Units>;
     /**
@@ -433,3 +563,3 @@ * The value field is a convenience field.
      */
-    value?: Maybe<StringFeatureValue>;
+    value?: Maybe<IntFeatureValue>;
     /**
@@ -441,7 +571,15 @@ * The values field is the list of FeatureValues for this feature. CONFIGURED and
      * TODO: add a note about when publishing you must have exactly one value for FIXED,
-     * at least 2 for CONFIGURED BOOL and STRING, and at least 1 for CONFIGURED and
-     * METERED INT.
+     * at least 2 for CONFIGURED Boolean and String, and at least 1 for CONFIGURED and
+     * METERED Int.
      */
-    values: Array<StringFeatureValue>;
+    values: Array<IntFeatureValue>;
 };
+/** Units defines an optional unit suffix for Int or IntRange features. */
+export declare type Units = {
+    __typename?: 'Units';
+    /** The unit name value to display if it is a plural unit. */
+    plural: Scalars['String'];
+    /** The unit name value to display if it is a singular unit. */
+    single: Scalars['String'];
+};
 /** A FeatureValue implementation for the INT feature type. */
@@ -462,140 +600,78 @@ export declare type IntFeatureValue = {
 };
-/** PlanFilterBy defines filter rules for listing plans. */
-export declare type PlanFilterBy = {
-    /**
-     * provide this value to filter the result by plan's visibility
-     * defaults to VISIBLE.
-     */
-    visibility?: Maybe<PlanVisibilityFilter>;
-};
-/** FilterBy values for plan visibility. */
-export declare enum PlanVisibilityFilter {
-    /** All plans. */
-    All = "ALL",
-    /** Plans that are marked as hidden. */
-    Hidden = "HIDDEN",
-    /** Plans that are marked as visible. */
-    Visible = "VISIBLE"
-}
-/** PlanOrderByField is the field by which the plan list will be ordered. */
-export declare enum PlanOrderByField {
-    /** Order by the cost of a plan. */
-    Cost = "COST",
-    /** Order by the name of a plan. */
-    Name = "NAME",
-    /** Order by the sorted position in relation to the plan's product. */
-    Position = "POSITION",
-    /** Order by the slug of a plan. */
-    Slug = "SLUG"
-}
-/** Visibility options for feature slugs. */
-export declare enum FeatureSlugVisibility {
-    /** Filter feature slugs how are hidden. */
-    Hidden = "HIDDEN",
-    /** Filter feature slugs which are visible. */
-    Visible = "VISIBLE"
-}
-/** A FeatureSlugPage is a page of queried feature slugs. */
-export declare type FeatureSlugPage = {
-    __typename?: 'FeatureSlugPage';
-    /** The feature slugs selected in the current's page of pagination. */
-    featureSlugs: Array<FeatureSlug>;
-    /** The total number of feature slugs available. */
-    totalCount: Scalars['Int'];
-};
-/** A specific version of a product. */
-export declare type ProductVersion = {
-    __typename?: 'ProductVersion';
-    /** The name of the new version. */
-    name?: Maybe<Scalars['String']>;
-    /** The number of the new version. */
-    number?: Maybe<Scalars['String']>;
-    /** The summary of changes to the new version. */
-    summary?: Maybe<Scalars['String']>;
-};
-/** FilterBy values for feature slug visibility. */
-export declare enum FeatureSlugVisibilityFilter {
-    /** Select all feature slugs. */
-    All = "ALL",
-    /** Select only feature slugs which are marked hidden. */
-    Hidden = "HIDDEN",
-    /** Select only feature slugs which are marked visible. */
-    Visible = "VISIBLE"
-}
-/** A FeaturePage is a page of queried feature pages. */
-export declare type FeaturePage = {
-    __typename?: 'FeaturePage';
-    /** The selected features available in this page. */
-    features: Array<Feature>;
-    /** The total number of features available. */
-    totalCount: Scalars['Int'];
-};
-/** A FeatureVAlue implementation for the BOOLEAN or EXCLUSIVE feature type. */
-export declare type BooleanFeatureValue = {
-    __typename?: 'BooleanFeatureValue';
-    /** The additional cost of this feature. */
-    cost: Scalars['Int'];
-    /**
-     * Indicates wether or not this value is the default value for its feature. There
-     * can only be one default value per feature.
-     */
-    default: Scalars['Boolean'];
-    /** The display value for this feature, used in an embedded widget. */
-    display?: Maybe<Scalars['String']>;
-    /** The value used to configure this feature. */
-    value: Scalars['Boolean'];
-};
-/** Product represents a product for sale. */
-export declare type Product = {
-    __typename?: 'Product';
-    /** List FeatureSlugs associated with the Product. */
-    featureSlugs?: Maybe<FeatureSlugPage>;
-    /** URL to an uploaded product logo. */
-    logoAddress?: Maybe<Scalars['String']>;
-    /** Logo background color in hex format. */
-    logoBackgroundColor: Scalars['String'];
-    /** The configured product name. */
-    name: Scalars['String'];
-    /** List Plans associated with the Product. */
-    plans?: Maybe<PlanPage>;
-    /** The datetime this product was published. */
-    publishedAt: Scalars['Time'];
-    /** The configured product slug. */
-    slug: Scalars['String'];
-    /** The embed's product state. */
-    state: ProductState;
-    /** The version for this specific product. */
-    version?: Maybe<ProductVersion>;
-};
-/** Product represents a product for sale. */
-export declare type ProductFeatureSlugsArgs = {
-    limit: Scalars['Int'];
-    offset: Scalars['Int'];
-    orderBy?: Maybe<Array<FeatureSlugOrderBy>>;
-    filterBy?: Maybe<FeatureSlugFilterBy>;
-};
-/** Product represents a product for sale. */
-export declare type ProductPlansArgs = {
-    limit: Scalars['Int'];
-    offset: Scalars['Int'];
-    orderBy?: Maybe<Array<PlanOrderBy>>;
-    filterBy?: Maybe<PlanFilterBy>;
-};
-/** Queries for the public API. */
-export declare type Query = {
-    __typename?: 'Query';
-    /** Look up a Product variant by it's embed id. */
-    embeddedProduct?: Maybe<EmbeddedProduct>;
-    /** Look up a Product by its `slug`. */
-    product?: Maybe<Product>;
-};
-/** Queries for the public API. */
-export declare type QueryEmbeddedProductArgs = {
-    embedId: Scalars['ID'];
-};
-/** Queries for the public API. */
-export declare type QueryProductArgs = {
-    slug: Scalars['String'];
-    version?: Maybe<Scalars['String']>;
-};
+declare type Feature_StringFeature_Fragment = ({
+    __typename: 'StringFeature';
+} & Pick<StringFeature, 'class' | 'description'> & {
+    stringValues: Array<({
+        __typename?: 'StringFeatureValue';
+    } & Pick<StringFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
+    featureSlug: ({
+        __typename?: 'FeatureSlug';
+    } & Pick<FeatureSlug, 'slug'>);
+});
+declare type Feature_IntRangeFeature_Fragment = ({
+    __typename: 'IntRangeFeature';
+} & Pick<IntRangeFeature, 'class' | 'description'> & {
+    intRangeValues: Array<({
+        __typename?: 'IntRangeFeatureValue';
+    } & Pick<IntRangeFeatureValue, 'min' | 'max' | 'increments' | 'cost'>)>;
+    units?: Maybe<({
+        __typename?: 'Units';
+    } & Pick<Units, 'single' | 'plural'>)>;
+    featureSlug: ({
+        __typename?: 'FeatureSlug';
+    } & Pick<FeatureSlug, 'slug'>);
+});
+declare type Feature_ExcludedFeature_Fragment = ({
+    __typename: 'ExcludedFeature';
+} & Pick<ExcludedFeature, 'class' | 'description'> & {
+    featureSlug: ({
+        __typename?: 'FeatureSlug';
+    } & Pick<FeatureSlug, 'slug'>);
+});
+declare type Feature_BooleanFeature_Fragment = ({
+    __typename: 'BooleanFeature';
+} & Pick<BooleanFeature, 'class' | 'description'> & {
+    booleanValues: Array<({
+        __typename?: 'BooleanFeatureValue';
+    } & Pick<BooleanFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
+    featureSlug: ({
+        __typename?: 'FeatureSlug';
+    } & Pick<FeatureSlug, 'slug'>);
+});
+declare type Feature_IntFeature_Fragment = ({
+    __typename: 'IntFeature';
+} & Pick<IntFeature, 'class' | 'description'> & {
+    intValues: Array<({
+        __typename?: 'IntFeatureValue';
+    } & Pick<IntFeatureValue, 'display' | 'value' | 'cost'>)>;
+    featureSlug: ({
+        __typename?: 'FeatureSlug';
+    } & Pick<FeatureSlug, 'slug'>);
+});
+export declare type FeatureFragment = Feature_StringFeature_Fragment | Feature_IntRangeFeature_Fragment | Feature_ExcludedFeature_Fragment | Feature_BooleanFeature_Fragment | Feature_IntFeature_Fragment;
+export declare type FeatureSlugFragment = ({
+    __typename?: 'FeatureSlug';
+} & Pick<FeatureSlug, 'slug' | 'name' | 'description'>);
+export declare type PlanFragment = ({
+    __typename?: 'Plan';
+} & Pick<Plan, 'slug' | 'name' | 'cost' | 'description'> & {
+    features?: Maybe<({
+        __typename?: 'FeaturePage';
+    } & {
+        features: Array<({
+            __typename?: 'StringFeature';
+        } & Feature_StringFeature_Fragment) | ({
+            __typename?: 'IntRangeFeature';
+        } & Feature_IntRangeFeature_Fragment) | ({
+            __typename?: 'ExcludedFeature';
+        } & Feature_ExcludedFeature_Fragment) | ({
+            __typename?: 'BooleanFeature';
+        } & Feature_BooleanFeature_Fragment) | ({
+            __typename?: 'IntFeature';
+        } & Feature_IntFeature_Fragment)>;
+    })>;
+    cta?: Maybe<({
+        __typename?: 'Cta';
+    } & Pick<Cta, 'text' | 'uri'>)>;
+});
 export declare type EmbeddedProductQueryVariables = Exact<{
@@ -615,3 +691,3 @@ embedId: Scalars['ID'];
                 __typename?: 'FeatureSlug';
-            } & Pick<FeatureSlug, 'slug' | 'name' | 'description'>)>;
+            } & FeatureSlugFragment)>;
         })>;
@@ -623,57 +699,3 @@ plans?: Maybe<({
                 __typename?: 'Plan';
-            } & Pick<Plan, 'slug' | 'name' | 'cost' | 'description'> & {
-                features?: Maybe<({
-                    __typename?: 'FeaturePage';
-                } & {
-                    features: Array<({
-                        __typename: 'ExcludedFeature';
-                    } & Pick<ExcludedFeature, 'class'> & {
-                        featureSlug: ({
-                            __typename?: 'FeatureSlug';
-                        } & Pick<FeatureSlug, 'slug'>);
-                    }) | ({
-                        __typename: 'BooleanFeature';
-                    } & Pick<BooleanFeature, 'class'> & {
-                        booleanValues: Array<({
-                            __typename?: 'BooleanFeatureValue';
-                        } & Pick<BooleanFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
-                        featureSlug: ({
-                            __typename?: 'FeatureSlug';
-                        } & Pick<FeatureSlug, 'slug'>);
-                    }) | ({
-                        __typename: 'IntRangeFeature';
-                    } & Pick<IntRangeFeature, 'class'> & {
-                        intRangeValues: Array<({
-                            __typename?: 'IntRangeFeatureValue';
-                        } & Pick<IntRangeFeatureValue, 'min' | 'max' | 'increments' | 'cost'>)>;
-                        units?: Maybe<({
-                            __typename?: 'Units';
-                        } & Pick<Units, 'single' | 'plural'>)>;
-                        featureSlug: ({
-                            __typename?: 'FeatureSlug';
-                        } & Pick<FeatureSlug, 'slug'>);
-                    }) | ({
-                        __typename: 'IntFeature';
-                    } & Pick<IntFeature, 'class'> & {
-                        intValues: Array<({
-                            __typename?: 'IntFeatureValue';
-                        } & Pick<IntFeatureValue, 'display' | 'value' | 'cost'>)>;
-                        featureSlug: ({
-                            __typename?: 'FeatureSlug';
-                        } & Pick<FeatureSlug, 'slug'>);
-                    }) | ({
-                        __typename: 'StringFeature';
-                    } & Pick<StringFeature, 'class'> & {
-                        stringValues: Array<({
-                            __typename?: 'StringFeatureValue';
-                        } & Pick<StringFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
-                        featureSlug: ({
-                            __typename?: 'FeatureSlug';
-                        } & Pick<FeatureSlug, 'slug'>);
-                    })>;
-                })>;
-                cta?: Maybe<({
-                    __typename?: 'Cta';
-                } & Pick<Cta, 'text' | 'uri'>)>;
-            })>;
+            } & PlanFragment)>;
         })>;
@@ -703,4 +725,7 @@ })>;
                 features: Array<({
-                    __typename: 'ExcludedFeature';
-                } & Pick<ExcludedFeature, 'class'> & {
+                    __typename: 'StringFeature';
+                } & Pick<StringFeature, 'class' | 'description'> & {
+                    stringValues: Array<({
+                        __typename?: 'StringFeatureValue';
+                    } & Pick<StringFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
                     featureSlug: ({
@@ -710,13 +735,4 @@ __typename?: 'FeatureSlug';
                 }) | ({
-                    __typename: 'BooleanFeature';
-                } & Pick<BooleanFeature, 'class'> & {
-                    booleanValues: Array<({
-                        __typename?: 'BooleanFeatureValue';
-                    } & Pick<BooleanFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
-                    featureSlug: ({
-                        __typename?: 'FeatureSlug';
-                    } & Pick<FeatureSlug, 'slug'>);
-                }) | ({
                     __typename: 'IntRangeFeature';
-                } & Pick<IntRangeFeature, 'class'> & {
+                } & Pick<IntRangeFeature, 'class' | 'description'> & {
                     intRangeValues: Array<({
@@ -732,4 +748,19 @@ __typename?: 'IntRangeFeatureValue';
                 }) | ({
+                    __typename: 'ExcludedFeature';
+                } & Pick<ExcludedFeature, 'class' | 'description'> & {
+                    featureSlug: ({
+                        __typename?: 'FeatureSlug';
+                    } & Pick<FeatureSlug, 'slug'>);
+                }) | ({
+                    __typename: 'BooleanFeature';
+                } & Pick<BooleanFeature, 'class' | 'description'> & {
+                    booleanValues: Array<({
+                        __typename?: 'BooleanFeatureValue';
+                    } & Pick<BooleanFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
+                    featureSlug: ({
+                        __typename?: 'FeatureSlug';
+                    } & Pick<FeatureSlug, 'slug'>);
+                }) | ({
                     __typename: 'IntFeature';
-                } & Pick<IntFeature, 'class'> & {
+                } & Pick<IntFeature, 'class' | 'description'> & {
                     intValues: Array<({
@@ -741,11 +772,2 @@ __typename?: 'IntFeatureValue';
                     } & Pick<FeatureSlug, 'slug'>);
-                }) | ({
-                    __typename: 'StringFeature';
-                } & Pick<StringFeature, 'class'> & {
-                    stringValues: Array<({
-                        __typename?: 'StringFeatureValue';
-                    } & Pick<StringFeatureValue, 'display' | 'value' | 'cost' | 'default'>)>;
-                    featureSlug: ({
-                        __typename?: 'FeatureSlug';
-                    } & Pick<FeatureSlug, 'slug'>);
                 })>;
@@ -756,1 +778,2 @@ })>;
 });
+export {};

package.json

 {
   "name": "@manifoldco/web-components",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "Manifold's Web Components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2279334

increased by0.37%

Lines of code

35797

increased by0.43%

No dependency changes