@mintlify/components 0.1.66 → 0.1.68

package/dist/main.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
+! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -24,6 +24,7 @@
 2. Prevent adjustments of font size after orientation changes in iOS.
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
 */
 
 html {
@@ -33,6 +34,7 @@ html {
   -o-tab-size: 4;
      tab-size: 4; /* 3 */
   font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
 }
 
 /*
@@ -369,54 +371,12 @@ video {
   height: auto;
 }
 
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgba(59, 130, 246, 0.5);
-  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
-  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
-  --tw-shadow: 0 0 rgba(0,0,0,0);
-  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
 }
 
-::-webkit-backdrop {
+*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -1262,18 +1222,16 @@ video {
   position: relative;
   border-radius: 0.75rem;
   --tw-bg-opacity: 1;
-  background-color: rgba(30, 41, 59, var(--tw-bg-opacity));
+  background-color: rgba(22, 27, 34, var(--tw-bg-opacity));
   --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
 .dark .gray-frame {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
   --tw-ring-inset: inset;
   --tw-ring-color: rgba(255, 255, 255, 0.1);
@@ -1530,7 +1488,6 @@ video {
   width: 10rem;
 }
 .w-fit {
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
@@ -1544,7 +1501,6 @@ video {
   min-width: 100%;
 }
 .max-w-max {
-  max-width: -webkit-max-content;
   max-width: -moz-max-content;
   max-width: max-content;
 }
@@ -1563,6 +1519,14 @@ video {
 .flex-initial {
   flex: 0 1 auto;
 }
+.-translate-y-12 {
+  --tw-translate-y: -3rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1688,14 +1652,14 @@ video {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
 }
-.rounded-b-xl {
-  border-bottom-right-radius: 0.75rem;
-  border-bottom-left-radius: 0.75rem;
-}
 .rounded-t {
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
 }
+.rounded-b-xl {
+  border-bottom-right-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+}
 .rounded-tl-xl {
   border-top-left-radius: 0.75rem;
 }
@@ -1844,8 +1808,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(30, 41, 59, var(--tw-bg-opacity));
 }
-.bg-slate-700\/50 {
-  background-color: rgba(51, 65, 85, 0.5);
+.bg-codeblock-tabs {
+  --tw-bg-opacity: 1;
+  background-color: rgba(33, 38, 45, var(--tw-bg-opacity));
 }
 .bg-green-600 {
   --tw-bg-opacity: 1;
@@ -2141,16 +2106,13 @@ video {
   color: rgba(190, 24, 93, var(--tw-text-opacity));
 }
 .underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
+  text-decoration-line: underline;
 }
 .decoration-slate-400 {
-  -webkit-text-decoration-color: #94a3b8;
-          text-decoration-color: #94a3b8;
+  text-decoration-color: #94a3b8;
 }
 .decoration-dotted {
-  -webkit-text-decoration-style: dotted;
-          text-decoration-style: dotted;
+  text-decoration-style: dotted;
 }
 .decoration-2 {
   text-decoration-thickness: 2px;
@@ -2161,11 +2123,13 @@ video {
 .opacity-0 {
   opacity: 0;
 }
+.opacity-100 {
+  opacity: 1;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
 .outline-none {
@@ -2176,7 +2140,6 @@ video {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
 }
 .ring-transparent {
@@ -2185,6 +2148,22 @@ video {
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.duration-200 {
+  transition-duration: 200ms;
+}
+.duration-75 {
+  transition-duration: 75ms;
+}
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
 .bg-grid-slate-100 {
   background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27 width=%2732%27 height=%2732%27 fill=%27none%27 stroke=%27%23f1f5f9%27%3e%3cpath d=%27M0 .5H31.5V32%27/%3e%3c/svg%3e");
 }
@@ -2304,7 +2283,6 @@ select {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
 }
 .focus\:ring-indigo-500:focus {
@@ -2388,49 +2366,8 @@ select {
   --tw-shadow: 0 0 rgba(0,0,0,0) !important;
   --tw-shadow-colored: 0 0 rgba(0,0,0,0) !important;
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
 }
-.dark .dark\:prose-dark {
-  color: #94a3b8;
-}
-.dark .dark\:prose-dark :where(h1, h2, h3, h4, thead th):not(:where([class~="not-prose"] *)) {
-  color: #e2e8f0;
-}
-.dark .dark\:prose-dark :where(h1 small, h2 small, h3 small, h4 small):not(:where([class~="not-prose"] *)) {
-  color: #94a3b8;
-}
-.dark .dark\:prose-dark :where(kbd):not(:where([class~="not-prose"] *)) {
-  background: #334155;
-  border-color: #475569;
-  color: #e2e8f0;
-}
-.dark .dark\:prose-dark :where(code):not(:where([class~="not-prose"] *)) {
-  color: #e2e8f0;
-}
-.dark .dark\:prose-dark :where(hr):not(:where([class~="not-prose"] *)) {
-  border-color: #e2e8f0;
-  opacity: 0.05;
-}
-.dark .dark\:prose-dark :where(pre):not(:where([class~="not-prose"] *)) {
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-}
-.dark .dark\:prose-dark :where(a):not(:where([class~="not-prose"] *)) {
-  color: #fff;
-}
-.dark .dark\:prose-dark :where(strong):not(:where([class~="not-prose"] *)) {
-  color: #e2e8f0;
-}
-.dark .dark\:prose-dark :where(thead):not(:where([class~="not-prose"] *)) {
-  color: #cbd5e1;
-  border-bottom-color: rgba(148, 163, 184, 0.2);
-}
-.dark .dark\:prose-dark :where(tbody tr):not(:where([class~="not-prose"] *)) {
-  border-bottom-color: rgba(148, 163, 184, 0.1);
-}
-.dark .dark\:prose-dark :where(blockQuote):not(:where([class~="not-prose"] *)) {
-  color: #fff;
-}
 .dark .dark\:border-slate-800 {
   --tw-border-opacity: 1;
   border-color: rgba(30, 41, 59, var(--tw-border-opacity));
@@ -2514,9 +2451,13 @@ select {
 .dark .dark\:bg-slate-600\/30 {
   background-color: rgba(71, 85, 105, 0.3);
 }
-.dark .dark\:bg-slate-900 {
+.dark .dark\:bg-codeblock {
   --tw-bg-opacity: 1;
-  background-color: rgba(15, 23, 42, var(--tw-bg-opacity));
+  background-color: rgba(22, 27, 34, var(--tw-bg-opacity));
+}
+.dark .dark\:bg-dark-input {
+  --tw-bg-opacity: 1;
+  background-color: rgba(48, 54, 61, var(--tw-bg-opacity));
 }
 .dark .dark\:fill-slate-100 {
   fill: #f1f5f9;
@@ -2604,15 +2545,51 @@ select {
   color: rgba(249, 168, 212, var(--tw-text-opacity));
 }
 .dark .dark\:decoration-slate-500 {
-  -webkit-text-decoration-color: #64748b;
-          text-decoration-color: #64748b;
+  text-decoration-color: #64748b;
+}
+.dark .dark\:prose-dark {
+  color: #94a3b8;
+}
+.dark .dark\:prose-dark :where(h1, h2, h3, h4, thead th):not(:where([class~="not-prose"] *)) {
+  color: #e2e8f0;
+}
+.dark .dark\:prose-dark :where(h1 small, h2 small, h3 small, h4 small):not(:where([class~="not-prose"] *)) {
+  color: #94a3b8;
+}
+.dark .dark\:prose-dark :where(kbd):not(:where([class~="not-prose"] *)) {
+  background: #334155;
+  border-color: #475569;
+  color: #e2e8f0;
+}
+.dark .dark\:prose-dark :where(code):not(:where([class~="not-prose"] *)) {
+  color: #e2e8f0;
+}
+.dark .dark\:prose-dark :where(hr):not(:where([class~="not-prose"] *)) {
+  border-color: #e2e8f0;
+  opacity: 0.05;
+}
+.dark .dark\:prose-dark :where(pre):not(:where([class~="not-prose"] *)) {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+.dark .dark\:prose-dark :where(a):not(:where([class~="not-prose"] *)) {
+  color: #fff;
+}
+.dark .dark\:prose-dark :where(strong):not(:where([class~="not-prose"] *)) {
+  color: #e2e8f0;
+}
+.dark .dark\:prose-dark :where(thead):not(:where([class~="not-prose"] *)) {
+  color: #cbd5e1;
+  border-bottom-color: rgba(148, 163, 184, 0.2);
+}
+.dark .dark\:prose-dark :where(tbody tr):not(:where([class~="not-prose"] *)) {
+  border-bottom-color: rgba(148, 163, 184, 0.1);
+}
+.dark .dark\:prose-dark :where(blockQuote):not(:where([class~="not-prose"] *)) {
+  color: #fff;
 }
 .dark .dark\:bg-grid-slate-700\/25 {
   background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27 width=%2732%27 height=%2732%27 fill=%27none%27 stroke=%27rgb%2851 65 85 / 0.25%29%27%3e%3cpath d=%27M0 .5H31.5V32%27/%3e%3c/svg%3e");
 }
-.dark .dark\:highlight-white\/5 {
-  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
-}
 .dark .dark\:\[mask-image\:linear-gradient\(0deg\2c rgba\(255\2c 255\2c 255\2c 0\.1\)\2c rgba\(255\2c 255\2c 255\2c 0\.5\)\)\] {
   -webkit-mask-image: linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5));
           mask-image: linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/components",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "description": "Open-source library of UI components made with React and TailwindCSS.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -29,8 +29,8 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@storybook/addon-actions": "^6.5.13",
@@ -46,27 +46,27 @@
     "@types/lodash.set": "^4.3.7",
     "@types/react": "^18.0.21",
     "autoprefixer": "^10.4.8",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^8.3.0",
     "chromatic": "^6.9.0",
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.7.2",
     "glob-parent": "^6.0.2",
     "mini-css-extract-plugin": "^2.6.1",
     "mini-svg-data-uri": "^1.4.4",
-    "postcss": "^8.4.16",
-    "postcss-loader": "^7.0.1",
-    "postcss-preset-env": "^7.8.0",
+    "postcss": "^8.4.19",
+    "postcss-loader": "^7.0.2",
+    "postcss-preset-env": "^7.8.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "source-map-loader": "^4.0.0",
     "storybook-addon-themes": "^6.1.0",
     "style-loader": "^3.3.1",
     "tailwind-children": "^0.5.0",
-    "tailwindcss": "^3.1.8",
+    "tailwindcss": "^3.2.4",
     "trim": "^1.0.1",
     "trim-newlines": "^4.0.2",
     "ts-loader": "^9.3.1",
-    "typescript": "^4.8.2",
-    "webpack": "^5.74.0",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0"
   },
   "dependencies": {

package/dist/Api/ApiInput.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { ApiInputValue, Param } from "./types";
-export declare function ApiInput({ param, value, onChangeParam, onObjectPropertyChange, onArrayItemChange, onDeleteArrayItem, parentInputs, }: {
-    param: Param;
-    value: ApiInputValue;
-    onChangeParam: (parentInputs: string[], paramName: string, value: ApiInputValue) => void;
-    onObjectPropertyChange?: (value: any) => void;
-    onArrayItemChange?: (value: any) => void;
-    onDeleteArrayItem?: () => void;
-    parentInputs?: string[];
-}): JSX.Element;