How to use the @kiwicom/orbit-design-tokens.defaultTokens.borderRadiusLarge function in @kiwicom/orbit-design-tokens

selectedValue={selectedValue}
          style={styles.picker}
          onValueChange={onValueChange}
        />
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    height: parseInt(defaultTokens.heightInputNormal, 10),
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
  },
  label: {
    flex: 1,
    color: defaultTokens.colorTextAttention,
    paddingLeft: parseInt(defaultTokens.spaceSmall, 10),
  },
  icon: {
    marginRight: 10,
  },
  picker: {
    position: 'absolute',
    left: 0,
    width: '100%',
    opacity: 0, // NOTE: This workaround is required because picker label cannot be currently styled on Android
    height: parseInt(defaultTokens.heightInputNormal, 10),

},
  padding: {
    padding: 10,
  },
  row: {
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  gradient: {
    ...StyleSheet.absoluteFillObject,
    width: '100%',
    borderRadius: parseFloat(defaultTokens.borderRadiusLarge),
  },
  badge: {
    backgroundColor: defaultTokens.paletteProductNormal,
    borderRadius: parseFloat(defaultTokens.borderRadiusLarge),
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeHeadingTitle3),
    fontWeight: 'bold',
    color: defaultTokens.paletteWhite,
    padding: 2.5,
  },
  placeText: {
    marginBottom: 4,
  },
  bottomContainer: {
    justifyContent: 'flex-end',
  },
  image: {
    borderRadius: parseFloat(defaultTokens.borderRadiusLarge),
  },

{hasValue ? value : getEmptyLocationPlaceholder(label)}
          
        }
        {value === '' && placeholder != null && }
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    marginBottom: parseInt(defaultTokens.spaceXSmall, 10),
    padding: 11,
    alignItems: 'center',
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
    web: {
      flex: 1,
      height: parseInt(defaultTokens.heightInputNormal, 10),
      borderRadius: 3,
      backgroundColor: defaultTokens.paletteWhite,
      borderWidth: 1,
      borderColor: defaultTokens.paletteInkLighter,
    },
  },
  warningContainer: {
    borderColor: defaultTokens.paletteRedNormal,
  },
  icon: {
    marginEnd: 10,
  },

);
}

const styles = StyleSheet.create({
  container: {
    height: 152,
    width: '100%',
    justifyContent: 'space-between',
    borderRadius: parseFloat(defaultTokens.borderRadiusLarge),
    overflow: 'hidden',
  },
  padding: {
    padding: 10,
  },
  row: {
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  gradient: {
    ...StyleSheet.absoluteFillObject,
    width: '100%',
    borderRadius: parseFloat(defaultTokens.borderRadiusLarge),
  },
  badge: {
    backgroundColor: defaultTokens.paletteProductNormal,

);
  }
}

const styles = StyleSheet.create({
  modal: {
    margin: 0,
    justifyContent: 'flex-end',
  },
  container: {
    width: '100%',
    backgroundColor: defaultTokens.backgroundModal,
    borderTopStartRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    borderTopEndRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    paddingTop: parseInt(defaultTokens.spaceXXSmall, 10),
    paddingBottom: parseInt(defaultTokens.spaceXXLarge, 10),
  },
  picker: {
    width: '100%',
  },
  confirmContainer: {
    marginHorizontal: parseInt(defaultTokens.spaceXSmall, 10),
  },
});

);
  }
}

const styles = StyleSheet.create({
  modal: {
    margin: 0,
    justifyContent: 'flex-end',
  },
  container: {
    width: '100%',
    backgroundColor: defaultTokens.backgroundModal,
    borderTopStartRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    borderTopEndRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    paddingTop: parseInt(defaultTokens.spaceXXSmall, 10),
    paddingBottom: parseInt(defaultTokens.spaceXXLarge, 10),
  },
  picker: {
    width: '100%',
  },
  confirmContainer: {
    marginHorizontal: parseInt(defaultTokens.spaceXSmall, 10),
  },
});

);
  }
}

const styles = StyleSheet.create({
  flexContainer: {
    flex: 1,
  },
  outerContainer: {
    flex: 1,
  },
  borderedContainer: {
    borderWidth: parseFloat(defaultTokens.borderWidthInput),
    borderColor: defaultTokens.paletteInkLight,
    borderRadius: parseFloat(defaultTokens.borderRadiusLarge),
    height: 58,
    paddingHorizontal: parseFloat(defaultTokens.spaceXSmall),
    backgroundColor: defaultTokens.backgroundModal,
    justifyContent: 'center',
  },
  borderedContainerActive: {
    borderColor: defaultTokens.borderColorButtonInfoBordered,
  },
  arrow: {
    width: 14,
    height: 14,
    position: 'absolute',
    transform: [{ rotate: '45deg' }],
    zIndex: -1,
    backgroundColor: defaultTokens.borderColorButtonInfoBordered,
    start: '50%',

);
  }
}

const styles = StyleSheet.create({
  inputWrapper: {
    web: {
      cursor: 'text',
    },
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    borderRadius: parseFloat(defaultTokens.borderRadiusLarge),
    paddingHorizontal: parseFloat(defaultTokens.spaceSmall),
    backgroundColor: defaultTokens.backgroundInputDisabled,
    web: {
      borderWidth: parseFloat(defaultTokens.borderWidthInput),
      borderColor: defaultTokens.borderColorInput,
      backgroundColor: defaultTokens.backgroundInput,
    },
  },
  inputContainerDisabled: {
    backgroundColor: defaultTokens.backgroundInputDisabled,
  },
  inputContainerSuccess: {
    backgroundColor: defaultTokens.backgroundAlertSuccess,
    borderColor: defaultTokens.paletteGreenNormal,
    borderWidth: parseFloat(defaultTokens.borderWidthInput),
  },

Modal.defaultProps = {
  isClosingOnBackdropPress: true,
};

const styles = StyleSheet.create({
  modal: {
    margin: 0,
    justifyContent: 'flex-end',
  },
  modalCentered: {
    justifyContent: 'center',
  },
  content: {
    width: '100%',
    backgroundColor: defaultTokens.backgroundModal,
    borderTopStartRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    borderTopEndRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    paddingTop: parseInt(defaultTokens.spaceXXSmall, 10),
    paddingBottom: parseInt(defaultTokens.spaceXXLarge, 10),
  },
  contentCentered: {
    maxWidth: 520,
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    paddingTop: 0,
    paddingBottom: 0,
  },
});

.add('Playground', () => {
    const content = text('Text', 'New');
    const iconName = select(
      'Icon',
      ['undefined', ...Object.keys(icons)],
      'calendar',
    );
    return (
      
          ) : null
        }
      />
    );
  })