@cleartrip/ct-design-single-select-chip 4.0.0 → 5.0.0

package/README.md

@@ -0,0 +1,69 @@
+# SingleSelectChip
+
+A chip component for single selection scenarios.
+
+---
+
+## Installation
+
+```bash
+npm install @cleartrip/ct-design-single-select-chip
+# or
+pnpm add @cleartrip/ct-design-single-select-chip
+```
+
+### Peer dependencies
+
+```bash
+# Required for all targets
+npm install react
+
+# Web only
+npm install react-dom
+
+# React Native only
+npm install react-native
+```
+
+---
+
+## Usage
+
+### Basic
+
+```tsx
+import { SingleSelectChip } from '@cleartrip/ct-design-single-select-chip';
+
+function Example() {
+  return (
+    <SingleSelectChip>
+      {/* Basic usage */}
+    </SingleSelectChip>
+  );
+}
+```
+
+---
+
+## ChipOrientation
+
+- `row` — row
+- `column` — column
+---
+
+## Accessibility
+
+- The component follows accessibility best practices
+- Ensure proper ARIA attributes are provided where needed
+- Test with screen readers to ensure usability
+
+---
+
+## Migration
+
+If migrating from a previous version:
+
+```diff
+- import { SingleSelectChip } from 'yagami/core/components';
++ import { SingleSelectChip } from '@cleartrip/ct-design-single-select-chip';
+```

package/dist/SingleSelectChip.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { ForwardRefComponentWithStyle } from '@cleartrip/ct-design-types';
+import React from 'react';
+import { ContainerRef } from '@cleartrip/ct-design-container';
 import { ISingleSelectProps } from './type';
-type PolymorphicSingleSelectChip = ForwardRefComponentWithStyle<'div', ISingleSelectProps>;
-declare const _default: import("react").MemoExoticComponent<PolymorphicSingleSelectChip>;
+declare const _default: React.NamedExoticComponent<ISingleSelectProps & React.RefAttributes<ContainerRef>>;
 export default _default;
 //# sourceMappingURL=SingleSelectChip.d.ts.map

package/dist/SingleSelectChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectChip.d.ts","sourceRoot":"","sources":["../packages/components/SingleSelectChip/src/SingleSelectChip.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAG1E,OAAO,EAAoC,kBAAkB,EAA2B,MAAM,QAAQ,CAAC;AAMvG,KAAK,2BAA2B,GAAG,4BAA4B,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC;;AAmG3F,wBAAsC"}
+{"version":3,"file":"SingleSelectChip.d.ts","sourceRoot":"","sources":["../packages/components/SingleSelectChip/src/SingleSelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAa,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAKzE,OAAO,EAAE,kBAAkB,EAAmB,MAAM,QAAQ,CAAC;;AA+H7D,wBAAsC"}

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+export declare enum ChipOrientation {
+    row = "row",
+    column = "column"
+}
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../packages/components/SingleSelectChip/src/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB"}

package/dist/ct-design-single-select-chip.browser.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("tslib"),i=require("react/jsx-runtime"),r=require("react"),n=require("styled-components"),s=require("@cleartrip/ct-design-chip"),t=require("@cleartrip/ct-design-use-isomorphic-effect"),o=require("@cleartrip/ct-design-theme"),a=require("@cleartrip/ct-design-container"),c=require("@cleartrip/ct-design-typography"),l=require("@cleartrip/ct-design-box");function p(e){return e&&e.__esModule?e:{default:e}}var u,d=p(n),g=p(t);exports.ChipOrientation=void 0,(u=exports.ChipOrientation||(exports.ChipOrientation={})).row="row",u.column="column";var h=d.default.div((function(i){var r=i.theme,n=i.css,s=e.__rest(i,["theme","css"]);return function(i){var r=i.theme,n=i.css,s=i.orientation===exports.ChipOrientation.row;return e.__assign({display:"flex",position:"relative",alignItems:"center",width:"fit-content",flexDirection:s?"row":"column",borderRadius:r.border.radius[8],flexWrap:"wrap",userSelect:"none",rowGap:12,columnGap:12},n)}(e.__assign({theme:r,css:n},s))})),m=r.forwardRef((function(n,t){var p=n.onChange,u=n.data,d=n.orientation,m=void 0===d?exports.ChipOrientation.row:d,f=n.selected,_=void 0===f?null:f,v=n.css,x=n.prompt,C=n.styleConfig,y=void 0===C?{}:C,w=e.__rest(n,["onChange","data","orientation","selected","css","prompt","styleConfig"]),q=x||{},j=q.hasError,N=void 0!==j&&j,S=q.Icon,b=q.message,I=o.useTheme(),O=y.chip,z=y.chipContainer,T=y.promptBox,B=y.promptIconContainer,R=y.promptMessageTypography,G=y.root,M=r.useState(_),k=M[0],D=M[1];g.default((function(){_!==k&&D(_)}),[_]);var E=function(e){return function(){var i=(null!=e?e:{}).id;k!==i&&(D(i),p&&p(i))}};return i.jsxs(a.Container,e.__assign({},G,{children:[i.jsx(h,e.__assign({},w,{ref:t,theme:I,className:null==z?void 0:z.className,css:(null==z?void 0:z.css)||v,orientation:m},{children:u.map((function(r){var n=(null==r?void 0:r.id)===k;return i.jsx(s.Chip,e.__assign({},r,{onClick:E(r),isSelected:n,styleConfig:O}),null==r?void 0:r.id)}))})),(S||b)&&i.jsxs(l.Box,e.__assign({boxSize:"pico",horizontal:!0,className:null==T?void 0:T.className,css:e.__assign({marginTop:I.spacing[2],marginLeft:I.spacing[3],display:"flex",alignItems:"center"},null==T?void 0:T.css)},{children:[S&&i.jsx(a.Container,e.__assign({className:null==B?void 0:B.className,css:e.__assign({height:I.size[4],width:I.size[4],paddingRight:I.spacing[1],display:"flex",justifyContent:"center",alignItems:"center"},null==B?void 0:B.css)},{children:S})),b&&i.jsx(c.Typography,e.__assign({variant:"B3",color:N?"warning":"success",styleConfig:R},{children:b}))]}))]}))})),f=r.memo(m);exports.SingleSelectChip=f;
+"use strict";var e=require("react/jsx-runtime"),i=require("react"),r=require("@cleartrip/ct-design-chip"),t=require("@cleartrip/ct-design-box"),o=require("@cleartrip/ct-design-container"),n=require("@cleartrip/ct-design-typography"),l=require("@cleartrip/ct-design-style-manager");function a(e){return e&&e.__esModule?e:{default:e}}var s,p=a(require("@cleartrip/ct-design-use-isomorphic-effect"));exports.ChipOrientation=void 0,(s=exports.ChipOrientation||(exports.ChipOrientation={})).row="row",s.column="column";const c=l.makeStyles(e=>({chipWrapper:{display:"flex",position:"relative",alignItems:"center",flexWrap:"wrap",borderRadius:e.border.radius[8],alignSelf:"flex-start",rowGap:e.spacing[3],columnGap:e.spacing[3]},promptBoxStyles:{display:"flex",alignItems:"center",marginTop:e.spacing[2],marginLeft:e.spacing[3]},promptIconStyles:{display:"flex",justifyContent:"center",alignItems:"center",height:e.size[4],width:e.size[4],paddingRight:e.spacing[1]},chipLabelStyles:{paddingVertical:0,paddingHorizontal:4},chipRootStyles:{borderRadius:30,paddingVertical:e.spacing[1.5],paddingHorizontal:e.spacing[2],borderWidth:0},chipBoxShadow:{shadowColor:"rgb(231, 231, 231)",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:1,elevation:1,borderWidth:1}})),d=i.memo(({data:i,selectedChip:t,onClickCb:o,chipStyleConfig:n})=>e.jsx(e.Fragment,{children:i.map(i=>{const l=(null==i?void 0:i.id)===t;return e.jsx(r.Chip,{id:null==i?void 0:i.id,label:null==i?void 0:i.label,onClick:o(i),size:"sm",isSelected:l,styleConfig:Object.assign({labelContainer:[c.chipLabelStyles],root:[c.chipRootStyles,c.chipBoxShadow]},n||{})},null==i?void 0:i.id)})}));d.displayName="ChipAtoms";const h=i.forwardRef(({onChange:r,data:a,orientation:s=exports.ChipOrientation.row,selected:h=null,prompt:g,styleConfig:u={}},C)=>{const{hasError:y=!1,Icon:m,message:x}=g||{},{root:f=[],chipContainer:S=[],promptBox:w=[],promptIconContainer:b=[],promptMessageTypography:j,chip:v}=u,[q,O]=i.useState(null!=h?h:null);p.default(()=>{(null!=h?h:null)!==q&&O(null!=h?h:null)},[h]);const z=l.useStyles(()=>({chipWrapper:{flexDirection:s===exports.ChipOrientation.row?"row":"column"}}),[s]);return e.jsxs(o.Container,{ref:C,styleConfig:{root:[...f||[]]},children:[e.jsx(o.Container,{styleConfig:{root:[c.chipWrapper,z.chipWrapper,...S]},children:e.jsx(d,{data:a,selectedChip:q,onClickCb:e=>()=>{const{id:i}=null!=e?e:{};q!==i&&(O(i),null==r||r(i))},chipStyleConfig:v})}),(m||x)&&e.jsxs(t.Box,{boxSize:"pico",horizontal:!0,styleConfig:{root:[c.promptBoxStyles,...w||[]]},children:[m&&e.jsx(o.Container,{styleConfig:{root:[c.promptIconStyles,...b]},children:m}),x&&e.jsx(n.Typography,{variant:"B3",color:y?"warning":"success",styleConfig:j,children:x})]})]})});h.displayName="SingleSelectChip";var g=i.memo(h);exports.SingleSelectChip=g;
 //# sourceMappingURL=ct-design-single-select-chip.browser.cjs.js.map

package/dist/ct-design-single-select-chip.browser.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-single-select-chip.browser.cjs.js","sources":["../packages/components/SingleSelectChip/src/type.ts","../packages/components/SingleSelectChip/src/SingleSelectChip.tsx","../packages/components/SingleSelectChip/src/style.ts"],"sourcesContent":[null,null,null],"names":["ChipOrientation","StyledSingleSelectChip","styled","default","div","_a","theme","css","rest","__rest","isRow","orientation","row","__assign","display","position","alignItems","width","flexDirection","borderRadius","border","radius","flexWrap","userSelect","rowGap","columnGap","getSingleSelectChipStyles","SingleSelectChip","forwardRef","props","forwardedRef","onChange","data","_b","selected","prompt","_c","styleConfig","_d","_e","hasError","promptIcon","promptMessage","useTheme","chip","chipContainer","promptBox","promptIconContainer","promptMessageTypography","root","_f","useState","selectedChip","setSelectedChip","useIsomorphicEffect","onClickCb","id","_jsxs","Container","children","_jsx","ref","className","map","item","isSelected","Chip","onClick","jsxs","Box","boxSize","horizontal","marginTop","spacing","marginLeft","height","size","paddingRight","justifyContent","jsx","Typography","variant","color","memo"],"mappings":"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"}
+{"version":3,"file":"ct-design-single-select-chip.browser.cjs.js","sources":["../packages/components/SingleSelectChip/src/constants.ts","../packages/components/SingleSelectChip/src/style.ts","../packages/components/SingleSelectChip/src/SingleSelectChip.tsx"],"sourcesContent":[null,null,null],"names":["ChipOrientation","singleSelectChipStaticStyles","makeStyles","theme","chipWrapper","display","position","alignItems","flexWrap","borderRadius","border","radius","alignSelf","rowGap","spacing","columnGap","promptBoxStyles","marginTop","marginLeft","promptIconStyles","justifyContent","height","size","width","paddingRight","chipLabelStyles","paddingVertical","paddingHorizontal","chipRootStyles","borderWidth","chipBoxShadow","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","ChipAtoms","memo","data","selectedChip","onClickCb","chipStyleConfig","_jsx","map","item","isSelected","id","Chip","label","onClick","styleConfig","labelContainer","root","displayName","SingleSelectChip","forwardRef","onChange","orientation","row","selected","prompt","ref","hasError","Icon","promptIcon","message","promptMessage","customRootStyles","chipContainer","chipContainerStyles","promptBox","promptIconContainer","promptIconContainerStyles","promptMessageTypography","promptMessageTypographyStyles","chip","setSelectedChip","useState","useIsomorphicEffect","dynamicStyles","useStyles","flexDirection","_jsxs","Container","children","Box","boxSize","horizontal","Typography","variant","color"],"mappings":"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"}

package/dist/ct-design-single-select-chip.browser.esm.js

@@ -1,2 +1,2 @@
-import{__assign as e,__rest as i}from"tslib";import{jsxs as r,jsx as o}from"react/jsx-runtime";import{forwardRef as t,useState as n,memo as s}from"react";import c from"styled-components";import{Chip as a}from"@cleartrip/ct-design-chip";import l from"@cleartrip/ct-design-use-isomorphic-effect";import{useTheme as p}from"@cleartrip/ct-design-theme";import{Container as m}from"@cleartrip/ct-design-container";import{Typography as d}from"@cleartrip/ct-design-typography";import{Box as u}from"@cleartrip/ct-design-box";var f;!function(e){e.row="row",e.column="column"}(f||(f={}));var g=c.div((function(r){var o=r.theme,t=r.css,n=i(r,["theme","css"]);return function(i){var r=i.theme,o=i.css,t=i.orientation===f.row;return e({display:"flex",position:"relative",alignItems:"center",width:"fit-content",flexDirection:t?"row":"column",borderRadius:r.border.radius[8],flexWrap:"wrap",userSelect:"none",rowGap:12,columnGap:12},o)}(e({theme:o,css:t},n))})),h=s(t((function(t,s){var c=t.onChange,h=t.data,v=t.orientation,y=void 0===v?f.row:v,C=t.selected,w=void 0===C?null:C,x=t.css,N=t.prompt,b=t.styleConfig,I=void 0===b?{}:b,S=i(t,["onChange","data","orientation","selected","css","prompt","styleConfig"]),z=N||{},j=z.hasError,B=void 0!==j&&j,G=z.Icon,R=z.message,T=p(),k=I.chip,D=I.chipContainer,E=I.promptBox,L=I.promptIconContainer,M=I.promptMessageTypography,W=I.root,q=n(w),A=q[0],F=q[1];l((function(){w!==A&&F(w)}),[w]);var H=function(e){return function(){var i=(null!=e?e:{}).id;A!==i&&(F(i),c&&c(i))}};return r(m,e({},W,{children:[o(g,e({},S,{ref:s,theme:T,className:null==D?void 0:D.className,css:(null==D?void 0:D.css)||x,orientation:y},{children:h.map((function(i){var r=(null==i?void 0:i.id)===A;return o(a,e({},i,{onClick:H(i),isSelected:r,styleConfig:k}),null==i?void 0:i.id)}))})),(G||R)&&r(u,e({boxSize:"pico",horizontal:!0,className:null==E?void 0:E.className,css:e({marginTop:T.spacing[2],marginLeft:T.spacing[3],display:"flex",alignItems:"center"},null==E?void 0:E.css)},{children:[G&&o(m,e({className:null==L?void 0:L.className,css:e({height:T.size[4],width:T.size[4],paddingRight:T.spacing[1],display:"flex",justifyContent:"center",alignItems:"center"},null==L?void 0:L.css)},{children:G})),R&&o(d,e({variant:"B3",color:B?"warning":"success",styleConfig:M},{children:R}))]}))]}))})));export{f as ChipOrientation,h as SingleSelectChip};
+import{jsx as i,Fragment as e,jsxs as o}from"react/jsx-runtime";import{memo as t,forwardRef as r,useState as n}from"react";import{Chip as l}from"@cleartrip/ct-design-chip";import{Box as a}from"@cleartrip/ct-design-box";import{Container as p}from"@cleartrip/ct-design-container";import{Typography as c}from"@cleartrip/ct-design-typography";import{makeStyles as s,useStyles as d}from"@cleartrip/ct-design-style-manager";import g from"@cleartrip/ct-design-use-isomorphic-effect";var h;!function(i){i.row="row",i.column="column"}(h||(h={}));const m=s(i=>({chipWrapper:{display:"flex",position:"relative",alignItems:"center",flexWrap:"wrap",borderRadius:i.border.radius[8],alignSelf:"flex-start",rowGap:i.spacing[3],columnGap:i.spacing[3]},promptBoxStyles:{display:"flex",alignItems:"center",marginTop:i.spacing[2],marginLeft:i.spacing[3]},promptIconStyles:{display:"flex",justifyContent:"center",alignItems:"center",height:i.size[4],width:i.size[4],paddingRight:i.spacing[1]},chipLabelStyles:{paddingVertical:0,paddingHorizontal:4},chipRootStyles:{borderRadius:30,paddingVertical:i.spacing[1.5],paddingHorizontal:i.spacing[2],borderWidth:0},chipBoxShadow:{shadowColor:"rgb(231, 231, 231)",shadowOffset:{width:0,height:0},shadowOpacity:1,shadowRadius:1,elevation:1,borderWidth:1}})),f=t(({data:o,selectedChip:t,onClickCb:r,chipStyleConfig:n})=>i(e,{children:o.map(e=>{const o=(null==e?void 0:e.id)===t;return i(l,{id:null==e?void 0:e.id,label:null==e?void 0:e.label,onClick:r(e),size:"sm",isSelected:o,styleConfig:Object.assign({labelContainer:[m.chipLabelStyles],root:[m.chipRootStyles,m.chipBoxShadow]},n||{})},null==e?void 0:e.id)})}));f.displayName="ChipAtoms";const y=r(({onChange:e,data:t,orientation:r=h.row,selected:l=null,prompt:s,styleConfig:y={}},u)=>{const{hasError:C=!1,Icon:S,message:b}=s||{},{root:w=[],chipContainer:x=[],promptBox:v=[],promptIconContainer:z=[],promptMessageTypography:I,chip:W}=y,[B,R]=n(null!=l?l:null);g(()=>{(null!=l?l:null)!==B&&R(null!=l?l:null)},[l]);const j=d(()=>({chipWrapper:{flexDirection:r===h.row?"row":"column"}}),[r]);return o(p,{ref:u,styleConfig:{root:[...w||[]]},children:[i(p,{styleConfig:{root:[m.chipWrapper,j.chipWrapper,...x]},children:i(f,{data:t,selectedChip:B,onClickCb:i=>()=>{const{id:o}=null!=i?i:{};B!==o&&(R(o),null==e||e(o))},chipStyleConfig:W})}),(S||b)&&o(a,{boxSize:"pico",horizontal:!0,styleConfig:{root:[m.promptBoxStyles,...v||[]]},children:[S&&i(p,{styleConfig:{root:[m.promptIconStyles,...z]},children:S}),b&&i(c,{variant:"B3",color:C?"warning":"success",styleConfig:I,children:b})]})]})});y.displayName="SingleSelectChip";var u=t(y);export{h as ChipOrientation,u as SingleSelectChip};
 //# sourceMappingURL=ct-design-single-select-chip.browser.esm.js.map

package/dist/ct-design-single-select-chip.browser.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-single-select-chip.browser.esm.js","sources":["../packages/components/SingleSelectChip/src/type.ts","../packages/components/SingleSelectChip/src/SingleSelectChip.tsx","../packages/components/SingleSelectChip/src/style.ts"],"sourcesContent":[null,null,null],"names":["ChipOrientation","StyledSingleSelectChip","styled","div","_a","theme","css","rest","__rest","isRow","orientation","row","__assign","display","position","alignItems","width","flexDirection","borderRadius","border","radius","flexWrap","userSelect","rowGap","columnGap","getSingleSelectChipStyles","SingleSelectChip$1","memo","forwardRef","props","forwardedRef","onChange","data","_b","selected","prompt","_c","styleConfig","_d","_e","hasError","promptIcon","promptMessage","useTheme","chip","chipContainer","promptBox","promptIconContainer","promptMessageTypography","root","_f","useState","selectedChip","setSelectedChip","useIsomorphicEffect","onClickCb","id","_jsxs","Container","children","_jsx","ref","className","map","item","isSelected","Chip","onClick","Box","boxSize","horizontal","marginTop","spacing","marginLeft","height","size","paddingRight","justifyContent","Typography","variant","color"],"mappings":"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"}
+{"version":3,"file":"ct-design-single-select-chip.browser.esm.js","sources":["../packages/components/SingleSelectChip/src/constants.ts","../packages/components/SingleSelectChip/src/style.ts","../packages/components/SingleSelectChip/src/SingleSelectChip.tsx"],"sourcesContent":[null,null,null],"names":["ChipOrientation","singleSelectChipStaticStyles","makeStyles","theme","chipWrapper","display","position","alignItems","flexWrap","borderRadius","border","radius","alignSelf","rowGap","spacing","columnGap","promptBoxStyles","marginTop","marginLeft","promptIconStyles","justifyContent","height","size","width","paddingRight","chipLabelStyles","paddingVertical","paddingHorizontal","chipRootStyles","borderWidth","chipBoxShadow","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","ChipAtoms","memo","data","selectedChip","onClickCb","chipStyleConfig","_jsx","map","item","isSelected","id","Chip","label","onClick","styleConfig","labelContainer","root","displayName","SingleSelectChip","forwardRef","onChange","orientation","row","selected","prompt","ref","hasError","Icon","promptIcon","message","promptMessage","customRootStyles","chipContainer","chipContainerStyles","promptBox","promptIconContainer","promptIconContainerStyles","promptMessageTypography","promptMessageTypographyStyles","chip","setSelectedChip","useState","useIsomorphicEffect","dynamicStyles","useStyles","flexDirection","_jsxs","Container","children","Box","boxSize","horizontal","Typography","variant","color","SingleSelectChip$1"],"mappings":"geAAYA,GAAZ,SAAYA,GACVA,EAAA,IAAA,MACAA,EAAA,OAAA,QACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,ICDM,MAAMC,EAA+BC,EAAYC,IAC/C,CACLC,YAAa,CACXC,QAAS,OACTC,SAAU,WACVC,WAAY,SACZC,SAAU,OACVC,aAAcN,EAAMO,OAAOC,OAAO,GAClCC,UAAW,aACXC,OAAQV,EAAMW,QAAQ,GACtBC,UAAWZ,EAAMW,QAAQ,IAE3BE,gBAAiB,CACfX,QAAS,OACTE,WAAY,SACZU,UAAWd,EAAMW,QAAQ,GACzBI,WAAYf,EAAMW,QAAQ,IAE5BK,iBAAkB,CAChBd,QAAS,OACTe,eAAgB,SAChBb,WAAY,SACZc,OAAQlB,EAAMmB,KAAK,GACnBC,MAAOpB,EAAMmB,KAAK,GAClBE,aAAcrB,EAAMW,QAAQ,IAE9BW,gBAAiB,CACfC,gBAAiB,EACjBC,kBAAmB,GAErBC,eAAgB,CACdnB,aAAc,GACdiB,gBAAiBvB,EAAMW,QAAQ,KAC/Ba,kBAAmBxB,EAAMW,QAAQ,GACjCe,YAAa,GAEfC,cAAe,CACbC,YAAa,qBACbC,aAAc,CAAET,MAAO,EAAGF,OAAQ,GAClCY,cAAe,EACfC,aAAc,EACdC,UAAW,EACXN,YAAa,MCpBbO,EAAYC,EAAK,EAAGC,OAAMC,eAAcC,YAAWC,qBAErDC,cACGJ,EAAKK,IAAKC,IACT,MAAMC,GAAaD,aAAA,EAAAA,EAAME,MAAOP,EAEhC,OACEG,EAACK,EAEC,CAAAD,GAAIF,aAAI,EAAJA,EAAME,GACVE,MAAOJ,aAAI,EAAJA,EAAMI,MACbC,QAAST,EAAUI,GACnBtB,KAAK,KACLuB,WAAYA,EACZK,2BACEC,eAAgB,CAAClD,EAA6BwB,iBAC9C2B,KAAM,CAACnD,EAA6B2B,eAAgB3B,EAA6B6B,gBAC7EW,GAAmB,CAAA,IATpBG,eAAAA,EAAME,SAkBvBV,EAAUiB,YAAc,YAExB,MAAMC,EAAmBC,EACvB,EAAGC,WAAUlB,OAAMmB,cAAczD,EAAgB0D,IAAKC,WAAW,KAAMC,SAAQV,cAAc,CAAE,GAAIW,KACjG,MAAMC,SAAEA,GAAW,EAAOC,KAAMC,EAAYC,QAASC,GAAkBN,GAAU,IAG/ER,KAAMe,EAAmB,GACzBC,cAAeC,EAAsB,GACrCC,UAAWtD,EAAkB,GAC7BuD,oBAAqBC,EAA4B,GACjDC,wBAAyBC,EACzBC,KAAMlC,GACJS,GAEGX,EAAcqC,GAAmBC,EAAwBlB,QAAAA,EAAY,MAE5EmB,EAAoB,MACbnB,QAAAA,EAAY,QAAUpB,GACzBqC,EAAgBjB,QAAAA,EAAY,OAE7B,CAACA,IAEJ,MASMoB,EAAgBC,EACpB,KAAO,CACL5E,YAAa,CACX6E,cAAexB,IAAgBzD,EAAgB0D,IAAM,MAAQ,YAGjE,CAACD,IAGH,OACEyB,EAACC,EAAU,CAAAtB,IAAKA,EAAKX,YAAa,CAAEE,KAAM,IAAKe,GAAoB,KAAMiB,SAAA,CACvE1C,EAACyC,EACC,CAAAjC,YAAa,CACXE,KAAM,CAACnD,EAA6BG,YAAa2E,EAAc3E,eAAgBiE,IAChFe,SAED1C,EAACN,EAAS,CAACE,KAAMA,EAAMC,aAAcA,EAAcC,UAzBtCmC,GAA0B,KAC3C,MAAM7B,GAAEA,GAAO6B,QAAAA,EAAQ,GAEnBpC,IAAiBO,IACnB8B,EAAgB9B,GAChBU,SAAAA,EAAWV,KAoBgEL,gBAAiBA,OAG1FuB,GAAcE,IACdgB,EAACG,EAAG,CACFC,QAAQ,OACRC,YAAU,EACVrC,YAAa,CACXE,KAAM,CAACnD,EAA6Be,mBAAqBA,GAAmB,KAC7EoE,SAAA,CAEApB,GACCtB,EAACyC,EAAS,CACRjC,YAAa,CACXE,KAAM,CAACnD,EAA6BkB,oBAAqBqD,IAC1DY,SAEApB,IAGJE,GACCxB,EAAC8C,EAAU,CACTC,QAAQ,KACRC,MAAO5B,EAAW,UAAY,UAC9BZ,YAAawB,EAA6BU,SAEzClB,YAUjBZ,EAAiBD,YAAc,mBAE/B,IAAesC,EAAAtD,EAAKiB"}

package/dist/ct-design-single-select-chip.cjs.js

@@ -1,19 +1,16 @@
 'use strict';
 
-var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var styled = require('styled-components');
 var ctDesignChip = require('@cleartrip/ct-design-chip');
-var useIsomorphicEffect = require('@cleartrip/ct-design-use-isomorphic-effect');
-var ctDesignTheme = require('@cleartrip/ct-design-theme');
+var ctDesignBox = require('@cleartrip/ct-design-box');
 var ctDesignContainer = require('@cleartrip/ct-design-container');
 var ctDesignTypography = require('@cleartrip/ct-design-typography');
-var ctDesignBox = require('@cleartrip/ct-design-box');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
+var useIsomorphicEffect = require('@cleartrip/ct-design-use-isomorphic-effect');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefault(styled);
 var useIsomorphicEffect__default = /*#__PURE__*/_interopDefault(useIsomorphicEffect);
 
 exports.ChipOrientation = void 0;
@@ -22,42 +19,90 @@ exports.ChipOrientation = void 0;
     ChipOrientation["column"] = "column";
 })(exports.ChipOrientation || (exports.ChipOrientation = {}));
 
-function getSingleSelectChipStyles(_a) {
-    var theme = _a.theme, css = _a.css, orientation = _a.orientation;
-    var isRow = orientation === exports.ChipOrientation.row;
-    return tslib.__assign({ display: 'flex', position: 'relative', alignItems: 'center', width: 'fit-content', flexDirection: isRow ? 'row' : 'column', borderRadius: theme.border.radius[8], flexWrap: 'wrap', userSelect: 'none', rowGap: 12, columnGap: 12 }, css);
-}
+const singleSelectChipStaticStyles = ctDesignStyleManager.makeStyles((theme) => {
+    return {
+        chipWrapper: {
+            display: 'flex',
+            position: 'relative',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            borderRadius: theme.border.radius[8],
+            alignSelf: 'flex-start',
+            rowGap: theme.spacing[3],
+            columnGap: theme.spacing[3],
+        },
+        promptBoxStyles: {
+            display: 'flex',
+            alignItems: 'center',
+            marginTop: theme.spacing[2],
+            marginLeft: theme.spacing[3],
+        },
+        promptIconStyles: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: theme.size[4],
+            width: theme.size[4],
+            paddingRight: theme.spacing[1],
+        },
+        chipLabelStyles: {
+            paddingVertical: 0,
+            paddingHorizontal: 4,
+        },
+        chipRootStyles: {
+            borderRadius: 30,
+            paddingVertical: theme.spacing['1.5'],
+            paddingHorizontal: theme.spacing[2],
+            borderWidth: 0,
+        },
+        chipBoxShadow: {
+            shadowColor: 'rgb(231, 231, 231)',
+            shadowOffset: { width: 0, height: 0 },
+            shadowOpacity: 1,
+            shadowRadius: 1,
+            elevation: 1,
+            borderWidth: 1,
+        },
+    };
+});
 
-var StyledSingleSelectChip = styled__default.default.div(function (_a) {
-    var theme = _a.theme, css = _a.css, rest = tslib.__rest(_a, ["theme", "css"]);
-    return getSingleSelectChipStyles(tslib.__assign({ theme: theme, css: css }, rest));
+const ChipAtoms = react.memo(({ data, selectedChip, onClickCb, chipStyleConfig }) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: data.map((item) => {
+            const isSelected = (item === null || item === void 0 ? void 0 : item.id) === selectedChip;
+            return (jsxRuntime.jsx(ctDesignChip.Chip, { id: item === null || item === void 0 ? void 0 : item.id, label: item === null || item === void 0 ? void 0 : item.label, onClick: onClickCb(item), size: 'sm', isSelected: isSelected, styleConfig: Object.assign({ labelContainer: [singleSelectChipStaticStyles.chipLabelStyles], root: [singleSelectChipStaticStyles.chipRootStyles, singleSelectChipStaticStyles.chipBoxShadow] }, (chipStyleConfig || {})) }, item === null || item === void 0 ? void 0 : item.id));
+        }) }));
 });
-var SingleSelectChip = react.forwardRef(function (props, forwardedRef) {
-    var onChange = props.onChange, data = props.data, _a = props.orientation, orientation = _a === void 0 ? exports.ChipOrientation.row : _a, _b = props.selected, selected = _b === void 0 ? null : _b, css = props.css, prompt = props.prompt, _c = props.styleConfig, styleConfig = _c === void 0 ? {} : _c, rest = tslib.__rest(props, ["onChange", "data", "orientation", "selected", "css", "prompt", "styleConfig"]);
-    var _d = prompt || {}, _e = _d.hasError, hasError = _e === void 0 ? false : _e, promptIcon = _d.Icon, promptMessage = _d.message;
-    var theme = ctDesignTheme.useTheme();
-    var chip = styleConfig.chip, chipContainer = styleConfig.chipContainer, promptBox = styleConfig.promptBox, promptIconContainer = styleConfig.promptIconContainer, promptMessageTypography = styleConfig.promptMessageTypography, root = styleConfig.root;
-    var _f = react.useState(selected), selectedChip = _f[0], setSelectedChip = _f[1];
-    useIsomorphicEffect__default.default(function () {
-        if (selected !== selectedChip) {
-            setSelectedChip(selected);
+ChipAtoms.displayName = 'ChipAtoms';
+const SingleSelectChip = react.forwardRef(({ onChange, data, orientation = exports.ChipOrientation.row, selected = null, prompt, styleConfig = {} }, ref) => {
+    const { hasError = false, Icon: promptIcon, message: promptMessage } = prompt || {};
+    const { root: customRootStyles = [], chipContainer: chipContainerStyles = [], promptBox: promptBoxStyles = [], promptIconContainer: promptIconContainerStyles = [], promptMessageTypography: promptMessageTypographyStyles, chip: chipStyleConfig, } = styleConfig;
+    const [selectedChip, setSelectedChip] = react.useState(selected !== null && selected !== void 0 ? selected : null);
+    useIsomorphicEffect__default.default(() => {
+        if ((selected !== null && selected !== void 0 ? selected : null) !== selectedChip) {
+            setSelectedChip(selected !== null && selected !== void 0 ? selected : null);
         }
     }, [selected]);
-    var onClickCb = function (chip) { return function () {
-        var id = (chip !== null && chip !== void 0 ? chip : {}).id;
+    const onClickCb = (chip) => () => {
+        const { id } = chip !== null && chip !== void 0 ? chip : {};
         if (selectedChip !== id) {
             setSelectedChip(id);
-            onChange && onChange(id);
+            onChange === null || onChange === void 0 ? void 0 : onChange(id);
         }
-    }; };
-    var renderChipAtoms = function () {
-        return data.map(function (item) {
-            var isSelected = (item === null || item === void 0 ? void 0 : item.id) === selectedChip;
-            return jsxRuntime.jsx(ctDesignChip.Chip, tslib.__assign({}, item, { onClick: onClickCb(item), isSelected: isSelected, styleConfig: chip }), item === null || item === void 0 ? void 0 : item.id);
-        });
     };
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({}, root, { children: [jsxRuntime.jsx(StyledSingleSelectChip, tslib.__assign({}, rest, { ref: forwardedRef, theme: theme, className: chipContainer === null || chipContainer === void 0 ? void 0 : chipContainer.className, css: (chipContainer === null || chipContainer === void 0 ? void 0 : chipContainer.css) || css, orientation: orientation }, { children: renderChipAtoms() })), (promptIcon || promptMessage) && (jsxRuntime.jsxs(ctDesignBox.Box, tslib.__assign({ boxSize: 'pico', horizontal: true, className: promptBox === null || promptBox === void 0 ? void 0 : promptBox.className, css: tslib.__assign({ marginTop: theme.spacing[2], marginLeft: theme.spacing[3], display: 'flex', alignItems: 'center' }, promptBox === null || promptBox === void 0 ? void 0 : promptBox.css) }, { children: [promptIcon && (jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ className: promptIconContainer === null || promptIconContainer === void 0 ? void 0 : promptIconContainer.className, css: tslib.__assign({ height: theme.size[4], width: theme.size[4], paddingRight: theme.spacing[1], display: 'flex', justifyContent: 'center', alignItems: 'center' }, promptIconContainer === null || promptIconContainer === void 0 ? void 0 : promptIconContainer.css) }, { children: promptIcon }))), promptMessage && (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', color: hasError ? 'warning' : 'success', styleConfig: promptMessageTypography }, { children: promptMessage })))] })))] })));
+    const dynamicStyles = ctDesignStyleManager.useStyles(() => ({
+        chipWrapper: {
+            flexDirection: orientation === exports.ChipOrientation.row ? 'row' : 'column',
+        },
+    }), [orientation]);
+    return (jsxRuntime.jsxs(ctDesignContainer.Container, { ref: ref, styleConfig: { root: [...(customRootStyles || [])] }, children: [jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+                    root: [singleSelectChipStaticStyles.chipWrapper, dynamicStyles.chipWrapper, ...chipContainerStyles],
+                }, children: jsxRuntime.jsx(ChipAtoms, { data: data, selectedChip: selectedChip, onClickCb: onClickCb, chipStyleConfig: chipStyleConfig }) }), (promptIcon || promptMessage) && (jsxRuntime.jsxs(ctDesignBox.Box, { boxSize: 'pico', horizontal: true, styleConfig: {
+                    root: [singleSelectChipStaticStyles.promptBoxStyles, ...(promptBoxStyles || [])],
+                }, children: [promptIcon && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+                            root: [singleSelectChipStaticStyles.promptIconStyles, ...promptIconContainerStyles],
+                        }, children: promptIcon })), promptMessage && (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B3', color: hasError ? 'warning' : 'success', styleConfig: promptMessageTypographyStyles, children: promptMessage }))] }))] }));
 });
+SingleSelectChip.displayName = 'SingleSelectChip';
 var SingleSelectChip$1 = react.memo(SingleSelectChip);
 
 exports.SingleSelectChip = SingleSelectChip$1;

package/dist/ct-design-single-select-chip.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-single-select-chip.cjs.js","sources":["../packages/components/SingleSelectChip/src/type.ts","../packages/components/SingleSelectChip/src/style.ts","../packages/components/SingleSelectChip/src/SingleSelectChip.tsx"],"sourcesContent":[null,null,null],"names":["ChipOrientation","__assign","styled","__rest","forwardRef","useTheme","useState","useIsomorphicEffect","_jsx","Chip","_jsxs","Container","Box","Typography","memo"],"mappings":"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"}
+{"version":3,"file":"ct-design-single-select-chip.cjs.js","sources":["../packages/components/SingleSelectChip/src/constants.ts","../packages/components/SingleSelectChip/src/style.ts","../packages/components/SingleSelectChip/src/SingleSelectChip.tsx"],"sourcesContent":[null,null,null],"names":["ChipOrientation","makeStyles","memo","_jsx","Chip","forwardRef","useState","useIsomorphicEffect","useStyles","_jsxs","Container","Box","Typography"],"mappings":"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"}

package/dist/ct-design-single-select-chip.esm.js

@@ -1,13 +1,11 @@
-import { __assign, __rest } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, memo } from 'react';
-import styled from 'styled-components';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { memo, forwardRef, useState } from 'react';
 import { Chip } from '@cleartrip/ct-design-chip';
-import useIsomorphicEffect from '@cleartrip/ct-design-use-isomorphic-effect';
-import { useTheme } from '@cleartrip/ct-design-theme';
+import { Box } from '@cleartrip/ct-design-box';
 import { Container } from '@cleartrip/ct-design-container';
 import { Typography } from '@cleartrip/ct-design-typography';
-import { Box } from '@cleartrip/ct-design-box';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import useIsomorphicEffect from '@cleartrip/ct-design-use-isomorphic-effect';
 
 var ChipOrientation;
 (function (ChipOrientation) {
@@ -15,42 +13,90 @@ var ChipOrientation;
     ChipOrientation["column"] = "column";
 })(ChipOrientation || (ChipOrientation = {}));
 
-function getSingleSelectChipStyles(_a) {
-    var theme = _a.theme, css = _a.css, orientation = _a.orientation;
-    var isRow = orientation === ChipOrientation.row;
-    return __assign({ display: 'flex', position: 'relative', alignItems: 'center', width: 'fit-content', flexDirection: isRow ? 'row' : 'column', borderRadius: theme.border.radius[8], flexWrap: 'wrap', userSelect: 'none', rowGap: 12, columnGap: 12 }, css);
-}
+const singleSelectChipStaticStyles = makeStyles((theme) => {
+    return {
+        chipWrapper: {
+            display: 'flex',
+            position: 'relative',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            borderRadius: theme.border.radius[8],
+            alignSelf: 'flex-start',
+            rowGap: theme.spacing[3],
+            columnGap: theme.spacing[3],
+        },
+        promptBoxStyles: {
+            display: 'flex',
+            alignItems: 'center',
+            marginTop: theme.spacing[2],
+            marginLeft: theme.spacing[3],
+        },
+        promptIconStyles: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: theme.size[4],
+            width: theme.size[4],
+            paddingRight: theme.spacing[1],
+        },
+        chipLabelStyles: {
+            paddingVertical: 0,
+            paddingHorizontal: 4,
+        },
+        chipRootStyles: {
+            borderRadius: 30,
+            paddingVertical: theme.spacing['1.5'],
+            paddingHorizontal: theme.spacing[2],
+            borderWidth: 0,
+        },
+        chipBoxShadow: {
+            shadowColor: 'rgb(231, 231, 231)',
+            shadowOffset: { width: 0, height: 0 },
+            shadowOpacity: 1,
+            shadowRadius: 1,
+            elevation: 1,
+            borderWidth: 1,
+        },
+    };
+});
 
-var StyledSingleSelectChip = styled.div(function (_a) {
-    var theme = _a.theme, css = _a.css, rest = __rest(_a, ["theme", "css"]);
-    return getSingleSelectChipStyles(__assign({ theme: theme, css: css }, rest));
+const ChipAtoms = memo(({ data, selectedChip, onClickCb, chipStyleConfig }) => {
+    return (jsx(Fragment, { children: data.map((item) => {
+            const isSelected = (item === null || item === void 0 ? void 0 : item.id) === selectedChip;
+            return (jsx(Chip, { id: item === null || item === void 0 ? void 0 : item.id, label: item === null || item === void 0 ? void 0 : item.label, onClick: onClickCb(item), size: 'sm', isSelected: isSelected, styleConfig: Object.assign({ labelContainer: [singleSelectChipStaticStyles.chipLabelStyles], root: [singleSelectChipStaticStyles.chipRootStyles, singleSelectChipStaticStyles.chipBoxShadow] }, (chipStyleConfig || {})) }, item === null || item === void 0 ? void 0 : item.id));
+        }) }));
 });
-var SingleSelectChip = forwardRef(function (props, forwardedRef) {
-    var onChange = props.onChange, data = props.data, _a = props.orientation, orientation = _a === void 0 ? ChipOrientation.row : _a, _b = props.selected, selected = _b === void 0 ? null : _b, css = props.css, prompt = props.prompt, _c = props.styleConfig, styleConfig = _c === void 0 ? {} : _c, rest = __rest(props, ["onChange", "data", "orientation", "selected", "css", "prompt", "styleConfig"]);
-    var _d = prompt || {}, _e = _d.hasError, hasError = _e === void 0 ? false : _e, promptIcon = _d.Icon, promptMessage = _d.message;
-    var theme = useTheme();
-    var chip = styleConfig.chip, chipContainer = styleConfig.chipContainer, promptBox = styleConfig.promptBox, promptIconContainer = styleConfig.promptIconContainer, promptMessageTypography = styleConfig.promptMessageTypography, root = styleConfig.root;
-    var _f = useState(selected), selectedChip = _f[0], setSelectedChip = _f[1];
-    useIsomorphicEffect(function () {
-        if (selected !== selectedChip) {
-            setSelectedChip(selected);
+ChipAtoms.displayName = 'ChipAtoms';
+const SingleSelectChip = forwardRef(({ onChange, data, orientation = ChipOrientation.row, selected = null, prompt, styleConfig = {} }, ref) => {
+    const { hasError = false, Icon: promptIcon, message: promptMessage } = prompt || {};
+    const { root: customRootStyles = [], chipContainer: chipContainerStyles = [], promptBox: promptBoxStyles = [], promptIconContainer: promptIconContainerStyles = [], promptMessageTypography: promptMessageTypographyStyles, chip: chipStyleConfig, } = styleConfig;
+    const [selectedChip, setSelectedChip] = useState(selected !== null && selected !== void 0 ? selected : null);
+    useIsomorphicEffect(() => {
+        if ((selected !== null && selected !== void 0 ? selected : null) !== selectedChip) {
+            setSelectedChip(selected !== null && selected !== void 0 ? selected : null);
         }
     }, [selected]);
-    var onClickCb = function (chip) { return function () {
-        var id = (chip !== null && chip !== void 0 ? chip : {}).id;
+    const onClickCb = (chip) => () => {
+        const { id } = chip !== null && chip !== void 0 ? chip : {};
         if (selectedChip !== id) {
             setSelectedChip(id);
-            onChange && onChange(id);
+            onChange === null || onChange === void 0 ? void 0 : onChange(id);
         }
-    }; };
-    var renderChipAtoms = function () {
-        return data.map(function (item) {
-            var isSelected = (item === null || item === void 0 ? void 0 : item.id) === selectedChip;
-            return jsx(Chip, __assign({}, item, { onClick: onClickCb(item), isSelected: isSelected, styleConfig: chip }), item === null || item === void 0 ? void 0 : item.id);
-        });
     };
-    return (jsxs(Container, __assign({}, root, { children: [jsx(StyledSingleSelectChip, __assign({}, rest, { ref: forwardedRef, theme: theme, className: chipContainer === null || chipContainer === void 0 ? void 0 : chipContainer.className, css: (chipContainer === null || chipContainer === void 0 ? void 0 : chipContainer.css) || css, orientation: orientation }, { children: renderChipAtoms() })), (promptIcon || promptMessage) && (jsxs(Box, __assign({ boxSize: 'pico', horizontal: true, className: promptBox === null || promptBox === void 0 ? void 0 : promptBox.className, css: __assign({ marginTop: theme.spacing[2], marginLeft: theme.spacing[3], display: 'flex', alignItems: 'center' }, promptBox === null || promptBox === void 0 ? void 0 : promptBox.css) }, { children: [promptIcon && (jsx(Container, __assign({ className: promptIconContainer === null || promptIconContainer === void 0 ? void 0 : promptIconContainer.className, css: __assign({ height: theme.size[4], width: theme.size[4], paddingRight: theme.spacing[1], display: 'flex', justifyContent: 'center', alignItems: 'center' }, promptIconContainer === null || promptIconContainer === void 0 ? void 0 : promptIconContainer.css) }, { children: promptIcon }))), promptMessage && (jsx(Typography, __assign({ variant: 'B3', color: hasError ? 'warning' : 'success', styleConfig: promptMessageTypography }, { children: promptMessage })))] })))] })));
+    const dynamicStyles = useStyles(() => ({
+        chipWrapper: {
+            flexDirection: orientation === ChipOrientation.row ? 'row' : 'column',
+        },
+    }), [orientation]);
+    return (jsxs(Container, { ref: ref, styleConfig: { root: [...(customRootStyles || [])] }, children: [jsx(Container, { styleConfig: {
+                    root: [singleSelectChipStaticStyles.chipWrapper, dynamicStyles.chipWrapper, ...chipContainerStyles],
+                }, children: jsx(ChipAtoms, { data: data, selectedChip: selectedChip, onClickCb: onClickCb, chipStyleConfig: chipStyleConfig }) }), (promptIcon || promptMessage) && (jsxs(Box, { boxSize: 'pico', horizontal: true, styleConfig: {
+                    root: [singleSelectChipStaticStyles.promptBoxStyles, ...(promptBoxStyles || [])],
+                }, children: [promptIcon && (jsx(Container, { styleConfig: {
+                            root: [singleSelectChipStaticStyles.promptIconStyles, ...promptIconContainerStyles],
+                        }, children: promptIcon })), promptMessage && (jsx(Typography, { variant: 'B3', color: hasError ? 'warning' : 'success', styleConfig: promptMessageTypographyStyles, children: promptMessage }))] }))] }));
 });
+SingleSelectChip.displayName = 'SingleSelectChip';
 var SingleSelectChip$1 = memo(SingleSelectChip);
 
 export { ChipOrientation, SingleSelectChip$1 as SingleSelectChip };