@nurihaus/web-design-system 3.3.0 → 3.5.0

package/dist/components/collapsible-menu/collapsible-menu-type.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType, MouseEvent, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './collapsible-menu-props';
 export interface CollapsibleMenuRootProps {
     defaultOpen?: boolean;
@@ -30,7 +31,7 @@ export interface CollapsibleMenuLinkProps {
     'aria-current'?: 'page';
     'aria-disabled'?: 'true';
 }
-export interface CollapsibleMenuProps extends StyleProps {
+export interface CollapsibleMenuProps extends StyleProps, TrackProps {
     size?: (typeof sizes)[number];
     items: CollapsibleMenuItem[];
     activeKey?: string;

package/dist/components/drawer/drawer-type.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sides, sizes } from './drawer-props';
 export interface DrawerRootProps {
     open?: boolean;
@@ -15,7 +16,7 @@ export interface DrawerDescriptionProps extends ComponentPropsWithRef<'p'>, AsCh
 }
 export interface DrawerCloseProps extends ComponentPropsWithRef<'button'>, AsChildProps {
 }
-export interface DrawerProps extends DrawerRootProps, StyleProps {
+export interface DrawerProps extends DrawerRootProps, StyleProps, TrackProps {
     /** asChild 로 감싸 클릭하면 열리는 요소. 없으면 open·defaultOpen 으로만 연다 */
     trigger?: ReactElement;
     title: ReactNode;

package/dist/components/drop-down/drop-down-type.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './drop-down-props';
 export interface DropDownRootProps {
     defaultOpen?: boolean;
@@ -27,7 +28,7 @@ export interface DropDownItemProps extends AsChildProps {
     disabled?: boolean;
     onClick?: () => void;
 }
-export interface DropDownProps extends StyleProps {
+export interface DropDownProps extends StyleProps, TrackProps {
     size?: (typeof sizes)[number];
     defaultValue?: string;
     value?: string;

package/dist/components/logging/log-context.d.ts

@@ -0,0 +1,9 @@
+import { LogEvent, LogProviderProps } from './logging-type';
+type Emit = (event: LogEvent) => void;
+export declare const LogProvider: {
+    (props: LogProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** LogProvider 가 둔 emit 함수. Provider 밖이면 null 이다. */
+export declare const useLogEmitter: () => Emit | null;
+export {};

package/dist/components/logging/logging-type.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+/** 디자인시스템 컴포넌트가 내보내는 행동 이름. 수동 로그(useLog)는 다른 문자열도 쓸 수 있다. */
+export type LogAction = 'click' | 'open' | 'close' | 'change' | 'show' | 'navigate';
+export interface LogEvent {
+    /** 컴포넌트 displayName. 수동 로그는 화면·모듈 이름 */
+    component: string;
+    action: LogAction | (string & {});
+    /** 쓰는 쪽이 준 식별자. 예: 'report/download' */
+    track: string;
+    /** 개발자가 정한 id 만 (탭 id, 칩 id, 옵션 value, 탭 바 id). 사용자가 입력한 글자는 절대 넣지 않는다 */
+    value?: string;
+    /** 쓰는 쪽이 trackProps 로 명시한 값 */
+    props?: Record<string, string | number | boolean>;
+    timestamp: number;
+}
+/** 상호작용 컴포넌트가 공개 Props 에 extends 하는 두 prop */
+export interface TrackProps {
+    /** 주면 이 컴포넌트의 상호작용이 LogProvider.onEvent 로 간다. 없으면 아무것도 보내지 않는다 */
+    track?: string;
+    trackProps?: LogEvent['props'];
+}
+export interface LogProviderProps {
+    onEvent: (event: LogEvent) => void;
+    children?: ReactNode;
+}

package/dist/components/logging/logging.d.ts

@@ -0,0 +1,5 @@
+import { LogEvent } from './logging-type';
+export { LogProvider } from './log-context';
+/** 컴포넌트 밖의 사용 로그를 남긴다. LogProvider 밖이면 아무것도 하지 않는다. */
+export declare const useLog: () => ((event: Omit<LogEvent, "timestamp">) => void);
+export type { LogEvent, LogAction, LogProviderProps, TrackProps } from './logging-type';

package/dist/components/logging/logging.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: {
+        (props: import("./logging-type").LogProviderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onEvent: () => void;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** 버튼을 누르거나 탭을 바꾸면 onEvent 가 받은 이벤트가 아래 목록 맨 위에 쌓인다. */
+export declare const Default: Story;

package/dist/components/modal/modal-type.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
 import { CTAButtonProps } from '../button/button-type';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './modal-props';
 export interface ModalRootProps {
     open?: boolean;
@@ -36,7 +37,7 @@ export interface ModalWithDoubleButtonProps {
     right: CTAButtonProps;
     size?: (typeof sizes)[number];
 }
-export interface ModalProps extends ModalRootProps, StyleProps {
+export interface ModalProps extends ModalRootProps, StyleProps, TrackProps {
     /** 있으면 `Modal.Trigger asChild` 로 감싸 클릭하면 열리는 요소가 된다. */
     trigger?: ReactElement;
     title: ReactNode;

package/dist/components/pagination/pagination-type.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './pagination-props';
 export interface PaginationRootProps extends ComponentPropsWithRef<'nav'> {
     disabled?: boolean;
@@ -9,7 +10,7 @@ export interface PaginationItemProps extends ComponentPropsWithRef<'button'> {
     disabled?: boolean;
 }
 export type PaginationEllipsisProps = ComponentPropsWithRef<'span'>;
-export interface PaginationProps extends PaginationRootProps {
+export interface PaginationProps extends PaginationRootProps, TrackProps {
     totalPages: number;
     page?: number;
     defaultPage?: number;

package/dist/components/radio/radio-type.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import { AsChildProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 export interface RadioRootProps {
     options: {
         id: string;
@@ -22,4 +23,5 @@ export interface RadioButtonProps extends ComponentPropsWithRef<'button'>, AsChi
 export interface RadioIndicatorProps extends HTMLAttributes<HTMLDivElement>, AsChildProps {
     id: string;
 }
-export type RadioProps = RadioRootProps;
+export interface RadioProps extends RadioRootProps, TrackProps {
+}

package/dist/components/radio/radio.d.ts

@@ -1,3 +1,4 @@
-declare const Radio: import("react").ForwardRefExoticComponent<import("./radio-type").RadioRootProps & import("react").RefAttributes<HTMLUListElement>>;
+import { RadioProps } from './radio-type';
+declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLUListElement>>;
 export default Radio;
 export type { RadioProps } from './radio-type';

package/dist/components/radio/radio.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("./radio-type").RadioRootProps & import("react").RefAttributes<HTMLUListElement>>;
+    component: import("react").ForwardRefExoticComponent<import("./radio-type").RadioProps & import("react").RefAttributes<HTMLUListElement>>;
     args: {
         options: {
             id: string;

package/dist/components/skeleton/skeleton.stories.d.ts

@@ -38,9 +38,10 @@ declare const meta: {
         animated: true;
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
-        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
-        children?: import("react").ReactNode;
+        title?: string | undefined | undefined;
+        key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -48,6 +49,7 @@ declare const meta: {
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
+        className?: string | undefined | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
@@ -57,10 +59,8 @@ declare const meta: {
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
-        title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -143,6 +143,7 @@ declare const meta: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
+        children?: import("react").ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined | undefined;
@@ -304,7 +305,6 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
-        key?: import("react").Key | null | undefined;
         height?: number | string | undefined;
         width?: number | string | undefined;
         shape?: (typeof shapes)[number] | undefined;

package/dist/components/switch/switch-type.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { AsChildProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './switch-props';
 export interface SwitchRootProps extends Omit<ComponentPropsWithRef<'button'>, 'id' | 'onChange' | 'value'> {
     id: string;
@@ -13,7 +14,7 @@ export type SwitchThumbProps = ComponentPropsWithRef<'span'>;
 export interface SwitchLabelProps extends AsChildProps {
     className?: string;
 }
-export interface SwitchProps extends SwitchRootProps {
+export interface SwitchProps extends SwitchRootProps, TrackProps {
     label?: ReactNode;
     size?: (typeof sizes)[number];
 }

package/dist/components/table/table-type.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
+import { TrackProps } from '../logging/logging-type';
 export interface TableProps {
     children: React.ReactNode;
 }
@@ -23,7 +24,7 @@ type ColumnsType<T extends readonly RowItem[]> = Array<{
         onClickCell?: () => void;
     };
 }>;
-export interface DataTableProps<T extends readonly RowItem[]> {
+export interface DataTableProps<T extends readonly RowItem[]> extends TrackProps {
     rows: T;
     columns: ColumnsType<T>;
     fixedRowsIndex?: number;

package/dist/components/tabs/tabs-type.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { variant } from './tabs-props';
 export type TabsValue = string | null;
 export type TabsVariant = (typeof variant)[number];
@@ -10,7 +11,7 @@ export interface TabsItem {
     disabled?: boolean;
     leftIcon?: ReactNode;
 }
-export interface TabsProps extends StyleProps {
+export interface TabsProps extends StyleProps, TrackProps {
     items: TabsItem[];
     variant?: TabsVariant;
     value?: TabsValue;

package/dist/components/text-area/text-area-type.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEvent, ComponentPropsWithRef, ReactNode } from 'react';
+import { TrackProps } from '../logging/logging-type';
 import { resize, sizes } from './text-area-props';
 export interface TextAreaRootProps {
     children: ReactNode;
@@ -20,7 +21,7 @@ export interface TextAreaHelperTextProps {
     text: ReactNode;
     className?: string;
 }
-export interface TextAreaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'title'> {
+export interface TextAreaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'title'>, TrackProps {
     size?: (typeof sizes)[number];
     width?: number | string;
     resize?: (typeof resize)[number];

package/dist/components/text-field/text-field-type.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
+import { TrackProps } from '../logging/logging-type';
 import { sizes } from './text-field-props';
 export interface TextFieldRootProps {
     children: React.ReactNode;
@@ -20,7 +21,7 @@ export interface TextFieldHelperTextProps {
     text: ReactNode;
     className?: string;
 }
-export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'title' | 'size'> {
+export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'title' | 'size'>, TrackProps {
     size: (typeof sizes)[number];
     width: number | string;
     leftIcon?: ReactNode;

package/dist/components/toast/toast-type.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { AsChildProps, StyleProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { positions, variants } from './toast-props';
 export interface ToastProviderProps {
     children: ReactNode;
@@ -36,7 +37,7 @@ export interface ToastAction {
     onClick: () => void;
     altText: string;
 }
-export interface ToastProps extends Omit<ToastRootProps, 'children' | keyof StyleProps>, StyleProps {
+export interface ToastProps extends Omit<ToastRootProps, 'children' | keyof StyleProps>, StyleProps, TrackProps {
     title: ReactNode;
     description?: ReactNode;
     variant?: (typeof variants)[number];

package/dist/components/toast/toast.stories.d.ts

@@ -17,8 +17,11 @@ declare const meta: {
         variant: "default";
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
-        className?: string | undefined;
+        slot?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
+        title: import("react").ReactNode;
+        track?: string | undefined;
+        key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -26,6 +29,7 @@ declare const meta: {
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
+        className?: string | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
@@ -35,10 +39,8 @@ declare const meta: {
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
-        title: import("react").ReactNode;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -282,12 +284,12 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
-        key?: import("react").Key | null | undefined;
-        value?: string | number | readonly string[] | undefined;
         variant?: (typeof variants)[number] | undefined;
         defaultOpen?: boolean | undefined;
         open?: boolean | undefined;
         onOpenChange?: ((open: boolean) => void) | undefined;
+        trackProps?: Record<string, string | number | boolean> | undefined;
+        value?: string | number | readonly string[] | undefined;
         onResume?: (() => void) | undefined;
         duration?: number | undefined;
         description?: import("react").ReactNode;

package/dist/components/tooltip/tooltip-type.d.ts

@@ -1,4 +1,5 @@
 import { AsChildProps } from '../../helpers/types/common-props';
+import { TrackProps } from '../logging/logging-type';
 import { direction } from './tooltip-props';
 export interface CommonTooltipProps {
     children: React.ReactNode;
@@ -22,7 +23,7 @@ export interface TooltipProviderProps {
     skipDelayDuration?: number;
     disableHoverableContent?: boolean;
 }
-export interface TooltipProps extends TooltipRootProps {
+export interface TooltipProps extends TooltipRootProps, TrackProps {
     trigger: React.ReactNode;
     content: React.ReactNode;
     direction?: (typeof direction)[number];

package/dist/components.css

@@ -750,6 +750,31 @@
     color: var(--color-accent-red-700);
   }
 
+/* 소셜 로그인. Google·Apple 가이드의 흰 바탕·검정 글자 — 공급자 로고는 쓰는 쪽이 leftIcon 으로 (ADR 0006) */
+
+.cta-button.variant-social {
+    background-color: var(--color-white);
+    border: var(--hairline) solid var(--color-grey-scale-300);
+    color: var(--color-black);
+  }
+
+.cta-button.variant-social:not(:disabled):hover {
+      background-color: var(--color-grey-scale-100);
+    }
+
+/* callout prop: 오른쪽 위 모서리에 반쯤 걸친 말풍선 (ADR 0007). 글자 흐름 밖이라 글자가 움직이지 않는다.
+     .base-callout 의 position: relative 를 순서와 상관없이 이기도록 .cta-button > 로 한 단계 높인다 */
+
+.cta-button.with-callout {
+    position: relative;
+  }
+
+.cta-button > .cta-button-callout {
+    position: absolute;
+    top: calc(var(--spacing-12) * -1);
+    right: var(--spacing-14);
+  }
+
 .cta-button.size-xl {
     height: var(--control-height-xl);
     padding: 0 var(--spacing-24);
@@ -802,6 +827,60 @@
     border: none;
   }
 
+/* 대상에 붙어 늘 떠 있는 작은 말풍선 (ADR 0007).
+   연보라(primary 뱃지·secondary 버튼과 같은 색)는 흰 면 위에서 묻혀서 purple-300 테두리로 윤곽을 잡는다. */
+
+.base-callout {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: var(--label-height-xs);
+  padding: 0 var(--spacing-10);
+  border: var(--hairline) solid var(--color-purple-300);
+  border-radius: var(--radius-6);
+
+  background-color: var(--color-purple-50);
+  color: var(--color-purple-900);
+  box-shadow: var(--shadow-popover);
+
+  font-size: var(--font-size-xsm);
+  line-height: var(--line-height-xsm);
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+
+  /* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
+}
+
+.base-callout::after {
+    content: '';
+    position: absolute;
+    width: var(--spacing-8);
+    height: var(--spacing-8);
+    border: 0 solid var(--color-purple-300);
+    background-color: inherit;
+    transform: rotate(45deg);
+  }
+
+.base-callout:is(.tail-bottom-start,.tail-bottom-end)::after {
+    bottom: calc((var(--spacing-4) + var(--hairline)) * -1);
+    border-right-width: var(--hairline);
+    border-bottom-width: var(--hairline);
+  }
+
+.base-callout:is(.tail-top-start,.tail-top-end)::after {
+    top: calc((var(--spacing-4) + var(--hairline)) * -1);
+    border-left-width: var(--hairline);
+    border-top-width: var(--hairline);
+  }
+
+.base-callout:is(.tail-bottom-start,.tail-top-start)::after {
+    left: var(--spacing-12);
+  }
+
+.base-callout:is(.tail-bottom-end,.tail-top-end)::after {
+    right: var(--spacing-12);
+  }
+
 .base-check-box.label {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);

package/dist/cta-button.js

@@ -11,11 +11,13 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/j
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(612);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(1041);
-/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(3274);
-/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(7335);
-/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(6302);
-/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(8933);
-/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(9976);
+/* harmony import */ var _helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(4560);
+/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(3274);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(7335);
+/* harmony import */ var _callout_callout__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(1163);
+/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(6302);
+/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(8933);
+/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(9976);
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -41,19 +43,36 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
+
 var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
-  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_6__/* .ctaButtonProps */ .Lr),
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_8__/* .ctaButtonProps */ .Lr),
     className = _a.className,
     text = _a.text,
     leftIcon = _a.leftIcon,
     rightIcon = _a.rightIcon,
-    restProps = __rest(_a, ["className", "text", "leftIcon", "rightIcon"]);
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_button__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, __assign({
+    callout = _a.callout,
+    _onClick = _a.onClick,
+    track = _a.track,
+    trackProps = _a.trackProps,
+    restProps = __rest(_a, ["className", "text", "leftIcon", "rightIcon", "callout", "onClick", "track", "trackProps"]);
+  var emit = (0,_helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__/* .useTrack */ .n)('CTAButton', {
+    track: track,
+    trackProps: trackProps
+  });
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_base_button__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, __assign({
     ref: ref,
-    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)(className, 'cta-button'),
-    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, {})
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'cta-button', callout ? 'with-callout' : undefined),
+    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {}),
+    onClick: function onClick(event) {
+      emit('click');
+      _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
+    }
   }, restProps, {
-    children: [leftIcon, text, rightIcon]
+    children: [leftIcon, text, rightIcon, callout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_callout_callout__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+      className: 'cta-button-callout',
+      text: callout
+    }) : null]
   }));
 });
 CTAButton.displayName = 'CTAButton';
@@ -68,7 +87,7 @@ var x = (y) => {
 	var x = {}; __nuri_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["cloneElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.cloneElement), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["isValidElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement) });
+module.exports = x({ ["Children"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Children), ["cloneElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.cloneElement), ["createContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createContext), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["isValidElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.isValidElement), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useContext"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useContext), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef) });
 
 /***/ },
 
@@ -173,8 +192,8 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
 /******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
 /******/ 	var installedChunks = {
-/******/ 		440: 0,
-/******/ 		910: 0
+/******/ 		910: 0,
+/******/ 		2440: 0
 /******/ 	};
 /******/ 	
 /******/ 	var installChunk = (data) => {
@@ -214,23 +233,27 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ 
 /************************************************************************/
 /******/ 
-/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
 /******/ __nuri_require__.C(__webpack_chunk_1__);
-/******/ import * as __webpack_chunk_2__ from "./chunk-777.js";
+/******/ import * as __webpack_chunk_2__ from "./chunk-4560.js";
 /******/ __nuri_require__.C(__webpack_chunk_2__);
-/******/ import * as __webpack_chunk_3__ from "./chunk-298.js";
+/******/ import * as __webpack_chunk_3__ from "./chunk-2777.js";
 /******/ __nuri_require__.C(__webpack_chunk_3__);
-/******/ import * as __webpack_chunk_4__ from "./chunk-933.js";
+/******/ import * as __webpack_chunk_4__ from "./chunk-7298.js";
 /******/ __nuri_require__.C(__webpack_chunk_4__);
-/******/ import * as __webpack_chunk_5__ from "./chunk-302.js";
+/******/ import * as __webpack_chunk_5__ from "./chunk-8933.js";
 /******/ __nuri_require__.C(__webpack_chunk_5__);
-/******/ import * as __webpack_chunk_6__ from "./chunk-976.js";
+/******/ import * as __webpack_chunk_6__ from "./chunk-6302.js";
 /******/ __nuri_require__.C(__webpack_chunk_6__);
+/******/ import * as __webpack_chunk_7__ from "./chunk-2496.js";
+/******/ __nuri_require__.C(__webpack_chunk_7__);
+/******/ import * as __webpack_chunk_8__ from "./chunk-5226.js";
+/******/ __nuri_require__.C(__webpack_chunk_8__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [364,777,298,933,302,976], () => (__nuri_require__(910)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,2777,7298,8933,6302,2496,5226], () => (__nuri_require__(910)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };