@soul-refiner/design-system 2.0.0-alpha.8 → 2.0.1-alpha.1

package/dist/components/card/audio/audio.js

@@ -0,0 +1,93 @@
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),rate=require("../../actions/rate/rate.js"),cart_filled=require("../../../icons/shopping/cart_filled.js"),styles=require("../styles.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const AudioEpisodeCard=({actions:e,actionDropdown:a,content:t,cta:r,href:l,image:i,logo:o,numRating:d,purchaseText:n,rating:p,subtitle:s,supportLabel:u,sx:c,title:f})=>{var g=!!o;return React__default.default.createElement(Wrapper,{$sx:c,href:l,$hasPurchaseText:!!n},React__default.default.createElement(Figure,null,a&&React__default.default.createElement(DropdownWrapper,null,a),!!n&&React__default.default.createElement(styles.PurchaseTextWrapper,{className:"not-hover"},React__default.default.createElement(cart_filled.CartFilled,{color:"yellow-5",size:24}),React__default.default.createElement(paragraph.P,{$bold:!0,$color:"white"},n)),React__default.default.createElement(Image__default.default,{alt:"",className:"thumbnail",height:228,quality:100,src:i,width:228}),React__default.default.createElement(Figcaption,null,React__default.default.createElement(box.Box,{$display:"block",className:"hidden"},r),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:16},o,React__default.default.createElement(box.Box,{$dir:"column",$gap:4},React__default.default.createElement(heading.H,{$color:"grey-2",$semiBold:!0,$fontSize:g?18:16},f),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16},s)),u&&React__default.default.createElement(paragraph.P,{className:"not-hover",$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"},u)),React__default.default.createElement(paragraph.P,{$color:"grey-5",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:6,className:"hidden inline"},t),React__default.default.createElement(box.Box,{className:"hidden",$align:"center",$dir:"row"},React__default.default.createElement(rate.Rate,{isRateable:!1,percent:p,size:"small"}),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin: 0px auto 0px 4px;"},"(",d,")"),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:8},React__default.default.Children.toArray(e))))))},Wrapper=styled.styled.a`
+  cursor: pointer;
+  display: block;
+  position: relative;
+  z-index: 5;
+  user-select: none;
+  height: 288px;
+  width: 213px;
+  transition: transform 0.3s;
+
+  figure {
+    transition: width 0.3s;
+    width: 213px;
+    ${({$hasPurchaseText:e})=>e?"background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);":""}
+
+    img {
+      box-shadow: var(--elevation-3);
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  &:hover {
+    transform: translate(-34px, -55px);
+    z-index: 6;
+
+    .hidden {
+      display: flex;
+
+      &.inline {
+        display: -webkit-box;
+      }
+    }
+
+    .not-hover {
+      display: none;
+    }
+
+    .thumbnail {
+      border-radius: 16px 16px 0px 0px;
+    }
+
+    figure {
+      position: absolute;
+      width: 280px;
+      max-width: 280px;
+      aspect-ratio: 280 / 434;
+      box-shadow: var(--elevation-3);
+      background: linear-gradient(
+        0deg,
+        #ffffff 50%,
+        rgba(255, 255, 255, 0.85) 55%,
+        rgba(255, 255, 255, 0.1) 80%
+      );
+
+      img {
+        box-shadow: none;
+      }
+    }
+
+    figcaption {
+      margin-top: -80px;
+      padding: 24px;
+    }
+  }
+
+  ${({$sx:e})=>e||""};
+`,Figure=styled.styled.figure`
+  margin: 0px;
+  border-radius: 16px;
+
+  .thumbnail {
+    border-radius: 16px;
+    object-fit: cover;
+    position: relative;
+    z-index: -1;
+    width: 100%;
+    height: 225px;
+    aspect-ratio: 228 / 228;
+  }
+`,Figcaption=styled.styled.figcaption`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  padding: 8px;
+`,DropdownWrapper=styled.styled.div`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;exports.AudioEpisodeCard=AudioEpisodeCard;

package/dist/components/card/card.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";var React=require("react"),action=require("./action/action.js"),audio=require("./audio/audio.js"),feature=require("./feature/feature.js"),person=require("./person/person.js"),price=require("./price/price.js"),regular=require("./regular/regular.js"),video=require("./video/video.js"),written=require("./written/written.js"),meeting=require("./meeting/meeting.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Card=({type:e="regular",...t})=>{return{action:React__default.default.createElement(action.ActionCard,{...t}),"audio-episode":React__default.default.createElement(audio.AudioEpisodeCard,{...t}),feature:React__default.default.createElement(feature.FeatureCard,{...t}),person:React__default.default.createElement(person.PersonCard,{...t}),price:React__default.default.createElement(price.PriceCard,{...t}),regular:React__default.default.createElement(regular.RegularCard,{...t}),"video-episode":React__default.default.createElement(video.VideoEpisodeCard,{...t}),"written-episode":React__default.default.createElement(written.WrittenEpisodeCard,{...t}),meeting:React__default.default.createElement(meeting.MeetingCard,{...t})}[e]};exports.Card=Card;

package/dist/components/card/feature/feature.js

@@ -0,0 +1,132 @@
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),modal=require("../../surfaces/modal/modal.js"),camera=require("../../../icons/basic/camera.js"),checkmark=require("../../../icons/basic/checkmark.js"),close=require("../../../icons/basic/close.js"),pencil=require("../../../icons/basic/pencil.js"),trash=require("../../../icons/basic/trash.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const FeatureCard=({content:e="",editable:t,href:a,image:r,onDelete:o,onSave:l,sx:i,title:n="",uploadModal:d})=>{const[c,u]=React__default.default.useState(!1),[s,p]=React__default.default.useState(()=>n),[f,x]=React__default.default.useState(()=>e);var g=!c&&t,m=!!a;return React__default.default.createElement(Wrapper,{as:m?"a":"div",href:a},React__default.default.createElement(Figure,{$editing:c,$isLink:m,$sx:i},React__default.default.createElement(Image__default.default,{alt:n,height:352,quality:100,src:r,width:352}),!c&&React__default.default.createElement(Title,null,s,React__default.default.createElement("figure",null,React__default.default.createElement(Content,null,f)),g&&React__default.default.createElement(pencil.Pencil,{className:"edit",onClick:()=>u(!0)}),t&&d&&React__default.default.createElement(modal.Modal,null,React__default.default.createElement(modal.Modal.Trigger,null,React__default.default.createElement(button.Button,{icon:React__default.default.createElement(camera.Camera,null),type:"outlined",size:"small",sx:"position: absolute; right: 8px; top: -72px;"},"Edit")),React__default.default.createElement(modal.Modal.Content,null,d))),c&&React__default.default.createElement(box.Box,{$align:"flex-end",$display:"flex",$dir:"column",$gap:8,sx:"position: relative;"},React__default.default.createElement(EditTitle,{onChange:e=>{p(e.target.value)},value:s}),React__default.default.createElement(EditContent,{onChange:e=>{x(e.target.value)},value:f}),React__default.default.createElement(box.Box,{$gap:8},React__default.default.createElement(checkmark.Checkmark,{onClick:()=>{u(!1),l&&l(s,f)},sx:`
+                  padding: 8px;
+                  border-radius: 4px;
+                  cursor: pointer;
+                  background-color: var(--color-white); 
+                  box-shadow: var(--elevation-1);
+                  &:hover {
+                    background-color: var(--color-grey-10);
+                  }
+                `}),React__default.default.createElement(close.Close,{onClick:()=>{p(n),x(e),u(!1)},sx:`
+                  padding: 8px;
+                  border-radius: 4px;
+                  cursor: pointer;
+                  background-color: var(--color-white); 
+                  box-shadow: var(--elevation-1);
+                  &:hover {
+                    background-color: var(--color-grey-10);
+                  }
+                `}),o&&React__default.default.createElement(trash.Trash,{onClick:o,sx:`
+                    padding: 8px;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    background-color: var(--color-white); 
+                    box-shadow: var(--elevation-1);
+                    &:hover {
+                      background-color: var(--color-grey-10);
+                    }
+                  `})))))},Wrapper=styled.styled.div`
+  text-decoration: none;
+`,Figure=styled.styled.figure`
+  max-width: min-content;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 16px;
+  padding: 16px;
+  margin: 0px;
+  border-radius: 16px;
+  box-shadow: var(--elevation-1);
+  border: 1px solid var(--color-white);
+
+  &:hover {
+    ${({$isLink:e})=>e?"border: 1px solid var(--color-primary-blue-3); cursor: pointer;":"cursor: arrow;"}
+
+    button {
+      display: flex;
+    }
+
+    .edit {
+      display: block;
+    }
+  }
+
+  img {
+    max-width: 352px;
+    aspect-ratio: 1/1;
+    object-fit: cover;
+  }
+
+  figure {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 4px;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  button {
+    display: none;
+  }
+
+  .edit {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    display: none;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--color-grey-10);
+    }
+  }
+
+  ${({$editing:e})=>e?`
+    background-color: var(--color-grey-9);`:`
+    background-color: var(--color-white);`}
+
+  ${({$sx:e})=>e||""};
+`,Title=styled.styled.figcaption`
+  position: relative;
+  padding-right: 32px;
+  color: var(--color-grey-2);
+  font-size: 18px;
+  font-family: var(--font-inter);
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  user-select: none;
+`,Content=styled.styled.figcaption`
+  font-size: 14px;
+  font-family: var(--font-inter);
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+`,EditTitle=styled.styled.input`
+  width: calc(100% - 24px);
+  padding: 12px;
+  background-color: var(--color-white);
+  font-size: 18px;
+  font-family: var(--font-inter);
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+`,EditContent=styled.styled(EditTitle)`
+  padding: 6px 12px;
+  font-size: 14px;
+  font-family: var(--font-inter);
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+`;exports.FeatureCard=FeatureCard;

package/dist/components/card/meeting/meeting.js

@@ -0,0 +1,58 @@
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),modal=require("../../surfaces/modal/modal.js"),button=require("../../actions/button/button.js"),dropdown=require("../../actions/dropdown/dropdown.js"),calendar=require("../../../icons/time/calendar.js"),graduation_cap=require("../../../icons/basic/graduation_cap.js"),clock=require("../../../icons/time/clock.js"),pin=require("../../../icons/maps/pin.js"),forward_bold=require("../../../icons/arrow/forward_bold.js"),star_filled=require("../../../icons/basic/star_filled.js"),star=require("../../../icons/basic/star.js"),ellipsis_horizontal=require("../../../icons/basic/ellipsis_horizontal.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var RSVP,React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);!function(e){e.INTERESTED="INTERESTED",e.NOT_INTERESTED="NOT_INTERESTED"}(RSVP=RSVP||{});const MeetingCard=({href:e,image:t,sx:a,title:l,actions:r,course:o,startDate:i,endDate:n,startTime:d,endTime:c,location:u,shareModal:s,handleInterestedOnClick:p,handleNotInterestedOnClick:f,handleVisibleToConnectionsOnClick:_,rsvp:m,dotsActions:g})=>{var E=[];return p&&E.push({value:"interested",label:"Interested",onClick:p,icon:React__default.default.createElement(star_filled.StarFilled,{color:"yellow-5"}),color:m===RSVP.INTERESTED?"primary-blue-2":void 0}),f&&E.push({value:"notInterested",label:"Not Interested",onClick:f,icon:React__default.default.createElement(star_filled.StarFilled,{color:"red-4"}),color:m===RSVP.NOT_INTERESTED?"primary-blue-2":void 0}),_&&E.push("break",{value:"visibleToConnections",label:"Visible to connections",onClick:_}),React__default.default.createElement(Wrapper,{$isLink:!!e,$sx:a,as:e?"a":"div",href:e},React__default.default.createElement(Figure,null,React__default.default.createElement(Image__default.default,{alt:"",height:160,quality:100,src:t,width:312}),React__default.default.createElement(OverlayTopContainer,{id:"overlayTop"},g&&!!g.length&&React__default.default.createElement(dropdown.Dropdown,{hasArrow:!0,maintainState:!1,options:g,trigger:React__default.default.createElement(button.Button,{icon:React__default.default.createElement(ellipsis_horizontal.EllipsisHorizontal,null),showChevron:!1,type:"outlined",size:"small",className:"icon"}),onClick:e=>e.preventDefault()})),React__default.default.createElement(OverlayBottomContainer,{id:"overlayBottom"},s&&React__default.default.createElement(modal.Modal,null,React__default.default.createElement(modal.Modal.Trigger,null,React__default.default.createElement(button.Button,{icon:React__default.default.createElement(forward_bold.ForwardBold,null),type:"outlined",size:"small",onClick:e=>e.preventDefault(),className:"icon"})),React__default.default.createElement(modal.Modal.Content,{onClick:e=>e.preventDefault()},s)),!!E.length&&React__default.default.createElement(dropdown.Dropdown,{open:"left",offset:[40,10],maintainState:!1,options:E,trigger:React__default.default.createElement(button.Button,{icon:m===RSVP.INTERESTED&&React__default.default.createElement(star_filled.StarFilled,{sx:"color: var(--color-yellow-5);"})||m===RSVP.NOT_INTERESTED&&React__default.default.createElement(star_filled.StarFilled,{sx:"color: var(--color-red-4);"})||React__default.default.createElement(star.Star,null),type:"outlined",size:"small",className:"icon"}),onClick:e=>e.preventDefault()}))),React__default.default.createElement(box.Box,{$dir:"column",$padding:24},React__default.default.createElement(heading.H.Eight,{$textAlign:"center",$color:"grey-2",$mediumBold:!0},l),React__default.default.createElement(MeetingInformation,null,o&&React__default.default.createElement(box.Box,{$align:"center",$gap:20},React__default.default.createElement(graduation_cap.GraduationCap,{color:"grey-6"}),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-3",$lineHeight:20,$fontSize:14},o)),React__default.default.createElement(box.Box,{$align:"center",$gap:20},React__default.default.createElement(calendar.Calendar,{color:"grey-6"}),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-3",$lineHeight:20,$fontSize:14},i," - ",n)),React__default.default.createElement(box.Box,{$align:"center",$gap:20},React__default.default.createElement(clock.Clock,{color:"grey-6"}),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-3",$lineHeight:20,$fontSize:14},d," - ",c)),React__default.default.createElement(box.Box,{$align:"center",$gap:20,sx:"max-width: 264px;"},React__default.default.createElement(pin.Pin,{color:"grey-6"}),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-3",$lineHeight:20,$fontSize:14},u))),React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$gap:8,sx:"margin-top: 32px; width: 100%;"},React__default.default.Children.toArray(r))))},Wrapper=styled.styled.div`
+  min-width: 312px;
+  position: relative;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+  box-shadow: var(--elevation-1);
+  border-radius: 16px;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-white);
+
+  &:hover {
+    ${({$isLink:e})=>e?"border: 1px solid var(--color-primary-blue-3);":""}
+
+    #overlayBottom {
+      opacity: 1;
+    }
+
+    #overlayTop {
+      opacity: 1;
+    }
+  }
+
+  img {
+    border-radius: 16px 16px 0px 0px;
+    height: 160px;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  ${({$sx:e})=>e||""};
+`,MeetingInformation=styled.styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
+  height: 128px;
+`,Figure=styled.styled.figure`
+  position: relative;
+  margin: 0;
+`,OverlayBottomContainer=styled.styled.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 0 10px 10px 0;
+  opacity: 0;
+  display: flex;
+  gap: 8px;
+`,OverlayTopContainer=styled.styled.div`
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 10px 10px 0 0;
+  opacity: 0;
+  display: flex;
+  gap: 8px;
+`;exports.MeetingCard=MeetingCard;

package/dist/components/card/person/person.js

@@ -0,0 +1,50 @@
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),dropdown=require("../../actions/dropdown/dropdown.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),ellipsis_horizontal=require("../../../icons/basic/ellipsis_horizontal.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const PersonCard=({actions:e,dotsActions:t,href:a,image:i,subtitle:o,sx:r,title:l})=>React__default.default.createElement(Wrapper,{$image:i,as:a?"a":"div",href:a},React__default.default.createElement(Person,{$sx:r},t&&!!t.length&&React__default.default.createElement(dropdown.Dropdown,{containerSx:"",hasArrow:!0,maintainState:!1,onClick:e=>e.preventDefault(),options:t,sx:"position: absolute; top: 8px; right: 8px; z-index: 24; display: none;",trigger:React__default.default.createElement(button.Button,{className:"icon",icon:React__default.default.createElement(ellipsis_horizontal.EllipsisHorizontal,null),onClick:e=>e.stopPropagation(),showChevron:!1,size:"small",type:"outlined"})}),React__default.default.createElement(Image__default.default,{alt:"",height:400,quality:100,src:i,width:312}),React__default.default.createElement(Shadow,null),React__default.default.createElement(Figcaption,null,React__default.default.createElement(heading.H,{as:"span",$bold:!0,$color:"white",$fontSize:24,$lineHeight:36},l),React__default.default.createElement(paragraph.P,{as:"span",$color:"white",$fontSize:14,$lineHeight:20},o),e&&React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$gap:8,sx:"margin-top: 16px;"},React__default.default.Children.toArray(e))))),Wrapper=styled.styled.div`
+  width: 312px;
+  height: 400px;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+
+  img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    border-radius: 16px;
+    object-fit: cover;
+  }
+`,Shadow=styled.styled.div`
+  border-radius: 16px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.67%, #000 98.25%),
+    transparent 50% / cover no-repeat;
+`,Person=styled.styled.figure`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+
+  &:hover > div {
+    display: initial;
+  }
+
+  ${({$sx:e})=>e||""};
+`,Figcaption=styled.styled.figcaption`
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px;
+`;exports.PersonCard=PersonCard;

package/dist/components/card/price/price.js

@@ -0,0 +1,47 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),dropdown=require("../../actions/dropdown/dropdown.js"),checkmark=require("../../../icons/basic/checkmark.js"),ellipsis_horizontal=require("../../../icons/basic/ellipsis_horizontal.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const PriceCard=({actions:e,content:t,dotsActions:a,featureTitle:r,features:o,label:l,price:d,title:i})=>{const n=React__default.default.useId();return React__default.default.createElement(Price,null,a&&!!a.length&&React__default.default.createElement(dropdown.Dropdown,{className:"dot-dropdown",hasArrow:!0,maintainState:!1,offset:[0,32],options:a,sx:`
+          position: absolute; 
+          top: 6px; 
+          right: 6px; 
+          display: none;
+          `,trigger:React__default.default.createElement(button.Button,{icon:React__default.default.createElement(ellipsis_horizontal.EllipsisHorizontal,null),showChevron:!1,type:"outlined",size:"small",className:"icon"}),onClick:e=>e.preventDefault()}),l&&React__default.default.createElement(box.Box,{$justify:"center",sx:`
+            width: 100%;
+            position: absolute;
+            z-index: -1;
+            top: -33px;`},React__default.default.createElement(Label,null,React__default.default.createElement(paragraph.P,{as:"span",$fontSize:12,$lineHeight:16,$mediumBold:!0,$textClampLines:1},l))),React__default.default.createElement(box.Box,{$align:"stretch",$display:"flex",$dir:"column",$gap:24,sx:`
+          padding: 24px 48px; 
+          background-color: var(--color-grey-10); 
+          border-radius: 16px 16px 0px 0px;
+        `},React__default.default.createElement(heading.H,{as:"h6",$fontSize:24,$lineHeight:36,$semiBold:!0,$textAlign:"center"},i),React__default.default.createElement(box.Box,{$dir:"column"},React__default.default.createElement(heading.H,{as:"p",$bold:!0,$fontSize:32,$lineHeight:48,$textClampLines:5,$textAlign:"center"},d),React__default.default.createElement(paragraph.P,{as:"span",$color:"grey-4",$textAlign:"center"},"/month")),e),React__default.default.createElement(box.Box,{sx:"padding: 16px 24px; position: relative;",$display:"flex",$dir:"column"},React__default.default.createElement(paragraph.P,{sx:"padding: 16px 0px;"},t),React__default.default.createElement(Divider,null),React__default.default.createElement(box.Box,{sx:"padding: 16px 0px;",$dir:"column",$gap:8},React__default.default.createElement(paragraph.P,{$color:"grey-2",$mediumBold:!0},r),o.map((e,t)=>React__default.default.createElement(box.Box,{key:n+t.toString(36),$align:"center",$gap:12},React__default.default.createElement(checkmark.Checkmark,{color:"green-5",sx:"padding: 2px; border-radius: 50%; background-color: var(--color-green-9);"}),React__default.default.createElement(paragraph.P,{$fontSize:14,$lineHeight:20},e))))))},Price=styled.styled.figure`
+  position: relative;
+  z-index: 1;
+  margin: 0px;
+  padding: 0px;
+  width: 280px;
+  height: fit-content;
+  border-radius: 16px;
+  box-shadow: var(--elevation-2);
+  user-select: none;
+  border: 1px solid transparent;
+
+  &:hover {
+    border: 1px solid var(--color-primary-blue-3);
+
+    .dot-dropdown {
+      display: flex;
+    }
+  }
+`,Label=styled.styled.div`
+  max-width: calc(100% - 32px);
+  box-sizing: border-box;
+  padding: 8px 24px;
+  border-radius: 16px 16px 0px 0px;
+  background-color: var(--color-grey-10);
+  box-shadow: var(--elevation-2);
+  border-bottom: 1px solid var(--color-grey-9);
+`,Divider=styled.styled.div`
+  height: 1px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--color-grey-9);
+`;exports.PriceCard=PriceCard;

package/dist/components/card/regular/regular.js

@@ -0,0 +1,22 @@
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const RegularCard=({children:e,href:t,image:a,sx:r})=>React__default.default.createElement(Wrapper,{$isLink:!!t,$sx:r,as:t?"a":"div",href:t},React__default.default.createElement(Image__default.default,{alt:"",height:352,quality:100,src:a,width:352}),React__default.default.createElement(box.Box,{$dir:"column",$padding:24},e)),Wrapper=styled.styled.div`
+  position: relative;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+  box-shadow: var(--elevation-1);
+  border-radius: 16px;
+  background-color: var(--color-white);
+
+  ${({$isLink:e})=>e?`
+    &:hover {
+      border: 1px solid var(--color-primary-blue-3);
+    }`:""}
+
+  img {
+    border-radius: 16px 16px 0px 0px;
+    object-fit: cover;
+  }
+
+  ${({$sx:e})=>e||""};
+`;exports.RegularCard=RegularCard;

package/dist/components/card/styles.js

@@ -0,0 +1,9 @@
+"use client";
+"use strict";var styled=require("styled-components"),box=require("../atoms/box/box.js");const PurchaseTextWrapper=styled.styled(box.Box)`
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  width: calc(100% - 32px);
+  gap: 8px;
+  align-items: center;
+`;exports.PurchaseTextWrapper=PurchaseTextWrapper;

package/dist/components/card/video/video.js

@@ -0,0 +1,90 @@
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),rate=require("../../actions/rate/rate.js"),cart_filled=require("../../../icons/shopping/cart_filled.js"),styles=require("../styles.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const VideoEpisodeCard=({actions:e,actionDropdown:t,content:a,cta:r,href:l,image:i,logo:o,numRating:d,purchaseText:n,rating:p,subtitle:s,supportLabel:c,sx:u,title:f})=>{var g=!!o;return React__default.default.createElement(Wrapper,{$sx:u,href:l,$hasPurchaseText:!!n},React__default.default.createElement(Figure,null,t&&React__default.default.createElement(DropdownWrapper,null,t),!!n&&React__default.default.createElement(styles.PurchaseTextWrapper,{className:"not-hover"},React__default.default.createElement(cart_filled.CartFilled,{color:"yellow-5",size:24}),React__default.default.createElement(paragraph.P,{$bold:!0,$color:"white"},n)),React__default.default.createElement(Image__default.default,{alt:"",className:"thumbnail",height:213,quality:100,src:i,width:379}),React__default.default.createElement(Figcaption,null,React__default.default.createElement(box.Box,{$display:"block",className:"hidden"},r),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:16},o,React__default.default.createElement(box.Box,{$dir:"column",$gap:4},React__default.default.createElement(heading.H,{$color:"grey-2",$semiBold:!0,$fontSize:g?18:16},f),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16},s)),c&&React__default.default.createElement(paragraph.P,{className:"not-hover",$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"},c)),React__default.default.createElement(paragraph.P,{$color:"grey-5",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:4,className:"hidden"},a),React__default.default.createElement(box.Box,{className:"hidden",$align:"center",$dir:"row"},React__default.default.createElement(rate.Rate,{isRateable:!1,percent:p,size:"small"}),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin: 0px auto 0px 4px;"},"(",d,")"),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:8},React__default.default.Children.toArray(e))))))},Wrapper=styled.styled.a`
+  cursor: pointer;
+  display: block;
+  position: relative;
+  z-index: 1;
+  user-select: none;
+  position: relative;
+  height: 288px;
+  width: 379px;
+  transition: transform 0.3s;
+
+  figure {
+    transition: width 0.3s;
+    width: 379px;
+    ${({$hasPurchaseText:e})=>e?"background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);":""}
+
+    img {
+      box-shadow: var(--elevation-3);
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  &:hover {
+    transform: translate(-13px, -55px);
+    z-index: 6;
+
+    .hidden {
+      display: -webkit-box;
+    }
+
+    .not-hover {
+      display: none;
+    }
+
+    .thumbnail {
+      border-radius: 16px 16px 0px 0px;
+    }
+
+    figure {
+      position: absolute;
+      width: 406px;
+      box-shadow: var(--elevation-3);
+      background: linear-gradient(
+        0deg,
+        #ffffff 50%,
+        rgba(255, 255, 255, 0.85) 55%,
+        rgba(255, 255, 255, 0.1) 80%
+      );
+
+      img {
+        box-shadow: none;
+      }
+    }
+
+    figcaption {
+      margin-top: -40px;
+      padding: 24px;
+    }
+  }
+
+  ${({$sx:e})=>e||""};
+`,Figure=styled.styled.figure`
+  max-width: 410px;
+  width: max-content;
+  margin: 0px;
+  border-radius: 16px;
+
+  .thumbnail {
+    position: relative;
+    object-fit: cover;
+    z-index: -1;
+    width: 100%;
+    aspect-ratio: 379 / 213;
+    height: 225px;
+    border-radius: 16px;
+  }
+`,Figcaption=styled.styled.figcaption`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  padding: 8px;
+`,DropdownWrapper=styled.styled.div`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;exports.VideoEpisodeCard=VideoEpisodeCard;

package/dist/components/card/written/written.js

@@ -0,0 +1,93 @@
+"use client";
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),rate=require("../../actions/rate/rate.js"),cart_filled=require("../../../icons/shopping/cart_filled.js"),styles=require("../styles.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const WrittenEpisodeCard=({actions:e,actionDropdown:t,content:a,cta:r,href:l,image:i,logo:o,numRating:n,purchaseText:d,rating:s,subtitle:p,supportLabel:c,sx:u,title:f})=>{var g=!!o;return React__default.default.createElement(Wrapper,{$sx:u,href:l,$hasPurchaseText:!!d},React__default.default.createElement(Figure,null,t&&React__default.default.createElement(DropdownWrapper,null,t),!!d&&React__default.default.createElement(styles.PurchaseTextWrapper,{className:"not-hover"},React__default.default.createElement(cart_filled.CartFilled,{color:"yellow-5",size:24,sx:"flex-shrink: 0;"}),React__default.default.createElement(paragraph.P,{$bold:!0,$color:"white"},d)),React__default.default.createElement(Image__default.default,{alt:"",className:"thumbnail",height:228,quality:100,src:i,width:176}),React__default.default.createElement(Figcaption,null,React__default.default.createElement(box.Box,{$display:"block",className:"hidden"},r),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:16},o,React__default.default.createElement(box.Box,{$dir:"column",$gap:4},React__default.default.createElement(heading.H,{$color:"grey-2",$semiBold:!0,$fontSize:g?18:16},f),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16},p)),c&&React__default.default.createElement(paragraph.P,{className:"not-hover",$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"},c)),React__default.default.createElement(paragraph.P,{$color:"grey-5",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:6,className:"hidden inline"},a),React__default.default.createElement(box.Box,{className:"hidden",$align:"center",$dir:"row"},React__default.default.createElement(rate.Rate,{isRateable:!1,percent:s,size:"small"}),React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,sx:"margin: 0px auto 0px 4px;"},"(",n,")"),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:8},React__default.default.Children.toArray(e))))))},Wrapper=styled.styled.a`
+  cursor: pointer;
+  display: block;
+  position: relative;
+  z-index: 1;
+  user-select: none;
+  aspect-ratio: 149 / 275;
+  height: 288px;
+  transition: transform 0.3s;
+
+  figure {
+    transition: width 0.3s;
+    width: 100%;
+    ${({$hasPurchaseText:e})=>e?"background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 25.1px, rgba(0, 0, 0, 0.00) 56px);":""}
+
+    img {
+      box-shadow: var(--elevation-3);
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  &:hover {
+    transform: translate(-65px, -55px);
+    z-index: 6;
+
+    .hidden {
+      display: flex;
+
+      &.inline {
+        display: -webkit-box;
+      }
+    }
+
+    .not-hover {
+      display: none;
+    }
+
+    .thumbnail {
+      border-radius: 16px 16px 0px 0px;
+      aspect-ratio: 228 / 228;
+    }
+
+    figure {
+      position: absolute;
+      width: 280px;
+      aspect-ratio: 280 / 434;
+      box-shadow: var(--elevation-3);
+      background: linear-gradient(
+        0deg,
+        #ffffff 50%,
+        rgba(255, 255, 255, 0.85) 55%,
+        rgba(255, 255, 255, 0.1) 80%
+      );
+
+      img {
+        box-shadow: none;
+      }
+    }
+
+    figcaption {
+      margin-top: -80px;
+      padding: 24px;
+    }
+  }
+
+  ${({$sx:e})=>e||""};
+`,Figure=styled.styled.figure`
+  margin: 0px;
+  border-radius: 16px;
+
+  .thumbnail {
+    border-radius: 16px;
+    object-fit: cover;
+    position: relative;
+    z-index: -1;
+    width: 100%;
+    height: 225px;
+    aspect-ratio: 149 / 213;
+  }
+`,Figcaption=styled.styled.figcaption`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  padding: 8px;
+`,DropdownWrapper=styled.styled.div`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;exports.WrittenEpisodeCard=WrittenEpisodeCard;