@pagopa/io-app-design-system 1.0.0-0

package/lib/module/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -0,0 +1,463 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
+<View
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#FFFFFF",
+          "borderColor": "#CCD4DC",
+          "borderRadius": 8,
+          "borderStyle": "solid",
+          "borderWidth": 1,
+          "flex": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
+        },
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        color="black"
+        defaultColor="black"
+        defaultWeight="Regular"
+        font="ReadexPro"
+        fontStyle={
+          {
+            "fontSize": 20,
+            "lineHeight": 24,
+          }
+        }
+        style={
+          [
+            {
+              "fontSize": 20,
+              "lineHeight": 24,
+            },
+            {
+              "color": "#0E0F13",
+              "fontFamily": "Readex Pro",
+              "fontStyle": "normal",
+              "fontWeight": "400",
+            },
+          ]
+        }
+        weight="Regular"
+      >
+        label
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "marginLeft": 8,
+        }
+      }
+    >
+      <RNSVGSvgView
+        accessibilityElementsHidden={true}
+        accessibilityLabel=""
+        accessible={false}
+        align="xMidYMid"
+        bbHeight={24}
+        bbWidth={24}
+        color={4278219750}
+        focusable={false}
+        height={24}
+        importantForAccessibility="no-hide-descendants"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "color": "#0073E6",
+            },
+            {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
+        }
+        tintColor={4278219750}
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
+      >
+        <RNSVGGroup>
+          <RNSVGPath
+            clipRule={0}
+            d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281-4.50455c.8439 0 1.5281-.68415 1.5281-1.52809 0-.84394-.6842-1.52809-1.5281-1.52809-.844 0-1.5281.68415-1.5281 1.52809 0 .84394.6841 1.52809 1.5281 1.52809Zm0 1.94382h.0005c.5678 0 1.0281.46029 1.0281 1.02813v8.0045c0 .5678-.4603 1.0281-1.0281 1.0281h-.0005C11.4603 19.5 11 19.0397 11 18.4719v-8.0045c0-.56784.4603-1.02813 1.0281-1.02813Z"
+            fill={
+              [
+                2,
+              ]
+            }
+            fillRule={0}
+            propList={
+              [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
+<View
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  hitSlop={
+    {
+      "bottom": 14,
+      "left": 24,
+      "right": 24,
+      "top": 14,
+    }
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "elevation": 0,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "textAlignVertical": "center",
+        },
+        false,
+        {},
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+      ]
+    }
+  >
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        [
+          {
+            "fontFamily": "Readex Pro",
+            "fontSize": 16,
+            "fontStyle": "normal",
+            "fontWeight": "400",
+          },
+          {
+            "color": "#0B3EE3",
+          },
+          {
+            "color": undefined,
+          },
+        ]
+      }
+    >
+      label
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 8,
+          "elevation": 0,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "paddingHorizontal": 24,
+          "textAlignVertical": "center",
+        },
+        {
+          "borderWidth": 2,
+        },
+        false,
+        {
+          "height": 48,
+        },
+        {
+          "backgroundColor": "rgba(231,236,252,0)",
+          "borderColor": "#0B3EE3",
+        },
+        {
+          "backgroundColor": undefined,
+          "borderColor": undefined,
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+      ]
+    }
+  >
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        [
+          {
+            "fontFamily": "Readex Pro",
+            "fontStyle": "normal",
+            "fontWeight": "400",
+          },
+          {
+            "alignSelf": "center",
+          },
+          {
+            "fontSize": 16,
+          },
+          {
+            "color": "#0B3EE3",
+          },
+          {
+            "color": undefined,
+          },
+        ]
+      }
+    >
+      label
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderRadius": 8,
+          "elevation": 0,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "paddingHorizontal": 24,
+          "textAlignVertical": "center",
+        },
+        false,
+        {
+          "height": 48,
+        },
+        {
+          "backgroundColor": "#0B3EE3",
+        },
+        {
+          "backgroundColor": undefined,
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+      ]
+    }
+  >
+    <Text
+      color="white"
+      ellipsizeMode="tail"
+      font="ReadexPro"
+      numberOfLines={1}
+      style={
+        [
+          [
+            {
+              "alignSelf": "center",
+            },
+            {
+              "fontSize": 16,
+            },
+          ],
+          undefined,
+          {
+            "color": "#FFFFFF",
+            "fontFamily": "Readex Pro",
+            "fontStyle": "normal",
+            "fontWeight": "400",
+          },
+        ]
+      }
+      weight="Regular"
+    >
+      label
+    </Text>
+  </View>
+</View>
+`;

package/lib/module/components/buttons/__test__/button.test.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Alert } from "react-native";
+import * as TestRenderer from "react-test-renderer";
+import ButtonExtendedOutline from "../ButtonExtendedOutline";
+import ButtonLink from "../ButtonLink";
+import ButtonOutline from "../ButtonOutline";
+import ButtonSolid from "../ButtonSolid";
+const onButtonPress = () => {
+  Alert.alert("Alert", "Action triggered");
+};
+describe("Test Buttons Components", () => {
+  it("ButtonSolid Snapshot", () => {
+    const buttonSolid = TestRenderer.create( /*#__PURE__*/React.createElement(ButtonSolid, {
+      label: "label",
+      accessibilityLabel: "accessibilityLabel",
+      onPress: onButtonPress
+    })).toJSON();
+    expect(buttonSolid).toMatchSnapshot();
+  });
+  it("ButtonLink Snapshot", () => {
+    const buttonLink = TestRenderer.create( /*#__PURE__*/React.createElement(ButtonLink, {
+      label: "label",
+      onPress: onButtonPress
+    })).toJSON();
+    expect(buttonLink).toMatchSnapshot();
+  });
+  it("ButtonOutline Snapshot", () => {
+    const buttonOutline = TestRenderer.create( /*#__PURE__*/React.createElement(ButtonOutline, {
+      label: "label",
+      accessibilityLabel: "accessibilityLabel",
+      onPress: onButtonPress
+    })).toJSON();
+    expect(buttonOutline).toMatchSnapshot();
+  });
+  it("ButtonExtendedOutline Snapshot", () => {
+    const buttonExtendedOutline = TestRenderer.create( /*#__PURE__*/React.createElement(ButtonExtendedOutline, {
+      label: "label",
+      onPress: onButtonPress
+    })).toJSON();
+    expect(buttonExtendedOutline).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=button.test.js.map

package/lib/module/components/buttons/__test__/button.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Alert","TestRenderer","ButtonExtendedOutline","ButtonLink","ButtonOutline","ButtonSolid","onButtonPress","alert","describe","it","buttonSolid","create","createElement","label","accessibilityLabel","onPress","toJSON","expect","toMatchSnapshot","buttonLink","buttonOutline","buttonExtendedOutline"],"sourceRoot":"../../../../../src","sources":["components/buttons/__test__/button.test.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,cAAc;AACpC,OAAO,KAAKC,YAAY,MAAM,qBAAqB;AACnD,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,aAAa,MAAM,kBAAkB;AAC5C,OAAOC,WAAW,MAAM,gBAAgB;AAExC,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC1BN,KAAK,CAACO,KAAK,CAAC,OAAO,EAAE,kBAAkB,CAAC;AAC1C,CAAC;AAEDC,QAAQ,CAAC,yBAAyB,EAAE,MAAM;EACxCC,EAAE,CAAC,sBAAsB,EAAE,MAAM;IAC/B,MAAMC,WAAW,GAAGT,YAAY,CAACU,MAAM,eAACZ,KAAA,CAAAa,aAAA,CAACP,WAAW;MAACQ,KAAK,EAAE,OAAQ;MAACC,kBAAkB,EAAE,oBAAqB;MAACC,OAAO,EAAET;IAAc,CAAc,CAAC,CAAC,CAACU,MAAM,CAAC,CAAC;IAC/JC,MAAM,CAACP,WAAW,CAAC,CAACQ,eAAe,CAAC,CAAC;EACvC,CAAC,CAAC;EAEFT,EAAE,CAAC,qBAAqB,EAAE,MAAM;IAC9B,MAAMU,UAAU,GAAGlB,YAAY,CAACU,MAAM,eAACZ,KAAA,CAAAa,aAAA,CAACT,UAAU;MAACU,KAAK,EAAE,OAAQ;MAACE,OAAO,EAAET;IAAc,CAAc,CAAC,CAAC,CAACU,MAAM,CAAC,CAAC;IACnHC,MAAM,CAACE,UAAU,CAAC,CAACD,eAAe,CAAC,CAAC;EACtC,CAAC,CAAC;EAEFT,EAAE,CAAC,wBAAwB,EAAE,MAAM;IACjC,MAAMW,aAAa,GAAGnB,YAAY,CAACU,MAAM,eAACZ,KAAA,CAAAa,aAAA,CAACR,aAAa;MAACS,KAAK,EAAE,OAAQ;MAACC,kBAAkB,EAAE,oBAAqB;MAACC,OAAO,EAAET;IAAc,CAAiB,CAAC,CAAC,CAACU,MAAM,CAAC,CAAC;IACtKC,MAAM,CAACG,aAAa,CAAC,CAACF,eAAe,CAAC,CAAC;EACzC,CAAC,CAAC;EAEFT,EAAE,CAAC,gCAAgC,EAAE,MAAM;IACzC,MAAMY,qBAAqB,GAAGpB,YAAY,CAACU,MAAM,eAACZ,KAAA,CAAAa,aAAA,CAACV,qBAAqB;MAACW,KAAK,EAAE,OAAQ;MAACE,OAAO,EAAET;IAAc,CAAwB,CAAC,CAAC,CAACU,MAAM,CAAC,CAAC;IACnJC,MAAM,CAACI,qBAAqB,CAAC,CAACH,eAAe,CAAC,CAAC;EACjD,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/lib/module/components/buttons/index.js

@@ -0,0 +1,6 @@
+export * from "./ButtonSolid";
+export * from "./ButtonLink";
+export * from "./ButtonOutline";
+export * from "./ButtonExtendedOutline";
+export * from "./IconButton";
+//# sourceMappingURL=index.js.map

package/lib/module/components/buttons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/buttons/index.tsx"],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,cAAc;AAC5B,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB;AACvC,cAAc,cAAc"}

package/lib/module/components/checkbox/AnimatedCheckbox.js

@@ -0,0 +1,83 @@
+import React, { useEffect } from "react";
+import { StyleSheet, View, Pressable } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, interpolate, withSpring, withTiming, Easing } from "react-native-reanimated";
+import { IOSelectionTickVisualParams } from "../../core/IOStyles";
+import { IOSpringValues } from "../../core/IOAnimations";
+import { IOColors } from "../../core/IOColors";
+import { AnimatedTick } from "../common/AnimatedTick";
+const checkBoxRadius = 5;
+const styles = StyleSheet.create({
+  checkBoxWrapper: {
+    width: IOSelectionTickVisualParams.size,
+    height: IOSelectionTickVisualParams.size
+  },
+  checkboxBorder: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: IOSelectionTickVisualParams.size,
+    height: IOSelectionTickVisualParams.size,
+    borderWidth: IOSelectionTickVisualParams.borderWidth,
+    borderRadius: checkBoxRadius
+  },
+  checkBoxSquare: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: IOSelectionTickVisualParams.size,
+    height: IOSelectionTickVisualParams.size,
+    borderRadius: checkBoxRadius
+  }
+});
+
+/**
+ * An animated checkbox. This can be used to implement a
+ * standard {@link CheckBox} or other composite components.
+ */
+export const AnimatedCheckbox = _ref => {
+  let {
+    checked,
+    onPress,
+    disabled
+  } = _ref;
+  const isChecked = checked ?? false;
+  const squareAnimationProgress = useSharedValue(checked ? 1 : 0);
+  const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
+  useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    squareAnimationProgress.value = withSpring(checked ? 1 : 0, IOSpringValues.selection);
+    // eslint-disable-next-line functional/immutable-data
+    tickAnimationProgress.value = withTiming(checked ? 1 : 0, {
+      duration: 400,
+      easing: Easing.elastic(1)
+    });
+  }, [checked, squareAnimationProgress, tickAnimationProgress]);
+  const animatedCheckboxSquare = useAnimatedStyle(() => {
+    const scale = interpolate(squareAnimationProgress.value, [0, 1], [0.5, 1]);
+    const opacity = squareAnimationProgress.value;
+    return {
+      opacity,
+      transform: [{
+        scale
+      }]
+    };
+  });
+  return /*#__PURE__*/React.createElement(Pressable, {
+    disabled: disabled,
+    testID: "AnimatedCheckboxInput",
+    onPress: onPress,
+    style: styles.checkBoxWrapper
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.checkboxBorder, {
+      borderColor: IOColors[IOSelectionTickVisualParams.borderColorOffState]
+    }]
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.checkBoxSquare, {
+      backgroundColor: IOColors[IOSelectionTickVisualParams.bgColorOnState]
+    }, animatedCheckboxSquare]
+  }), isChecked && /*#__PURE__*/React.createElement(AnimatedTick, {
+    progress: tickAnimationProgress,
+    stroke: IOColors[IOSelectionTickVisualParams.tickColor]
+  }));
+};
+//# sourceMappingURL=AnimatedCheckbox.js.map

package/lib/module/components/checkbox/AnimatedCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","StyleSheet","View","Pressable","Animated","useSharedValue","useAnimatedStyle","interpolate","withSpring","withTiming","Easing","IOSelectionTickVisualParams","IOSpringValues","IOColors","AnimatedTick","checkBoxRadius","styles","create","checkBoxWrapper","width","size","height","checkboxBorder","position","left","top","borderWidth","borderRadius","checkBoxSquare","AnimatedCheckbox","_ref","checked","onPress","disabled","isChecked","squareAnimationProgress","tickAnimationProgress","value","selection","duration","easing","elastic","animatedCheckboxSquare","scale","opacity","transform","createElement","testID","style","borderColor","borderColorOffState","backgroundColor","bgColorOnState","progress","stroke","tickColor"],"sourceRoot":"../../../../src","sources":["components/checkbox/AnimatedCheckbox.tsx"],"mappings":"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"}

package/lib/module/components/checkbox/CheckboxLabel.js

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { useState } from "react";
+import { Pressable, View } from "react-native";
+import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
+import { H6 } from "../typography/H6";
+import { IOStyles } from "../../core/IOStyles";
+import { HSpacer } from "../spacer/Spacer";
+import { AnimatedCheckbox } from "./AnimatedCheckbox";
+const DISABLED_OPACITY = 0.5;
+
+// disabled: the component is no longer touchable
+// onPress:
+/**
+ * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
+ * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
+ *
+ * @param props
+ * @constructor
+ */
+export const CheckboxLabel = _ref => {
+  let {
+    label,
+    checked,
+    disabled,
+    onValueChange
+  } = _ref;
+  const [toggleValue, setToggleValue] = useState(checked ?? false);
+  const toggleCheckbox = () => {
+    triggerHaptic("impactLight");
+    setToggleValue(!toggleValue);
+    if (onValueChange !== undefined) {
+      onValueChange(!toggleValue);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Pressable, {
+    disabled: disabled,
+    onPress: toggleCheckbox,
+    testID: "AnimatedCheckbox",
+    style: {
+      alignSelf: "flex-start",
+      opacity: disabled ? DISABLED_OPACITY : 1
+    }
+    // This is required to avoid opacity
+    // inheritance on Android
+    ,
+    needsOffscreenAlphaCompositing: true
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [IOStyles.row, {
+      alignItems: "center",
+      width: "100%"
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none",
+    style: {
+      alignSelf: "flex-start"
+    }
+  }, /*#__PURE__*/React.createElement(AnimatedCheckbox, {
+    checked: checked ?? toggleValue
+  })), /*#__PURE__*/React.createElement(HSpacer, {
+    size: 8
+  }), /*#__PURE__*/React.createElement(H6, {
+    color: "black",
+    style: {
+      flexShrink: 1
+    }
+  }, label)));
+};
+//# sourceMappingURL=CheckboxLabel.js.map

package/lib/module/components/checkbox/CheckboxLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Pressable","View","triggerHaptic","H6","IOStyles","HSpacer","AnimatedCheckbox","DISABLED_OPACITY","CheckboxLabel","_ref","label","checked","disabled","onValueChange","toggleValue","setToggleValue","toggleCheckbox","undefined","createElement","onPress","testID","style","alignSelf","opacity","needsOffscreenAlphaCompositing","row","alignItems","width","pointerEvents","size","color","flexShrink"],"sourceRoot":"../../../../src","sources":["components/checkbox/CheckboxLabel.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,OAAO;AAChC,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC9C,SAASC,aAAa,QAAQ,gDAAgD;AAC9E,SAASC,EAAE,QAAQ,kBAAkB;AACrC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,gBAAgB,QAAQ,oBAAoB;AAQrD,MAAMC,gBAAgB,GAAG,GAAG;;AAE5B;AACA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAGC,IAAA,IAKb;EAAA,IALc;IAC5BC,KAAK;IACLC,OAAO;IACPC,QAAQ;IACRC;EACQ,CAAC,GAAAJ,IAAA;EACT,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAGhB,QAAQ,CAACY,OAAO,IAAI,KAAK,CAAC;EAEhE,MAAMK,cAAc,GAAGA,CAAA,KAAM;IAC3Bd,aAAa,CAAC,aAAa,CAAC;IAC5Ba,cAAc,CAAC,CAACD,WAAW,CAAC;IAC5B,IAAID,aAAa,KAAKI,SAAS,EAAE;MAC/BJ,aAAa,CAAC,CAACC,WAAW,CAAC;IAC7B;EACF,CAAC;EAED,oBACEhB,KAAA,CAAAoB,aAAA,CAAClB,SAAS;IACRY,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEH,cAAe;IACxBI,MAAM,EAAC,kBAAkB;IACzBC,KAAK,EAAE;MACLC,SAAS,EAAE,YAAY;MACvBC,OAAO,EAAEX,QAAQ,GAAGL,gBAAgB,GAAG;IACzC;IACA;IACA;IAAA;IACAiB,8BAA8B,EAAE;EAAK,gBAErC1B,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IAACoB,KAAK,EAAE,CAACjB,QAAQ,CAACqB,GAAG,EAAE;MAAEC,UAAU,EAAE,QAAQ;MAAEC,KAAK,EAAE;IAAO,CAAC;EAAE,gBACnE7B,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IACH2B,aAAa,EAAC,MAAM;IACpBP,KAAK,EAAE;MACLC,SAAS,EAAE;IACb;EAAE,gBAEFxB,KAAA,CAAAoB,aAAA,CAACZ,gBAAgB;IAACK,OAAO,EAAEA,OAAO,IAAIG;EAAY,CAAE,CAChD,CAAC,eACPhB,KAAA,CAAAoB,aAAA,CAACb,OAAO;IAACwB,IAAI,EAAE;EAAE,CAAE,CAAC,eACpB/B,KAAA,CAAAoB,aAAA,CAACf,EAAE;IAAC2B,KAAK,EAAE,OAAQ;IAACT,KAAK,EAAE;MAAEU,UAAU,EAAE;IAAE;EAAE,GAC1CrB,KACC,CACA,CACG,CAAC;AAEhB,CAAC"}

package/lib/module/components/checkbox/index.js

@@ -0,0 +1,3 @@
+export * from "./CheckboxLabel";
+export * from "./AnimatedCheckbox";
+//# sourceMappingURL=index.js.map

package/lib/module/components/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/checkbox/index.tsx"],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,oBAAoB"}