@soul-refiner/design-system 2.14.89 → 2.14.90

package/dist/components/card/card.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var e=require("react/jsx-runtime"),r=require("./action/action.js"),s=require("./audio/audio.js"),i=require("./feature/feature.js"),a=require("./person/person.js"),t=require("./price/price.js"),u=require("./regular/regular.js"),o=require("./video/video.js"),d=require("./written/written.js"),j=require("./meeting/meeting.js"),n=require("./course-seats/course-seats.js");exports.Card=({type:p="regular",...c})=>({action:e.jsx(r.ActionCard,{...c}),"audio-episode":e.jsx(s.AudioEpisodeCard,{...c}),feature:e.jsx(i.FeatureCard,{...c}),person:e.jsx(a.PersonCard,{...c}),price:e.jsx(t.PriceCard,{...c}),regular:e.jsx(u.RegularCard,{...c}),"video-episode":e.jsx(o.VideoEpisodeCard,{...c}),"written-episode":e.jsx(d.WrittenEpisodeCard,{...c}),meeting:e.jsx(j.MeetingCard,{...c}),"course-seats":e.jsx(n.CourseSeatsCard,{...c})}[p]);
+"use strict";var e=require("react/jsx-runtime"),r=require("./action/action.js"),s=require("./audio/audio.js"),i=require("./feature/feature.js"),u=require("./person/person.js"),a=require("./price/price.js"),o=require("./regular/regular.js"),t=require("./video/video.js"),d=require("./written/written.js"),j=require("./meeting/meeting.js"),p=require("./course-seats/course-seats.js"),n=require("./simple-course/simple-course.js");exports.Card=({type:c="regular",...C})=>({action:e.jsx(r.ActionCard,{...C}),"audio-episode":e.jsx(s.AudioEpisodeCard,{...C}),feature:e.jsx(i.FeatureCard,{...C}),person:e.jsx(u.PersonCard,{...C}),price:e.jsx(a.PriceCard,{...C}),regular:e.jsx(o.RegularCard,{...C}),"video-episode":e.jsx(t.VideoEpisodeCard,{...C}),"written-episode":e.jsx(d.WrittenEpisodeCard,{...C}),meeting:e.jsx(j.MeetingCard,{...C}),"course-seats":e.jsx(p.CourseSeatsCard,{...C}),"simple-course":e.jsx(n.SimpleCourseCard,{...C})}[c]);

package/dist/components/card/simple-course/simple-course.js

@@ -0,0 +1,158 @@
+"use client";
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("next/image"),o=require("styled-components"),n=require("../../atoms/box/box.js"),t=require("../../atoms/typography/heading.js"),s=require("../../atoms/typography/paragraph.js"),a=require("../../actions/rate/rate.js"),l=require("../../feedback/tooltip/tooltip.js"),d=require("../../../icons/basic/video.js");require("../../iconography/icon/icon.js");var c=require("../../../icons/arrow/forward_bold.js"),p=require("../../../icons/audio_video/play_display.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../../icons/basic/subtask.js"),require("../../../common/colors.js");var x=h(i),u=h(r);const g=o.styled.div`
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+  user-select: none;
+  text-decoration: none;
+  width: 312px;
+  vertical-align: top;
+  background-color: var(--color-white);
+  border-radius: 16px;
+
+  &[href] {
+    cursor: pointer;
+  }
+
+  &:not([href]) {
+    cursor: default;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    height: 288px;
+    visibility: hidden;
+  }
+
+  figure {
+    width: 312px;
+    background-color: var(--color-white);
+    border-radius: 16px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: transform 0.3s ease, width 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .normal-card {
+    opacity: 1;
+    visibility: visible;
+    box-shadow: var(--elevation-1);
+    z-index: 1;
+    transition: opacity 0.1s ease, visibility 0s ease, transform 0.3s ease,
+      width 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .hover-card {
+    opacity: 0;
+    visibility: hidden;
+    box-shadow: var(--elevation-3);
+    z-index: 2;
+    transition: opacity 0.15s ease 0.05s, visibility 0s ease 0.2s,
+      transform 0.3s ease, width 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  @media (min-width: 768px) {
+    ${({$hasContent:e,$isClickable:i})=>e&&i&&"\n      &:hover {\n        z-index: 6;\n\n        .normal-card {\n          opacity: 0;\n          visibility: hidden;\n          transition: opacity 0.1s ease 0.1s, visibility 0s ease 0.1s, transform 0.3s ease, width 0.3s ease, box-shadow 0.3s ease;\n        }\n\n        .hover-card {\n          opacity: 1;\n          visibility: visible;\n          transform: translate(-13px, -55px);\n          width: 338px;\n          transition: opacity 0.1s ease, visibility 0s ease, transform 0.3s ease, width 0.3s ease, box-shadow 0.3s ease;\n        }\n\n        .hover-card figcaption {\n          padding: 16px 16px 20px;\n        }\n      }\n    "}
+  }
+
+  ${({$sx:e})=>e||""};
+`,b=o.styled.figure`
+  margin: 0px;
+  border-radius: 16px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border: none;
+  gap: 0;
+  line-height: 0;
+`,$=o.styled.div`
+  position: relative;
+  width: 100%;
+  height: 180px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background-color: var(--color-white);
+  border-radius: 16px;
+  border: none;
+  outline: none;
+
+  .hover-card & {
+    border-radius: 16px 16px 0 0;
+    background-color: #f8fafc;
+  }
+`,y=o.styled.video`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border: none;
+  outline: none;
+  background-color: var(--color-white);
+`,f=o.styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  background: linear-gradient(
+    to bottom,
+    rgba(248, 250, 252, 0) 0%,
+    rgba(248, 250, 252, 0.1) 20%,
+    rgba(248, 250, 252, 0.3) 40%,
+    rgba(248, 250, 252, 0.6) 60%,
+    rgba(248, 250, 252, 0.85) 80%,
+    rgba(248, 250, 252, 1) 100%
+  );
+  pointer-events: none;
+  border: none;
+  outline: none;
+`,j=o.styled.figcaption`
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 12px;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #f8fafc;
+  line-height: normal;
+  transition: padding 0.3s ease;
+  border: none;
+  outline: none;
+`,v=o.styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: relative;
+  z-index: 2;
+  border: none;
+`,m=o.styled.div`
+  background-color: var(--color-primary-blue-2);
+  border-radius: 10px;
+  padding: 2px 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+`,w=o.styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: relative;
+  z-index: 2;
+`,k=o.styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: var(--color-grey-4);
+
+  &:hover {
+    color: var(--color-primary-blue-2);
+  }
+`;exports.SimpleCourseCard=({actions:i,content:r,href:o,image:h,numRating:z,price:S,rating:H,subtitle:C,supportLabel:q,supportIcon:P=e.jsx(d.Video,{size:16,color:"white"}),sx:_,title:B,additionalIcons:L,onHoverCardClick:T,trailerUrl:M,onTrailerClick:I,onShareClick:R})=>{const D=!!r,A=!!o,[F,E]=x.default.useState(!1),N=x.default.useRef(null),U=e=>{F&&T&&(e.preventDefault(),T())},V=()=>{D&&A&&(E(!0),N.current&&M&&N.current.play())},G=()=>{E(!1),N.current&&(N.current.pause(),N.current.currentTime=0)},J=e.jsxs(e.Fragment,{children:[e.jsxs(b,{className:"normal-card",children:[e.jsx($,{children:e.jsx(u.default,{alt:"",height:180,quality:100,src:h,width:312})}),e.jsx(j,{children:e.jsxs(v,{children:[e.jsxs(n.Box,{$dir:"column",$gap:4,children:[e.jsx(t.H,{$color:"grey-2",$textClampLines:2,$semiBold:!0,$fontSize:16,$lineHeight:26,dangerouslySetInnerHTML:{__html:B}}),e.jsx(s.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,dangerouslySetInnerHTML:{__html:C}})]}),e.jsxs(n.Box,{$align:"center",$dir:"row",$justify:"space-between",children:[e.jsxs(n.Box,{$align:"center",$dir:"row",$gap:4,children:[q&&e.jsxs(m,{children:[P,e.jsx(s.P,{$color:"white",$fontSize:10,$lineHeight:14,sx:"font-weight:500",children:q})]}),e.jsx(s.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,children:H/20}),e.jsx(a.Rate,{isRateable:!1,percent:H,size:"small"}),e.jsxs(s.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,children:["(",z,")"]})]}),e.jsx(s.P,{$color:"grey-2",$fontSize:16,$lineHeight:24,$bold:!0,children:S})]})]})})]}),D&&M&&e.jsxs(b,{className:"hover-card",children:[e.jsxs($,{children:[e.jsx(y,{ref:N,muted:!0,loop:!0,playsInline:!0,preload:"auto",children:Array.isArray(M)?M.map((i,r)=>e.jsx("source",{src:i},r)):e.jsx("source",{src:M,type:"video/mp4"})}),e.jsx(f,{})]}),e.jsx(j,{children:e.jsxs(w,{children:[e.jsxs(n.Box,{$align:"center",$dir:"row",$justify:"space-between",$gap:8,children:[e.jsx(s.P,{$color:"primary-blue-2",$fontSize:16,$lineHeight:24,$bold:!0,children:S}),i&&e.jsx(n.Box,{onClick:e=>{e.preventDefault(),e.stopPropagation()},children:i})]}),e.jsxs(n.Box,{$dir:"column",$gap:4,children:[e.jsx(t.H,{$color:"grey-2",$textClampLines:2,$semiBold:!0,$fontSize:16,$lineHeight:26,dangerouslySetInnerHTML:{__html:B}}),e.jsx(s.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,dangerouslySetInnerHTML:{__html:C}})]}),e.jsx(s.P,{$color:"grey-3",$fontSize:14,$lineHeight:20,$textClampLines:4,dangerouslySetInnerHTML:{__html:r}}),e.jsxs(n.Box,{$align:"center",$dir:"row",$justify:"space-between",children:[e.jsxs(n.Box,{$align:"center",$dir:"row",$gap:8,children:[q&&e.jsxs(m,{children:[P,e.jsx(s.P,{$color:"white",$fontSize:10,$lineHeight:14,sx:"font-weight:500",children:q})]}),e.jsx(s.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,children:H/20}),e.jsx(a.Rate,{isRateable:!1,percent:H,size:"small"}),e.jsxs(s.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,children:["(",z,")"]})]}),e.jsxs(n.Box,{$align:"center",$dir:"row",$gap:8,children:[I&&e.jsx(l.Tooltip,{content:"Trailer",place:"top",children:e.jsx(k,{onClick:e=>{e.preventDefault(),e.stopPropagation(),I()},children:e.jsx(p.PlayDisplay,{size:20})})}),R&&e.jsx(l.Tooltip,{content:"Share",place:"top",children:e.jsx(k,{onClick:e=>{e.preventDefault(),e.stopPropagation(),R()},children:e.jsx(c.ForwardBold,{size:20})})}),L&&L.length>0&&e.jsx(e.Fragment,{children:x.default.Children.toArray(L)})]})]})]})})]})]});return o?e.jsx(g,{as:"a",$sx:_,href:o,$hasContent:D,$isClickable:A,onClick:U,onMouseEnter:V,onMouseLeave:G,children:J}):e.jsx(g,{as:"div",$sx:_,$hasContent:D,$isClickable:A,onMouseEnter:V,onMouseLeave:G,children:J})};

package/dist/src/components/card/card.d.ts

@@ -9,8 +9,9 @@ import { VideoEpisodeCardProps } from './video/video';
 import { WrittenEpisodeCardProps } from './written/written';
 import { MeetingCardProps } from './meeting/meeting';
 import { CourseSeatsCardProps } from './course-seats/course-seats';
-type CardType = 'action' | 'audio-episode' | 'feature' | 'person' | 'price' | 'regular' | 'video-episode' | 'written-episode' | 'meeting' | 'course-seats';
-export type CardProps = (ActionCardProps | AudioEpisodeCardProps | FeatureCardProps | PersonCardProps | PriceCardProps | RegularCardProps | VideoEpisodeCardProps | WrittenEpisodeCardProps | MeetingCardProps | CourseSeatsCardProps) & {
+import { SimpleCourseCardProps } from './simple-course/simple-course';
+type CardType = 'action' | 'audio-episode' | 'feature' | 'person' | 'price' | 'regular' | 'video-episode' | 'written-episode' | 'meeting' | 'course-seats' | 'simple-course';
+export type CardProps = (ActionCardProps | AudioEpisodeCardProps | FeatureCardProps | PersonCardProps | PriceCardProps | RegularCardProps | VideoEpisodeCardProps | WrittenEpisodeCardProps | MeetingCardProps | CourseSeatsCardProps | SimpleCourseCardProps) & {
     type: CardType;
 };
 export declare const Card: ({ type, ...rest }: CardProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/dist/src/components/card/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,KAAK,QAAQ,GACT,QAAQ,GACR,eAAe,GACf,SAAS,GACT,QAAQ,GACR,OAAO,GACP,SAAS,GACT,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,cAAc,CAAC;AAEnB,MAAM,MAAM,SAAS,GAAG,CACpB,eAAe,GACf,qBAAqB,GACrB,gBAAgB,GAChB,eAAe,GACf,cAAc,GACd,gBAAgB,GAChB,qBAAqB,GACrB,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,CACvB,GAAG;IACF,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,IAAI,sBAAmC,SAAS,uEAiB5D,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEtE,KAAK,QAAQ,GACT,QAAQ,GACR,eAAe,GACf,SAAS,GACT,QAAQ,GACR,OAAO,GACP,SAAS,GACT,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,cAAc,GACd,eAAe,CAAC;AAEpB,MAAM,MAAM,SAAS,GAAG,CACpB,eAAe,GACf,qBAAqB,GACrB,gBAAgB,GAChB,eAAe,GACf,cAAc,GACd,gBAAgB,GAChB,qBAAqB,GACrB,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,qBAAqB,CACxB,GAAG;IACF,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,IAAI,sBAAmC,SAAS,uEAkB5D,CAAC"}

package/dist/src/components/card/simple-course/index.d.ts

@@ -0,0 +1,3 @@
+export { SimpleCourseCard } from './simple-course';
+export type { SimpleCourseCardProps } from './simple-course';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/card/simple-course/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/simple-course/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,YAAY,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/src/components/card/simple-course/simple-course.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface SimpleCourseCardProps {
+    actions?: React.ReactElement;
+    content?: string;
+    href?: string;
+    image: string;
+    numRating: number;
+    price: string;
+    rating: number;
+    subtitle: string;
+    supportLabel?: string;
+    supportIcon?: React.ReactElement;
+    sx?: string;
+    title: string;
+    additionalIcons?: React.ReactElement[];
+    onHoverCardClick?: () => void;
+    trailerUrl?: string | string[];
+    onTrailerClick?: () => void;
+    onShareClick?: () => void;
+}
+export declare const SimpleCourseCard: ({ actions, content, href, image, numRating, price, rating, subtitle, supportLabel, supportIcon, sx, title, additionalIcons, onHoverCardClick, trailerUrl, onTrailerClick, onShareClick, }: SimpleCourseCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=simple-course.d.ts.map

package/dist/src/components/card/simple-course/simple-course.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-course.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/simple-course/simple-course.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IACvC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,8LAkB1B,qBAAqB,4CAmPvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.14.89",
+  "version": "2.14.90",
   "main": "dist/index.js",
   "types": "dist/src/index.d.ts",
   "license": "MIT",