@redocly/openapi-docs 3.0.0-alpha.10 → 3.0.0-alpha.11

package/lib/components/common/CheckboxList.js

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,l,o){void 0===o&&(o=l);var r=Object.getOwnPropertyDescriptor(t,l);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[l]}}),Object.defineProperty(e,o,r)}:function(e,t,l,o){void 0===o&&(o=l),e[o]=t[l]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var l in e)"default"!==l&&Object.prototype.hasOwnProperty.call(e,l)&&__createBinding(t,e,l);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckboxList=exports.CheckboxListComponent=void 0;const informed_1=require("informed"),theme_1=require("@redocly/theme"),react_1=__importStar(require("react")),styled_components_1=__importDefault(require("styled-components")),form_1=require("./form"),Checkbox_1=require("./Checkbox"),DEFAULT_MAX_ITEMS=11;class CheckboxListComponent extends react_1.Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{collapsed:!0}})}onCheckBoxClick(e){const t=e.target.value,l=e.target.checked;this.props.fieldApi.setTouched(!0);const o=this.props.fieldApi.getValue()||[];let r;if(l)r=[...o,t];else{const e=o.indexOf(t);r=[...o.slice(0,e),...o.slice(e+1)]}this.props.fieldApi.setValue(r)}isFieldChecked(e){return this.props.fieldApi.getValue().includes(e)}toggle(){this.setState({collapsed:!this.state.collapsed})}selectAll(){this.props.fieldApi.setValue(this.props.items)}clearAll(){this.props.fieldApi.setValue([])}render(){const{items:e,fieldApi:t,validateOnChange:l,maxDisplayedItems:o,showControls:r,trimItemsLength:i}=this.props,{collapsed:n}=this.state,s=t.getError(),a=o||11,c=i&&this.state.collapsed?e.slice(0,a):e;return react_1.default.createElement("div",null,r?react_1.default.createElement(ControlButtonsWrapper,null,react_1.default.createElement(theme_1.SamplesControlButton,{onClick:()=>{this.selectAll()}},"Select all"),react_1.default.createElement(theme_1.SamplesControlButton,{onClick:()=>{this.clearAll()}},"Clear")):null,react_1.default.createElement("div",null,c.map((e=>react_1.default.createElement(Checkbox_1.Checkbox,{fullWidth:!0,id:e,value:e,checked:this.isFieldChecked(e),label:e,key:e,onChange:e=>{this.onCheckBoxClick(e),l&&t.validate()}}))),e.length>a&&i?react_1.default.createElement(ToggleButton,{onClick:()=>{this.toggle()}},n?"Show all":"Collapse"):null),s?react_1.default.createElement(form_1.FormError,null,s):"")}}exports.CheckboxListComponent=CheckboxListComponent,exports.CheckboxList=(0,informed_1.asField)(CheckboxListComponent);const ControlButtonsWrapper=(0,styled_components_1.default)(theme_1.SampleControls)`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,r){void 0===r&&(r=o);var l=Object.getOwnPropertyDescriptor(t,o);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,r,l)}:function(e,t,o,r){void 0===r&&(r=o),e[r]=t[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckboxList=exports.CheckboxListComponent=void 0;const informed_1=require("informed"),theme_1=require("@redocly/theme"),react_1=__importStar(require("react")),styled_components_1=__importDefault(require("styled-components")),form_1=require("./form"),Checkbox_1=require("./Checkbox"),DEFAULT_MAX_ITEMS=11,CheckboxListComponent=({items:e,fieldApi:t,validateOnChange:o,maxDisplayedItems:r,showControls:l,trimItemsLength:n})=>{const[a,i]=(0,react_1.useState)(!0),c=e=>t.getValue().includes(e),u=t.getError(),s=r||11,_=n&&a?e.slice(0,s):e;return react_1.default.createElement("div",null,l?react_1.default.createElement(ControlButtonsWrapper,null,react_1.default.createElement(theme_1.SamplesControlButton,{onClick:()=>{t.setValue(e)}},"Select all"),react_1.default.createElement(theme_1.SamplesControlButton,{onClick:()=>{t.setValue([])}},"Clear")):null,react_1.default.createElement("div",null,_.map((e=>react_1.default.createElement(Checkbox_1.Checkbox,{fullWidth:!0,id:e,value:e,checked:c(e),label:e,key:e,onChange:e=>{(e=>{const o=e.target.value,r=e.target.checked;t.setTouched(!0);const l=t.getValue()||[];let n;if(r)n=[...l,o];else{const e=l.indexOf(o);n=[...l.slice(0,e),...l.slice(e+1)]}t.setValue(n)})(e),o&&t.validate()}}))),e.length>s&&n?react_1.default.createElement(ToggleButton,{onClick:()=>{i((e=>!e))}},a?"Show all":"Collapse"):null),u?react_1.default.createElement(form_1.FormError,null,u):"")};exports.CheckboxListComponent=CheckboxListComponent,exports.CheckboxList=(0,informed_1.asField)(exports.CheckboxListComponent);const ControlButtonsWrapper=(0,styled_components_1.default)(theme_1.SampleControls)`
   opacity: 1;
   text-align: left;
 `,ToggleButton=(0,styled_components_1.default)(theme_1.SamplesControlButton)`

package/lib/components/common/Dropdown/Dropdown.js

@@ -12,5 +12,5 @@
   polyline {
     color: ${e=>"dark"===e.variant&&"white"};
   }
-`,DropdownComponent=e=>{const{options:t,onChange:r,handleClear:a,clearable:n,placeholder:o,value:l="",className:i,variant:c="light"}=e;return react_1.default.createElement("div",{className:i+" dropdown-wrapper"},react_1.default.createElement(ArrowIcon,{variant:c}),n&&(null==l?void 0:l.length)>0&&react_1.default.createElement(ClearButton_1.ClearButton,{handleClear:a}),react_1.default.createElement("select",{onChange:e=>{const{selectedIndex:a}=e.target;r(t[o||!l?a-1:a])},value:l,className:"dropdown-select"},o&&react_1.default.createElement("option",{disabled:!0,hidden:!0,value:o},o),!l&&!o&&react_1.default.createElement("option",{disabled:!0}),t.map((({idx:e,value:t,title:r},a)=>react_1.default.createElement("option",{key:e||t+a,value:t,className:"dropdown-option"},r||t)))),react_1.default.createElement("label",null,l))};exports.Dropdown=(0,react_1.memo)(DropdownComponent);
+`,DropdownComponent=({options:e,onChange:t,handleClear:r,clearable:a,placeholder:n,value:o="",className:l,variant:i="light"})=>react_1.default.createElement("div",{className:l+" dropdown-wrapper"},react_1.default.createElement(ArrowIcon,{variant:i}),a&&(null==o?void 0:o.length)>0&&react_1.default.createElement(ClearButton_1.ClearButton,{handleClear:r}),react_1.default.createElement("select",{onChange:r=>{const{selectedIndex:a}=r.target;t(e[n||!o?a-1:a])},value:o,className:"dropdown-select"},n&&react_1.default.createElement("option",{disabled:!0,hidden:!0,value:n},n),!o&&!n&&react_1.default.createElement("option",{disabled:!0}),e.map((({idx:e,value:t,title:r},a)=>react_1.default.createElement("option",{key:e||t+a,value:t,className:"dropdown-option"},r||t)))),react_1.default.createElement("label",null,o));exports.Dropdown=(0,react_1.memo)(DropdownComponent);
 //# sourceMappingURL=Dropdown.js.map

package/lib/components/common/Fields/fields-layout.d.ts

@@ -0,0 +1,16 @@
+export declare const getCssVariable: (variable: string) => string;
+export declare const PropertiesTableCaption: import("styled-components").StyledComponent<"caption", any, {}, never>;
+export declare const PropertyCell: import("styled-components").StyledComponent<"td", any, {
+    kind?: string | undefined;
+}, never>;
+export declare const PropertyCellWithInner: import("styled-components").StyledComponent<"td", any, {
+    kind?: string | undefined;
+}, never>;
+export declare const PropertyNameCell: import("styled-components").StyledComponent<"td", any, {
+    kind?: string | undefined;
+}, never>;
+export declare const PropertyDetailsCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const PropertyBullet: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const InnerPropertiesWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PropertiesTableWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PropertiesTable: import("styled-components").StyledComponent<"table", any, {}, never>;

package/lib/components/common/Fields/fields-layout.js

@@ -0,0 +1,228 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,o){void 0===o&&(o=t);var a=Object.getOwnPropertyDescriptor(r,t);a&&!("get"in a?!r.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,o,a)}:function(e,r,t,o){void 0===o&&(o=t),e[o]=r[t]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}:function(e,r){e.default=r}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&__createBinding(r,e,t);return __setModuleDefault(r,e),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PropertiesTable=exports.PropertiesTableWrap=exports.InnerPropertiesWrap=exports.PropertyBullet=exports.PropertyDetailsCell=exports.PropertyNameCell=exports.PropertyCellWithInner=exports.PropertyCell=exports.PropertiesTableCaption=exports.getCssVariable=void 0;const styled_components_1=__importStar(require("styled-components")),utils_1=require("../../../utils"),mixins_1=require("../mixins"),getCssVariable=e=>"undefined"!=typeof document?getComputedStyle(document.documentElement).getPropertyValue(e).trim():"";exports.getCssVariable=getCssVariable,exports.PropertiesTableCaption=styled_components_1.default.caption`
+  text-align: right;
+  font-size: 0.9em;
+  font-weight: normal;
+  color: var(--text-color-secondary);
+`;const repeatingGradient=styled_components_1.css`
+  repeating-linear-gradient(0deg,
+  var(--schemas-lines-color),
+  var(--schemas-lines-color) 3px,
+  transparent 3px,
+  transparent 5px,
+  var(--schemas-lines-color) 5px);
+`;exports.PropertyCell=styled_components_1.default.td`
+  box-sizing: border-box;
+  position: relative;
+  background-image: ${repeatingGradient};
+  background-repeat: no-repeat;
+  background-size: 1px 100%;
+  display: block;
+  overflow: hidden;
+  padding: 0 20px;
+  margin-bottom: 2px;
+
+  ${({theme:e})=>e.mediaQueries.small} {
+    display: table-cell;
+    overflow: initial;
+    padding: 10px;
+    margin-bottom: 0;
+  }
+
+  tr:first-of-type > & {
+    background-image: ${repeatingGradient};
+    background-position: 0 10px;
+    padding-top: 0;
+  }
+
+  tr.last > & {
+    background-image: ${repeatingGradient};
+    padding-bottom: 0;
+    background-size: 0.9px 100%;
+
+    ${({theme:e})=>e.mediaQueries.small} {
+      background-size: 0.9px 22px;
+    }
+  }
+
+  tr.last + tr > & {
+    background: none;
+  }
+
+  tr.last:first-child > & {
+    background-image: ${repeatingGradient};
+    background-size: 0.9px 100%;
+    background-position: 0 20px;
+
+    ${({theme:e})=>e.mediaQueries.small} {
+      background-size: 0.9px 22px;
+      background-position: 0 0;
+    }
+  }
+`,exports.PropertyCellWithInner=(0,styled_components_1.default)(exports.PropertyCell)`
+  padding: 0;
+`,exports.PropertyNameCell=(0,styled_components_1.default)(exports.PropertyCell)`
+  vertical-align: top;
+  line-height: 23px;
+  white-space: nowrap;
+  font-size: 14px;
+  font-family: var(--field-name-font-family);
+
+  &.deprecated {
+    ${mixins_1.deprecatedCss};
+  }
+
+  ${({kind:e})=>"patternProperties"===e&&styled_components_1.css`
+      span.field-name {
+        white-space: break-spaces;
+        text-align: left;
+        display: inline-table;
+        line-height: 1.5;
+      }
+    `}
+
+  ${()=>{const e=(0,exports.getCssVariable)("--schema-field-name-word-break");if(["break-all","break-word"].includes(e)){const r=`\n      && span:last-child {\n        white-space: normal;\n        word-break: ${e};\n        vertical-align: top;\n        max-width: calc(100% - 21px);\n        display: inline-flex;\n      }\n    `;return styled_components_1.css`
+        ${(0,utils_1.typography)("schemas-property-name")}
+        ${r}
+      `}return(0,utils_1.typography)("schemas-property-name")}};
+
+  .field-name {
+    display: inline-flex;
+    align-items: center;
+  }
+`,exports.PropertyDetailsCell=styled_components_1.default.td`
+  box-sizing: border-box;
+  vertical-align: top;
+
+  tr.expanded & {
+    border-bottom: none;
+  }
+
+  tr.last > & {
+    border: none;
+    background-position: top left;
+    background-repeat: no-repeat;
+    background-size: 1px 100%;
+    padding-bottom: 0;
+
+    /* workaround for discriminator dropdown oveflowing scrolling container,
+    fixes the issue for the last item in the schema only */
+    & > div > div.dropdown > .dropdown-selector-content {
+      position: relative;
+    }
+  }
+
+  tr:first-of-type > & {
+    padding-top: 0;
+  }
+
+  border-bottom: none;
+  border-left: 1px solid var(--schemas-lines-color);
+  padding: 0 20px;
+  width: var(--schema-default-details-width);
+  min-width: 200px;
+
+  ${({theme:e})=>e.mediaQueries.small} {
+    border-bottom: 1px solid var(--border-color);
+    border-left: none;
+    padding: 10px 0;
+  }
+`,exports.PropertyBullet=styled_components_1.default.span`
+  margin-right: 10px;
+  color: var(--schemas-lines-color);
+  font-family: var(--code-font-family);
+  width: var(--schema-default-details-width);
+  border-left: 1px dashed var(--schemas-lines-color);
+  padding: 5px 10px;
+
+  ${({theme:e})=>e.mediaQueries.small} {
+    border-left: none;
+    padding: 10px;
+  }
+
+  &::before {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    width: 10px;
+    height: 1px;
+    background: var(--schemas-lines-color);
+  }
+`,exports.InnerPropertiesWrap=styled_components_1.default.div`
+  padding: var(--schema-nested-offset);
+`,exports.PropertiesTableWrap=styled_components_1.default.div`
+  display: block;
+  overflow-x: auto;
+  padding: 5px; /* hack to show overflown anchor icons */
+  margin: -5px;
+`,exports.PropertiesTable=styled_components_1.default.table`
+  border-collapse: separate;
+  border-radius: var(--border-radius);
+  width: 100%;
+  font-size: var(--font-size-base);
+  display: block;
+
+  ${({theme:e})=>e.mediaQueries.small} {
+    display: table;
+  }
+
+  > tr,
+  > tbody > tr {
+    display: block;
+    margin-bottom: 2px;
+    border-spacing: 0;
+
+    ${({theme:e})=>e.mediaQueries.small} {
+      display: table-row;
+      margin-bottom: 0;
+      border-spacing: 0 2px;
+    }
+  }
+
+  > tr {
+    vertical-align: middle;
+  }
+
+  @media screen and (max-width: ${({theme:e})=>e.mediaQueries.small}) and (-ms-high-contrast: none) {
+    td {
+      float: left;
+      width: 100%;
+    }
+  }
+
+  &
+    ${exports.InnerPropertiesWrap},
+    &
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap},
+    &
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap} {
+    margin-left: var(--schema-nested-offset);
+    margin-bottom: var(--schema-nested-offset);
+    background: var(--schema-nested-background-color);
+    border-radius: var(--panel-border-radius);
+  }
+
+  &
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap},
+    &
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap},
+    &
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap}
+    ${exports.InnerPropertiesWrap} {
+    background: var(--panel-background-color, #fff);
+  }
+`;
+//# sourceMappingURL=fields-layout.js.map

package/lib/components/common/Fields/fields.js

@@ -0,0 +1,103 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,o,t){void 0===t&&(t=o);var a=Object.getOwnPropertyDescriptor(r,o);a&&!("get"in a?!r.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return r[o]}}),Object.defineProperty(e,t,a)}:function(e,r,o,t){void 0===t&&(t=o),e[t]=r[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}:function(e,r){e.default=r}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(r,e,o);return __setModuleDefault(r,e),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ToggleButton=exports.PatternLabel=exports.ConstraintItem=exports.ExtensionValue=exports.ExampleValue=exports.DefaultValue=exports.EnumValue=exports.RecursiveLabel=exports.FieldValueLabel=exports.AccessLabel=exports.AdditionalPropertiesLabel=exports.RequiredLabel=exports.PropertyLabel=exports.TypeFormat=exports.TypeTitle=exports.TypeName=exports.TypePrefix=exports.FieldLabel=exports.ClickablePropertyNameCell=void 0;const styled_components_1=__importStar(require("styled-components")),utils_1=require("../../../utils"),fields_layout_1=require("./fields-layout"),icons_1=require("../../icons");exports.ClickablePropertyNameCell=(0,styled_components_1.default)(fields_layout_1.PropertyNameCell)`
+  button {
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    cursor: pointer;
+    padding: 0 10px 0 0;
+    font-family: var(--field-name-font-family);
+    font-size: var(--field-name-font-size);
+    color: var(--text-color);
+    &:focus {
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  ${icons_1.ShelfIcon} {
+    margin-left: 4px;
+    height: var(--schema-chevron-size);
+    width: var(--schema-chevron-size);
+    fill: var(--schema-chevron-color);
+    margin-top: -1px;
+  }
+
+  ${()=>{const e=(0,fields_layout_1.getCssVariable)("--schema-field-name-word-break");if(["break-all","break-word"].includes(e)){const r=`\n      && button {\n        max-width: calc(100% - 21px); /* left padding + toggle button width: 16px/2 + 13px */\n        text-align: left;\n        span {\n          white-space: normal;\n          word-break: ${e};\n          vertical-align: top;\n          display: inline-flex;\n        }\n      }\n    `;return styled_components_1.css`
+        ${(0,utils_1.typography)("schema-property-name")}
+        ${r}
+      `}return(0,utils_1.typography)("schema-property-name")}};
+`,exports.FieldLabel=styled_components_1.default.span`
+  vertical-align: middle;
+  line-height: 20px;
+  font-size: var(--schema-property-labels-font-size);
+`,exports.TypePrefix=(0,styled_components_1.default)(exports.FieldLabel)`
+  color: var(--schema-type-text-color);
+`,exports.TypeName=(0,styled_components_1.default)(exports.FieldLabel)`
+  color: var(--schema-type-text-color);
+`,exports.TypeTitle=(0,styled_components_1.default)(exports.FieldLabel)`
+  color: var(--schema-type-title-text-color);
+  word-break: break-word;
+`,exports.TypeFormat=exports.TypeName,exports.PropertyLabel=(0,styled_components_1.default)(exports.FieldLabel.withComponent("div"))`
+  color: var(--text-color-secondary);
+  font-size: var(--schema-labels-font-size);
+  font-weight: normal;
+  line-height: 1;
+  display: block;
+`,exports.RequiredLabel=(0,styled_components_1.default)(exports.PropertyLabel)`
+  color: var(--schema-property-required-label-text-color);
+`,exports.AdditionalPropertiesLabel=(0,styled_components_1.default)(exports.PropertyLabel)`
+  color: var(--schema-property-additional-label-text-color);
+`,exports.AccessLabel=(0,styled_components_1.default)(exports.PropertyLabel)`
+  color: var(--schema-property-access-label-text-color);
+`,exports.FieldValueLabel=(0,styled_components_1.default)(exports.FieldLabel)`
+  background-color: var(--schema-inline-background-color);
+  border-radius: var(--border-radius);
+  border: var(--schema-inline-border);
+  padding: 1px var(--spacing-unit);
+
+  ${(0,utils_1.typography)("schema-inline-code")}
+`,exports.RecursiveLabel=(0,styled_components_1.default)(exports.FieldValueLabel)`
+  background-color: var(--schema-recursive-background-color);
+  border-color: var(--schema-recursive-border-color);
+  color: var(--schema-recursive-text-color);
+`,exports.EnumValue=(0,styled_components_1.default)(exports.FieldValueLabel)`
+  background-color: var(--schema-enum-background-color);
+  border-color: var(--schema-enum-border-color);
+  color: var(--schema-enum-text-color);
+`,exports.DefaultValue=(0,styled_components_1.default)(exports.FieldValueLabel)`
+  background-color: var(--schema-default-background-color);
+  border-color: var(--schema-default-border-color);
+  color: var(--schema-default-text-color);
+`,exports.ExampleValue=(0,styled_components_1.default)(exports.FieldValueLabel)`
+  background-color: var(--schema-example-background-color);
+  border-color: var(--schema-example-border-color);
+  color: var(--schema-example-text-color);
+  word-break: var(--code-word-break);
+
+  & + & {
+    margin-left: 0;
+  }
+
+  line-height: 1.2em;
+  display: inline-flex;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+`,exports.ExtensionValue=(0,styled_components_1.default)(exports.ExampleValue)``,exports.ConstraintItem=(0,styled_components_1.default)(exports.FieldValueLabel)`
+  background-color: var(--schema-constraint-background-color);
+  border-color: var(--schema-constraint-border-color);
+  color: var(--schema-constraint-text-color);
+  word-break: var(--code-word-break);
+  margin: 0 var(--spacing-unit);
+
+  & + & {
+    margin-left: 0;
+  }
+`,exports.PatternLabel=(0,styled_components_1.default)(exports.ConstraintItem)``,exports.ToggleButton=styled_components_1.default.button`
+  background-color: transparent;
+  border: 0;
+  color: var(--text-color-secondary);
+  margin-left: var(--spacing-unit);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  outline-color: var(--text-color-secondary);
+  font-size: 12px;
+`;
+//# sourceMappingURL=fields.js.map

package/lib/components/common/Fields/index.d.ts

@@ -0,0 +1,2 @@
+export * from './fields';
+export * from './fields-layout';

package/lib/components/common/Fields/index.js

@@ -0,0 +1,2 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,o)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__exportStar=this&&this.__exportStar||function(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||__createBinding(t,e,r)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./fields"),exports),__exportStar(require("./fields-layout"),exports);
+//# sourceMappingURL=index.js.map

package/lib/components/common/FileUpload/FileUpload.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { SchemaModel } from '../../../redoc-lib/src/services/models/Schema';
-import type { UploadFileType } from '../../../models';
+import type { SchemaModel, UploadFileType } from '../../../models';
 export interface FileUploadProps {
     schema: SchemaModel | GenericObject;
     contentName: string;

package/lib/components/common/FileUpload/helper.d.ts

@@ -1,5 +1,4 @@
-import type { SchemaModel } from '../../../redoc-lib';
-import type { UploadFileType } from '../../../models';
+import type { SchemaModel, UploadFileType } from '../../../models';
 /**
  * Convert request body mime-type to accept value for file upload input in browser
  */

package/lib/components/common/LinkToField.d.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+import type { FieldModel } from '../../models';
+interface LinkToFieldProps {
+    field: FieldModel;
+    className?: string;
+}
+export declare const LinkToField: (props: PropsWithChildren<LinkToFieldProps>) => JSX.Element;
+export declare const ShareLinkToField: import("styled-components").StyledComponent<(props: PropsWithChildren<LinkToFieldProps>) => JSX.Element, any, {}, never>;
+export {};

package/lib/components/common/LinkToField.js

@@ -0,0 +1,27 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,i,n){void 0===n&&(n=i);var r=Object.getOwnPropertyDescriptor(t,i);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[i]}}),Object.defineProperty(e,n,r)}:function(e,t,i,n){void 0===n&&(n=i),e[n]=t[i]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)"default"!==i&&Object.prototype.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShareLinkToField=exports.LinkToField=void 0;const styled_components_1=__importDefault(require("styled-components")),react_1=__importStar(require("react")),context_1=require("../../context"),constants_1=require("../../constants"),helpers_1=require("../../services/history/helpers"),linkify_1=require("./linkify"),icons_1=require("../icons"),LinkToField=e=>{var t,i;const n=(0,react_1.useContext)(context_1.StoreContext),[r,o]=(0,react_1.useState)(!1),l=(null==n?void 0:n.menu.history.linkForId(null===(t=e.field.deps.operation)||void 0===t?void 0:t.id))||"",s=(0,helpers_1.constructFieldDeepFragment)(e.field),a=n&&s?n.menu.history.generateDeepLink(s,l):null,c=n?{[constants_1.SECTION_ATTR]:(null===(i=e.field.deps.operation)||void 0===i?void 0:i.id)+n.options.deepLinkPrefix+s,id:a&&a.split("#")[1]||void 0}:null;return(0,react_1.useEffect)((()=>{if(n&&c)return o(n.menu.history.currentId===c[constants_1.SECTION_ATTR]),n.menu.history.subscribe((e=>{o(e===c[constants_1.SECTION_ATTR])}))}),[null==n?void 0:n.menu.history,null==c?void 0:c[constants_1.SECTION_ATTR]]),s&&n&&a?react_1.default.createElement("a",Object.assign({className:e.className+(r?" active":""),href:a,onClick:e=>(((e,t,i)=>{t.defaultPrevented||(0,linkify_1.userIsForcingNavigation)(t)||(t.preventDefault(),e.replaceForField(i))})(null==n?void 0:n.menu.history,e,a),e.stopPropagation(),e.preventDefault(),n.options.onDeepLinkClick&&n.options.onDeepLinkClick(a),!1)},c),react_1.default.createElement(icons_1.LinkIcon,null),e.children):react_1.default.createElement(react_1.default.Fragment,null,e.children||null)};exports.LinkToField=LinkToField,exports.ShareLinkToField=(0,styled_components_1.default)(exports.LinkToField)`
+  ${(0,linkify_1.linkifyMixin)("&","13px")}
+
+  & ${icons_1.LinkIcon} {
+    color: var(--schema-property-deep-link-icon-color);
+
+    background-image: var(--schema-property-deep-link-icon);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
+
+  & {
+    position: absolute;
+    padding-right: 4px;
+    transform: translateX(-90%);
+
+    .field-name:hover & ${icons_1.LinkIcon}, &:hover & ${icons_1.LinkIcon} {
+      visibility: visible;
+    }
+  }
+
+  &.active ${icons_1.LinkIcon} {
+    visibility: visible;
+  }
+`;
+//# sourceMappingURL=LinkToField.js.map

package/lib/components/common/TextField.js

@@ -1,4 +1,4 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,o){void 0===o&&(o=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,n)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FormDropdown=exports.FormTextField=exports.TextField=exports.StyledInput=exports.getInvertedInputStyles=void 0;const informed_1=require("informed"),styled_components_1=__importStar(require("styled-components")),react_1=__importStar(require("react")),hooks_1=require("../../hooks"),form_1=require("./form"),Dropdown_1=require("./Dropdown"),getInvertedInputStyles=e=>styled_components_1.css`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,o){void 0===o&&(o=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,n)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FormDropdown=exports.FormTextField=exports.TextField=exports.StyledInput=exports.getInvertedInputStyles=void 0;const informed_1=require("informed"),styled_components_1=__importStar(require("styled-components")),react_1=__importStar(require("react")),theme_1=require("@redocly/theme"),form_1=require("./form"),Dropdown_1=require("./Dropdown"),getInvertedInputStyles=e=>styled_components_1.css`
   border: var(--input-border);
   outline: none;
   padding: var(--input-padding);
@@ -46,5 +46,5 @@
   cursor: pointer;
   text-align: center;
   color: var(--panel-samples-text-color);
-`;function TextFieldComponent(e,t){var{fullWidth:r,errorMessage:o,type:n,inputActionButton:l,panel:i="samples"}=e,a=__rest(e,["fullWidth","errorMessage","type","inputActionButton","panel"]);const[u,p]=(0,react_1.useState)("password"===n),d=(0,react_1.useCallback)((()=>{p(!u)}),[u]);return react_1.default.createElement(TextFieldWrapper,{fullWidth:r,type:n},react_1.default.createElement(InputWrap,null,react_1.default.createElement(exports.StyledInput,Object.assign({fullWidth:r,inputActionButton:l,type:u?"password":"text",inputType:n,ref:t,panel:i},a)),l?react_1.default.createElement(InputActionButton,{onClick:l.onClick},l.label):"password"===n?react_1.default.createElement(InputActionButton,{onClick:d},u?"show":"hide"):null),o?react_1.default.createElement(form_1.FormError,null,o):null)}function FormTextField(e){const t=(0,informed_1.useField)(Object.assign({fieldType:"text"},e)),{userProps:r,render:o,fieldState:n}=t,l=t.informed;return o(react_1.default.createElement(exports.TextField,Object.assign({},r,l,{errorMessage:n.error})))}exports.TextField=(0,react_1.forwardRef)(TextFieldComponent),exports.FormTextField=FormTextField;const FormDropdownInt=({initValue:e,options:t,fieldApi:r,fieldState:o})=>{const n=t.map(((e,t)=>({value:e.title||e.value,idx:t,origValue:e.value}))),l=n.find((t=>t.origValue===e)),[i,a]=(0,react_1.useState)(null==l?void 0:l.value);(0,hooks_1.useMount)((()=>{e&&r.setValue(e)}));const u=(0,react_1.useCallback)((e=>{r.setValue(n[e.idx].origValue),a(n[e.idx].value)}),[r,n]);return react_1.default.createElement(TextFieldWrapper,{fullWidth:!0},react_1.default.createElement(Dropdown_1.Dropdown,{fullWidth:!0,variant:"dark",value:i,options:n,onChange:u}),o.error?react_1.default.createElement(form_1.FormError,null,o.error):null)};exports.FormDropdown=(0,informed_1.asField)(FormDropdownInt);
+`;function TextFieldComponent(e,t){var{fullWidth:r,errorMessage:o,type:n,inputActionButton:l,panel:i="samples"}=e,a=__rest(e,["fullWidth","errorMessage","type","inputActionButton","panel"]);const[u,p]=(0,react_1.useState)("password"===n),d=(0,react_1.useCallback)((()=>{p(!u)}),[u]);return react_1.default.createElement(TextFieldWrapper,{fullWidth:r,type:n},react_1.default.createElement(InputWrap,null,react_1.default.createElement(exports.StyledInput,Object.assign({fullWidth:r,inputActionButton:l,type:u?"password":"text",inputType:n,ref:t,panel:i},a)),l?react_1.default.createElement(InputActionButton,{onClick:l.onClick},l.label):"password"===n?react_1.default.createElement(InputActionButton,{onClick:d},u?"show":"hide"):null),o?react_1.default.createElement(form_1.FormError,null,o):null)}function FormTextField(e){const t=(0,informed_1.useField)(Object.assign({fieldType:"text"},e)),{userProps:r,render:o,fieldState:n}=t,l=t.informed;return o(react_1.default.createElement(exports.TextField,Object.assign({},r,l,{errorMessage:n.error})))}exports.TextField=(0,react_1.forwardRef)(TextFieldComponent),exports.FormTextField=FormTextField;const FormDropdownInt=({initValue:e,options:t,fieldApi:r,fieldState:o})=>{const n=t.map(((e,t)=>({value:e.title||e.value,idx:t,origValue:e.value}))),l=n.find((t=>t.origValue===e)),[i,a]=(0,react_1.useState)(null==l?void 0:l.value);(0,theme_1.useMount)((()=>{e&&r.setValue(e)}));const u=(0,react_1.useCallback)((e=>{r.setValue(n[e.idx].origValue),a(n[e.idx].value)}),[r,n]);return react_1.default.createElement(TextFieldWrapper,{fullWidth:!0},react_1.default.createElement(Dropdown_1.Dropdown,{fullWidth:!0,variant:"dark",value:i,options:n,onChange:u}),o.error?react_1.default.createElement(form_1.FormError,null,o.error):null)};exports.FormDropdown=(0,informed_1.asField)(FormDropdownInt);
 //# sourceMappingURL=TextField.js.map

package/lib/components/common/headers.js

@@ -0,0 +1,36 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FieldsGroupHeader=exports.SamplesPanelHeader=exports.H6=exports.H5=exports.H4=exports.H3=exports.H2=exports.H1=void 0;const styled_components_1=__importDefault(require("styled-components")),utils_1=require("../../utils");exports.H1=styled_components_1.default.h1`
+  margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
+
+  ${(0,utils_1.typography)("h1","h")};
+`,exports.H2=styled_components_1.default.h2`
+  margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
+
+  ${(0,utils_1.typography)("h2","h")};
+`,exports.H3=styled_components_1.default.h3`
+  margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
+
+  ${(0,utils_1.typography)("h3","h")};
+`,exports.H4=styled_components_1.default.h4`
+  margin: var(--h4-margin-top) 0 var(--h4-margin-bottom);
+
+  ${(0,utils_1.typography)("h4","h")};
+`,exports.H5=styled_components_1.default.h5`
+  margin: var(--h5-margin-top) 0 var(--h5-margin-bottom);
+
+  ${(0,utils_1.typography)("h5","h")};
+`,exports.H6=styled_components_1.default.h6`
+  margin: var(--h6-margin-top) 0 var(--h6-margin-bottom);
+
+  ${(0,utils_1.typography)("h6","h")};
+`,exports.SamplesPanelHeader=styled_components_1.default.h3`
+  color: var(--panel-samples-text-color);
+
+  ${(0,utils_1.typography)("right-panel-header")};
+`,exports.FieldsGroupHeader=styled_components_1.default.h5`
+  color: var(--text-color-secondary);
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 14px;
+  line-height: 20px;
+`;
+//# sourceMappingURL=headers.js.map

package/lib/components/common/index.d.ts

@@ -0,0 +1,12 @@
+export { Dropdown, SchemaDiscriminatorDropdown } from './Dropdown';
+export type { DropdownProps, DropdownOption } from './Dropdown';
+export { ShareLinkToField } from './LinkToField';
+export { deprecatedCss } from './mixins';
+export { FormControl } from './form';
+export * from './Fields';
+export * from './panels';
+export { H1, H2, H3, H4, H5, H6, FieldsGroupHeader, SamplesPanelHeader } from './headers';
+export { linkifyMixin, userIsForcingNavigation, ShareLink, Link } from './linkify';
+export * from './shelfs';
+export * from './schema';
+export * from './perfect-scrollbar';

package/lib/components/common/index.js

@@ -0,0 +1,2 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,n){void 0===n&&(n=t);var o=Object.getOwnPropertyDescriptor(r,t);o&&!("get"in o?!r.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,n,o)}:function(e,r,t,n){void 0===n&&(n=t),e[n]=r[t]}),__exportStar=this&&this.__exportStar||function(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||__createBinding(r,e,t)};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Link=exports.ShareLink=exports.userIsForcingNavigation=exports.linkifyMixin=exports.SamplesPanelHeader=exports.FieldsGroupHeader=exports.H6=exports.H5=exports.H4=exports.H3=exports.H2=exports.H1=exports.FormControl=exports.deprecatedCss=exports.ShareLinkToField=exports.SchemaDiscriminatorDropdown=exports.Dropdown=void 0;var Dropdown_1=require("./Dropdown");Object.defineProperty(exports,"Dropdown",{enumerable:!0,get:function(){return Dropdown_1.Dropdown}}),Object.defineProperty(exports,"SchemaDiscriminatorDropdown",{enumerable:!0,get:function(){return Dropdown_1.SchemaDiscriminatorDropdown}});var LinkToField_1=require("./LinkToField");Object.defineProperty(exports,"ShareLinkToField",{enumerable:!0,get:function(){return LinkToField_1.ShareLinkToField}});var mixins_1=require("./mixins");Object.defineProperty(exports,"deprecatedCss",{enumerable:!0,get:function(){return mixins_1.deprecatedCss}});var form_1=require("./form");Object.defineProperty(exports,"FormControl",{enumerable:!0,get:function(){return form_1.FormControl}}),__exportStar(require("./Fields"),exports),__exportStar(require("./panels"),exports);var headers_1=require("./headers");Object.defineProperty(exports,"H1",{enumerable:!0,get:function(){return headers_1.H1}}),Object.defineProperty(exports,"H2",{enumerable:!0,get:function(){return headers_1.H2}}),Object.defineProperty(exports,"H3",{enumerable:!0,get:function(){return headers_1.H3}}),Object.defineProperty(exports,"H4",{enumerable:!0,get:function(){return headers_1.H4}}),Object.defineProperty(exports,"H5",{enumerable:!0,get:function(){return headers_1.H5}}),Object.defineProperty(exports,"H6",{enumerable:!0,get:function(){return headers_1.H6}}),Object.defineProperty(exports,"FieldsGroupHeader",{enumerable:!0,get:function(){return headers_1.FieldsGroupHeader}}),Object.defineProperty(exports,"SamplesPanelHeader",{enumerable:!0,get:function(){return headers_1.SamplesPanelHeader}});var linkify_1=require("./linkify");Object.defineProperty(exports,"linkifyMixin",{enumerable:!0,get:function(){return linkify_1.linkifyMixin}}),Object.defineProperty(exports,"userIsForcingNavigation",{enumerable:!0,get:function(){return linkify_1.userIsForcingNavigation}}),Object.defineProperty(exports,"ShareLink",{enumerable:!0,get:function(){return linkify_1.ShareLink}}),Object.defineProperty(exports,"Link",{enumerable:!0,get:function(){return linkify_1.Link}}),__exportStar(require("./shelfs"),exports),__exportStar(require("./schema"),exports),__exportStar(require("./perfect-scrollbar"),exports);
+//# sourceMappingURL=index.js.map

package/lib/components/common/linkify.js

@@ -0,0 +1,55 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,i,n,t){void 0===t&&(t=n);var o=Object.getOwnPropertyDescriptor(i,n);o&&!("get"in o?!i.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return i[n]}}),Object.defineProperty(e,t,o)}:function(e,i,n,t){void 0===t&&(t=n),e[t]=i[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,i){Object.defineProperty(e,"default",{enumerable:!0,value:i})}:function(e,i){e.default=i}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var i={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(i,e,n);return __setModuleDefault(i,e),i};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShareLink=exports.Link=exports.linkifyMixin=exports.userIsForcingNavigation=void 0;const react_1=__importStar(require("react")),styled_components_1=__importStar(require("styled-components")),context_1=require("../../context"),icons_1=require("../icons");function userIsForcingNavigation(e){return 0!==e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey}exports.userIsForcingNavigation=userIsForcingNavigation;const linkifyMixin=(e,i)=>styled_components_1.css`
+  ${e} {
+    cursor: pointer;
+    line-height: inherit;
+    display: inline-block;
+    outline: 0;
+    position: absolute;
+    padding-right: 4px;
+    transform: translateX(-100%);
+  }
+
+  ${e} ${icons_1.LinkIcon} {
+    width: ${i};
+    height: ${i};
+    visibility: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    color: var(--heading-anchor-color);
+
+    background-image: var(--heading-anchor-icon);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
+
+  h1:hover
+    > ${e}
+    ${icons_1.LinkIcon},
+    h2:hover
+    > ${e}
+    ${icons_1.LinkIcon},
+    h3:hover
+    > ${e}
+    ${icons_1.LinkIcon},
+    h4:hover
+    > ${e}
+    ${icons_1.LinkIcon},
+    h5:hover
+    > ${e}
+    ${icons_1.LinkIcon},
+    h6:hover
+    > ${e}
+    ${icons_1.LinkIcon},
+    ${e}:hover
+    ${icons_1.LinkIcon} {
+    visibility: visible;
+  }
+
+  ${e}:focus ${icons_1.LinkIcon} {
+    visibility: visible;
+  }
+`;function Link(e){var i,n,t;const o=(0,react_1.useCallback)(((i,n)=>{n.defaultPrevented||userIsForcingNavigation(n)||(n.preventDefault(),i.replace(encodeURI(e.to)))}),[e.to]),r=(0,context_1.useStore)();let c;if(e.security){const n=null===(i=null==r?void 0:r.options.hooks)||void 0===i?void 0:i.replaceSecurityLink;c=n&&n({securityRequirementId:e.to})}else c=null===(t=null==r?void 0:(n=r.menu.history).linkForId)||void 0===t?void 0:t.call(n,e.to);return c?react_1.default.createElement("a",{className:e.className,href:c,onClick:o.bind(this,null==r?void 0:r.menu.history),"aria-label":e.to},e.children):e.children?react_1.default.createElement("span",{className:e.className}," ",e.children," "):null}exports.linkifyMixin=linkifyMixin,exports.Link=Link;const StyledShareLink=(0,styled_components_1.default)(Link)`
+  ${(0,exports.linkifyMixin)("&","18px")};
+`;function ShareLink(e){return react_1.default.createElement(StyledShareLink,{to:e.to},react_1.default.createElement(icons_1.LinkIcon,null))}exports.ShareLink=ShareLink;
+//# sourceMappingURL=linkify.js.map

package/lib/components/common/panels.d.ts

@@ -0,0 +1,13 @@
+import { LayoutVariant } from '../../constants';
+export declare const SamplesMiddlePanel: import("styled-components").StyledComponent<"div", any, {
+    compact?: boolean | undefined;
+    isStacked?: boolean | undefined;
+}, never>;
+export declare const Section: import("styled-components").StyledComponent<"div", any, {
+    underlined?: boolean | undefined;
+    sectionId?: string | undefined;
+}, never>;
+export declare const SamplesPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Row: import("styled-components").StyledComponent<"div", any, {
+    layout?: LayoutVariant | undefined;
+}, never>;