@liner-fe/prism 3.3.6 → 3.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.css CHANGED
@@ -1578,21 +1578,27 @@
1578
1578
  }
1579
1579
 
1580
1580
  /* esbuild-sass-plugin:css-chunk:src/components/coach-mark/primitive/style.module.scss */
1581
- ._anchor_1d9jc_1 {
1581
+ ._anchor_1ynpr_2 {
1582
1582
  transform: rotate(270deg) translateX(7px);
1583
1583
  }
1584
- ._content_1d9jc_5 {
1584
+ ._content_1ynpr_6 {
1585
1585
  border-radius: var(--lp-sys-radius-m);
1586
- width: 100%;
1587
1586
  box-shadow:
1588
1587
  0px 2px 12px 0px rgba(0, 0, 0, 0.1),
1589
1588
  0px 1px 8px 0px rgba(0, 0, 0, 0.06),
1590
1589
  0px 0px 1px 0px rgba(0, 0, 0, 0.06);
1591
1590
  }
1592
- ._content_1d9jc_5 p {
1591
+ ._content_1ynpr_6 p {
1593
1592
  margin: 0;
1594
1593
  }
1595
- ._overlay_1d9jc_14 {
1594
+ ._content_1ynpr_6 {
1595
+ }
1596
+ ._content_1ynpr_6[data-side] > span {
1597
+ visibility: visible !important;
1598
+ }
1599
+ ._content_1ynpr_6 {
1600
+ }
1601
+ ._overlay_1ynpr_24 {
1596
1602
  position: fixed;
1597
1603
  top: 0;
1598
1604
  left: 0;
@@ -1601,21 +1607,85 @@
1601
1607
  background: rgba(255, 255, 255, 0.7490196078);
1602
1608
  z-index: 9;
1603
1609
  }
1604
- ._close_1d9jc_24 {
1610
+ ._close_1ynpr_34 {
1605
1611
  cursor: pointer;
1606
1612
  }
1607
1613
 
1614
+ /* esbuild-sass-plugin:css-chunk:src/components/Badge/style.module.scss */
1615
+ ._badge_f8fzb_1 {
1616
+ display: inline-flex;
1617
+ align-items: center;
1618
+ justify-content: center;
1619
+ white-space: nowrap;
1620
+ box-sizing: border-box;
1621
+ gap: var(--lp-sys-padding-component-50);
1622
+ }
1623
+ ._s_f8fzb_10 {
1624
+ padding: var(--lp-sys-padding-component-50) var(--lp-sys-padding-component-100);
1625
+ border-radius: var(--lp-sys-radius-xs);
1626
+ }
1627
+ ._m_f8fzb_15 {
1628
+ padding: var(--lp-sys-padding-component-50) var(--lp-sys-padding-component-100);
1629
+ border-radius: var(--lp-sys-radius-xs);
1630
+ }
1631
+ ._l_f8fzb_20 {
1632
+ padding: var(--lp-sys-padding-component-100) var(--lp-sys-padding-component-150);
1633
+ border-radius: var(--lp-sys-radius-s);
1634
+ }
1635
+ ._text_f8fzb_25 {
1636
+ padding: 0 var(--lp-sys-padding-component-50);
1637
+ }
1638
+ ._subtle_f8fzb_29 {
1639
+ background: var(--neutral-fill-overlay-mid);
1640
+ }
1641
+ ._outlined_f8fzb_33 {
1642
+ background: var(--neutral-fill-opaque-lowest);
1643
+ border: 1px solid var(--neutral-border-overlay-subtle);
1644
+ }
1645
+ ._fill-primary_f8fzb_38 {
1646
+ background: var(--brand-fill-low);
1647
+ }
1648
+ ._fill-accent_f8fzb_42 {
1649
+ background: var(--accent-fill-primary);
1650
+ }
1651
+ ._inverse-primary_f8fzb_46 {
1652
+ background: var(--brandinverse-fill-static-low);
1653
+ }
1654
+ ._text-neutral_f8fzb_50 {
1655
+ color: var(--neutral-label-primary);
1656
+ }
1657
+ ._text-neutral-secondary_f8fzb_54 {
1658
+ color: var(--neutral-label-secondary);
1659
+ }
1660
+ ._text-primary_f8fzb_58 {
1661
+ color: var(--brand-label-primary);
1662
+ }
1663
+ ._text-primary-inverse_f8fzb_62 {
1664
+ color: var(--brandinverse-label-static-primary);
1665
+ }
1666
+ ._text-caution_f8fzb_66 {
1667
+ color: var(--function-label-caution);
1668
+ }
1669
+ ._text-error_f8fzb_70 {
1670
+ color: var(--function-label-negative);
1671
+ }
1672
+ ._text-accent_f8fzb_74 {
1673
+ color: var(--accent-label-primary);
1674
+ }
1675
+
1608
1676
  /* esbuild-sass-plugin:css-chunk:src/components/coach-mark/compact/style.module.scss */
1609
- ._content_mrnt5_1 {
1610
- position: relative;
1677
+ ._content_6lbwz_2 {
1611
1678
  display: flex;
1612
1679
  align-items: center;
1613
- gap: var(--lp-sys-gap-positive-100);
1614
1680
  padding: var(--lp-sys-padding-component-200);
1615
1681
  width: fit-content;
1616
- animation: _slideIn_mrnt5_1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
1682
+ background: var(--inverse-container-static-high);
1683
+ animation: _slideIn_6lbwz_1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
1684
+ }
1685
+ ._content_6lbwz_2 svg > path {
1686
+ fill: var(--inverse-container-static-high);
1617
1687
  }
1618
- @keyframes _slideIn_mrnt5_1 {
1688
+ @keyframes _slideIn_6lbwz_1 {
1619
1689
  from {
1620
1690
  transform: translateY(10px);
1621
1691
  opacity: 0;
@@ -1625,35 +1695,131 @@
1625
1695
  opacity: 1;
1626
1696
  }
1627
1697
  }
1628
- ._content_mrnt5_1:hover ._closeButton_mrnt5_20 {
1629
- display: block;
1698
+ ._clickable_6lbwz_24 {
1699
+ display: flex;
1700
+ align-items: center;
1701
+ gap: var(--lp-sys-gap-positive-200);
1702
+ cursor: pointer;
1703
+ border: none;
1704
+ background: transparent;
1705
+ padding: 0;
1706
+ text-align: left;
1707
+ color: inherit;
1708
+ font: inherit;
1630
1709
  }
1631
- ._brand_mrnt5_24 {
1632
- background: var(--brand-container-mid);
1710
+ ._main_6lbwz_37 {
1711
+ margin: 0;
1633
1712
  }
1634
- ._brand_mrnt5_24 svg > path {
1635
- fill: var(--brand-container-mid);
1713
+ ._content_6lbwz_2[data-side=top][data-align=start] > span,
1714
+ ._content_6lbwz_2[data-side=bottom][data-align=start] > span {
1715
+ left: 19px !important;
1716
+ right: auto !important;
1636
1717
  }
1637
- ._inverse-static_mrnt5_31 {
1718
+ ._content_6lbwz_2[data-side=top][data-align=end] > span,
1719
+ ._content_6lbwz_2[data-side=bottom][data-align=end] > span {
1720
+ left: auto !important;
1721
+ right: 19px !important;
1722
+ }
1723
+
1724
+ /* esbuild-sass-plugin:css-chunk:src/components/coach-mark/main/style.module.scss */
1725
+ ._content_1cmnt_2 {
1726
+ display: flex;
1727
+ flex-direction: column;
1728
+ width: 280px;
1729
+ padding-top: var(--lp-sys-padding-component-300);
1730
+ padding-bottom: var(--lp-sys-padding-component-400);
1731
+ box-sizing: border-box;
1638
1732
  background: var(--inverse-container-static-high);
1733
+ animation: _slideIn_1cmnt_1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
1639
1734
  }
1640
- ._inverse-static_mrnt5_31 svg > path {
1735
+ ._content_1cmnt_2 > span > svg > path {
1641
1736
  fill: var(--inverse-container-static-high);
1642
1737
  }
1643
- ._inverse_mrnt5_31 {
1644
- background: var(--inverse-container-lowest);
1738
+ @keyframes _slideIn_1cmnt_1 {
1739
+ from {
1740
+ transform: translateY(10px);
1741
+ opacity: 0;
1742
+ }
1743
+ to {
1744
+ transform: translateY(0px);
1745
+ opacity: 1;
1746
+ }
1747
+ }
1748
+ ._top_1cmnt_26 {
1749
+ display: flex;
1750
+ flex-direction: column;
1751
+ gap: var(--lp-sys-gap-positive-200);
1752
+ padding-bottom: var(--lp-sys-padding-component-300);
1753
+ }
1754
+ ._main_1cmnt_33 {
1755
+ width: 100%;
1756
+ display: flex;
1757
+ flex-direction: column;
1758
+ gap: var(--lp-sys-gap-positive-200);
1759
+ }
1760
+ ._title_1cmnt_40 {
1761
+ display: flex;
1762
+ align-items: center;
1763
+ gap: var(--lp-sys-padding-component-200);
1764
+ padding-left: var(--lp-sys-padding-component-400);
1765
+ padding-right: var(--lp-sys-padding-component-700);
1766
+ padding-top: var(--lp-sys-padding-component-50);
1767
+ padding-bottom: var(--lp-sys-padding-component-50);
1768
+ }
1769
+ ._title_1cmnt_40 > p {
1770
+ flex: 1;
1771
+ min-width: 0;
1772
+ white-space: nowrap;
1773
+ overflow: hidden;
1774
+ text-overflow: ellipsis;
1775
+ }
1776
+ ._description_1cmnt_57 {
1777
+ white-space: pre-wrap;
1778
+ padding-left: var(--lp-sys-padding-component-400);
1779
+ padding-right: var(--lp-sys-padding-component-400);
1780
+ }
1781
+ ._media_1cmnt_63 {
1782
+ width: 100%;
1783
+ max-width: 280px;
1784
+ margin: var(--lp-sys-padding-component-50) 0;
1785
+ }
1786
+ ._footer_1cmnt_69 {
1787
+ display: flex;
1788
+ align-items: center;
1789
+ justify-content: space-between;
1790
+ padding-left: var(--lp-sys-padding-component-400);
1791
+ padding-right: var(--lp-sys-padding-component-400);
1645
1792
  }
1646
- ._inverse_mrnt5_31 svg > path {
1647
- fill: var(--inverse-container-lowest);
1793
+ ._footer_1cmnt_69 ._buttonGroup_1cmnt_76 {
1794
+ display: flex;
1795
+ gap: var(--lp-sys-gap-positive-100);
1796
+ align-items: center;
1648
1797
  }
1649
- ._close_mrnt5_20 {
1798
+ ._closeButton_1cmnt_82 {
1650
1799
  position: absolute;
1651
- top: 0;
1652
- right: 0;
1653
- transform: translate(40%, -40%);
1800
+ top: 8px;
1801
+ right: 8px;
1802
+ border-radius: 4px;
1654
1803
  }
1655
- ._main_mrnt5_52 {
1656
- margin: 0;
1804
+ ._content_1cmnt_2[data-side=top][data-align=start] > span,
1805
+ ._content_1cmnt_2[data-side=bottom][data-align=start] > span {
1806
+ left: 19px !important;
1807
+ right: auto !important;
1808
+ }
1809
+ ._content_1cmnt_2[data-side=top][data-align=end] > span,
1810
+ ._content_1cmnt_2[data-side=bottom][data-align=end] > span {
1811
+ left: auto !important;
1812
+ right: 19px !important;
1813
+ }
1814
+ ._content_1cmnt_2[data-side=left][data-align=start] > span,
1815
+ ._content_1cmnt_2[data-side=right][data-align=start] > span {
1816
+ top: 19px !important;
1817
+ bottom: auto !important;
1818
+ }
1819
+ ._content_1cmnt_2[data-side=left][data-align=end] > span,
1820
+ ._content_1cmnt_2[data-side=right][data-align=end] > span {
1821
+ top: auto !important;
1822
+ bottom: 19px !important;
1657
1823
  }
1658
1824
 
1659
1825
  /* esbuild-sass-plugin:css-chunk:src/components/Tag/style.module.scss */
@@ -1752,151 +1918,3 @@
1752
1918
  ._border-accent-pink_b57yu_124 {
1753
1919
  border: 1px solid var(--accent-label-pink);
1754
1920
  }
1755
-
1756
- /* esbuild-sass-plugin:css-chunk:src/components/coach-mark/main/style.module.scss */
1757
- ._content_1w9jj_1 {
1758
- display: flex;
1759
- flex-direction: column;
1760
- min-width: 230px;
1761
- padding: var(--lp-sys-padding-component-400);
1762
- box-sizing: border-box;
1763
- animation: _slideIn_1w9jj_1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
1764
- }
1765
- @keyframes _slideIn_1w9jj_1 {
1766
- from {
1767
- transform: translateY(10px);
1768
- opacity: 0;
1769
- }
1770
- to {
1771
- transform: translateY(0px);
1772
- opacity: 1;
1773
- }
1774
- }
1775
- ._content_1w9jj_1._brand_1w9jj_19 {
1776
- background: var(--inverse-container-static-high);
1777
- }
1778
- ._content_1w9jj_1._brand_1w9jj_19 > span > svg > path {
1779
- fill: var(--inverse-container-static-high);
1780
- }
1781
- ._content_1w9jj_1._inverse-static_1w9jj_25 {
1782
- background: var(--inverse-container-static-high);
1783
- }
1784
- ._content_1w9jj_1._inverse-static_1w9jj_25 > span > svg > path {
1785
- fill: var(--inverse-container-static-high);
1786
- }
1787
- ._content_1w9jj_1._inverse_1w9jj_25 {
1788
- background: var(--inverse-container-lowest);
1789
- }
1790
- ._content_1w9jj_1._inverse_1w9jj_25 > span > svg > path {
1791
- fill: var(--inverse-container-lowest);
1792
- }
1793
- ._top_1w9jj_38 {
1794
- display: flex;
1795
- flex-direction: column;
1796
- gap: var(--lp-sys-padding-component-400);
1797
- }
1798
- ._main_1w9jj_44 {
1799
- width: 100%;
1800
- display: flex;
1801
- flex-direction: column;
1802
- gap: var(--lp-sys-gap-positive-100);
1803
- }
1804
- ._title_1w9jj_51 {
1805
- display: flex;
1806
- align-items: center;
1807
- gap: var(--lp-sys-gap-positive-150);
1808
- }
1809
- ._description_1w9jj_57 {
1810
- white-space: pre-wrap;
1811
- }
1812
- ._footer_1w9jj_61 {
1813
- display: flex;
1814
- align-items: center;
1815
- justify-content: space-between;
1816
- padding-top: var(--lp-sys-gap-positive-150);
1817
- }
1818
- ._footer_1w9jj_61 ._buttonGroup_1w9jj_67 {
1819
- display: flex;
1820
- gap: var(--lp-sys-gap-positive-400);
1821
- height: 28px;
1822
- }
1823
- ._closeButton_1w9jj_73 {
1824
- position: absolute;
1825
- top: 0;
1826
- right: 0;
1827
- transform: translate(-25%, 25%);
1828
- opacity: 0.64;
1829
- }
1830
- ._image-container_1w9jj_81 {
1831
- position: relative;
1832
- width: 248px;
1833
- height: 160px;
1834
- margin-top: 8px;
1835
- margin-bottom: 8px;
1836
- }
1837
- ._image_1w9jj_81 {
1838
- position: absolute;
1839
- transform: translateX(-5.7%);
1840
- }
1841
-
1842
- /* esbuild-sass-plugin:css-chunk:src/components/Badge/style.module.scss */
1843
- ._badge_f8fzb_1 {
1844
- display: inline-flex;
1845
- align-items: center;
1846
- justify-content: center;
1847
- white-space: nowrap;
1848
- box-sizing: border-box;
1849
- gap: var(--lp-sys-padding-component-50);
1850
- }
1851
- ._s_f8fzb_10 {
1852
- padding: var(--lp-sys-padding-component-50) var(--lp-sys-padding-component-100);
1853
- border-radius: var(--lp-sys-radius-xs);
1854
- }
1855
- ._m_f8fzb_15 {
1856
- padding: var(--lp-sys-padding-component-50) var(--lp-sys-padding-component-100);
1857
- border-radius: var(--lp-sys-radius-xs);
1858
- }
1859
- ._l_f8fzb_20 {
1860
- padding: var(--lp-sys-padding-component-100) var(--lp-sys-padding-component-150);
1861
- border-radius: var(--lp-sys-radius-s);
1862
- }
1863
- ._text_f8fzb_25 {
1864
- padding: 0 var(--lp-sys-padding-component-50);
1865
- }
1866
- ._subtle_f8fzb_29 {
1867
- background: var(--neutral-fill-overlay-mid);
1868
- }
1869
- ._outlined_f8fzb_33 {
1870
- background: var(--neutral-fill-opaque-lowest);
1871
- border: 1px solid var(--neutral-border-overlay-subtle);
1872
- }
1873
- ._fill-primary_f8fzb_38 {
1874
- background: var(--brand-fill-low);
1875
- }
1876
- ._fill-accent_f8fzb_42 {
1877
- background: var(--accent-fill-primary);
1878
- }
1879
- ._inverse-primary_f8fzb_46 {
1880
- background: var(--brandinverse-fill-static-low);
1881
- }
1882
- ._text-neutral_f8fzb_50 {
1883
- color: var(--neutral-label-primary);
1884
- }
1885
- ._text-neutral-secondary_f8fzb_54 {
1886
- color: var(--neutral-label-secondary);
1887
- }
1888
- ._text-primary_f8fzb_58 {
1889
- color: var(--brand-label-primary);
1890
- }
1891
- ._text-primary-inverse_f8fzb_62 {
1892
- color: var(--brandinverse-label-static-primary);
1893
- }
1894
- ._text-caution_f8fzb_66 {
1895
- color: var(--function-label-caution);
1896
- }
1897
- ._text-error_f8fzb_70 {
1898
- color: var(--function-label-negative);
1899
- }
1900
- ._text-accent_f8fzb_74 {
1901
- color: var(--accent-label-primary);
1902
- }
package/lib/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { SystemKeys, TypographyCaptionPrefix, TypographyParagraphPrefix, TypographyHeadingPrefix, TypographyTitlePrefix, TypographyDisplayPrefix, BasicColorType } from '@liner-fe/design-token-primitive';
2
2
  import * as react from 'react';
3
- import react__default, { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, ComponentProps, LiHTMLAttributes, MouseEventHandler } from 'react';
3
+ import react__default, { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, ComponentProps, LiHTMLAttributes, MouseEventHandler, ReactElement } from 'react';
4
4
  import * as cva from 'cva';
5
5
  import { VariantProps } from 'cva';
6
6
  import { IconProps, IconComponentType } from '@liner-fe/icon';
@@ -10,7 +10,6 @@ import { breakpointOrigin } from '@liner-fe/design-token';
10
10
  import { Popover as Popover$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, Select as Select$1, Label as Label$1 } from 'radix-ui';
11
11
  import * as PopoverPrimitive from '@radix-ui/react-popover';
12
12
  import { PopoverProps, PopoverPortalProps } from '@radix-ui/react-popover';
13
- import { IllustProps } from '@liner-fe/illust';
14
13
 
15
14
  declare const objectToArray: <T extends Record<string, unknown>>(obj: T) => [keyof T, T[keyof T]][];
16
15
  declare const arrayToStyleObject: <T extends SystemKeys>(colorKeys: T[], style: {
@@ -480,20 +479,58 @@ interface LoadingProps extends HTMLAttributes<HTMLSpanElement> {
480
479
  }
481
480
  declare const Loading: ({ type, ...props }: LoadingProps) => react_jsx_runtime.JSX.Element;
482
481
 
483
- interface LogoSquareProps {
484
- type: 'circle' | 'favicon' | 'symbol-main' | 'symbol-circle';
485
- size: number;
486
- className?: string;
482
+ /**
483
+ * 로고 소스 레지스트리 PRISM 파이프라인의 단일 진실 소스(P0).
484
+ *
485
+ * 아이콘의 figma.json 에 대응하는 "로고 소스"다. 이후 단계에서
486
+ * - admin `logos` 테이블 import / manifest `logos` 섹션
487
+ * - `@liner-fe/logo` codegen
488
+ * 이 같은 형태(name / category / viewBox / fixedColor / svg)를 그대로 소비한다.
489
+ *
490
+ * 네이밍은 Figma `lp-pri-logo-{category}-{name}` 택소노미를 정규형으로 채택한다.
491
+ * (파일 LmqEWmsAzA0cNzA63lyo4G, node 17361-40)
492
+ *
493
+ * 색 모델:
494
+ * - fixedColor=false → 단색 테마 적응. path 는 fill 을 지정하지 않고 상위 <svg fill> 을 상속.
495
+ * 렌더러가 디자인 토큰 색을 <svg fill> 로 주입한다.
496
+ * - fixedColor=true → 브랜드 고정 멀티컬러(badge). path 가 자체 fill 을 가지며 토큰 주입 안 함.
497
+ */
498
+ type LogoCategory = 'symbol' | 'combination' | 'wordmark' | 'badge';
499
+ type LogoName = 'symbol-main' | 'symbol-circle' | 'symbol-rounded' | 'favicon' | 'combination-liner' | 'combination-team' | 'combination-scholar' | 'combination-write' | 'combination-platform' | 'combination-developers' | 'wordmark-careers' | 'badge-pro' | 'badge-max';
500
+ interface LogoDef {
501
+ category: LogoCategory;
502
+ /** 본연 종횡비 산출용 [viewBoxWidth, viewBoxHeight] */
503
+ viewBox: [number, number];
504
+ /** true 면 브랜드 고정색(토큰 주입 안 함) */
505
+ fixedColor: boolean;
506
+ /**
507
+ * <svg> 내부 마크업. fixedColor=false 인 경우 `fill` 인자(디자인 토큰 색)를 사용하고,
508
+ * fixedColor=true 면 인자를 무시하고 자체 고정색을 쓴다.
509
+ */
510
+ paths: (fill: string) => ReactNode;
487
511
  }
488
- interface LogoRectangleProps {
489
- type: 'combination' | 'team' | 'pro' | 'max' | 'scholar' | 'developers' | 'platform' | 'write' | 'careers';
490
- width: number;
491
- height: number;
492
- className?: string;
512
+ declare const LOGOS: Record<LogoName, LogoDef>;
513
+
514
+ interface LogoProps {
515
+ /** 로고 이름. Figma `lp-pri-logo-{category}-{name}` 택소노미를 따른다. */
516
+ name: LogoName;
517
+ /**
518
+ * 렌더 높이(px). 너비는 로고 본연의 종횡비로 자동 계산된다.
519
+ * 미지정 시 로고의 viewBox 높이를 그대로 사용.
520
+ */
521
+ height?: number;
522
+ /**
523
+ * 단색(테마 적응) 로고의 색 토큰. 기본 `brand-label-secondary`.
524
+ * 고정색 로고(badge 등)에는 무시된다.
525
+ */
493
526
  fill?: BasicColorType;
527
+ className?: string;
494
528
  }
495
- type LogoProps = LogoSquareProps | LogoRectangleProps;
496
- declare const Logo: (props: LogoProps) => react_jsx_runtime.JSX.Element;
529
+ /**
530
+ * 브랜드 로고. SVG 는 `logos.tsx` 레지스트리(PRISM 파이프라인 소스)에서 가져오며,
531
+ * 이 컴포넌트는 viewBox·종횡비·색 토큰을 적용하는 얇은 렌더러다.
532
+ */
533
+ declare const Logo: ({ name, height, fill, className }: LogoProps) => react_jsx_runtime.JSX.Element;
497
534
 
498
535
  type PrimitiveCoachMarkRootProps = PopoverProps & {
499
536
  trigger: ReactNode;
@@ -517,6 +554,19 @@ declare const PrimitiveCoachMark: (({ trigger, children, ...props }: PrimitiveCo
517
554
  Close: ({ className, onClick }: HTMLAttributes<HTMLOrSVGElement>) => react_jsx_runtime.JSX.Element;
518
555
  };
519
556
 
557
+ type CompactCoachMarkProps = PrimitiveCoachMarkRootProps;
558
+ type CompactCoachMarkContentProps = Omit<PrimitiveCoachMarkContentProps, 'children'> & {
559
+ badge?: string;
560
+ title: string;
561
+ };
562
+ declare const CompactCoachMark: ((props: CompactCoachMarkProps) => react_jsx_runtime.JSX.Element) & {
563
+ Content: react.ForwardRefExoticComponent<Omit<PrimitiveCoachMarkContentProps, "children"> & {
564
+ badge?: string;
565
+ title: string;
566
+ } & react.RefAttributes<HTMLDivElement>>;
567
+ Portal: react.FC<PopoverPrimitive.PopoverPortalProps>;
568
+ };
569
+
520
570
  interface Step {
521
571
  total: number;
522
572
  current: number;
@@ -529,43 +579,29 @@ interface RestrictedButtonProps {
529
579
  type CoachMarkProps = PrimitiveCoachMarkRootProps & {
530
580
  children?: ReactNode;
531
581
  };
532
- interface BaseCoachMarkContentProps extends Omit<PrimitiveCoachMarkContentProps, 'children'> {
533
- tag?: string;
534
- title?: string;
535
- level?: 'brand' | 'inverse-static';
536
- onClose?: MouseEventHandler<HTMLOrSVGElement>;
537
- }
538
- type BaseCoachMarkContent = {
539
- icon?: {
540
- icon: IconComponentType;
541
- } & Pick<IconProps, 'fill' | 'type' | 'fillType'>;
582
+ type CoachMarkContentProps = Omit<PrimitiveCoachMarkContentProps, 'children'> & {
583
+ badge?: string;
584
+ title: string;
542
585
  description?: string;
586
+ media?: ReactElement;
587
+ preloadSrc?: string;
543
588
  step?: Step;
544
- primaryButton?: RestrictedButtonProps;
589
+ primaryButton: RestrictedButtonProps;
545
590
  secondaryButton?: RestrictedButtonProps;
546
- width?: number;
591
+ onClose?: MouseEventHandler<HTMLButtonElement>;
547
592
  };
548
- type WithImage = BaseCoachMarkContent & {
549
- image: React.ImgHTMLAttributes<HTMLImageElement>;
550
- illust?: undefined;
551
- };
552
- type WithIllust = BaseCoachMarkContent & {
553
- image?: undefined;
554
- illust: Omit<IllustProps, 'width'>;
555
- };
556
- type WithoutMedia = BaseCoachMarkContent & {
557
- image?: undefined;
558
- illust?: undefined;
559
- };
560
- type CoachMarkContentProps = (WithImage | WithIllust | WithoutMedia) & BaseCoachMarkContentProps;
561
593
  declare const CoachMark: ((props: CoachMarkProps) => react_jsx_runtime.JSX.Element) & {
562
- Content: react.ForwardRefExoticComponent<CoachMarkContentProps & react.RefAttributes<HTMLDivElement>>;
563
- Portal: react.FC<PopoverPrimitive.PopoverPortalProps>;
564
- };
565
-
566
- type CompactCoachMarkProps = PrimitiveCoachMarkRootProps;
567
- declare const CompactCoachMark: ((props: CompactCoachMarkProps) => react_jsx_runtime.JSX.Element) & {
568
- Content: react.ForwardRefExoticComponent<BaseCoachMarkContentProps & react.RefAttributes<HTMLDivElement>>;
594
+ Content: react.ForwardRefExoticComponent<Omit<PrimitiveCoachMarkContentProps, "children"> & {
595
+ badge?: string;
596
+ title: string;
597
+ description?: string;
598
+ media?: ReactElement;
599
+ preloadSrc?: string;
600
+ step?: Step;
601
+ primaryButton: RestrictedButtonProps;
602
+ secondaryButton?: RestrictedButtonProps;
603
+ onClose?: MouseEventHandler<HTMLButtonElement>;
604
+ } & react.RefAttributes<HTMLDivElement>>;
569
605
  Portal: react.FC<PopoverPrimitive.PopoverPortalProps>;
570
606
  };
571
607
 
@@ -605,4 +641,4 @@ type BadgeBaseProps = ComponentPropsWithoutRef<'span'> & {
605
641
  type BadgeProps = BadgeBaseProps & BadgeVariantColorProps;
606
642
  declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
607
643
 
608
- 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, type LogoProps, type LogoRectangleProps, type LogoSquareProps, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, type PromiseToastOptions, Radio, Select, type SelectItemProps, type SelectProps, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, toast };
644
+ export { Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, 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, LOGOS, Label, List, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, type PromiseToastOptions, Radio, Select, type SelectItemProps, type SelectProps, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, toast };