@channel.io/bezier-react 2.2.3 → 2.3.0

package/dist/types/components/Emoji/Emoji.d.ts

@@ -7,7 +7,6 @@ export declare const EMOJI_TEST_ID = "bezier-emoji";
  * ```tsx
  * <Emoji
  *   name="A"
- *   imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/a.png"
  *   size="20"
  * />
  * ```

package/dist/types/components/Emoji/Emoji.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Emoji.d.ts","sourceRoot":"","sources":["../../../../src/components/Emoji/Emoji.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAM7D,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAI/C,eAAO,MAAM,aAAa,iBAAiB,CAAA;AAE3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,mFAoBhB,CAAA"}
+{"version":3,"file":"Emoji.d.ts","sourceRoot":"","sources":["../../../../src/components/Emoji/Emoji.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAO7D,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAI/C,eAAO,MAAM,aAAa,iBAAiB,CAAA;AAM3C;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,mFAwBhB,CAAA"}

package/dist/types/components/Emoji/Emoji.types.d.ts

@@ -1,8 +1,15 @@
 import type { BezierComponentProps, SizeProps } from "../../types/props";
 export type EmojiSize = '16' | '20' | '24' | '30' | '36' | '42' | '48' | '60' | '72' | '90' | '120';
 interface EmojiOwnProps {
+    /**
+     * Name of the emoji. e.g. 'grinning', 'smiley', etc.
+     */
     name: string;
-    imageUrl: string;
+    /**
+     * @deprecated
+     * `imageUrl` is created in the component and will be removed in the next major version.
+     */
+    imageUrl?: string;
 }
 export interface EmojiProps extends BezierComponentProps<'div'>, SizeProps<EmojiSize>, EmojiOwnProps {
 }

package/dist/types/components/Emoji/Emoji.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Emoji.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Emoji/Emoji.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,0BAAyB;AAExE,MAAM,MAAM,SAAS,GACjB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAA;AAET,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,UACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,SAAS,CAAC,SAAS,CAAC,EACpB,aAAa;CAAG"}
+{"version":3,"file":"Emoji.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Emoji/Emoji.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,0BAAyB;AAExE,MAAM,MAAM,SAAS,GACjB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAA;AAET,UAAU,aAAa;IACrB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,UACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,SAAS,CAAC,SAAS,CAAC,EACpB,aAAa;CAAG"}

package/dist/types/components/Toast/Toast.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ToastProps, type ToastProviderProps, type ToastType } from './Toast.types';
 export declare function Toast({ placement, appearance: appearanceProp, preset, icon: iconProp, content, zIndex, autoDismiss, autoDismissTimeout, version, onDismiss, }: ToastProps): React.JSX.Element;
-export declare function ToastProvider({ autoDismissTimeout, container: givenContainer, offset, children, }: ToastProviderProps): React.JSX.Element;
+export declare function ToastProvider({ autoDismissTimeout, container: givenContainer, zIndex, offset, children, }: ToastProviderProps): React.JSX.Element;
 export declare function useToast(): {
     addToast: (content: import("./Toast.types").ToastContent, options?: import("./Toast.types").ToastOptions) => import("./Toast.types").ToastId;
     updateToast: (toastId: import("./Toast.types").ToastId, content: import("./Toast.types").ToastContent, options?: import("./Toast.types").ToastOptions) => import("./Toast.types").ToastId;

package/dist/types/components/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AA2BvE,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACf,MAAM,eAAe,CAAA;AA8BtB,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,UAAU,EAAE,cAAc,EAC1B,MAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,MAAgB,EAChB,WAAkB,EAClB,kBAAkB,EAClB,OAAW,EACX,SAAS,GACV,EAAE,UAAU,qBAmGZ;AAkBD,wBAAgB,aAAa,CAAC,EAC5B,kBAAyB,EACzB,SAAS,EAAE,cAAc,EACzB,MAAuB,EACvB,QAAa,GACd,EAAE,kBAAkB,qBAgDpB;AAED,wBAAgB,QAAQ;;;;;;;EAevB"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AA2BvE,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACf,MAAM,eAAe,CAAA;AA8BtB,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,UAAU,EAAE,cAAc,EAC1B,MAAkB,EAClB,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,MAAgB,EAChB,WAAkB,EAClB,kBAAkB,EAClB,OAAW,EACX,SAAS,GACV,EAAE,UAAU,qBAmGZ;AAkBD,wBAAgB,aAAa,CAAC,EAC5B,kBAAyB,EACzB,SAAS,EAAE,cAAc,EACzB,MAAgB,EAChB,MAAuB,EACvB,QAAa,GACd,EAAE,kBAAkB,qBAmDpB;AAED,wBAAgB,QAAQ;;;;;;;EAevB"}

package/dist/types/components/Toast/Toast.types.d.ts

@@ -10,6 +10,9 @@ interface ToastOwnProps {
     appearance?: ToastAppearance;
     preset?: ToastPreset;
     icon?: BezierIcon;
+    /**
+     * @deprecated Use `zIndex` of `ToastProvider` instead
+     */
     zIndex?: ZIndex;
     autoDismiss?: boolean;
     autoDismissTimeout?: number;
@@ -31,6 +34,11 @@ type Offset = {
 interface ToastProviderOwnProps {
     offset?: Offset;
     container?: HTMLElement | null;
+    /**
+     * z-index level of the Toast container
+     * @default 'toast'
+     */
+    zIndex?: ZIndex;
 }
 export interface ToastProviderProps extends ChildrenProps, Pick<ToastProps, 'autoDismissTimeout'>, ToastProviderOwnProps {
 }

package/dist/types/components/Toast/Toast.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,0BAAyB;AACzE,OAAO,EAAE,KAAK,MAAM,EAAE,2BAA0B;AAEhD,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,cAAc,CAAA;AAE3D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAEtE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEhF,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;AAEvD,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,YAAY,CAAC,EAAE,aAAa;CAAG;AAEhF,KAAK,MAAM,GAAG;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAC/B;AAED,MAAM,WAAW,kBACf,SAAQ,aAAa,EACnB,IAAI,CAAC,UAAU,EAAE,oBAAoB,CAAC,EACtC,qBAAqB;CAAG;AAE5B,MAAM,MAAM,OAAO,GAAG,MAAM,CAAA;AAE5B,MAAM,MAAM,iBAAiB,GAAG,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAA;AAErD,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,UAAU,EACV,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,GAAG,QAAQ,CAC5D,GAAG;IACF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,iBAAiB,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG;IACrC,EAAE,EAAE,OAAO,CAAA;IACX,OAAO,EAAE,YAAY,CAAA;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,OAAO,CAAA;IAC/D,MAAM,EAAE,CACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,YAAY,EACrB,OAAO,CAAC,EAAE,YAAY,KACnB,OAAO,CAAA;IACZ,MAAM,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB,WAAW,EAAE,SAAS,EAAE,CAAA;CACzB"}
+{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,0BAAyB;AACzE,OAAO,EAAE,KAAK,MAAM,EAAE,2BAA0B;AAEhD,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,cAAc,CAAA;AAE3D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAEtE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEhF,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;AAEvD,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,YAAY,CAAC,EAAE,aAAa;CAAG;AAEhF,KAAK,MAAM,GAAG;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,kBACf,SAAQ,aAAa,EACnB,IAAI,CAAC,UAAU,EAAE,oBAAoB,CAAC,EACtC,qBAAqB;CAAG;AAE5B,MAAM,MAAM,OAAO,GAAG,MAAM,CAAA;AAE5B,MAAM,MAAM,iBAAiB,GAAG,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAA;AAErD,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,UAAU,EACV,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,GAAG,QAAQ,CAC5D,GAAG;IACF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,iBAAiB,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG;IACrC,EAAE,EAAE,OAAO,CAAA;IACX,OAAO,EAAE,YAAY,CAAA;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,OAAO,CAAA;IAC/D,MAAM,EAAE,CACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,YAAY,EACrB,OAAO,CAAC,EAAE,YAAY,KACnB,OAAO,CAAA;IACZ,MAAM,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,EAAE,SAAS,EAAE,CAAA;IACvB,WAAW,EAAE,SAAS,EAAE,CAAA;CACzB"}

package/dist/types/components/TokenProvider/TokenProvider.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type TokenContextValue, type TokenProviderProps } from './TokenProvider.types';
-declare const useTokenContext: (consumerName: string) => NonNullable<TokenContextValue | null>;
+declare const useTokenContext: (consumerName: string) => TokenContextValue;
 export { useTokenContext };
 /**
  * @private

package/dist/types/components/TokenProvider/TokenProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenProvider/TokenProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAOtC,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAA;AAE9B,QAAA,MAA6B,eAAe,iEACoB,CAAA;AAEhE,OAAO,EAAE,eAAe,EAAE,CAAA;AAa1B;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,qBAcxE"}
+{"version":3,"file":"TokenProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenProvider/TokenProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAOtC,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAA;AAE9B,QAAA,MAA6B,eAAe,6CACoB,CAAA;AAEhE,OAAO,EAAE,eAAe,EAAE,CAAA;AAa1B;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,qBAcxE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -63,7 +63,7 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@channel.io/bezier-icons": "0.32.0",
+    "@channel.io/bezier-icons": "0.35.0",
     "@chromatic-com/storybook": "^1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
@@ -131,7 +131,7 @@
     }
   },
   "dependencies": {
-    "@channel.io/bezier-tokens": "0.2.6",
+    "@channel.io/bezier-tokens": "0.2.7",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-radio-group": "^1.1.3",

package/src/components/AlphaButton/Button.module.scss

@@ -186,6 +186,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-primary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-dark);
         }
       }
@@ -202,6 +203,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-secondary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lighter);
         }
       }
@@ -214,6 +216,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-tertiary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lightest);
         }
       }

package/src/components/AlphaFloatingButton/FloatingButton.module.scss

@@ -139,6 +139,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-primary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-dark);
         }
       }
@@ -155,6 +156,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-secondary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lighter);
         }
       }

package/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss

@@ -112,6 +112,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-primary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-dark);
         }
       }
@@ -128,6 +129,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-secondary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lighter);
         }
       }

package/src/components/AlphaIconButton/IconButton.module.scss

@@ -167,6 +167,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-primary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-dark);
         }
       }
@@ -183,6 +184,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-secondary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lighter);
         }
       }
@@ -195,6 +197,7 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
     &:where(.variant-tertiary) {
       @each $color in $chromatic-colors {
         &:where(.color-#{'' + $color}) {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color}-lightest);
         }
       }

package/src/components/Banner/Banner.stories.tsx

@@ -4,7 +4,7 @@ import {
   BlockIcon,
   CancelIcon,
   CancelSmallIcon,
-  ChannelIcon,
+  ChannelBtnFilledIcon,
   CheckCircleFilledIcon,
   ErrorTriangleFilledIcon,
   Hourglass3Icon,
@@ -262,7 +262,7 @@ export const UsageLinkTo: StoryObj<{}> = {
   render: () => (
     <Banner
       variant="cobalt"
-      icon={ChannelIcon}
+      icon={ChannelBtnFilledIcon}
       content="채널톡 정말 좋은 서비스에요."
       hasLink
       linkText="사용안내"

package/src/components/Button/Button.module.scss

@@ -81,9 +81,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
         color: var(--bgtxt-absolute-white-dark);
+        /* stylelint-disable-next-line bezier/validate-token */
         background-color: var(--bgtxt-#{$color-variant}-normal);
 
         &#{$active-selector} {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color-variant}-dark);
         }
       }
@@ -112,12 +114,14 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
   &:where(.style-secondary) {
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
+        /* stylelint-disable bezier/validate-token */
         color: var(--bgtxt-#{$color-variant}-normal);
         background-color: var(--bgtxt-#{$color-variant}-lightest);
 
         &#{$active-selector} {
           background-color: var(--bgtxt-#{$color-variant}-lighter);
         }
+        /* stylelint-enable bezier/validate-token */
       }
     }
 
@@ -154,10 +158,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
 
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
+        /* stylelint-disable-next-line bezier/validate-token */
         color: var(--bgtxt-#{$color-variant}-normal);
 
         &#{$active-selector} {
-          color: var(--bgtxt-#{$color-variant}-dark);
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color-variant}-lightest);
         }
       }
@@ -192,9 +197,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
         color: var(--bgtxt-absolute-white-dark);
+        /* stylelint-disable-next-line bezier/validate-token */
         background-color: var(--bgtxt-#{$color-variant}-normal);
 
         &#{$active-selector} {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color-variant}-dark);
         }
       }

package/src/components/Emoji/Emoji.stories.tsx

@@ -3,25 +3,15 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { Emoji } from './Emoji'
 import { type EmojiProps } from './Emoji.types'
 
-const MOCK_EMOJI_URL =
-  'https://cf.exp.channel.io/asset/emoji/images/80/blush.png'
-
-const meta: Meta<typeof Emoji> = {
+const meta = {
   component: Emoji,
-  argTypes: {
-    imageUrl: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-}
+} satisfies Meta<EmojiProps>
 
 export default meta
 
-export const Primary: StoryObj<EmojiProps> = {
+export const Primary = {
   args: {
     size: '24',
-    imageUrl: MOCK_EMOJI_URL,
+    name: 'blush',
   },
-}
+} satisfies StoryObj<typeof meta>

package/src/components/Emoji/Emoji.test.tsx

@@ -5,10 +5,8 @@ import { render } from '~/src/utils/test'
 import { EMOJI_TEST_ID, Emoji } from './Emoji'
 import { type EmojiProps } from './Emoji.types'
 
-const MOCK_EMOJI_URL = 'https://cf.exp.channel.io/asset/emoji/images/80/a.png'
-
 describe('Emoji Test >', () => {
-  const defaultProps: EmojiProps = { imageUrl: MOCK_EMOJI_URL, name: 'a' }
+  const defaultProps: EmojiProps = { size: '24', name: 'a' }
 
   const renderComponent = (props?: Partial<EmojiProps>) =>
     render(

package/src/components/Emoji/Emoji.tsx

@@ -2,6 +2,7 @@ import React, { type CSSProperties, forwardRef } from 'react'
 
 import classNames from 'classnames'
 
+import { isDev } from '~/src/utils/assert'
 import { cssUrl } from '~/src/utils/style'
 
 import { type EmojiProps } from './Emoji.types'
@@ -10,13 +11,16 @@ import styles from './Emoji.module.scss'
 
 export const EMOJI_TEST_ID = 'bezier-emoji'
 
+const getEmojiUrl = (name: EmojiProps['name'], size: '160' | '80' | '44') => {
+  return `https://cf${isDev() ? '.exp' : ''}.channel.io/asset/emoji/images/${size}/${name}.png`
+}
+
 /**
  * `Emoji` is a component for representing emoji with variant size.
  * @example
  * ```tsx
  * <Emoji
  *   name="A"
- *   imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/a.png"
  *   size="20"
  * />
  * ```
@@ -25,6 +29,8 @@ export const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(
   { style, imageUrl, className, name, size = '24', ...rest },
   forwardedRef
 ) {
+  const assetSize = Number(size) >= 60 ? '160' : '80'
+
   return (
     <div
       ref={forwardedRef}
@@ -32,7 +38,9 @@ export const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(
       aria-description={name}
       style={
         {
-          '--b-emoji-background-image': cssUrl(imageUrl),
+          '--b-emoji-background-image': cssUrl(
+            imageUrl ?? getEmojiUrl(name, assetSize)
+          ),
           ...style,
         } as CSSProperties
       }

package/src/components/Emoji/Emoji.types.ts

@@ -14,8 +14,15 @@ export type EmojiSize =
   | '120'
 
 interface EmojiOwnProps {
+  /**
+   * Name of the emoji. e.g. 'grinning', 'smiley', etc.
+   */
   name: string
-  imageUrl: string
+  /**
+   * @deprecated
+   * `imageUrl` is created in the component and will be removed in the next major version.
+   */
+  imageUrl?: string
 }
 
 export interface EmojiProps

package/src/components/Icon/Icon.stories.tsx

@@ -5,7 +5,6 @@ import {
   BookmarkFilledIcon,
   CallInProgressIcon,
   ChannelBtnFilledIcon,
-  ChannelIcon,
   CheckCircleIcon,
   ChevronDownDoubleIcon,
   ChevronRightIcon,
@@ -55,7 +54,7 @@ export default meta
 
 export const Primary: StoryObj<IconProps> = {
   args: {
-    source: ChannelIcon,
+    source: ChannelBtnFilledIcon,
     size: 'm',
     color: 'bg-black-darker',
   },

package/src/components/OutlineItem/OutlineItem.module.scss

@@ -35,9 +35,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
-  width: 16px;
-  height: 100%;
+  margin-right: 6px;
 }
 
 .LeftContent {

package/src/components/OutlineItem/OutlineItem.tsx

@@ -86,7 +86,7 @@ export const OutlineItem = forwardRef<
               <Icon
                 className={styles.Icon}
                 source={open ? ChevronSmallDownIcon : ChevronSmallRightIcon}
-                size="xs"
+                size="s"
                 color="txt-black-dark"
               />
             )}

package/src/components/TextField/TextField.module.scss

@@ -104,6 +104,7 @@
 
 .RightContentWrapper {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   padding-right: 2px;
 }

package/src/components/Toast/Toast.tsx

@@ -82,7 +82,7 @@ export function Toast({
 
   const className = classNames(
     styles.ToastElement,
-    zIndex && getZIndexClassName(zIndex),
+    getZIndexClassName(zIndex),
     placement && styles[`placement-${placement}`],
     isSlidingOut && styles['slide-out']
   )
@@ -193,6 +193,7 @@ const DEFAULT_OFFSET = {
 export function ToastProvider({
   autoDismissTimeout = 3000,
   container: givenContainer,
+  zIndex = 'toast',
   offset = DEFAULT_OFFSET,
   children = [],
 }: ToastProviderProps) {
@@ -213,7 +214,10 @@ export function ToastProvider({
               ? { right: px(offset?.right ?? DEFAULT_OFFSET.right) }
               : { left: px(offset?.left ?? DEFAULT_OFFSET.left) }),
           }}
-          className={styles.ToastContainer}
+          className={classNames(
+            styles.ToastContainer,
+            getZIndexClassName(zIndex)
+          )}
         >
           {toasts.map(({ id, onDismiss, ...rest }) => (
             <Toast
@@ -227,7 +231,7 @@ export function ToastProvider({
         </div>
       </InvertedThemeProvider>
     ),
-    [autoDismissTimeout, dismiss, offset]
+    [autoDismissTimeout, dismiss, offset, zIndex]
   )
 
   return (

package/src/components/Toast/Toast.types.ts

@@ -16,6 +16,9 @@ interface ToastOwnProps {
   appearance?: ToastAppearance
   preset?: ToastPreset
   icon?: BezierIcon
+  /**
+   * @deprecated Use `zIndex` of `ToastProvider` instead
+   */
   zIndex?: ZIndex
   autoDismiss?: boolean
   autoDismissTimeout?: number
@@ -40,6 +43,11 @@ type Offset = {
 interface ToastProviderOwnProps {
   offset?: Offset
   container?: HTMLElement | null
+  /**
+   * z-index level of the Toast container
+   * @default 'toast'
+   */
+  zIndex?: ZIndex
 }
 
 export interface ToastProviderProps

package/src/stories/alpha-color.mdx

@@ -1,5 +1,6 @@
-import { Markdown, Meta } from '@storybook/blocks'
+import { Markdown, Meta, DocsStory } from '@storybook/blocks'
 import { tokens } from '@channel.io/bezier-tokens/alpha'
+import { useLayoutEffect, useState } from 'react'
 
 import {
   LightThemeProvider,
@@ -9,60 +10,72 @@ import { HStack, VStack } from '~/src/components/Stack'
 
 <Meta title="alpha-foundation/Color" />
 
-export const Color = ({ name, value, reference }) => {
-  return (
-    <HStack spacing={20}>
-      <div
-        style={{
-          flex: 1,
-          boxShadow: value,
-          backgroundColor: `var(--${name})`,
-          height: 60,
-        }}
-      />
-      <VStack
+export const Color = ({ isHoveredColor, name, value, reference }) => {
+  const [isHovered, setIsHovered] = useState(false)
+  const color = isHovered ? `var(--${name}-hovered, var(--${name}))` :  `var(--${name})`
+
+return (
+
+<HStack
+  spacing={10}
+  height={80}
+  align="center"
+>
+  <div
+    style={{
+      flex: 1,
+      boxShadow: value,
+      backgroundColor: color,
+      height: '100%',
+    }}
+    onMouseEnter={() => {
+      setIsHovered(true)
+    }}
+    onMouseLeave={() => {
+      setIsHovered(false)
+    }}
+  />
+  <VStack
+    style={{
+      flex: 1,
+      color: 'var(--alpha-color-fg-black-darkest)',
+    }}
+    spacing={4}
+    justify="center"
+  >
+    <span style={{ fontSize: 11 }}>{name}</span>
+    <pre
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+        fontSize: 9,
+        lineHeight: 1,
+        color: 'var(--alpha-color-fg-black-dark)',
+      }}
+    >
+      {isHoveredColor ? '' : reference ? 'var' : ''}
+      <pre
         style={{
-          flex: 1,
-          color: 'var(--alpha-color-fg-black-darkest)',
+          display: 'inline-flex',
+          fontSize: 'inherit',
+          lineHeight: 'inherit',
+          padding: '1px 2px',
+          backgroundColor: 'var(--alpha-color-bg-grey-lighter)',
+          borderRadius: 3,
+          border: '1px solid var(--alpha-color-bg-black-lightest)',
         }}
-        spacing={4}
-        justify="center"
       >
-        <span style={{ fontSize: 11 }}>{name}</span>
-        <pre
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 3,
-            fontSize: 9,
-            lineHeight: 1,
-            color: 'var(--alpha-color-fg-black-dark)',
-          }}
-        >
-          {reference ? 'var' : ''}
-          <pre
-            style={{
-              display: 'inline-flex',
-              fontSize: 'inherit',
-              lineHeight: 'inherit',
-              padding: '1px 2px',
-              backgroundColor: 'var(--alpha-color-bg-grey-lighter)',
-              borderRadius: 3,
-              border: '1px solid var(--alpha-color-bg-black-lightest)',
-            }}
-          >
-            {reference ? reference : value}
-          </pre>
-        </pre>
-      </VStack>
-    </HStack>
-  )
-}
+        {isHoveredColor ? value : reference ? reference : value}
+      </pre>
+    </pre>
+  </VStack>
+</HStack>
+)}
 
 export const Primary = () => (
   <HStack>
-
-    <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={20}>
+    <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}>
       {Object.entries(tokens.global.color).map(([key, { value, ref }]) => (
         <Color
           key={key}
@@ -74,7 +87,7 @@ export const Primary = () => (
     </VStack>
 
     <LightThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={20}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}>
         {Object.entries(tokens.lightTheme.color).map(([key, { value, ref }]) => (
           <Color
             key={key}
@@ -87,7 +100,7 @@ export const Primary = () => (
     </LightThemeProvider>
 
     <DarkThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={20}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}>
         {Object.entries(tokens.darkTheme.color).map(([key, { value, ref }]) => (
           <Color
             key={key}

package/src/styles/components/elevation.module.scss

@@ -2,6 +2,7 @@ $elevations: 1, 2, 3, 4, 5, 6;
 
 @each $ev in $elevations {
   :where(.elevation-#{$ev}) {
+    /* stylelint-disable-next-line bezier/validate-token */
     box-shadow: var(--ev-#{$ev});
   }
 }