@liner-fe/prism 3.0.9 → 3.0.11

package/lib/index.css

@@ -1967,3 +1967,65 @@
   position: absolute;
   transform: translateX(-5.7%);
 }
+
+/* esbuild-sass-plugin:css-chunk:src/components/Badge/style.module.scss */
+._badge_f8fzb_1 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  box-sizing: border-box;
+  gap: var(--lp-sys-padding-component-50);
+}
+._s_f8fzb_10 {
+  padding: var(--lp-sys-padding-component-50) var(--lp-sys-padding-component-100);
+  border-radius: var(--lp-sys-radius-xs);
+}
+._m_f8fzb_15 {
+  padding: var(--lp-sys-padding-component-50) var(--lp-sys-padding-component-100);
+  border-radius: var(--lp-sys-radius-xs);
+}
+._l_f8fzb_20 {
+  padding: var(--lp-sys-padding-component-100) var(--lp-sys-padding-component-150);
+  border-radius: var(--lp-sys-radius-s);
+}
+._text_f8fzb_25 {
+  padding: 0 var(--lp-sys-padding-component-50);
+}
+._subtle_f8fzb_29 {
+  background: var(--neutral-fill-overlay-mid);
+}
+._outlined_f8fzb_33 {
+  background: var(--neutral-fill-opaque-lowest);
+  border: 1px solid var(--neutral-border-overlay-subtle);
+}
+._fill-primary_f8fzb_38 {
+  background: var(--brand-fill-low);
+}
+._fill-accent_f8fzb_42 {
+  background: var(--accent-fill-primary);
+}
+._inverse-primary_f8fzb_46 {
+  background: var(--brandinverse-fill-static-low);
+}
+._text-neutral_f8fzb_50 {
+  color: var(--neutral-label-primary);
+}
+._text-neutral-secondary_f8fzb_54 {
+  color: var(--neutral-label-secondary);
+}
+._text-primary_f8fzb_58 {
+  color: var(--brand-label-primary);
+}
+._text-primary-inverse_f8fzb_62 {
+  color: var(--brandinverse-label-static-primary);
+}
+._text-caution_f8fzb_66 {
+  color: var(--function-label-caution);
+}
+._text-error_f8fzb_70 {
+  color: var(--function-label-negative);
+}
+._text-accent_f8fzb_74 {
+  color: var(--accent-label-primary);
+}

package/lib/index.d.ts

@@ -65,7 +65,7 @@ interface IToastBase extends ToastProps, RefAttributes<HTMLLIElement> {
 interface IToastIcon {
     icon: {
         icon: IconComponentType;
-    } & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType'>;
+    } & Pick<IconProps, 'fill' | 'type' | 'fillType'>;
     button?: never;
 }
 interface IToastButton {
@@ -217,7 +217,7 @@ interface PopoverContentProps extends HTMLAttributes<HTMLDivElement>, Popover$1.
     tag?: string;
     icon?: {
         icon: IconComponentType;
-    } & Pick<IconProps, 'thick' | 'fill'>;
+    } & Pick<IconProps, 'fill'>;
     title?: string;
     description?: string;
     position?: 'top' | 'right' | 'bottom' | 'left';
@@ -329,7 +329,7 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Varia
     level?: IconButtonLevelType;
     icon: {
         icon: IconComponentType;
-    } & Pick<IconProps, 'type' | 'size' | 'thick' | 'fill' | 'fillType'>;
+    } & Pick<IconProps, 'type' | 'size' | 'fill' | 'fillType'>;
     isLoading?: boolean;
 }
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
@@ -395,7 +395,7 @@ interface SelectItemProps {
     disabled?: boolean;
     icon?: {
         icon: IconComponentType;
-    } & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType' | 'size'>;
+    } & Pick<IconProps, 'fill' | 'type' | 'fillType' | 'size'>;
     onClick?: () => void;
 }
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>> & {
@@ -413,7 +413,7 @@ interface ItemProps {
     disabled?: boolean;
     icon?: {
         icon: IconComponentType;
-    } & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType' | 'size'>;
+    } & Pick<IconProps, 'fill' | 'type' | 'fillType' | 'size'>;
     onClick?: () => void;
 }
 declare const List: (({ children, className, ...props }: ListRootProps) => react_jsx_runtime.JSX.Element) & {
@@ -434,7 +434,7 @@ interface ISnackbarBasic {
     kind?: 'basic';
     icon?: {
         icon: IconComponentType;
-    } & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType'>;
+    } & Pick<IconProps, 'fill' | 'type' | 'fillType'>;
     button?: {
         text?: ButtonType;
         basic?: ButtonType;
@@ -589,7 +589,7 @@ interface BaseCoachMarkContentProps extends Omit<PrimitiveCoachMarkContentProps,
 type BaseCoachMarkContent = {
     icon?: {
         icon: IconComponentType;
-    } & Pick<IconProps, 'fill' | 'thick' | 'type' | 'fillType'>;
+    } & Pick<IconProps, 'fill' | 'type' | 'fillType'>;
     description?: string;
     step?: Step;
     primaryButton?: RestrictedButtonProps;
@@ -631,4 +631,29 @@ interface TagProps extends Omit<IPropsNormalBold, 'type' | 'size' | 'weight'> {
 }
 declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLParagraphElement>>;
 
-export { type BaseCoachMarkContentProps, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, type ItemProps, Label, List, Loading, type LoadingLevelType, Logo, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, Radio, Select, type SelectItemProps, type SelectProps, SingleSnackbar, Snackbar, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, snackbarAtom, useSnackbar, useToast };
+type BadgeSize = 's' | 'm' | 'l';
+type BadgeIconProps = {
+    icon: IconComponentType;
+} & Pick<IconProps, 'fill' | 'type' | 'fillType'>;
+type BadgeVariant = 'subtle' | 'outlined' | 'fill' | 'inverse';
+type BadgeColor = 'neutral' | 'neutral-secondary' | 'primary' | 'caution' | 'error' | 'accent';
+type BadgeVariantColorProps = {
+    variant?: 'fill';
+    color?: 'primary' | 'accent';
+} | {
+    variant: 'subtle' | 'outlined';
+    color?: Exclude<BadgeColor, 'accent'>;
+} | {
+    variant: 'inverse';
+    color?: 'primary';
+};
+type BadgeBaseProps = ComponentPropsWithoutRef<'span'> & {
+    size?: BadgeSize;
+    thick?: boolean;
+    leftIcon?: BadgeIconProps;
+    rightIcon?: BadgeIconProps;
+};
+type BadgeProps = BadgeBaseProps & BadgeVariantColorProps;
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, type BaseCoachMarkContentProps, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, type ItemProps, Label, List, Loading, type LoadingLevelType, Logo, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, Radio, Select, type SelectItemProps, type SelectProps, SingleSnackbar, Snackbar, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, snackbarAtom, useSnackbar, useToast };

package/lib/index.js

@@ -1309,7 +1309,7 @@ var PopoverContent = React3.forwardRef(
           /* @__PURE__ */ jsxs4("div", { className: style_module_default5.contentContainer, children: [
             (tag || icon || onClose) && /* @__PURE__ */ jsxs4("div", { className: style_module_default5.heading, children: [
               tag && /* @__PURE__ */ jsx10("span", { className: popoverTagVariants(), children: tag }),
-              icon && /* @__PURE__ */ jsx10(icon.icon, { size: "xs", thick: icon.thick, fill: icon.fill }),
+              icon && /* @__PURE__ */ jsx10(icon.icon, { size: "xs", fill: icon.fill }),
               /* @__PURE__ */ jsx10("p", { className: popoverTitleVariants(), children: title }),
               onClose && /* @__PURE__ */ jsx10(
                 PopoverPrimitive.PopoverClose,
@@ -1318,7 +1318,7 @@ var PopoverContent = React3.forwardRef(
                   onClick: () => {
                     onClose();
                   },
-                  children: /* @__PURE__ */ jsx10(IconCloseFill, { size: "s", fill: true, thick: true, type: "neutral-label-static-primary" })
+                  children: /* @__PURE__ */ jsx10(IconCloseFill, { size: "s", fill: true, type: "neutral-label-static-primary" })
                 }
               )
             ] }),
@@ -1649,24 +1649,8 @@ var Checkbox = forwardRef11(
       children
     ] }) : /* @__PURE__ */ jsx14(Fragment4, { children }), "CheckboxWrapper");
     return /* @__PURE__ */ jsx14(CheckboxWrapper, { children: /* @__PURE__ */ jsx14(CheckboxPrimitive.Root, { className: clsx11(style_module_default8.checkbox, className), ref, ...props, children: /* @__PURE__ */ jsxs5(CheckboxPrimitive.Indicator, { className: style_module_default8["checkbox-indicator"], children: [
-      /* @__PURE__ */ jsx14(
-        IconCheckMark,
-        {
-          thick: true,
-          size: "xs",
-          type: "inverse-label-primary",
-          className: style_module_default8["icon-check"]
-        }
-      ),
-      /* @__PURE__ */ jsx14(
-        IconMinus,
-        {
-          thick: true,
-          size: "xs",
-          type: "inverse-label-primary",
-          className: style_module_default8["icon-minus"]
-        }
-      )
+      /* @__PURE__ */ jsx14(IconCheckMark, { size: "xs", type: "inverse-label-primary", className: style_module_default8["icon-check"] }),
+      /* @__PURE__ */ jsx14(IconMinus, { size: "xs", type: "inverse-label-primary", className: style_module_default8["icon-minus"] })
     ] }) }) });
   }
 );
@@ -1880,8 +1864,7 @@ var Textfield = forwardRef13((props, ref) => {
                 level: "quinary",
                 icon: {
                   icon: IconCloseFill2,
-                  size: "s",
-                  thick: true
+                  size: "s"
                 },
                 type: "button",
                 onClick: (e) => {
@@ -1913,7 +1896,7 @@ var Textfield = forwardRef13((props, ref) => {
     ),
     displayFooter && /* @__PURE__ */ jsxs7("div", { className: style_module_default11.footer, children: [
       /* @__PURE__ */ jsx16("div", { className: style_module_default11["error-wrapper"], children: error && /* @__PURE__ */ jsxs7(Fragment6, { children: [
-        /* @__PURE__ */ jsx16(IconExclamationmarkFill, { fill: true, thick: true, size: "xs", type: "function-label-negative" }),
+        /* @__PURE__ */ jsx16(IconExclamationmarkFill, { fill: true, size: "xs", type: "function-label-negative" }),
         /* @__PURE__ */ jsx16(
           Caption,
           {
@@ -2078,7 +2061,7 @@ var SelectRoot = forwardRef14((props, ref) => {
         children: [
           /* @__PURE__ */ jsxs8(SelectPrimitive.Trigger, { className: style_module_default12.trigger, ref, id, children: [
             /* @__PURE__ */ jsx17(SelectPrimitive.Value, { className: style_module_default12.placeholder, placeholder }),
-            /* @__PURE__ */ jsx17(SelectPrimitive.Icon, { className: style_module_default12.openIcon, children: /* @__PURE__ */ jsx17(IconDropDown, { fill: true, thick: true, size: "xs" }) })
+            /* @__PURE__ */ jsx17(SelectPrimitive.Icon, { className: style_module_default12.openIcon, children: /* @__PURE__ */ jsx17(IconDropDown, { fill: true, size: "xs" }) })
           ] }),
           /* @__PURE__ */ jsx17(SelectContent, { ...contentProps })
         ]
@@ -2099,7 +2082,7 @@ var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick
     children: [
       /* @__PURE__ */ jsx17(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx17(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
       icon && /* @__PURE__ */ jsx17(SelectPrimitive.Icon, { className: style_module_default12.icon, children: /* @__PURE__ */ jsx17(icon.icon, { size: "xs", ...icon }) }),
-      /* @__PURE__ */ jsx17(SelectPrimitive.ItemIndicator, { className: style_module_default12.itemIndicator, children: /* @__PURE__ */ jsx17(IconCheckMark2, { thick: true, size: "xs", type: "brand-label-primary" }) })
+      /* @__PURE__ */ jsx17(SelectPrimitive.ItemIndicator, { className: style_module_default12.itemIndicator, children: /* @__PURE__ */ jsx17(IconCheckMark2, { size: "xs", type: "brand-label-primary" }) })
     ]
   }
 ), "SelectItem");
@@ -2146,7 +2129,7 @@ var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
   const isSelected = contextValue === value;
   const renderIcon = /* @__PURE__ */ __name(() => {
     if (isSelected) {
-      return /* @__PURE__ */ jsx19(IconCheckMark3, { type: "brand-label-primary", thick: true });
+      return /* @__PURE__ */ jsx19(IconCheckMark3, { type: "brand-label-primary" });
     }
     if (icon) {
       return /* @__PURE__ */ jsx19(icon.icon, { className: style_module_default13.icon, size: "xs", ...icon });
@@ -2383,7 +2366,6 @@ var SnackbarButton = /* @__PURE__ */ __name(({
             onCloseSnackbar();
           },
           level: "inverse-static",
-          thick: false,
           className: style_module_default17.button,
           children: button.text.text
         }
@@ -2484,7 +2466,6 @@ var SingleSnackbar = /* @__PURE__ */ __name((props) => {
             IconArrowForward,
             {
               fill: true,
-              thick: true,
               type: "inverse-label-static-primary",
               className: description ? style_module_default14.minWidth32 : style_module_default14.minWidth24,
               size: description ? "l" : "m"
@@ -3475,15 +3456,7 @@ var CoachMarkContent = forwardRef19(
                   children: tag
                 }
               ),
-              icon && /* @__PURE__ */ jsx30(
-                icon.icon,
-                {
-                  size: "xs",
-                  thick: icon.thick,
-                  fill: icon.fill,
-                  type: "inverse-label-static-primary"
-                }
-              ),
+              icon && /* @__PURE__ */ jsx30(icon.icon, { size: "xs", fill: icon.fill, type: "inverse-label-static-primary" }),
               title && /* @__PURE__ */ jsx30(
                 Paragraph,
                 {
@@ -3538,7 +3511,156 @@ var CoachMark = Object.assign(CoachMarkRoot, {
   Content: CoachMarkContent,
   Portal: PopoverPrimitive4.Portal
 });
+
+// src/components/Badge/index.tsx
+import { forwardRef as forwardRef20 } from "react";
+
+// src/components/Badge/style.module.scss
+var style_module_default22 = {
+  "badge": "_badge_f8fzb_1",
+  "s": "_s_f8fzb_10",
+  "m": "_m_f8fzb_15",
+  "l": "_l_f8fzb_20",
+  "text": "_text_f8fzb_25",
+  "subtle": "_subtle_f8fzb_29",
+  "outlined": "_outlined_f8fzb_33",
+  "fill-primary": "_fill-primary_f8fzb_38",
+  "fill-accent": "_fill-accent_f8fzb_42",
+  "inverse-primary": "_inverse-primary_f8fzb_46",
+  "text-neutral": "_text-neutral_f8fzb_50",
+  "text-neutral-secondary": "_text-neutral-secondary_f8fzb_54",
+  "text-primary": "_text-primary_f8fzb_58",
+  "text-primary-inverse": "_text-primary-inverse_f8fzb_62",
+  "text-caution": "_text-caution_f8fzb_66",
+  "text-error": "_text-error_f8fzb_70",
+  "text-accent": "_text-accent_f8fzb_74"
+};
+
+// src/components/Badge/index.tsx
+import { cva as cva13 } from "cva";
+import clsx23 from "clsx";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+var badgeSizeIconSizeMap = {
+  s: "xxs",
+  m: "xs",
+  l: "xs"
+};
+var badgeSizeTypoMap = {
+  s: ["lp-sys-typo-caption3-normal-regular", "lp-sys-typo-caption3-normal-medium"],
+  m: ["lp-sys-typo-caption2-normal-regular", "lp-sys-typo-caption2-normal-medium"],
+  l: ["lp-sys-typo-caption1-normal-regular", "lp-sys-typo-caption1-normal-medium"]
+};
+var badgeBase = cva13({
+  base: style_module_default22.badge,
+  variants: {
+    size: {
+      s: style_module_default22.s,
+      m: style_module_default22.m,
+      l: style_module_default22.l
+    }
+  }
+});
+function getBgClass(variant, color) {
+  if (variant === "subtle") return style_module_default22.subtle;
+  if (variant === "outlined") return style_module_default22.outlined;
+  if (variant === "fill") return color === "accent" ? style_module_default22["fill-accent"] : style_module_default22["fill-primary"];
+  return style_module_default22["inverse-primary"];
+}
+__name(getBgClass, "getBgClass");
+function getIconType(variant, color) {
+  if (variant === "inverse") return "brandinverse-label-static-primary";
+  switch (color) {
+    case "neutral":
+      return "neutral-label-primary";
+    case "neutral-secondary":
+      return "neutral-label-secondary";
+    case "primary":
+      return "brand-label-primary";
+    case "caution":
+      return "function-label-caution";
+    case "error":
+      return "function-label-negative";
+    case "accent":
+      return "accent-label-primary";
+    default:
+      return "neutral-label-primary";
+  }
+}
+__name(getIconType, "getIconType");
+function getTextClass(variant, color) {
+  if (variant === "inverse") return style_module_default22["text-primary-inverse"];
+  switch (color) {
+    case "neutral":
+      return style_module_default22["text-neutral"];
+    case "neutral-secondary":
+      return style_module_default22["text-neutral-secondary"];
+    case "primary":
+      return style_module_default22["text-primary"];
+    case "caution":
+      return style_module_default22["text-caution"];
+    case "error":
+      return style_module_default22["text-error"];
+    case "accent":
+      return style_module_default22["text-accent"];
+    default:
+      return style_module_default22["text-neutral"];
+  }
+}
+__name(getTextClass, "getTextClass");
+var Badge2 = forwardRef20(
+  ({
+    size = "s",
+    variant = "fill",
+    color = "primary",
+    thick = false,
+    className,
+    children,
+    leftIcon,
+    rightIcon,
+    ...rest
+  }, ref) => {
+    const iconSize = badgeSizeIconSizeMap[size];
+    const typoClass = badgeSizeTypoMap[size][+thick];
+    const resolvedVariant = variant;
+    const resolvedColor = color;
+    return /* @__PURE__ */ jsxs17(
+      "span",
+      {
+        ref,
+        className: clsx23(
+          badgeBase({ size }),
+          typoClass,
+          getBgClass(resolvedVariant, resolvedColor),
+          getTextClass(resolvedVariant, resolvedColor),
+          className
+        ),
+        ...rest,
+        children: [
+          !!leftIcon && /* @__PURE__ */ jsx31(
+            leftIcon.icon,
+            {
+              size: iconSize,
+              type: getIconType(resolvedVariant, resolvedColor),
+              ...leftIcon
+            }
+          ),
+          /* @__PURE__ */ jsx31("span", { className: style_module_default22.text, children }),
+          !!rightIcon && /* @__PURE__ */ jsx31(
+            rightIcon.icon,
+            {
+              size: iconSize,
+              type: getIconType(resolvedVariant, resolvedColor),
+              ...rightIcon
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Badge2.displayName = "Badge";
 export {
+  Badge2 as Badge,
   Button,
   Caption,
   Checkbox,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "3.0.9",
+  "version": "3.0.11",
   "type": "module",
   "sideEffects": false,
   "dependencies": {
@@ -16,10 +16,10 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "jotai": "^2.11.0",
-    "@liner-fe/design-token": "^3.0.1",
-    "@liner-fe/icon": "^1.0.1",
+    "@liner-fe/design-token-primitive": "^0.2.47",
+    "@liner-fe/icon": "^2.0.0",
     "@liner-fe/illust": "^1.0.0",
-    "@liner-fe/design-token-primitive": "^0.2.46"
+    "@liner-fe/design-token": "^3.0.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",