@liner-fe/prism 2.1.3 → 2.1.5

package/lib/assets/index.d.ts

@@ -145,7 +145,7 @@ export { ICLpPriIconSArrowForward } from './lp-pri-icon-s-arrow-forward';
 export { ICLpPriIconMLink } from './lp-pri-icon-m-link';
 export { ICLpPriIconMSheetExport } from './lp-pri-icon-m-sheet-export';
 export { ICLpPriIconMShieldPerson } from './lp-pri-icon-m-shield-person';
-export { ICLpPriIconMShieldUsage } from './lp-pri-icon-m-shield-usage';
+export { ICShieldUsage } from './shield-usage';
 export { ICHighlighter } from './highlighter';
 export { ICLpPriIconMFormalBag } from './lp-pri-icon-m-formal-bag';
 export { ICLpPriIconMCasualShoe } from './lp-pri-icon-m-casual-shoe';

package/lib/assets/shield-usage.d.ts

@@ -0,0 +1,8 @@
+interface ICShieldUsageProps {
+    color?: string;
+    fill?: boolean;
+    thick?: boolean;
+    size?: 16 | 20 | 24 | 32 | 40;
+}
+export declare const ICShieldUsage: (props: ICShieldUsageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import { IllustName } from '../../types/illust';
+import { Property } from 'csstype';
+import { ImageProps } from 'next/image';
+interface IProps extends Omit<ImageProps, 'alt' | 'width' | 'height' | 'fill'> {
+    src: IllustName;
+    isOnlyLight?: boolean;
+    width: number;
+    height: number;
+    justifyContent?: Property.JustifyContent;
+    alignItems?: Property.AlignItems;
+}
+export declare const Illust: (props: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/constants/component.d.ts

@@ -12,4 +12,5 @@ export declare const COMPONENT_NAME: {
     readonly LABEL: "Label";
     readonly RADIO: "Radio";
     readonly BADGE: "Badge";
+    readonly ILLUST: "Illust";
 };

package/lib/constants/figma/index.d.ts

@@ -12,6 +12,7 @@ export declare const FIGMA: {
     Label: Figma;
     Radio: Figma;
     Badge: Figma;
+    Illust: Figma;
     Shadow: Figma;
     Padding: Figma;
     Opacity: Figma;

package/lib/constants/illust/name.d.ts

@@ -0,0 +1 @@
+export declare const illustNames: readonly ["rectangle_cheerup_01", "rectangle_cheerup_02", "rectangle_searching", "rectangle_space_work", "rectangle_standing_with_a_star", "square_ai_writing_essay_mode", "square_bomb_timeout", "square_book_pencil_general_mode", "square_brain_deep_q_a", "square_bye_end_custom_ai", "square_careers_page_coffee", "square_careers_page_english", "square_careers_page_money", "square_careers_page_palm", "square_careers_page_shake_hands", "square_careers_page_tennis", "square_clap", "square_decoration_bulb", "square_decoration_hourglass", "square_decoration_star_01", "square_decoration_star_02", "square_decoration_star_03", "square_decoration_star_04", "square_decoration_star_05", "square_decoration_star_06", "square_decoration_star_07", "square_decoration_star_08", "square_decoration_star_09", "square_decoration_star_10", "square_decoration_star_11", "square_documents_reliable_citation", "square_documents_reliable_source", "square_empty_box_2", "square_empty_box_empty_page", "square_feather_pen", "square_find_man", "square_find_paper_use_liner", "square_folder_01", "square_folder_02", "square_free_ticket_welcome", "square_gift_welcome", "square_give_gift", "square_graduation_cap_pencil_scholar_mode", "square_holding_a_book_onboarding", "square_introduce", "square_introduce_pro", "square_lock_locked_thread", "square_magnifying_glass", "square_magnifying_glass_not_found", "square_make_profile_onboarding", "square_megaphone", "square_paper", "square_pencil_paper_empty_history", "square_pricing_page_airplane", "square_pricing_page_car", "square_pricing_page_flag", "square_pricing_page_rocket", "square_raining_error", "square_searching_01", "square_searching_02", "square_searching_03", "square_smoke_timeout", "square_time_out", "square_time_out_time_out_01", "square_time_out_time_out_02", "square_time_out_time_out_03", "square_time_out_time_out_04", "square_understand_concepts_use_liner", "square_university_01", "square_university_02", "square_working_01", "square_worried_01", "square_worried_02", "square_worried_03", "square_worried_04", "square_worried_05", "square_write_essay_use_liner", "square_writing", "square_writing_essay_mode"];

package/lib/constants/illust/size.d.ts

@@ -0,0 +1,5 @@
+import { IllustName } from '../../types/illust';
+export declare const illustSize: Partial<Record<IllustName, {
+    width: number;
+    height: number;
+}>>;

package/lib/index.d.ts

@@ -14,5 +14,6 @@ export * from './components/Slider';
 export * from './components/Select';
 export * from './components/List';
 export * from './components/Label';
+export * from './components/Illust';
 export * from './types/color';
 export * from './type/index';

package/lib/index.mjs

@@ -6828,9 +6828,9 @@ var ICLpPriIconMShieldPerson = /* @__PURE__ */ __name((props) => {
   ] });
 }, "ICLpPriIconMShieldPerson");
 
-// src/assets/lp-pri-icon-m-shield-usage.tsx
+// src/assets/shield-usage.tsx
 import { jsx as jsx148, jsxs as jsxs106 } from "react/jsx-runtime";
-var ICLpPriIconMShieldUsage = /* @__PURE__ */ __name((props) => {
+var ICShieldUsage = /* @__PURE__ */ __name((props) => {
   const { thick = false, fill = false, size = 32, color = "#1E1E1F" } = props;
   if (thick) {
     return /* @__PURE__ */ jsxs106("svg", { ...props, width: size, height: size, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
@@ -6876,7 +6876,7 @@ var ICLpPriIconMShieldUsage = /* @__PURE__ */ __name((props) => {
       }
     )
   ] });
-}, "ICLpPriIconMShieldUsage");
+}, "ICShieldUsage");
 
 // src/assets/highlighter.tsx
 import { jsx as jsx149 } from "react/jsx-runtime";
@@ -7410,7 +7410,7 @@ var iconMap = {
   "lp-pri-icon-m-link": ICLpPriIconMLink,
   "lp-pri-icon-m-sheet-export": ICLpPriIconMSheetExport,
   "lp-pri-icon-m-shield-person": ICLpPriIconMShieldPerson,
-  "lp-pri-icon-m-shield-usage": ICLpPriIconMShieldUsage,
+  "shield-usage": ICShieldUsage,
   "lp-pri-icon-s-arrow-forward": ICLpPriIconSArrowForward,
   essay: ICEssay,
   "lp-pri-icon-m-formal-bag": ICLpPriIconMFormalBag,
@@ -9384,6 +9384,44 @@ var Item3 = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
   );
 }, "Item");
 var List = Object.assign(ListRoot, { Item: Item3 });
+
+// src/constants/illust/size.ts
+var illustSize = {
+  rectangle_standing_with_a_star: { width: 2422, height: 1282 },
+  rectangle_space_work: { width: 2422, height: 1282 },
+  rectangle_searching: { width: 2422, height: 1282 },
+  rectangle_cheerup_01: { width: 2422, height: 1282 },
+  rectangle_cheerup_02: { width: 2422, height: 1282 }
+};
+
+// src/components/Illust/index.tsx
+import { useDarkTheme } from "@liner-fe/design-token";
+import Image from "next/image";
+import { jsx as jsx178 } from "react/jsx-runtime";
+var ILLUST = "/illust";
+var Illust = /* @__PURE__ */ __name((props) => {
+  const { isDarkMode } = useDarkTheme();
+  const { src, isOnlyLight, width, height, justifyContent = "center", alignItems = "center" } = props;
+  const prefixSrc = (() => {
+    if (isDarkMode && !isOnlyLight) {
+      return `${ILLUST}/dark/`;
+    }
+    return `${ILLUST}/light/`;
+  })();
+  const aspectRatio = illustSize[src] ? illustSize[src].width / illustSize[src].height : void 0;
+  const css = {
+    width,
+    height,
+    display: "flex",
+    justifyContent,
+    alignItems
+  };
+  if (aspectRatio) {
+    return /* @__PURE__ */ jsx178("div", { style: css, children: /* @__PURE__ */ jsx178(Image, { alt: src, ...props, src: `${prefixSrc}${src}.webp`, width, height: width / aspectRatio }) });
+  }
+  const size = width > height ? height : width;
+  return /* @__PURE__ */ jsx178("div", { style: css, children: /* @__PURE__ */ jsx178(Image, { alt: src, ...props, src: `${prefixSrc}${src}.webp`, width: size, height: size }) });
+}, "Illust");
 export {
   Button,
   Caption,
@@ -9393,6 +9431,7 @@ export {
   Heading,
   Icon,
   IconButton,
+  Illust,
   Label,
   List,
   Media,