@quintype/arrow 3.9.4 → 3.9.5-astrology-compo.3

package/AstrologyCollection/styles.arrow.css

@@ -0,0 +1 @@
+.collection-name-m_collection__JD6sx{font-size:var(--arrow-fs-m);font-weight:var(--arrow-fw-bold);margin-bottom:var(--arrow-spacing-m)}@media (min-width:768px){.collection-name-m_collection__JD6sx{font-size:var(--arrow-fs-l);margin-bottom:var(--arrow-spacing-l)}}.collection-name-m_collection-borderLeft__3Dznk{align-items:baseline;display:flex}.collection-name-m_collection-borderLeft__3Dznk .collection-name-m_border-left__3_pYw{margin-right:var(--arrow-spacing-xs);min-width:5px;overflow:hidden;width:5px}.collection-name-m_collection-borderLeft__3Dznk .collection-name-m_border-left__3_pYw:before{content:"I";font-family:var(--arrow-sans-serif)}.collection-name-m_collection-borderBottomFull__Dkq3K{display:inline-block}.collection-name-m_collection-borderBottom__2rdQM{display:block}.collection-name-m_collection-crossLine__1sIpN{align-items:center;display:flex}.collection-name-m_collection-crossLine__1sIpN:before{border-top:1px solid var(--arrow-c-mono5);content:" ";flex:1 1 auto;margin-right:var(--arrow-spacing-l);position:relative}.collection-name-m_collection-crossLine__1sIpN:after{border-top:1px solid var(--arrow-c-mono5);content:" ";flex:1 1 auto;margin-left:var(--arrow-spacing-l);position:relative}html[dir=rtl] .collection-name-m_collection-borderLeft__3Dznk .collection-name-m_border-left__3_pYw{margin-left:var(--arrow-spacing-xs);margin-right:0}html[dir=rtl] .collection-name-m_collection-crossLine__1sIpN:before{margin-left:var(--arrow-spacing-l);margin-right:0}html[dir=rtl] .collection-name-m_collection-crossLine__1sIpN:after{margin-left:0;margin-right:var(--arrow-spacing-l)}.collection-name-m_border-bottom__1MnlV{height:4px;margin-top:var(--arrow-spacing-xxs);width:20px}.collection-name-m_collection-crossLine__1sIpN .collection-name-m_border-bottom__1MnlV{visibility:hidden}.collection-name-m_dark__nMe5H a,.collection-name-m_dark__nMe5H h2,.collection-name-m_dark__nMe5H h3,.collection-name-m_dark__nMe5H h5{color:var(--arrow-c-mono2)}.collection-name-m_light__1vFDN a,.collection-name-m_light__1vFDN h2,.collection-name-m_light__1vFDN h3,.collection-name-m_light__1vFDN h5{color:var(--arrow-c-invert-mono2)}.headline-m_wrapper__3nUmh{margin-bottom:6px}.headline-m_headline__3_NhV{color:var(--arrow-c-mono2);font-weight:var(--arrow-fw-semi-bold);margin-bottom:var(--arrow-spacing-xxs)}@media (min-width:768px){.headline-m_headline__3_NhV{margin-bottom:var(--arrow-spacing-xs)}}.headline-m_wrapper__3nUmh .headline-m_headline__3_NhV{display:inline;margin-bottom:var(--arrow-spacing-xs)}.headline-m_dark__en3hW{color:var(--arrow-c-mono2)}.headline-m_light__3lKJB{color:var(--arrow-c-invert-mono2)}.load-more-m_button__1mmf1{background-color:transparent;border:1px solid;border-radius:var(--arrow-spacing-xxs);cursor:pointer;display:flex;font-size:var(--arrow-fs-xs);margin:var(--arrow-spacing-m) auto var(--arrow-spacing-xs) auto;padding:var(--arrow-spacing-xs) var(--arrow-spacing-l);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.load-more-m_default__2_k4V{display:block}.load-more-m_dark__3dfzb{color:var(--arrow-c-mono2)}.load-more-m_light__ePZQI{color:var(--arrow-c-invert-mono2)}.subheadline-m_subheadline__3fd7z{-webkit-box-orient:vertical;display:-webkit-box;margin-bottom:var(--arrow-spacing-xxs);overflow:hidden}@media (min-width:768px){.subheadline-m_subheadline__3fd7z{margin-bottom:var(--arrow-spacing-xs)}}.subheadline-m_dark__28u00{color:var(--arrow-c-mono4)}.subheadline-m_light__2YUOe{color:var(--arrow-c-invert-mono4)}.timestamp-m_time__2v46i{display:flex;margin-bottom:2px}.timestamp-m_time-wrapper__3O2lM{margin-bottom:var(--arrow-spacing-xxs)}.timestamp-m_bottom-fix__1Zh8r{margin-top:auto}.timestamp-m_dark__2lk9E{color:var(--arrow-c-mono4)}.timestamp-m_light__2QlrI{color:var(--arrow-c-invert-mono4)}.author-m_author__WRuLm{align-items:center;color:var(--arrow-c-mono4);display:flex;margin-bottom:var(--arrow-spacing-xs)}.author-m_author-image__3q2oc{border-radius:100%;height:var(--arrow-spacing-l);margin-right:var(--arrow-spacing-xs);overflow:hidden;width:var(--arrow-spacing-l)}.author-m_author-image__3q2oc figure,.author-m_author-image__3q2oc img{height:100%;width:100%}.author-m_author-name__3WP-O{margin:auto var(--arrow-spacing-xs) auto 0}.author-m_bottom-fix__223TT{margin-top:auto}.author-m_prefix__YSInK{margin:auto var(--arrow-spacing-xxs) auto 0}.author-m_rtl-image__2nglD{display:none}html[dir=rtl] .author-m_author-name__3WP-O{margin-right:0}html[dir=rtl] .author-m_prefix__YSInK{margin-left:var(--arrow-spacing-xxs);margin-right:0}html[dir=rtl] .author-m_ltr-image__3bc0L{display:none}html[dir=rtl] .author-m_rtl-image__2nglD{display:block}.author-m_dark__2TTlp{color:var(--arrow-c-mono4)}.author-m_light__3y8_x{color:var(--arrow-c-invert-mono4)}.dot-m_dark__1Njxl{fill:var(--arrow-c-mono4)}.dot-m_light__27IA3{fill:var(--arrow-c-invert-mono4)}.divider-m_dark__26FRi{fill:var(--arrow-c-mono4)}.divider-m_light__w-7sy{fill:var(--arrow-c-invert-mono4)}.author-with-timestamp-m_author-time-wrapper__G7_eI{align-items:center;color:var(--arrow-c-mono2);display:flex;flex-wrap:wrap}.author-with-timestamp-m_author-image__24xrD{border-radius:100%;height:var(--arrow-spacing-l);margin-right:var(--arrow-spacing-xs);width:var(--arrow-spacing-l)}.author-with-timestamp-m_dot__1LHXD{margin-right:var(--arrow-spacing-xs);position:relative;top:-6px}.author-with-timestamp-m_bottom-fix__1rWGv{margin-top:auto}.author-with-timestamp-m_dash__2L5XC{margin-right:var(--arrow-spacing-xs);position:relative;top:-1px}@media (min-width:768px){.author-with-timestamp-m_dash__2L5XC{top:-3px}}html[dir=rtl] .author-with-timestamp-m_dot__1LHXD{margin-left:var(--arrow-spacing-xs)}html[dir=rtl] .author-with-timestamp-m_dash__2L5XC{padding-left:var(--arrow-spacing-xs)}.read-time-m_read-time-wrapper__3GyC_{display:flex;font-size:var(--arrow-fs-tiny);line-height:var(--arrow-lh-2)}.read-time-m_dot-indicator__3Sqh2{padding:0 var(--arrow-spacing-xs) var(--arrow-spacing-xs)}.read-time-m_dark__3yRaK{color:var(--arrow-c-mono4)}.read-time-m_light__1GAZu{color:var(--arrow-c-invert-mono4)}html[dir=rtl] .read-time-m_read-time-wrapper__3GyC_{margin-right:var(--arrow-spacing-xs)}.fallback-m_image-position__3KddP{bottom:0;left:0;position:absolute;right:0;top:0}.fallback-m_image__1GYCJ{background:var(--fallback-img)}.fallback-m_image__1GYCJ:after{bottom:0;content:"";left:0;position:absolute;right:0;top:0}.fallback-m_fallback-svg__tK9fL svg{bottom:0;height:100%;left:50%;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;transform:translateX(-50%)}.hero-image-m_hero-image__3lraV{flex-grow:1;margin-bottom:var(--arrow-spacing-xs);padding-right:0}.hero-image-m_right-padding__1LkCe{flex-grow:1;margin-bottom:0;padding-right:var(--arrow-spacing-s)}.hero-image-m_left-padding__pYRAj{flex-grow:1;margin-bottom:0;padding-left:var(--arrow-spacing-s)}.hero-image-m_right-padding-mob__3-uOU{flex-basis:30%;flex-grow:1;margin-bottom:0;padding-right:var(--arrow-spacing-s)}@media (min-width:768px){.hero-image-m_right-padding-mob__3-uOU{margin-bottom:var(--arrow-spacing-xs);padding-right:0}}.hero-image-m_placeholder__1omCm{background-color:#d3d3d3}html[dir=rtl] .hero-image-m_right-padding-mob__3-uOU,html[dir=rtl] .hero-image-m_right-padding__1LkCe{padding-left:var(--arrow-spacing-s);padding-right:0}@media (min-width:768px){html[dir=rtl] .hero-image-m_right-padding-mob__3-uOU{padding-left:0}}.hero-image-m_hero-image-mob__13JJp{flex-grow:1;margin-bottom:var(--arrow-spacing-xs);padding-right:0}.hero-image-m_with-padding__324G_{padding:16px 16px 0}.hero-image-m_image__1mz0U{position:relative}.hero-image-m_image__1mz0U img{bottom:0;height:100%;left:0;position:absolute;right:0;top:0}.section-m_section__2N4S3{margin-bottom:var(--arrow-spacing-xxs)}@media (min-width:768px){.section-m_section__2N4S3{margin-bottom:var(--arrow-spacing-xs)}}.section-m_section-borderBottomSml__2GNbo .section-m_border-bottom__3cRoD{height:2px;margin-top:var(--arrow-spacing-xxs);width:20px}.section-m_section-borderLeft__3hKVj{align-items:baseline;display:flex}.section-m_section-borderLeft__3hKVj .section-m_border-left__2oUyp{margin-right:var(--arrow-spacing-xs);max-width:3px;min-width:3px;overflow:hidden}.section-m_section-borderLeft__3hKVj .section-m_border-left__2oUyp:before{content:"I";font-family:var(--arrow-sans-serif)}html[dir=rtl] .section-m_border-left__2oUyp{margin-left:var(--arrow-spacing-xs);margin-right:0}.section-m_section-solid__1vB1Q{align-self:self-start;color:var(--arrow-c-light);display:inline-flex;padding:var(--arrow-spacing-xxs) var(--arrow-spacing-s)}@media (min-width:768px){.section-m_section-solid__1vB1Q{padding:var(--arrow-spacing-xs) var(--arrow-spacing-m)}}.section-m_dark__1r3C4{color:var(--arrow-c-mono2)}.section-m_light__306hW{color:var(--arrow-c-invert-mono2)}.storycard-m_author-timestamp-wrapper__20yjp{align-items:center;display:flex}.storycard-m_default-card__1-POn{display:flex;flex-direction:column}.storycard-m_horizontal-card___7afz{display:flex;flex-direction:row}@media (min-width:768px){.storycard-m_backgroung-img__1FMJT>a>figure:after{background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 50%,transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.storycard-m_backgroung-img__1FMJT>div:nth-child(2){bottom:0;left:15%;padding:var(--arrow-spacing-m) var(--arrow-spacing-m) 48px;position:absolute;right:15%}}.storycard-m_backgroung-img__1FMJT img{bottom:0;position:absolute}@media (min-width:768px){.storycard-m_content-overlap__1yNHR>div:nth-child(2){background-color:var(--arrow-c-light);bottom:0;margin:0 var(--arrow-spacing-m);padding:var(--arrow-spacing-m);position:absolute;width:calc(100% - 32px)}.storycard-m_content-overlap__1yNHR img{bottom:0;position:absolute}}.storycard-m_horizontal-card___7afz>div:first-child{flex-basis:30%}.storycard-m_horizontal-card___7afz>div:nth-child(2){flex-basis:70%}.storycard-m_border-full__1nhy7.storycard-m_light__3EhXN{border:1px solid var(--light-border)}.storycard-m_border-full__1nhy7.storycard-m_dark__2wCTq{border:1px solid var(--dark-border)}.storycard-m_border-bottom__2_E-I.storycard-m_light__3EhXN{border-bottom:1px solid var(--light-border);padding-bottom:var(--arrow-spacing-m)}.storycard-m_border-bottom__2_E-I.storycard-m_dark__2wCTq{border-bottom:1px solid var(--dark-border);padding-bottom:var(--arrow-spacing-m)}.storycard-m_border-boxShadow__2-k3Z{box-shadow:0 2px 10px 0 rgba(0,0,0,.1)}.storycard-m_center-align__1Sn8-{align-items:left;display:flex;flex-direction:column}@media (min-width:768px){.storycard-m_center-align__1Sn8-{align-items:center;text-align:center}}.storycard-m_content-boxShadow__2IAWZ,.storycard-m_content-full__2zJmU{padding:var(--arrow-spacing-xs) var(--arrow-spacing-m)}.storycard-m_backgroung-img__1FMJT,.storycard-m_content-overlap__1yNHR{position:relative}.storycard-m_hero-image__1H3MB{margin-bottom:var(--arrow-spacing-xs);padding-right:0}.storycard-m_right-padding__12-lQ{padding-bottom:0;padding-right:var(--arrow-spacing-xs)}.storycard-m_horizontal-mob__17JG2{display:flex;flex-direction:row}@media (min-width:768px){.storycard-m_horizontal-mob__17JG2{flex-direction:column}}.storycard-m_horizontal-mob__17JG2 .storycard-m_hero-image__1H3MB{flex-basis:30%}@media (min-width:768px){.storycard-m_horizontal-mob__17JG2 .storycard-m_hero-image__1H3MB{flex-basis:100%}}.storycard-m_horizontal-mob__17JG2 .storycard-m_content__1Q9vq{flex-basis:70%}@media (min-width:768px){.storycard-m_horizontal-mob__17JG2 .storycard-m_content__1Q9vq{flex-basis:100%}}.storycard-m_border-default__PEZ1x{border:none;height:100%}.storycard-m_card__KJwRa{height:100%}.storycard-m_horizontal-image-last__3o6LY{display:flex;flex-direction:row-reverse}.storycard-m_horizontal-image-last__3o6LY>div:first-child{flex-basis:30%}.storycard-m_horizontal-image-last__3o6LY>div:nth-child(2){flex-basis:70%}.loading-m_loading-indicator__2Dlst{left:calc(50% - 20px);position:absolute;top:50%}.astrology-collection-m_navigator__2uCCw{position:relative;visibility:hidden}.astrology-collection-m_wrapper__ywsE4{text-align:center}.astrology-collection-m_wrapper__ywsE4 .collection-borderBottom{display:inline-block}.astrology-collection-m_wrapper__ywsE4 .collection-borderLeft{display:inline-flex}.astrology-collection-m_collection-summary__1FPnb{color:var(--arrow-c-mono4);font-size:var(--arrow-fs-xs);line-height:var(--arrow-lh-3);margin-bottom:var(--arrow-spacing-xl)}@media (min-width:768px){.astrology-collection-m_collection-summary__1FPnb{margin-left:auto;margin-right:auto;max-width:80%}}.astrology-collection-m_tab__23HlB{display:flex;justify-content:center;margin-bottom:var(--arrow-spacing-xl)}@media (min-width:768px){.astrology-collection-m_tab__23HlB{margin-bottom:var(--arrow-spacing-48)}}.astrology-collection-m_child-collections__2RMob{display:flex;font-size:var(--arrow-fs-xs);overflow:scroll;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none}.astrology-collection-m_child-collections__2RMob::-webkit-scrollbar{height:0;width:0}.astrology-collection-m_child-collection__28kAh{cursor:pointer;font-size:var(--arrow-fs-xs);font-weight:var(--arrow-fw-bold);list-style:none;padding:var(--arrow-spacing-s)}.astrology-collection-m_child-collection__28kAh.astrology-collection-m_dark__36rM-{color:var(--arrow-c-mono4)}.astrology-collection-m_child-collection__28kAh.astrology-collection-m_light__3iJtV{color:var(--arrow-c-invert-mono3)}.astrology-collection-m_child-collection__28kAh.astrology-collection-m_dark__36rM-:hover,.astrology-collection-m_open-subchild__HAXhU.astrology-collection-m_dark__36rM-{color:var(--arrow-c-mono2)}.astrology-collection-m_child-collection__28kAh.astrology-collection-m_light__3iJtV:hover,.astrology-collection-m_collection-summary__1FPnb.astrology-collection-m_light__3iJtV,.astrology-collection-m_open-subchild__HAXhU.astrology-collection-m_light__3iJtV{color:var(--arrow-c-invert-mono1)}.astrology-collection-m_open-subchild__HAXhU{border-bottom:var(--arrow-spacing-xxs) solid var(--arrow-c-brand1)}@media (min-width:768px){.astrology-collection-m_main-wrapper__iLjDo{grid-gap:12px;display:grid;grid-template-columns:9fr 3fr}}.astrology-collection-m_main-wrapper-container__14hWe{margin-left:auto;margin-right:auto;max-width:1000px}.astrology-collection-m_subCollection-stories__2CcHk{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:astrology-collection-m_fadeIn__3nv3m;animation-name:astrology-collection-m_fadeIn__3nv3m;display:flex;flex-wrap:wrap;justify-content:space-between}.astrology-collection-m_subCollection-stories__2CcHk .arr--fallback-image{border-radius:50%}.astrology-collection-m_card__20FnI{flex-basis:32%;margin-bottom:24px;padding-right:16px}@media (min-width:768px){.astrology-collection-m_card__20FnI{flex-basis:16%}}.astrology-collection-m_card__20FnI .qt-image{border:1px solid #f8e7d3;border-radius:50%}.astrology-collection-m_card__20FnI .arr--headline{text-align:center}.astrology-collection-m_card__20FnI .arr--hero-image{flex-grow:0;height:56px;margin-left:auto;margin-right:auto;width:56px}@media (min-width:768px){.astrology-collection-m_card__20FnI .arr--hero-image{height:88px;width:88px}}.astrology-collection-m_ads__2XMEk{align-items:center;display:flex;justify-content:center}@-webkit-keyframes astrology-collection-m_fadeIn__3nv3m{0%{opacity:0}to{opacity:1}}@keyframes astrology-collection-m_fadeIn__3nv3m{0%{opacity:0}to{opacity:1}}

package/README.md

@@ -1,39 +1,44 @@
 # Quintype Arrow Components
+
 🏹 _React Component library for Malibu & Page Builder based on the **Arrow Design System**_
 
 ---
+
 Arrow consists of a set of pre styled components based on [Malibu](https://developers.quintype.com/malibu/)'s implementation of the [Atomic Design Methodology](https://developers.quintype.com/malibu/tutorial/implementing-a-design-system.html).
 
-Consumers of the library can import *Atoms*, *Molecules* and *Rows* as required by the layout. This includes composible story cards which can accept custom components amidst other pre defined atoms.
+Consumers of the library can import _Atoms_, _Molecules_ and _Rows_ as required by the layout. This includes composible story cards which can accept custom components amidst other pre defined atoms.
 
 The storybook for arrow components can be found [here](https://developers.quintype.com/quintype-node-arrow)
 
 ### Installation
+
 ```bash
 npm install --save @quintype/arrow
 ```
 
 ### Usage
+
 Import the styles to the root stylesheet (SASS loader required):
+
 ```css
 @import "@quintype/arrow/dist/app.scss";
 ```
 
 Import the required component from the library:
+
 ```jsx
 import { ThreeColGrid } from "@quintype/arrow";
 
 const MyComponent = () => (
   <>
     {/* Some Component Logic */}
-    <ThreeColGrid
-      collection={collection}
-      config={contextConfig}
-    />
+    <ThreeColGrid collection={collection} config={contextConfig} />
   </>
 );
 ```
+
 The context config consists of the params for the component, the structure is as such:
+
 ```jsx
 const contextConfig = {
   theme: "#ffffff",
@@ -45,11 +50,12 @@ const contextConfig = {
 ```
 
 ### Styling
+
 Arrow's styling follows the [Malibu](https://developers.quintype.com/malibu/)'s convention of using _CSS modules_ for it's internal component styling.
 
-All the component styling is governed by global style variables, as defined in the earlier imported `app.scss`, which can be overridden when required. These include the ability to change the *colour palette, spacing, font scales, font families, line height and font weights*.
+All the component styling is governed by global style variables, as defined in the earlier imported `app.scss`, which can be overridden when required. These include the ability to change the _colour palette, spacing, font scales, font families, line height and font weights_.
 
-if you want to set of CSS rules that resets the styling of all HTML elements to a consistent baseline,  install reset using `npm install reset-css` and import `@import 'reset-css' ` in your project.
+if you want to set of CSS rules that resets the styling of all HTML elements to a consistent baseline, install reset using `npm install reset-css` and import `@import 'reset-css'` in your project.
 
 you can follow `https://www.npmjs.com/package/reset-css`.
 
@@ -125,11 +131,12 @@ you can follow `https://www.npmjs.com/package/reset-css`.
 
  </details>
 
-
 ### Development
+
 Arrow follows [atomic design principles](https://atomicdesign.bradfrost.com/chapter-2/). Components are splits into Atoms, Molecules and Rows (Similar to Templates in atomic design).
 
 Each leaf folder follows below structure:
+
 ```
 ../HeroImage/
    - index.js           # A react component with styles.
@@ -139,9 +146,12 @@ Each leaf folder follows below structure:
                           the component to story book.
 
 ```
+
 To develop a new component in arrow/change a current one, these are the steps you should be following:
+
 #### npm start storybook
-This will start our storybook  in a URL (something like http://localhost:53035/) where you can develop the component in isolation. Your changes will reflect in the story book.
+
+This will start our storybook in a URL (something like http://localhost:53035/) where you can develop the component in isolation. Your changes will reflect in the story book.
 
 #### Sync local changes for development
 
@@ -152,26 +162,33 @@ This will start our storybook  in a URL (something like http://localhost:53035/)
 - Now you'll see a message `onchange: watching ./src/**/*`. Make some change inside `./src` dir and save, it should trigger a re-build of arrow. You'll see a message `onchange: command completed with code 0` and the built files will be copied to inside your app's node_modules dir
 - You might have to re-run the Malibu app's server in order for the arrow changes to reflect
 
-
 <hr />
 
 #### Updating to arrow v1
+
 - Update `@quintype/build` to v3.10.3 or higher. This is needed to process the css files exported by arrow.
 - Change `@import "@quintype/arrow/dist/app.scss"` to `@import "@quintype/arrow/app.scss"` in your app.scss file
 - Arrow v1 exports every component's CSS separately for better SSR performance
 - So suppose you were using `Headline` and `HeroImage` arrow components previously, you might be importing them like this:
-    ```js
-    import { Headline, HeroImage } from "@quintype/arrow";
-    ```
-    import component styles like so:
 
-    ```js
-    // import "@quintype/arrow/<component name>/styles.arrow.css"
+  ```js
+  import { Headline, HeroImage } from "@quintype/arrow";
+  ```
+
+  import component styles like so:
+
+  ```js
+  // import "@quintype/arrow/<component name>/styles.arrow.css"
 
-    import { Headline, HeroImage } from "@quintype/arrow";
-    import "@quintype/arrow/Headline/styles.arrow.css";
-    import "@quintype/arrow/HeroImage/styles.arrow.css";
-    ```
+  import { Headline, HeroImage } from "@quintype/arrow";
+  import "@quintype/arrow/Headline/styles.arrow.css";
+  import "@quintype/arrow/HeroImage/styles.arrow.css";
+  ```
 
 #### Updating to arrow v2
+
 Arrow v2, has no breaking changes. It only updates the `quintype-node-components` package version from v2.29.3 to v2.31.2.
+
+#### Updating to arrow v3
+
+In Arrow v3, we moved storybook to webpack5 and Updated `@quintype/build` to v4.0.0