npm - sellmate-design-system-react - Versions diffs - 0.1.10 → 0.2.0 - Mend

sellmate-design-system-react 0.1.10 → 0.2.0

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.

Files changed (163) hide show

package/dist/components/SChipInput/index.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export { SChipInput, type SChipInputProps, type SChipInputSize } from './SChipInput';
1	+ export { SChipInput, type SChipInputMetaPlacement, type SChipInputProps, type SChipInputSize, } from './SChipInput';

package/dist/components/SCircleProgress/SCircleProgress.cjs CHANGED Viewed

@@ -48,8 +48,12 @@ var SCircleProgress = react.forwardRef(
       "span",
       {
         className: cn(
-          "text-center text-[16px] font-bold leading-[26px]",
-          innerValue && "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          "text-center text-[16px] font-bold",
+          innerValue ? (
+            // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
+            // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
+            "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
+          ) : "leading-[26px]"
         ),
         style: { color: percentColor },
         children: [

package/dist/components/SCircleProgress/SCircleProgress.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SCircleProgress/SCircleProgress.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SCircleProgress","jsxs","jsx"],"mappings":";;;;;;;;AAQA,IAAM,UAAUA,iCAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACjBA,IAAM,OAAA,GAAU,EAAA;AAChB,IAAM,MAAA,GAAS,EAAA;AACf,IAAM,MAAA,GAAS,EAAA;AACf,IAAM,aAAA,GAAgB,CAAA,GAAI,IAAA,CAAK,EAAA,GAAK,MAAA;AAEpC,IAAM,SAAA,GAAyE;AAAA,EAC7E,OAAA,EAAS,EAAE,GAAA,EAAK,kCAAA,EAAoC,OAAO,iCAAA,EAAkC;AAAA;AAAA,EAE7F,OAAA,EAAS,EAAE,GAAA,EAAK,oBAAA,EAAsB,OAAO,uBAAA,EAAwB;AAAA,EACrE,KAAA,EAAO,EAAE,GAAA,EAAK,qBAAA,EAAuB,OAAO,iCAAA,EAAkC;AAAA,EAC9E,QAAA,EAAU,EAAE,GAAA,EAAK,SAAA,EAAW,OAAO,iCAAA;AACrC,CAAA;AAiBA,IAAM,KAAA,GAAQ,CAAC,CAAA,KAAe,MAAA,CAAO,SAAS,CAAC,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,CAAC,CAAC,CAAA,GAAI,CAAA;AAG5E,IAAM,eAAA,GAAkBC,gBAAA;AAAA,EAC7B,SAASC,gBAAAA,CACP;AAAA,IACE,KAAA,GAAQ,CAAA;AAAA,IACR,IAAA,GAAO,SAAA;AAAA,IACP,aAAA,GAAgB,KAAA;AAAA,IAChB,KAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,EACA;AACA,IAAA,MAAM,CAAA,GAAI,MAAM,KAAK,CAAA;AACrB,IAAA,MAAM,MAAA,GAAS,UAAU,IAAI,CAAA;AAC7B,IAAA,MAAM,IAAI,OAAA,GAAU,CAAA;AACpB,IAAA,MAAM,YAAA,GAAe,CAAA,KAAM,CAAA,GAAI,uCAAA,GAA0C,MAAA,CAAO,GAAA;AAChF,IAAA,MAAM,MAAA,GAAU,IAAI,GAAA,GAAO,aAAA;AAC3B,IAAA,MAAM,cAAc,CAAC,aAAA;AACrB,IAAA,MAAM,WAAA,mBACJC,eAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,~~kDAAA~~;AAAA,UACA,UAAA,~~IAAc~~;AAAA,~~SAChB~~;AAAA,QACA,KAAA,EAAO,EAAE,KAAA,EAAO,YAAA,EAAa;AAAA,QAE5B,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,MAAM,CAAC,CAAA;AAAA,UAAE;AAAA;AAAA;AAAA,KACjB;AAGF,IAAA,uBACEA,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,0EAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,UAAA,IAAc,UAAU,CAAA,EACzC,QAAA,EAAA;AAAA,4BAAAA,eAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAS,CAAA,IAAA,EAAO,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAAA,gBAClC,KAAA,EAAM,4BAAA;AAAA,gBACN,SAAA,EAAW,EAAA;AAAA,kBACT,mBAAA;AAAA,kBACA,aAAA,IAAiB;AAAA,iBACnB;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAAC,cAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAI,CAAA;AAAA,sBACJ,EAAA,EAAI,CAAA;AAAA,sBACJ,CAAA,EAAG,MAAA;AAAA,sBACH,IAAA,EAAK,MAAA;AAAA,sBACL,WAAA,EAAa,MAAA;AAAA,sBACb,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAA,CAAO,KAAA;AAAM;AAAA,mBAChC;AAAA,kCACAA,cAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAI,CAAA;AAAA,sBACJ,EAAA,EAAI,CAAA;AAAA,sBACJ,CAAA,EAAG,MAAA;AAAA,sBACH,IAAA,EAAK,MAAA;AAAA,sBACL,WAAA,EAAa,MAAA;AAAA,sBACb,aAAA,EAAc,OAAA;AAAA,sBACd,SAAA,EAAW,EAAA;AAAA,wBACT,eAAA;AAAA,wBACA,gBACI,oBAAA,GACA;AAAA,uBACN;AAAA,sBACA,KAAA,EAAO;AAAA,wBACL,QAAQ,MAAA,CAAO,GAAA;AAAA,wBACf,GAAI,aAAA,GACA,EAAC,GACD,EAAE,eAAA,EAAiB,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA,EAAI,gBAAA,EAAkB,CAAA;AAAE;AAC3E;AAAA;AACF;AAAA;AAAA,aACF;AAAA,YAEC,eAAe,UAAA,IAAc;AAAA,WAAA,EAChC,CAAA;AAAA,UAEC,WAAA,IAAe,CAAC,UAAA,IAAc,WAAA;AAAA,UAC9B,KAAA,oBACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mGACb,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF","file":"SCircleProgress.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/*\n theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n /\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n 'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n },\n },\n});\n\n/\n className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n /\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","import { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport type SCircleProgressType = 'primary' \| 'inverse' \| 'error' \| 'complete';\n\nconst VIEWBOX = 80;\nconst RADIUS = 34;\nconst STROKE = 12;\nconst CIRCUMFERENCE = 2 Math.PI * RADIUS;\n\nconst COLOR_MAP: Record<SCircleProgressType, { arc: string; track: string }> = {\n primary: { arc: 'var(--cmp-progress-active-color)', track: 'var(--cmp-progress-color-track)' },\n // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)\n inverse: { arc: 'var(--color-white)', track: 'rgba(255,255,255,0.4)' },\n error: { arc: 'var(--color-red-75)', track: 'var(--cmp-progress-color-track)' },\n complete: { arc: '#01BB4B', track: 'var(--cmp-progress-color-track)' },\n};\n\nexport interface SCircleProgressProps {\n /** 진행률 (0–100) /\n value?: number;\n /* 색상 테마 /\n type?: SCircleProgressType;\n /* 불확정(스피너) 모드 — value 무시 /\n indeterminate?: boolean;\n /* 하단 레이블 /\n label?: string;\n /* true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 /\n innerValue?: boolean;\n className?: string;\n style?: CSSProperties;\n}\n\nconst clamp = (v: number) => (Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0);\n\n/* SCircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. /\nexport const SCircleProgress = forwardRef<HTMLDivElement, SCircleProgressProps>(\n function SCircleProgress(\n {\n value = 0,\n type = 'primary',\n indeterminate = false,\n label,\n innerValue = false,\n className,\n style,\n },\n ref,\n ) {\n const v = clamp(value);\n const colors = COLOR_MAP[type];\n const c = VIEWBOX / 2;\n const percentColor = v === 0 ? 'var(--sys-color-fg-tertiary, #888888)' : colors.arc;\n const filled = (v / 100) CIRCUMFERENCE;\n const showPercent = !indeterminate;\n const percentNode = (\n <span\n className={cn(\n 'text-center text-[16px] font-bold leading-[26px~~]',\~~n ~~innerValue~~ && 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n )}\n style={{ color: percentColor }}\n >\n {Math.round(v)}%\n </span>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n 'inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]',\n className,\n )}\n style={style}\n >\n <div className={cn(innerValue && 'relative')}>\n <svg\n viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn(\n 'h-[80px] w-[80px]',\n indeterminate && 'origin-center animate-circle-spin',\n )}\n >\n <circle\n cx={c}\n cy={c}\n r={RADIUS}\n fill=\"none\"\n strokeWidth={STROKE}\n style={{ stroke: colors.track }}\n />\n <circle\n cx={c}\n cy={c}\n r={RADIUS}\n fill=\"none\"\n strokeWidth={STROKE}\n strokeLinecap=\"round\"\n className={cn(\n 'origin-center',\n indeterminate\n ? 'animate-circle-arc'\n : '-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear',\n )}\n style={{\n stroke: colors.arc,\n ...(indeterminate\n ? {}\n : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }),\n }}\n />\n </svg>\n {/* innerValue: 원 가운데에 퍼센트 오버레이 /}\n {showPercent && innerValue && percentNode}\n </div>\n {/ 기본: 퍼센트를 원(ring) 아래에 표시 */}\n {showPercent && !innerValue && percentNode}\n {label && (\n <span className=\"text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]\">\n {label}\n </span>\n )}\n </div>\n );\n },\n);\n"]}
1	+ {"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SCircleProgress/SCircleProgress.tsx"],"names":["extendTailwindMerge","clsx","forwardRef","SCircleProgress","jsxs","jsx"],"mappings":"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","file":"SCircleProgress.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/*\n theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n /\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n 'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n },\n },\n});\n\n/\n className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n /\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","import { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport type SCircleProgressType = 'primary' \| 'inverse' \| 'error' \| 'complete';\n\nconst VIEWBOX = 80;\nconst RADIUS = 34;\nconst STROKE = 12;\nconst CIRCUMFERENCE = 2 Math.PI * RADIUS;\n\nconst COLOR_MAP: Record<SCircleProgressType, { arc: string; track: string }> = {\n primary: { arc: 'var(--cmp-progress-active-color)', track: 'var(--cmp-progress-color-track)' },\n // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)\n inverse: { arc: 'var(--color-white)', track: 'rgba(255,255,255,0.4)' },\n error: { arc: 'var(--color-red-75)', track: 'var(--cmp-progress-color-track)' },\n complete: { arc: '#01BB4B', track: 'var(--cmp-progress-color-track)' },\n};\n\nexport interface SCircleProgressProps {\n /** 진행률 (0–100) /\n value?: number;\n /* 색상 테마 /\n type?: SCircleProgressType;\n /* 불확정(스피너) 모드 — value 무시 /\n indeterminate?: boolean;\n /* 하단 레이블 /\n label?: string;\n /* true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 /\n innerValue?: boolean;\n className?: string;\n style?: CSSProperties;\n}\n\nconst clamp = (v: number) => (Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0);\n\n/* SCircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. /\nexport const SCircleProgress = forwardRef<HTMLDivElement, SCircleProgressProps>(\n function SCircleProgress(\n {\n value = 0,\n type = 'primary',\n indeterminate = false,\n label,\n innerValue = false,\n className,\n style,\n },\n ref,\n ) {\n const v = clamp(value);\n const colors = COLOR_MAP[type];\n const c = VIEWBOX / 2;\n const percentColor = v === 0 ? 'var(--sys-color-fg-tertiary, #888888)' : colors.arc;\n const filled = (v / 100) CIRCUMFERENCE;\n const showPercent = !indeterminate;\n const percentNode = (\n <span\n className={cn(\n 'text-center text-[16px] font-bold',\n innerValue\n ? // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아\n // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)\n 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]'\n : 'leading-[26px]',\n )}\n style={{ color: percentColor }}\n >\n {Math.round(v)}%\n </span>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n 'inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]',\n className,\n )}\n style={style}\n >\n <div className={cn(innerValue && 'relative')}>\n <svg\n viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn(\n 'h-[80px] w-[80px]',\n indeterminate && 'origin-center animate-circle-spin',\n )}\n >\n <circle\n cx={c}\n cy={c}\n r={RADIUS}\n fill=\"none\"\n strokeWidth={STROKE}\n style={{ stroke: colors.track }}\n />\n <circle\n cx={c}\n cy={c}\n r={RADIUS}\n fill=\"none\"\n strokeWidth={STROKE}\n strokeLinecap=\"round\"\n className={cn(\n 'origin-center',\n indeterminate\n ? 'animate-circle-arc'\n : '-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear',\n )}\n style={{\n stroke: colors.arc,\n ...(indeterminate\n ? {}\n : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }),\n }}\n />\n </svg>\n {/* innerValue: 원 가운데에 퍼센트 오버레이 /}\n {showPercent && innerValue && percentNode}\n </div>\n {/ 기본: 퍼센트를 원(ring) 아래에 표시 */}\n {showPercent && !innerValue && percentNode}\n {label && (\n <span className=\"text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]\">\n {label}\n </span>\n )}\n </div>\n );\n },\n);\n"]}

package/dist/components/SCircleProgress/SCircleProgress.js CHANGED Viewed

@@ -46,8 +46,12 @@ var SCircleProgress = forwardRef(
       "span",
       {
         className: cn(
-          "text-center text-[16px] font-bold leading-[26px]",
-          innerValue && "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          "text-center text-[16px] font-bold",
+          innerValue ? (
+            // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
+            // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
+            "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
+          ) : "leading-[26px]"
         ),
         style: { color: percentColor },
         children: [

package/dist/components/SCircleProgress/SCircleProgress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SCircleProgress/SCircleProgress.tsx"],"names":["SCircleProgress"],"mappings":";;;;;;AAQA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACjBA,IAAM,OAAA,GAAU,EAAA;AAChB,IAAM,MAAA,GAAS,EAAA;AACf,IAAM,MAAA,GAAS,EAAA;AACf,IAAM,aAAA,GAAgB,CAAA,GAAI,IAAA,CAAK,EAAA,GAAK,MAAA;AAEpC,IAAM,SAAA,GAAyE;AAAA,EAC7E,OAAA,EAAS,EAAE,GAAA,EAAK,kCAAA,EAAoC,OAAO,iCAAA,EAAkC;AAAA;AAAA,EAE7F,OAAA,EAAS,EAAE,GAAA,EAAK,oBAAA,EAAsB,OAAO,uBAAA,EAAwB;AAAA,EACrE,KAAA,EAAO,EAAE,GAAA,EAAK,qBAAA,EAAuB,OAAO,iCAAA,EAAkC;AAAA,EAC9E,QAAA,EAAU,EAAE,GAAA,EAAK,SAAA,EAAW,OAAO,iCAAA;AACrC,CAAA;AAiBA,IAAM,KAAA,GAAQ,CAAC,CAAA,KAAe,MAAA,CAAO,SAAS,CAAC,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,CAAC,CAAC,CAAA,GAAI,CAAA;AAG5E,IAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,SAASA,gBAAAA,CACP;AAAA,IACE,KAAA,GAAQ,CAAA;AAAA,IACR,IAAA,GAAO,SAAA;AAAA,IACP,aAAA,GAAgB,KAAA;AAAA,IAChB,KAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,EACA;AACA,IAAA,MAAM,CAAA,GAAI,MAAM,KAAK,CAAA;AACrB,IAAA,MAAM,MAAA,GAAS,UAAU,IAAI,CAAA;AAC7B,IAAA,MAAM,IAAI,OAAA,GAAU,CAAA;AACpB,IAAA,MAAM,YAAA,GAAe,CAAA,KAAM,CAAA,GAAI,uCAAA,GAA0C,MAAA,CAAO,GAAA;AAChF,IAAA,MAAM,MAAA,GAAU,IAAI,GAAA,GAAO,aAAA;AAC3B,IAAA,MAAM,cAAc,CAAC,aAAA;AACrB,IAAA,MAAM,WAAA,mBACJ,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,~~kDAAA~~;AAAA,UACA,UAAA,~~IAAc~~;AAAA,~~SAChB~~;AAAA,QACA,KAAA,EAAO,EAAE,KAAA,EAAO,YAAA,EAAa;AAAA,QAE5B,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,MAAM,CAAC,CAAA;AAAA,UAAE;AAAA;AAAA;AAAA,KACjB;AAGF,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,0EAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,UAAA,IAAc,UAAU,CAAA,EACzC,QAAA,EAAA;AAAA,4BAAA,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAS,CAAA,IAAA,EAAO,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAAA,gBAClC,KAAA,EAAM,4BAAA;AAAA,gBACN,SAAA,EAAW,EAAA;AAAA,kBACT,mBAAA;AAAA,kBACA,aAAA,IAAiB;AAAA,iBACnB;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAI,CAAA;AAAA,sBACJ,EAAA,EAAI,CAAA;AAAA,sBACJ,CAAA,EAAG,MAAA;AAAA,sBACH,IAAA,EAAK,MAAA;AAAA,sBACL,WAAA,EAAa,MAAA;AAAA,sBACb,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAA,CAAO,KAAA;AAAM;AAAA,mBAChC;AAAA,kCACA,GAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAI,CAAA;AAAA,sBACJ,EAAA,EAAI,CAAA;AAAA,sBACJ,CAAA,EAAG,MAAA;AAAA,sBACH,IAAA,EAAK,MAAA;AAAA,sBACL,WAAA,EAAa,MAAA;AAAA,sBACb,aAAA,EAAc,OAAA;AAAA,sBACd,SAAA,EAAW,EAAA;AAAA,wBACT,eAAA;AAAA,wBACA,gBACI,oBAAA,GACA;AAAA,uBACN;AAAA,sBACA,KAAA,EAAO;AAAA,wBACL,QAAQ,MAAA,CAAO,GAAA;AAAA,wBACf,GAAI,aAAA,GACA,EAAC,GACD,EAAE,eAAA,EAAiB,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA,EAAI,gBAAA,EAAkB,CAAA;AAAE;AAC3E;AAAA;AACF;AAAA;AAAA,aACF;AAAA,YAEC,eAAe,UAAA,IAAc;AAAA,WAAA,EAChC,CAAA;AAAA,UAEC,WAAA,IAAe,CAAC,UAAA,IAAc,WAAA;AAAA,UAC9B,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mGACb,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF","file":"SCircleProgress.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/*\n theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n /\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n 'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n },\n },\n});\n\n/\n className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n /\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","import { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport type SCircleProgressType = 'primary' \| 'inverse' \| 'error' \| 'complete';\n\nconst VIEWBOX = 80;\nconst RADIUS = 34;\nconst STROKE = 12;\nconst CIRCUMFERENCE = 2 Math.PI * RADIUS;\n\nconst COLOR_MAP: Record<SCircleProgressType, { arc: string; track: string }> = {\n primary: { arc: 'var(--cmp-progress-active-color)', track: 'var(--cmp-progress-color-track)' },\n // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)\n inverse: { arc: 'var(--color-white)', track: 'rgba(255,255,255,0.4)' },\n error: { arc: 'var(--color-red-75)', track: 'var(--cmp-progress-color-track)' },\n complete: { arc: '#01BB4B', track: 'var(--cmp-progress-color-track)' },\n};\n\nexport interface SCircleProgressProps {\n /** 진행률 (0–100) /\n value?: number;\n /* 색상 테마 /\n type?: SCircleProgressType;\n /* 불확정(스피너) 모드 — value 무시 /\n indeterminate?: boolean;\n /* 하단 레이블 /\n label?: string;\n /* true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 /\n innerValue?: boolean;\n className?: string;\n style?: CSSProperties;\n}\n\nconst clamp = (v: number) => (Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0);\n\n/* SCircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. /\nexport const SCircleProgress = forwardRef<HTMLDivElement, SCircleProgressProps>(\n function SCircleProgress(\n {\n value = 0,\n type = 'primary',\n indeterminate = false,\n label,\n innerValue = false,\n className,\n style,\n },\n ref,\n ) {\n const v = clamp(value);\n const colors = COLOR_MAP[type];\n const c = VIEWBOX / 2;\n const percentColor = v === 0 ? 'var(--sys-color-fg-tertiary, #888888)' : colors.arc;\n const filled = (v / 100) CIRCUMFERENCE;\n const showPercent = !indeterminate;\n const percentNode = (\n <span\n className={cn(\n 'text-center text-[16px] font-bold leading-[26px~~]',\~~n ~~innerValue~~ && 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n )}\n style={{ color: percentColor }}\n >\n {Math.round(v)}%\n </span>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n 'inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]',\n className,\n )}\n style={style}\n >\n <div className={cn(innerValue && 'relative')}>\n <svg\n viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn(\n 'h-[80px] w-[80px]',\n indeterminate && 'origin-center animate-circle-spin',\n )}\n >\n <circle\n cx={c}\n cy={c}\n r={RADIUS}\n fill=\"none\"\n strokeWidth={STROKE}\n style={{ stroke: colors.track }}\n />\n <circle\n cx={c}\n cy={c}\n r={RADIUS}\n fill=\"none\"\n strokeWidth={STROKE}\n strokeLinecap=\"round\"\n className={cn(\n 'origin-center',\n indeterminate\n ? 'animate-circle-arc'\n : '-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear',\n )}\n style={{\n stroke: colors.arc,\n ...(indeterminate\n ? {}\n : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }),\n }}\n />\n </svg>\n {/* innerValue: 원 가운데에 퍼센트 오버레이 /}\n {showPercent && innerValue && percentNode}\n </div>\n {/ 기본: 퍼센트를 원(ring) 아래에 표시 */}\n {showPercent && !innerValue && percentNode}\n {label && (\n <span className=\"text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]\">\n {label}\n </span>\n )}\n </div>\n );\n },\n);\n"]}
1	+ {"version":3,"sources":["../../../src/lib/cn.ts","../../../src/components/SCircleProgress/SCircleProgress.tsx"],"names":["SCircleProgress"],"mappings":";;;;;;AAQA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,aAAa,CAAC,EAAE,IAAA,EAAM,CAAC,MAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAI,GAAG;AAAA;AAC5F;AAEJ,CAAC,CAAA;AAMM,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACjBA,IAAM,OAAA,GAAU,EAAA;AAChB,IAAM,MAAA,GAAS,EAAA;AACf,IAAM,MAAA,GAAS,EAAA;AACf,IAAM,aAAA,GAAgB,CAAA,GAAI,IAAA,CAAK,EAAA,GAAK,MAAA;AAEpC,IAAM,SAAA,GAAyE;AAAA,EAC7E,OAAA,EAAS,EAAE,GAAA,EAAK,kCAAA,EAAoC,OAAO,iCAAA,EAAkC;AAAA;AAAA,EAE7F,OAAA,EAAS,EAAE,GAAA,EAAK,oBAAA,EAAsB,OAAO,uBAAA,EAAwB;AAAA,EACrE,KAAA,EAAO,EAAE,GAAA,EAAK,qBAAA,EAAuB,OAAO,iCAAA,EAAkC;AAAA,EAC9E,QAAA,EAAU,EAAE,GAAA,EAAK,SAAA,EAAW,OAAO,iCAAA;AACrC,CAAA;AAiBA,IAAM,KAAA,GAAQ,CAAC,CAAA,KAAe,MAAA,CAAO,SAAS,CAAC,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,CAAC,CAAC,CAAA,GAAI,CAAA;AAG5E,IAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,SAASA,gBAAAA,CACP;AAAA,IACE,KAAA,GAAQ,CAAA;AAAA,IACR,IAAA,GAAO,SAAA;AAAA,IACP,aAAA,GAAgB,KAAA;AAAA,IAChB,KAAA;AAAA,IACA,UAAA,GAAa,KAAA;AAAA,IACb,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,EACA;AACA,IAAA,MAAM,CAAA,GAAI,MAAM,KAAK,CAAA;AACrB,IAAA,MAAM,MAAA,GAAS,UAAU,IAAI,CAAA;AAC7B,IAAA,MAAM,IAAI,OAAA,GAAU,CAAA;AACpB,IAAA,MAAM,YAAA,GAAe,CAAA,KAAM,CAAA,GAAI,uCAAA,GAA0C,MAAA,CAAO,GAAA;AAChF,IAAA,MAAM,MAAA,GAAU,IAAI,GAAA,GAAO,aAAA;AAC3B,IAAA,MAAM,cAAc,CAAC,aAAA;AACrB,IAAA,MAAM,WAAA,mBACJ,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,mCAAA;AAAA,UACA,UAAA;AAAA;AAAA;AAAA,YAGI;AAAA,cACA;AAAA,SACN;AAAA,QACA,KAAA,EAAO,EAAE,KAAA,EAAO,YAAA,EAAa;AAAA,QAE5B,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,MAAM,CAAC,CAAA;AAAA,UAAE;AAAA;AAAA;AAAA,KACjB;AAGF,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,0EAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,UAAA,IAAc,UAAU,CAAA,EACzC,QAAA,EAAA;AAAA,4BAAA,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAS,CAAA,IAAA,EAAO,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAAA,gBAClC,KAAA,EAAM,4BAAA;AAAA,gBACN,SAAA,EAAW,EAAA;AAAA,kBACT,mBAAA;AAAA,kBACA,aAAA,IAAiB;AAAA,iBACnB;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAI,CAAA;AAAA,sBACJ,EAAA,EAAI,CAAA;AAAA,sBACJ,CAAA,EAAG,MAAA;AAAA,sBACH,IAAA,EAAK,MAAA;AAAA,sBACL,WAAA,EAAa,MAAA;AAAA,sBACb,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAA,CAAO,KAAA;AAAM;AAAA,mBAChC;AAAA,kCACA,GAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAI,CAAA;AAAA,sBACJ,EAAA,EAAI,CAAA;AAAA,sBACJ,CAAA,EAAG,MAAA;AAAA,sBACH,IAAA,EAAK,MAAA;AAAA,sBACL,WAAA,EAAa,MAAA;AAAA,sBACb,aAAA,EAAc,OAAA;AAAA,sBACd,SAAA,EAAW,EAAA;AAAA,wBACT,eAAA;AAAA,wBACA,gBACI,oBAAA,GACA;AAAA,uBACN;AAAA,sBACA,KAAA,EAAO;AAAA,wBACL,QAAQ,MAAA,CAAO,GAAA;AAAA,wBACf,GAAI,aAAA,GACA,EAAC,GACD,EAAE,eAAA,EAAiB,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,aAAa,CAAA,CAAA,EAAI,gBAAA,EAAkB,CAAA;AAAE;AAC3E;AAAA;AACF;AAAA;AAAA,aACF;AAAA,YAEC,eAAe,UAAA,IAAc;AAAA,WAAA,EAChC,CAAA;AAAA,UAEC,WAAA,IAAe,CAAC,UAAA,IAAc,WAAA;AAAA,UAC9B,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mGACb,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF","file":"SCircleProgress.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n/*\n theme.css 의 --text-* 는 기본 Tailwind 폰트사이즈 스케일(xs/sm/base...)이 아닌\n * 숫자 스케일(10~32)이라, 확장 없이는 tailwind-merge 가 이를 텍스트 컬러 그룹으로\n * 오인해 text-12 같은 클래스를 text-(--color-var) 뒤에서 충돌 제거해버린다.\n /\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n 'font-size': [{ text: ['10', '11', '12', '13', '14', '16', '18', '20', '24', '28', '32'] }],\n },\n },\n});\n\n/\n className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n /\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","import { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '../../lib/cn';\n\nexport type SCircleProgressType = 'primary' \| 'inverse' \| 'error' \| 'complete';\n\nconst VIEWBOX = 80;\nconst RADIUS = 34;\nconst STROKE = 12;\nconst CIRCUMFERENCE = 2 Math.PI * RADIUS;\n\nconst COLOR_MAP: Record<SCircleProgressType, { arc: string; track: string }> = {\n primary: { arc: 'var(--cmp-progress-active-color)', track: 'var(--cmp-progress-color-track)' },\n // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)\n inverse: { arc: 'var(--color-white)', track: 'rgba(255,255,255,0.4)' },\n error: { arc: 'var(--color-red-75)', track: 'var(--cmp-progress-color-track)' },\n complete: { arc: '#01BB4B', track: 'var(--cmp-progress-color-track)' },\n};\n\nexport interface SCircleProgressProps {\n /** 진행률 (0–100) /\n value?: number;\n /* 색상 테마 /\n type?: SCircleProgressType;\n /* 불확정(스피너) 모드 — value 무시 /\n indeterminate?: boolean;\n /* 하단 레이블 /\n label?: string;\n /* true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 /\n innerValue?: boolean;\n className?: string;\n style?: CSSProperties;\n}\n\nconst clamp = (v: number) => (Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0);\n\n/* SCircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. /\nexport const SCircleProgress = forwardRef<HTMLDivElement, SCircleProgressProps>(\n function SCircleProgress(\n {\n value = 0,\n type = 'primary',\n indeterminate = false,\n label,\n innerValue = false,\n className,\n style,\n },\n ref,\n ) {\n const v = clamp(value);\n const colors = COLOR_MAP[type];\n const c = VIEWBOX / 2;\n const percentColor = v === 0 ? 'var(--sys-color-fg-tertiary, #888888)' : colors.arc;\n const filled = (v / 100) CIRCUMFERENCE;\n const showPercent = !indeterminate;\n const percentNode = (\n <span\n className={cn(\n 'text-center text-[16px] font-bold',\n innerValue\n ? // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아\n // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)\n 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]'\n : 'leading-[26px]',\n )}\n style={{ color: percentColor }}\n >\n {Math.round(v)}%\n </span>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n 'inline-flex flex-col items-center gap-[var(--cmp-progress-circular-gap)]',\n className,\n )}\n style={style}\n >\n <div className={cn(innerValue && 'relative')}>\n <svg\n viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn(\n 'h-[80px] w-[80px]',\n indeterminate && 'origin-center animate-circle-spin',\n )}\n >\n <circle\n cx={c}\n cy={c}\n r={RADIUS}\n fill=\"none\"\n strokeWidth={STROKE}\n style={{ stroke: colors.track }}\n />\n <circle\n cx={c}\n cy={c}\n r={RADIUS}\n fill=\"none\"\n strokeWidth={STROKE}\n strokeLinecap=\"round\"\n className={cn(\n 'origin-center',\n indeterminate\n ? 'animate-circle-arc'\n : '-rotate-90 transition-[stroke-dasharray] duration-[400ms] ease-linear',\n )}\n style={{\n stroke: colors.arc,\n ...(indeterminate\n ? {}\n : { strokeDasharray: `${filled} ${CIRCUMFERENCE}`, strokeDashoffset: 0 }),\n }}\n />\n </svg>\n {/* innerValue: 원 가운데에 퍼센트 오버레이 /}\n {showPercent && innerValue && percentNode}\n </div>\n {/ 기본: 퍼센트를 원(ring) 아래에 표시 */}\n {showPercent && !innerValue && percentNode}\n {label && (\n <span className=\"text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]\">\n {label}\n </span>\n )}\n </div>\n );\n },\n);\n"]}

package/dist/components/SConfirmModal/SConfirmModal.cjs CHANGED Viewed

@@ -40,7 +40,9 @@ function cn(...inputs) {
   return twMerge(clsx.clsx(inputs));
 }
 var PortalContainerContext = react.createContext(null);
+var InsideModalContext = react.createContext(false);
 var PortalContainerProvider = PortalContainerContext.Provider;
+var InsideModalProvider = InsideModalContext.Provider;
 function usePortalContainer() {
   return react.useContext(PortalContainerContext) ?? void 0;
 }
@@ -2996,6 +2998,8 @@ function SGhostButton({
   tooltipText,
   disabled = false,
   onClick,
+  anchorClassName,
+  anchorStyle,
   className,
   style
 }) {
@@ -3018,6 +3022,8 @@ function SGhostButton({
   };
   const s = SIZE[size];
   const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
   const btn = /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -3058,13 +3064,13 @@ function SGhostButton({
       ]
     }
   );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return btn;
+  if (!hasTooltip) return btn;
   return /* @__PURE__ */ jsxRuntime.jsxs(RPopover__namespace.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(RPopover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: "inline-flex",
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
         onMouseEnter: openNow,
         onMouseLeave: startHide,
         onFocus: openNow,
@@ -3148,7 +3154,7 @@ function SModalContainer({
                     className: "absolute right-[16px] top-[16px] z-10"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: portalContainer, children })
+                /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: portalContainer, children }) })
               ]
             }
           )
@@ -3360,7 +3366,8 @@ function SConfirmModal({
   tagSize = "sm",
   tagColor = "grey",
   slotLabel,
-  children,
+  tagSlot,
+  optionSlot,
   mainButtonLabel = "\uD655\uC778",
   mainButtonName,
   subButtonLabel,
@@ -3370,6 +3377,9 @@ function SConfirmModal({
 }) {
   const iconName = TYPE_ICON[type];
   const mainStyle = MAIN_BUTTON_STYLE[mainButtonName ?? DEFAULT_MAIN_BUTTON[type]];
+  const tagNode = tagSlot ?? (tagLabel ? /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }) : null);
+  const optionNode = optionSlot ?? (slotLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: slotLabel }) : null);
+  const hasBody = topMessage.length > 0 || bottomMessage.length > 0 || tagNode != null || optionNode != null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SModalContainer,
     {
@@ -3395,15 +3405,12 @@ function SConfirmModal({
               }
             )
           ] }),
-          (topMessage.length > 0 || bottomMessage.length > 0 || tagLabel || slotLabel || children) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[20px] text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-modal-confirm-message-color)]", children: [
+          hasBody && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[20px] text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-modal-confirm-message-color)] w-full", children: [
             topMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: topMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0", children: m }, i)) }),
-            (tagLabel || slotLabel || children) && // content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px]", children: [
-              tagLabel && /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }),
-              slotLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: slotLabel }),
-              children
-            ] }),
-            bottomMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0", children: m }, i)) })
+            tagNode != null && // tag 위치 content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px] w-full", children: tagNode }),
+            bottomMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0", children: m }, i)) }),
+            optionNode != null && optionNode
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[8px]", children: [