@pagopa/io-app-design-system 5.12.1 → 5.12.3

package/lib/commonjs/components/claimsSelector/ClaimsSelector.js

@@ -8,7 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
-var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _context = require("../../context");
 var _core = require("../../core");
 var _useAccordionAnimation = require("../../hooks/useAccordionAnimation");
@@ -20,6 +20,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const accordionBodySpacing = 16;
+
+// Threshold to determine when the accordion is considered fully collapsed
+const COLLAPSED_RADIUS_THRESHOLD = 0.001;
+
+// Border width offset to ensure gradient fits within the border curves
+const COLLAPSIBLE_BORDER = 1;
 const ClaimsSelector = ({
   title,
   items,
@@ -28,7 +34,8 @@ const ClaimsSelector = ({
   onToggle,
   accessibilityLabel,
   selectedItemIds,
-  selectionEnabled = true
+  selectionEnabled = true,
+  headerGradientColors
 }) => {
   const theme = (0, _context.useIOTheme)();
   const {
@@ -37,22 +44,41 @@ const ClaimsSelector = ({
     onBodyLayout,
     iconAnimatedStyle,
     bodyAnimatedStyle,
-    bodyInnerStyle
+    bodyInnerStyle,
+    progress
   } = (0, _useAccordionAnimation.useAccordionAnimation)({
     defaultExpanded
   });
-  const accordionBackground = theme["appBackground-secondary"];
+  const accordionBackground = theme["appBackground-primary"];
   const accordionBorder = theme["cardBorder-default"];
   const onItemPress = () => {
     toggleAccordion();
     onToggle?.(!expanded);
   };
+  const hasHeaderGradient = headerGradientColors && headerGradientColors.length >= 2;
+  const headerForegroundColor = hasHeaderGradient ? "black" : theme["textBody-default"];
+  const headerRadiusAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    /**
+     * Dynamically adjust bottom corner radius based on the expansion progress.
+     * Bottom corners are rounded only when the accordion is fully collapsed to
+     * ensure visual consistency with the outer container.
+     */
+    const bottomRadius = progress.value < COLLAPSED_RADIUS_THRESHOLD ? _core.IOAccordionRadius : 0;
+    return {
+      borderTopLeftRadius: _core.IOAccordionRadius - COLLAPSIBLE_BORDER,
+      borderTopRightRadius: _core.IOAccordionRadius - COLLAPSIBLE_BORDER,
+      borderBottomLeftRadius: bottomRadius - COLLAPSIBLE_BORDER,
+      borderBottomRightRadius: bottomRadius - COLLAPSIBLE_BORDER,
+      overflow: "hidden"
+    };
+  });
   const renderClaimItem = (item, index) => {
     const {
       id,
       value,
       description,
-      type = "text"
+      type = "text",
+      endElement
     } = item;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
       children: [index !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_layout.Divider, {}),
@@ -73,7 +99,8 @@ const ClaimsSelector = ({
         }) : value,
         label: description,
         accessibilityRole: type,
-        reversed: true
+        reversed: true,
+        endElement: endElement
       })]
     }, id);
   };
@@ -90,16 +117,19 @@ const ClaimsSelector = ({
       },
       accessibilityLabel: accessibilityLabel ?? title,
       onPress: onItemPress,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.textContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H6, {
-          color: theme["textBody-default"],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+        style: [styles.textContainer, headerRadiusAnimatedStyle],
+        children: [hasHeaderGradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeLinearGradient.default, {
+          colors: headerGradientColors,
+          style: _reactNative.StyleSheet.absoluteFill
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H6, {
+          color: headerForegroundColor,
           children: title
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
           style: iconAnimatedStyle,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
             name: "chevronBottom",
-            color: theme["interactiveElem-default"]
+            color: headerForegroundColor
           })
         })]
       })
@@ -110,9 +140,6 @@ const ClaimsSelector = ({
         onLayout: onBodyLayout,
         children: items.map(renderClaimItem)
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeLinearGradient.default, {
-      style: styles.linearGradient,
-      colors: [(0, _core.hexToRgba)(_core.IOColors[accordionBackground], 0), _core.IOColors[accordionBackground]]
     })]
   });
 };
@@ -132,15 +159,6 @@ const styles = _reactNative.StyleSheet.create({
   bodyInnerContainer: {
     width: "100%"
   },
-  linearGradient: {
-    height: accordionBodySpacing,
-    position: "absolute",
-    // Place at the bottom
-    bottom: 0,
-    // Avoid gradient overlaps with border radius
-    left: accordionBodySpacing,
-    right: accordionBodySpacing
-  },
   imageClaim: {
     width: 160,
     aspectRatio: 3 / 4

package/lib/commonjs/components/claimsSelector/ClaimsSelector.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeGestureHandler","_reactNativeLinearGradient","_interopRequireDefault","_reactNativeReanimated","_context","_core","_useAccordionAnimation","_icons","_layout","_listitems","_typography","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","accordionBodySpacing","ClaimsSelector","title","items","defaultExpanded","onItemSelected","onToggle","accessibilityLabel","selectedItemIds","selectionEnabled","theme","useIOTheme","expanded","toggleAccordion","onBodyLayout","iconAnimatedStyle","bodyAnimatedStyle","bodyInnerStyle","useAccordionAnimation","accordionBackground","accordionBorder","onItemPress","renderClaimItem","item","index","id","value","description","type","jsxs","Fragment","children","jsx","Divider","ListItemCheckbox","selected","includes","onValueChange","undefined","ListItemInfo","Image","source","uri","style","styles","imageClaim","resizeMode","accessibilityIgnoresInvertColors","label","accessibilityRole","reversed","View","accordionWrapper","backgroundColor","IOColors","borderColor","TouchableWithoutFeedback","accessible","accessibilityState","onPress","textContainer","H6","color","Icon","name","bodyInnerContainer","onLayout","map","linearGradient","colors","hexToRgba","exports","StyleSheet","create","borderWidth","borderRadius","IOAccordionRadius","borderCurve","padding","flexDirection","alignItems","justifyContent","width","height","position","bottom","left","right","aspectRatio"],"sourceRoot":"../../../../src","sources":["components/claimsSelector/ClaimsSelector.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeGestureHandler","_reactNativeLinearGradient","_interopRequireDefault","_reactNativeReanimated","_context","_core","_useAccordionAnimation","_icons","_layout","_listitems","_typography","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","accordionBodySpacing","COLLAPSED_RADIUS_THRESHOLD","COLLAPSIBLE_BORDER","ClaimsSelector","title","items","defaultExpanded","onItemSelected","onToggle","accessibilityLabel","selectedItemIds","selectionEnabled","headerGradientColors","theme","useIOTheme","expanded","toggleAccordion","onBodyLayout","iconAnimatedStyle","bodyAnimatedStyle","bodyInnerStyle","progress","useAccordionAnimation","accordionBackground","accordionBorder","onItemPress","hasHeaderGradient","length","headerForegroundColor","headerRadiusAnimatedStyle","useAnimatedStyle","bottomRadius","value","IOAccordionRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","overflow","renderClaimItem","item","index","id","description","type","endElement","jsxs","Fragment","children","jsx","Divider","ListItemCheckbox","selected","includes","onValueChange","undefined","ListItemInfo","Image","source","uri","style","styles","imageClaim","resizeMode","accessibilityIgnoresInvertColors","label","accessibilityRole","reversed","View","accordionWrapper","backgroundColor","IOColors","borderColor","TouchableWithoutFeedback","accessible","accessibilityState","onPress","textContainer","colors","StyleSheet","absoluteFill","H6","color","Icon","name","bodyInnerContainer","onLayout","map","exports","create","borderWidth","borderRadius","borderCurve","padding","flexDirection","alignItems","justifyContent","width","aspectRatio"],"sourceRoot":"../../../../src","sources":["components/claimsSelector/ClaimsSelector.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,0BAAA,GAAAF,OAAA;AACA,IAAAG,0BAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,sBAAA,GAAAN,uBAAA,CAAAC,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AACA,IAAAQ,sBAAA,GAAAR,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AACA,IAAAU,OAAA,GAAAV,OAAA;AACA,IAAAW,UAAA,GAAAX,OAAA;AACA,IAAAY,WAAA,GAAAZ,OAAA;AAAmC,IAAAa,WAAA,GAAAb,OAAA;AAAA,SAAAI,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAnB,uBAAA,YAAAA,CAAAe,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAEnC,MAAMgB,oBAAoC,GAAG,EAAE;;AAE/C;AACA,MAAMC,0BAA0B,GAAG,KAAK;;AAExC;AACA,MAAMC,kBAAkB,GAAG,CAAC;AAgDrB,MAAMC,cAAc,GAAGA,CAAC;EAC7BC,KAAK;EACLC,KAAK;EACLC,eAAe;EACfC,cAAc;EACdC,QAAQ;EACRC,kBAAkB;EAClBC,eAAe;EACfC,gBAAgB,GAAG,IAAI;EACvBC;AACK,CAAC,KAAK;EACX,MAAMC,KAAK,GAAG,IAAAC,mBAAU,EAAC,CAAC;EAC1B,MAAM;IACJC,QAAQ;IACRC,eAAe;IACfC,YAAY;IACZC,iBAAiB;IACjBC,iBAAiB;IACjBC,cAAc;IACdC;EACF,CAAC,GAAG,IAAAC,4CAAqB,EAAC;IACxBhB;EACF,CAAC,CAAC;EAEF,MAAMiB,mBAA6B,GAAGV,KAAK,CAAC,uBAAuB,CAAC;EACpE,MAAMW,eAAyB,GAAGX,KAAK,CAAC,oBAAoB,CAAC;EAE7D,MAAMY,WAAW,GAAGA,CAAA,KAAM;IACxBT,eAAe,CAAC,CAAC;IACjBR,QAAQ,GAAG,CAACO,QAAQ,CAAC;EACvB,CAAC;EAED,MAAMW,iBAAiB,GACrBd,oBAAoB,IAAIA,oBAAoB,CAACe,MAAM,IAAI,CAAC;EAE1D,MAAMC,qBAA+B,GAAGF,iBAAiB,GACrD,OAAO,GACPb,KAAK,CAAC,kBAAkB,CAAC;EAE7B,MAAMgB,yBAAyB,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IACvD;AACJ;AACA;AACA;AACA;IACI,MAAMC,YAAY,GAChBV,QAAQ,CAACW,KAAK,GAAG/B,0BAA0B,GAAGgC,uBAAiB,GAAG,CAAC;IACrE,OAAO;MACLC,mBAAmB,EAAED,uBAAiB,GAAG/B,kBAAkB;MAC3DiC,oBAAoB,EAAEF,uBAAiB,GAAG/B,kBAAkB;MAC5DkC,sBAAsB,EAAEL,YAAY,GAAG7B,kBAAkB;MACzDmC,uBAAuB,EAAEN,YAAY,GAAG7B,kBAAkB;MAC1DoC,QAAQ,EAAE;IACZ,CAAC;EACH,CAAC,CAAC;EAEF,MAAMC,eAAe,GAAGA,CAACC,IAAU,EAAEC,KAAa,KAAK;IACrD,MAAM;MAAEC,EAAE;MAAEV,KAAK;MAAEW,WAAW;MAAEC,IAAI,GAAG,MAAM;MAAEC;IAAW,CAAC,GAAGL,IAAI;IAClE,oBACE,IAAA5D,WAAA,CAAAkE,IAAA,EAACjF,MAAA,CAAAkF,QAAQ;MAAAC,QAAA,GACNP,KAAK,KAAK,CAAC,iBAAI,IAAA7D,WAAA,CAAAqE,GAAA,EAACxE,OAAA,CAAAyE,OAAO,IAAE,CAAC;MAEzB;MACAvC,gBAAgB,IAAIiC,IAAI,KAAK,MAAM,gBACjC,IAAAhE,WAAA,CAAAqE,GAAA,EAACvE,UAAA,CAAAyE,gBAAgB;QACfnB,KAAK,EAAEA,KAAM;QACbW,WAAW,EAAEA,WAAY;QACzBS,QAAQ,EAAE1C,eAAe,EAAE2C,QAAQ,CAACX,EAAE,CAAE;QACxCY,aAAa,EACX/C,cAAc,GACV6C,QAAQ,IAAI7C,cAAc,CAACiC,IAAI,EAAEY,QAAQ,CAAC,GAC1CG;MACL,CACF,CAAC,gBAEF,IAAA3E,WAAA,CAAAqE,GAAA,EAACvE,UAAA,CAAA8E,YAAY;QACXxB,KAAK,EACHY,IAAI,KAAK,OAAO,gBACd,IAAAhE,WAAA,CAAAqE,GAAA,EAACjF,YAAA,CAAAyF,KAAK;UACJC,MAAM,EAAE;YAAEC,GAAG,EAAE3B;UAAM,CAAE;UACvB4B,KAAK,EAAEC,MAAM,CAACC,UAAW;UACzBC,UAAU,EAAC,SAAS;UACpBC,gCAAgC;QAAA,CACjC,CAAC,GAEFhC,KAEH;QACDiC,KAAK,EAAEtB,WAAY;QACnBuB,iBAAiB,EAAEtB,IAAK;QACxBuB,QAAQ;QACRtB,UAAU,EAAEA;MAAW,CACxB,CACF;IAAA,GAlCUH,EAoCL,CAAC;EAEf,CAAC;EAED,oBACE,IAAA9D,WAAA,CAAAkE,IAAA,EAAC9E,YAAA,CAAAoG,IAAI;IACHR,KAAK,EAAE,CACLC,MAAM,CAACQ,gBAAgB,EACvB;MACEC,eAAe,EAAEC,cAAQ,CAAChD,mBAAmB,CAAC;MAC9CiD,WAAW,EAAED,cAAQ,CAAC/C,eAAe;IACvC,CAAC,CACD;IAAAwB,QAAA,gBAEF,IAAApE,WAAA,CAAAqE,GAAA,EAAChF,0BAAA,CAAAwG,wBAAwB;MACvBC,UAAU,EAAE,IAAK;MACjBR,iBAAiB,EAAC,QAAQ;MAC1BS,kBAAkB,EAAE;QAAE5D;MAAS,CAAE;MACjCN,kBAAkB,EAAEA,kBAAkB,IAAIL,KAAM;MAChDwE,OAAO,EAAEnD,WAAY;MAAAuB,QAAA,eAErB,IAAApE,WAAA,CAAAkE,IAAA,EAAC1E,sBAAA,CAAAW,OAAQ,CAACqF,IAAI;QACZR,KAAK,EAAE,CAACC,MAAM,CAACgB,aAAa,EAAEhD,yBAAyB,CAAE;QAAAmB,QAAA,GAExDtB,iBAAiB,iBAChB,IAAA9C,WAAA,CAAAqE,GAAA,EAAC/E,0BAAA,CAAAa,OAAc;UACb+F,MAAM,EAAElE,oBAAqB;UAC7BgD,KAAK,EAAEmB,uBAAU,CAACC;QAAa,CAChC,CACF,eACD,IAAApG,WAAA,CAAAqE,GAAA,EAACtE,WAAA,CAAAsG,EAAE;UAACC,KAAK,EAAEtD,qBAAsB;UAAAoB,QAAA,EAAE5C;QAAK,CAAK,CAAC,eAC9C,IAAAxB,WAAA,CAAAqE,GAAA,EAAC7E,sBAAA,CAAAW,OAAQ,CAACqF,IAAI;UAACR,KAAK,EAAE1C,iBAAkB;UAAA8B,QAAA,eACtC,IAAApE,WAAA,CAAAqE,GAAA,EAACzE,MAAA,CAAA2G,IAAI;YAACC,IAAI,EAAC,eAAe;YAACF,KAAK,EAAEtD;UAAsB,CAAE;QAAC,CAC9C,CAAC;MAAA,CACH;IAAC,CACQ,CAAC,eAE3B,IAAAhD,WAAA,CAAAqE,GAAA,EAAC7E,sBAAA,CAAAW,OAAQ,CAACqF,IAAI;MAACR,KAAK,EAAEzC,iBAAkB;MAAA6B,QAAA,eACtC,IAAApE,WAAA,CAAAqE,GAAA,EAACjF,YAAA,CAAAoG,IAAI;QACHR,KAAK,EAAE,CAACxC,cAAc,EAAEyC,MAAM,CAACwB,kBAAkB,CAAE;QACnDC,QAAQ,EAAErE,YAAa;QAAA+B,QAAA,EAEtB3C,KAAK,CAACkF,GAAG,CAAChD,eAAe;MAAC,CACvB;IAAC,CACM,CAAC;EAAA,CACZ,CAAC;AAEX,CAAC;AAACiD,OAAA,CAAArF,cAAA,GAAAA,cAAA;AAEF,MAAM0D,MAAM,GAAGkB,uBAAU,CAACU,MAAM,CAAC;EAC/BpB,gBAAgB,EAAE;IAChBqB,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE1D,uBAAiB;IAC/B2D,WAAW,EAAE;EACf,CAAC;EACDf,aAAa,EAAE;IACbgB,OAAO,EAAE7F,oBAAoB;IAC7B8F,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDX,kBAAkB,EAAE;IAClBY,KAAK,EAAE;EACT,CAAC;EACDnC,UAAU,EAAE;IACVmC,KAAK,EAAE,GAAG;IACVC,WAAW,EAAE,CAAC,GAAG;EACnB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/components/claimsSelector/__test__/__snapshots__/ClaimsSelector.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
         "borderWidth": 1,
       },
       {
-        "backgroundColor": "#F4F5F8",
+        "backgroundColor": "#FFFFFF",
         "borderColor": "#E8EBF1",
       },
     ]
@@ -50,12 +50,21 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
     >
       <View
         style={
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-            "padding": 16,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "padding": 16,
+            },
+            {
+              "borderBottomLeftRadius": 7,
+              "borderBottomRightRadius": 7,
+              "borderTopLeftRadius": 7,
+              "borderTopRightRadius": 7,
+              "overflow": "hidden",
+            },
+          ]
         }
       >
         <Text
@@ -96,7 +105,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
             align="xMidYMid"
             bbHeight={24}
             bbWidth={24}
-            color="#0B3EE3"
+            color="#0E0F13"
             focusable={false}
             height={24}
             importantForAccessibility="no-hide-descendants"
@@ -489,36 +498,6 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (controlled) 1`] = `
       </View>
     </View>
   </View>
-  <BVLinearGradient
-    colors={
-      [
-        16053752,
-        4294243832,
-      ]
-    }
-    endPoint={
-      {
-        "x": 0.5,
-        "y": 1,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0.5,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "height": 16,
-        "left": 16,
-        "position": "absolute",
-        "right": 16,
-      }
-    }
-  />
 </View>
 `;
 
@@ -532,7 +511,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (custom component) 1`] = `
         "borderWidth": 1,
       },
       {
-        "backgroundColor": "#F4F5F8",
+        "backgroundColor": "#FFFFFF",
         "borderColor": "#E8EBF1",
       },
     ]
@@ -572,12 +551,21 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (custom component) 1`] = `
     >
       <View
         style={
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-            "padding": 16,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "padding": 16,
+            },
+            {
+              "borderBottomLeftRadius": 7,
+              "borderBottomRightRadius": 7,
+              "borderTopLeftRadius": 7,
+              "borderTopRightRadius": 7,
+              "overflow": "hidden",
+            },
+          ]
         }
       >
         <Text
@@ -618,7 +606,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (custom component) 1`] = `
             align="xMidYMid"
             bbHeight={24}
             bbWidth={24}
-            color="#0B3EE3"
+            color="#0E0F13"
             focusable={false}
             height={24}
             importantForAccessibility="no-hide-descendants"
@@ -782,36 +770,6 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (custom component) 1`] = `
       </View>
     </View>
   </View>
-  <BVLinearGradient
-    colors={
-      [
-        16053752,
-        4294243832,
-      ]
-    }
-    endPoint={
-      {
-        "x": 0.5,
-        "y": 1,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0.5,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "height": 16,
-        "left": 16,
-        "position": "absolute",
-        "right": 16,
-      }
-    }
-  />
 </View>
 `;
 
@@ -825,7 +783,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (uncontrolled) 1`] = `
         "borderWidth": 1,
       },
       {
-        "backgroundColor": "#F4F5F8",
+        "backgroundColor": "#FFFFFF",
         "borderColor": "#E8EBF1",
       },
     ]
@@ -865,12 +823,21 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (uncontrolled) 1`] = `
     >
       <View
         style={
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-            "padding": 16,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "padding": 16,
+            },
+            {
+              "borderBottomLeftRadius": 7,
+              "borderBottomRightRadius": 7,
+              "borderTopLeftRadius": 7,
+              "borderTopRightRadius": 7,
+              "overflow": "hidden",
+            },
+          ]
         }
       >
         <Text
@@ -911,7 +878,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (uncontrolled) 1`] = `
             align="xMidYMid"
             bbHeight={24}
             bbWidth={24}
-            color="#0B3EE3"
+            color="#0E0F13"
             focusable={false}
             height={24}
             importantForAccessibility="no-hide-descendants"
@@ -1235,36 +1202,6 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (uncontrolled) 1`] = `
       </View>
     </View>
   </View>
-  <BVLinearGradient
-    colors={
-      [
-        16053752,
-        4294243832,
-      ]
-    }
-    endPoint={
-      {
-        "x": 0.5,
-        "y": 1,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0.5,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "height": 16,
-        "left": 16,
-        "position": "absolute",
-        "right": 16,
-      }
-    }
-  />
 </View>
 `;
 
@@ -1278,7 +1215,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
         "borderWidth": 1,
       },
       {
-        "backgroundColor": "#F4F5F8",
+        "backgroundColor": "#FFFFFF",
         "borderColor": "#E8EBF1",
       },
     ]
@@ -1318,12 +1255,21 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
     >
       <View
         style={
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-            "padding": 16,
-          }
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "padding": 16,
+            },
+            {
+              "borderBottomLeftRadius": 7,
+              "borderBottomRightRadius": 7,
+              "borderTopLeftRadius": 7,
+              "borderTopRightRadius": 7,
+              "overflow": "hidden",
+            },
+          ]
         }
       >
         <Text
@@ -1364,7 +1310,7 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
             align="xMidYMid"
             bbHeight={24}
             bbWidth={24}
-            color="#0B3EE3"
+            color="#0E0F13"
             focusable={false}
             height={24}
             importantForAccessibility="no-hide-descendants"
@@ -1534,35 +1480,5 @@ exports[`ClaimsSelector ClaimsSelector Snapshot (unselectable items) 1`] = `
       </View>
     </View>
   </View>
-  <BVLinearGradient
-    colors={
-      [
-        16053752,
-        4294243832,
-      ]
-    }
-    endPoint={
-      {
-        "x": 0.5,
-        "y": 1,
-      }
-    }
-    locations={null}
-    startPoint={
-      {
-        "x": 0.5,
-        "y": 0,
-      }
-    }
-    style={
-      {
-        "bottom": 0,
-        "height": 16,
-        "left": 16,
-        "position": "absolute",
-        "right": 16,
-      }
-    }
-  />
 </View>
 `;

package/lib/commonjs/components/icons/Icon.js

@@ -153,11 +153,13 @@ var _IconNoticePlain = _interopRequireDefault(require("./svg/IconNoticePlain"));
 var _IconNotification = _interopRequireDefault(require("./svg/IconNotification"));
 var _IconOk = _interopRequireDefault(require("./svg/IconOk"));
 var _IconOption = _interopRequireDefault(require("./svg/IconOption"));
+var _IconPause = _interopRequireDefault(require("./svg/IconPause"));
 var _IconPEC = _interopRequireDefault(require("./svg/IconPEC"));
 var _IconPSP = _interopRequireDefault(require("./svg/IconPSP"));
 var _IconPhone = _interopRequireDefault(require("./svg/IconPhone"));
 var _IconPinOff = _interopRequireDefault(require("./svg/IconPinOff"));
 var _IconPinOn = _interopRequireDefault(require("./svg/IconPinOn"));
+var _IconPlay = _interopRequireDefault(require("./svg/IconPlay"));
 var _IconPrint = _interopRequireDefault(require("./svg/IconPrint"));
 var _IconProductIOApp = _interopRequireDefault(require("./svg/IconProductIOApp"));
 var _IconProductIOAppBlueBg = _interopRequireDefault(require("./svg/IconProductIOAppBlueBg"));
@@ -245,6 +247,8 @@ const IOIcons = exports.IOIcons = {
   eyeHide: _IconEyeHide.default,
   pinOff: _IconPinOff.default,
   pinOn: _IconPinOn.default,
+  play: _IconPlay.default,
+  pause: _IconPause.default,
   emojiSad: _IconEmojiSad.default,
   emojiHappy: _IconEmojiHappy.default,
   phone: _IconPhone.default,